ui/ux feat: task stats view (file interaction demonstration) #3178
Conversation
…ation Summary\nWe've successfully implemented a file interaction tracking system for the VS Code extension that:\n\nTracks File Operations:\n\nCaptures read, write, create, edit, and other file operations\nStores metadata like file path, operation type, timestamp, and success status\nWorks with both file tools in the code\n\nDisplays Statistics in a Dedicated View:\n\nBuilt a FileStatsView component that shows:\n\nTotal tool usage count\nLists of written files\nLists of read files\nOperation counts by type\n\n\nIntegration Points:\n\nAdded to the ChatView.tsx:\n\nFile interactions extraction from messages\nUI for toggling the stats view\n\n\nExtended TaskHeader.tsx with a stats button\nAdded message handlers in webviewMessageHandler.ts for:\n\nRequesting file interactions data\nUpdating file interaction history\nToggling the stats view\n\n\nStorage & Persistence:\n\nFile interactions are stored with tasks in JSON files\nInteractions are persisted along with task history\nInteractions can be loaded for both active and historical tasks\n\n\nUser Interface:\n\nClean, organized stats view with collapsible sections\nFiles can be clicked to open them directly\nVisual indicators for different operation types\n\n\nHow It Works\n\nWhen file tools are used (read/write/etc.), the operation is recorded with metadata\nThese operations are stored in memory during the task and saved to disk\nThe UI can extract file operations directly from messages or load them from storage\nThe Stats View provides detailed information about file interactions for the current task\n\nKey Components\n\nFileInteraction type in WebviewMessage.ts\nFileStatsView component for displaying statistics\nThe stats view toggle button in TaskHeader.tsx\nFile interaction extraction logic in ChatView.tsx\nFile interaction message handlers in webviewMessageHandler.ts\n\nHow Users Interact With It\nUsers can:\n\nClick the stats button (graph icon) in the task header to toggle the stats view\nSee real-time updates of file operations as they happen\nReview file operations after the task is completed\nClick on files to open them directly in the editor\n\nThis implementation lays the foundation for a more comprehensive statistics tracking system in the future, which could include additional metrics like token usage, function calls, and other performance data.
|
dosubot
bot
added
the
size:XXL
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| const fullInteraction = { | ||
| ...interaction, | ||
| taskId, | ||
| timestamp: interaction.timestamp || Date.now() |
There was a problem hiding this comment.
Consider using the nullish coalescing operator (??) instead of || when providing a default timestamp. For example, use interaction.timestamp ?? Date.now() to avoid accidental fallback when timestamp is 0.
| timestamp: interaction.timestamp || Date.now() | |
| timestamp: interaction.timestamp ?? Date.now() |
|
@dlab-anton Cool! seeing this would be nice for soft-debugging a persons flow and results. Could you please include a screenshot of when you click the graph icon? What does the The pic you posted is just a single image of the pane showing the button. But nothing else showing the UI if you click on it. (If you meant upload a video or a animated GIF / PNG, it did not work) Thanks! |
Thanks for letting me know, hopefully this gif works better. Please let me know if it does not load. Regarding the UI, it is still not decided if such a view should sit underneath, replace, go inside of the task header. The current layout replaces ChatView through react virtuoso. |
|
Good work! But can you leverage this https://github.com/RooVetGit/Roo-Code/blob/main/src/core/context-tracking/FileContextTracker.ts? From this Service, we already have tracking for file edits, mentions, etc., but we haven't virtualized it to the frontend yet. |
Nice! I didn't see that service, and yeah it's no problem at all. I'd update it to include more types so we have granularity over read/write/edit tracking maybe. But unless I'm missing something the conversion would be fast. |
|
Hey @dlab-anton: With all of these task stats PRs, I'm thinking breaking out task stats into their own full-screen view might be the way to go rather than stuffing them into the existing UI. Thoughts? And thoughts on best way to achieve this? |
If me ... edit: made a quick mock-up // not sure how much I like it but may be useful.
My decision to roll out the chart PR first was just operations not design priority, I figure we can put charts in the existing UI first. And if it works and people like it, then we sophisticate that by adding an additional stats screen. If we add the stats screen first it would be empty and if we combine then its a big PR. So maybe
|
|
@dlab-anton can we do something like this ? above textarea, and click to expand or send it to editor panel ?
|
That's very interesting. Are ALL files modified throughout task put there? Does it go into overflow '...' after awhile? Or does it only show the file currently working on there? |
|
I think we're going to hold off on this one right now, there's too much other UI work to do in this area. Let's revisit it as we clean up the rest of the UI here. |
github-project-automation
bot
moved this from PR [Pre Approval Review]
to Done
in Roo Code Roadmap
Hi Sacha, I posted a mockup at the same time you closed the PR so I'm not sure if you saw it. It's worth looking at so it can mull in the back if your mind. ^^
I will hold off on further work on task header until the other work is done. |
|
I saw it, looks awesome, I think right now there's a question of managing technical debt with additions like these when we need to clean up the rest of the UI. It's not a no, it's a "...let's return to this in a bit." |
4 participants
Implementation Summary
Task stats are useful for many reasons and are the first step to overall usage stats. Here I wanted to solve the problem of not being able to easily see all the files that were modified during the task. Stats are stored in .json files and persisted with chat history.
Demonstration of prototype task statistics view through file interaction tracking system that:
Tracks File Operations:
Screenshot:
Displays Statistics in a Dedicated View:
FileStatsViewcomponent that shows:Integration Points:
ChatView.tsx:TaskHeader.tsxwith a stats buttonwebviewMessageHandler.tsfor:Storage & Persistence:
How It Works
Key Components
FileInteractiontype inWebviewMessage.tsFileStatsViewcomponent for displaying statisticsTaskHeader.tsxChatView.tsxwebviewMessageHandler.tsHow Users Interact With It
Users can:
This implementation lays the foundation for a more comprehensive statistics tracking system in the future, which could include additional metrics like token usage, function calls, and other performance data. As well as aggregated tasks data on a dedicated statistics dashboard.
Important
Introduces file interaction tracking and statistics view in the UI, with backend support for storing and retrieving interaction data.
FileInteractiontype inWebviewMessage.ts.FileStatsViewcomponent to display file interaction statistics, including total tool usage count and lists of read and written files.FileStatsViewintoChatView.tsxandTaskHeader.tsxwith a toggle button for viewing stats.webviewMessageHandler.tsto handle messages for requesting and updating file interaction data.listFilesTool.ts,readFileTool.ts,searchFilesTool.ts, andwriteToFileTool.tsto include file interaction tracking logic.FileInteractionTrackerclass inFileInteractionTracker.tsfor managing file interactions.ExtensionStateContext.tsxto include file interaction state management.This description was created by
for e44b804. You can customize this summary. It will automatically update as commits are pushed.