feat ui/ux: cost chart in task panel

[dlab-anton]

Context

I always find myself wanting to know the cost curve of the whole task, especially I want to know when the costs start going what feels like exponential. Rather than always guess I wanted a chart so I could see if costs were increasing linearly or not. In the future I think costs can have more sophisticated management with thresholds and alerts.

My hypothesis is a sparkline will help me gauge cost momentum by the shape of the curve. It is also nice to see when certain tasks cost more relative to others, as this feedback can help me improve my workflow.

Thoughts

The end of a task increases $$ non-linearly and if we can prevent users from reaching into this cost danger zone we can save everyone lots of money. For example I was using 2.5 Pro, my very last task cost like $5 by accident, so I wish roo handled such cost management for me so I can use my attention for other things.

• I think the future is all about automation and scaling so better cost management will be an important point.
• Cost management features important for business, enterprise, small users, etc. potential to benefit everyone

Thinking out loud -- maybe it's feature bloat, especially the sparkline. I prefer having it on though personally and performance of recharts is good, so maybe it is something we can toggle in settings, but wrap into part of a greater cost management system.

Implementation

Concept for feedback.

---

Important

Adds cost visualization charts to the task panel using recharts, enhancing cost tracking in the UI.

• Behavior:
  • Adds cost visualization to task panel with CostSparkline and CostTrendChart components.
  • CostSparkline shows a small line chart of cost history in TaskHeader.
  • CostTrendChart provides a detailed view with toggleable modes (cumulative/task) in TaskHeader.
• Components:
  • New CostSparkline component in CostSparkline.tsx for compact cost visualization.
  • New CostTrendChart component in CostTrendChart.tsx for detailed cost analysis.
  • Updates TaskHeader.tsx to include cost charts and manage view modes.
• Data Handling:
  • Calculates costHistory in ChatView.tsx from API request messages.
  • Passes costHistory to TaskHeader for chart rendering.
• Dependencies:
  • Adds recharts library to package.json for chart rendering.

^{This description was created by for 36fa40c. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 36fa40c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ellipsis-dev]

This pull request introduces several new components related to cost visualization and appearance settings. To improve clarity and focus, consider splitting the changes into two separate pull requests:

1. Cost Visualization Components: This would include the changes related to cost history calculation, CostSparkline, CostTrendChart, and their integration into TaskHeader.

2. Appearance Settings Component: This would cover the new AppearanceSettings component for theme and density configuration.

Splitting the pull request will help in reviewing and testing the changes more effectively. Thank you!

[samhvw8]

this look good 💪

[adamhill]

This is very nice.

Might need an accordion to hide the graph, but keep the details visible so it doesn't take up as much vertical space

[sachasayan]

This is awesome, but let's hide it when the Task Header is minimized. :)

Additional thoughts:

• Recharts might be a big bundle bloat add for a small feature. While we might use it in the future, are there other alternatives we could lean on without the bundle bloat? (Maybe a simple D3 chart?)

• Just going to challenge this one: Does cumulative ever actually matter? I'm thinking per-request tracking is all we care about, but if there's another perspective, I'm happy to hear it.

[dlab-anton]

This is awesome, but let's hide it when the Task Header is minimized. :)

Thank you! To be clear, you want to remove the sparkline completely when the task header is minimized / in compact mode?

we could lean on without the bundle bloat?

Yes but LLM + Shadcn all know Recharts the best, I have used several packages and this will help keep development speed high. As long as recharts bundle doesn't affect first load performance and so on (which I guess it may). Do we have an automated test/performance benchmark to see how page load times might be affected from a PR change?

Just going to challenge this one: Does cumulative ever actually matter? I'm thinking per-request tracking is all we care about, but if there's another perspective, I'm happy to hear it.

Please challenge everything! It's the only path to perfection. For me personally I prefer watching only the cumulative chart. I don't care so much about spikes I just want to see the overall task curve starting to go exponential. I also think since the cost value on the task header represents cumulative it is more intuitive to show the cumulative chart there (if the sparkline is on my default).

Side note I'd probably change UX writing to "Total" and "Each" instead of cumulative and task to clarify.

[sachasayan]

Thank you! To be clear, you want to remove the sparkline completely when the task header is minimized / in compact mode?

Yep. I know this is asking to hides / revert a nice little bit of work (😭 ) but the goal right now is to keep that task header as lightweight as possible when it is minimized and shunt more info into the expanded interface. (We'll need to work around that mess sooner or later, too.)

Do we have an automated test/performance benchmark to see how page load times might be affected from a PR change?

We don't. Yet. Right now just do your best to keep package sizes down. 😇

For me personally I prefer watching only the cumulative chart. I don't care so much about spikes I just want to see the overall task curve starting to go exponential. I also think since the cost value on the task header represents cumulative it is more intuitive to show the cumulative chart there (if the sparkline is on my default).

Consider (but I won't impose it) a biaxial chart:

https://recharts.org/en-US/examples/BiaxialLineChart

Could even mix bars/lines.

[dlab-anton]

Thank you! To be clear, you want to remove the sparkline completely when the task header is minimized / in compact mode?
Yep. I know this is asking to hides / revert a nice little bit of work (😭 ) but the goal right now is to keep that task header as lightweight as possible when it is minimized and shunt more info into the expanded interface. (We'll need to work around that mess sooner or later, too.)

No problem at all on reverting the sparkline – I completely agree with the goal of keeping the minimized header as lightweight as possible. That makes sense, happy to adjust it.

• Sparklines might be useful on conversation history list page, so you can scroll through and see all cost curves.

Consider (but I won't impose it) a biaxial chart:
Could even mix bars/lines.

I'm going to spare everyone my thoughts on biaxial charts because it's a very controversial subject in data viz... but I am strongly on one camp. To boil it all down I would definitely not use them here for informational clarity and preserving horizontal space. Regarding bars, I would not use bars + lines to represent same $ values per request (same unit should be same visualize categorically for minimal mental burden.)

That leaves tabs, hamburger, or one chart.

Since per each request chart provide 80% of the value, and every additional chart provides diminishing returns. Where the cumul. captures those returns best it still also starts reflecting into negative UI territory if you are going through a minimization push right now.

So I think one chart in expanded view showing the per each task may be favorable.

I'll keep this open for more replies before next iteration thanks everyone for the feedback so far.

[sachasayan]

I'm going to spare everyone my thoughts on biaxial charts because it's a very controversial subject in data viz.

Ahhhh no what did I walk into 💀

[dlab-anton]

This is very nice.

Might need an accordion to hide the graph, but keep the details visible so it doesn't take up as much vertical space

Good idea one chart per accordion might be ideal to combine show/hide with chart switching and chart compare.

[dlab-anton]

Closing the PR and updating it to new version w/ uplot: #3063