feat: Experiment: Show a bit of stats in Cloud tab to help users discover there's more in Cloud #8415

brunobergher · 2025-09-30T13:42:15Z

Description

Adds a basic bar chart in CloudView when logged in
Tweaks overall CloudView layout to accomodate it
When clicked, users are taken to /usage in the Cloud app
Clicking on costs in the message feed takes the user to CloudView
Adds basic instrumentation via utm params (utm_source=extension&utm_medium=stats_preview&utm_campaign=stats_preview)

Screenshots / Videos

Important

Adds a bar chart in CloudView to display usage stats, with API and UI updates for enhanced user interaction with the Cloud app.

Behavior:
- Adds a bar chart in CloudView to display usage stats when logged in.
- Clicking the chart redirects to /usage in the Cloud app.
- Clicking costs in the message feed redirects to CloudView.
- Adds UTM parameters for tracking: utm_source=extension&utm_medium=stats_preview&utm_campaign=stats_preview.
API:
- Adds getUsagePreview() in CloudAPI.ts to fetch usage data.
- Handles JSON parsing errors in CloudAPI.ts.
UI Components:
- Updates webviewMessageHandler.ts to handle getUsagePreview messages.
- Adds UsagePreview component in CloudView.tsx.
- Updates ChatRow.tsx to handle cost click events.
Localization:
- Updates multiple locale files to include new strings for usage preview and related messages.
Utilities:
- Adds formatCost() in format.ts for consistent cost formatting.

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

…s authenticated

roomote

I found some issues that need attention. See inline comments for concrete suggestions.

webview-ui/src/components/cloud/UsagePreview.tsx

src/core/webview/webviewMessageHandler.ts

packages/cloud/src/CloudAPI.ts

brunobergher · 2025-09-30T14:02:03Z

@roomote-agent implement the feedback I responded to.

roomote · 2025-09-30T14:05:30Z

Acknowledged. I will implement the feedback you responded to: clear the 10s timeout when usagePreviewData arrives to prevent a stale error; and compute bar height as Math.round((cost / maxCost) * 100) with a minimum of 1. I will push changes to bb/experiment-stats shortly.

…bar height calc; robust array transform

roomote · 2025-09-30T14:25:52Z

Implemented the feedback. Summary:

Cloud UsagePreview: clear the 10s timeout when usagePreviewData arrives and manage cleanup via timeoutId; bar height now uses Math.round((cost / maxCost) * 100) with a minimum of 1 and guards for non positive max.
webviewMessageHandler: transform usage preview data defensively by bounding to the shortest of the dates, tasks, tokens, and costs arrays.

Local vitest suites for src and webview-ui passed. Changes pushed to bb/experiment-stats. CI checks are green.

webview-ui/src/i18n/locales/zh-CN/cloud.json

.review/pr-8274

tmp/pr-8287-Roo-Code

tmp/pr-8412

mrubens · 2025-09-30T15:37:08Z

packages/cloud/src/CloudAPI.ts

 import { AuthenticationError, CloudAPIError, NetworkError, TaskNotFoundError } from "./errors.js"

+// Usage stats schemas
+const usageStatsSchema = z.object({


Maybe this should go in packages/types/src/cloud.ts? I think we could then share it with the cloud side.

This usually ends up being easiest (arguably...) to sequence as

Add the types to packages/types.

Update @roo-code/types

Update @roo-code/types in cloud + ship the cloud functionality.

Finally actually use the cloud functionality back here.

webview-ui/src/components/chat/TaskHeader.tsx

webview-ui/src/components/cloud/UsagePreview.tsx

Co-authored-by: Roo Code <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Rubens <[email protected]>

…8359)

…8423) Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]>

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

github-actions · 2025-10-01T09:44:26Z

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-gvmlsyrvx-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

* origin/main: fix: Addresses overeager 'there are unsaved changes' dialog in settings (#8410) Add structured data to the homepage (#8427) fix: show send button when only images are selected in chat textarea (#8423) Include reasoning messages in cloud tasks (#8401) chore: Remove unsupported Gemini 2.5 Flash Image Preview free model (#8359) A couple more sonnet 4.5 fixes (#8421) Changeset version bump (#8414) chore: add changeset for v3.28.14 (#8413) feat: add GLM-4.6 model support for z.ai provider (#8408)

…into bb/experiment-stats * 'bb/experiment-stats' of github.com:RooCodeInc/Roo-Code:

roomote

I found some issues that need attention. See inline comments for concrete suggestions.

roomote · 2025-10-01T18:00:20Z

webview-ui/src/components/cloud/UsagePreview.tsx

+			<div className="p-4">
+				{/* Chart with daily usage bars */}
+				<div className="h-24 min-[450px]:h-40 rounded mb-3 flex items-end gap-1 pb-2">
+					{data &&


P2: Add accessible name/role for the chart container so assistive tech announces the widget meaningfully.

Suggested change

{data &&

<div

className="h-24 min-[450px]:h-40 rounded mb-3 flex items-end gap-1 pb-2"

role="img"

aria-label={t("cloud:usagePreview.costPastDays", { count: data.days.length })}>

webview-ui/src/components/cloud/UsagePreview.tsx

webview-ui/src/components/chat/ChatRow.tsx

roomote

I found some issues that need attention. Focused on new, deduped findings only.

roomote · 2025-10-02T09:08:38Z

webview-ui/src/components/cloud/UsagePreview.tsx

+	}
+
+	return (
+		<div className="cursor-pointer group rounded-lg bg-vscode-editor-background relative" onClick={onViewDetails}>


[P2] Interactive container is not keyboard-accessible. Add role, tabIndex, and Enter/Space key handling so users can activate the chart via keyboard.

Suggested change

<div className="cursor-pointer group rounded-lg bg-vscode-editor-background relative" onClick={onViewDetails}>

<div

className="cursor-pointer group rounded-lg bg-vscode-editor-background relative"

role="button"

tabIndex={0}

onClick={onViewDetails}

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onViewDetails(); } }}>

roomote · 2025-10-02T09:08:38Z

webview-ui/src/components/cloud/UsagePreview.tsx

+	// Loading state
+	if (isLoading) {
+		return (
+			<div


[P2] Loading state container is clickable but not keyboard-accessible. Mirror the same a11y affordances as the main chart.

Suggested change

<div

<div

className="cursor-pointer group rounded-lg bg-vscode-editor-background hover:bg-vscode-list-hoverBackground transition-colors relative"

role="button"

tabIndex={0}

onClick={onViewDetails}

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onViewDetails(); } }}>

roomote · 2025-10-02T09:08:39Z

webview-ui/src/components/cloud/UsagePreview.tsx

+	// Error state
+	if (error || !data) {
+		return (
+			<div


[P2] Error state is also a clickable retry affordance; add keyboard support (role, tabIndex, Enter/Space handler).

Suggested change

<div

<div

className="cursor-pointer group rounded-lg bg-vscode-editor-background hover:bg-vscode-list-hoverBackground transition-colors relative"

role="button"

tabIndex={0}

onClick={handleRetry}

onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleRetry(); } }}>

roomote · 2025-10-02T09:08:39Z

webview-ui/src/components/chat/ChatRow.tsx

+										cloudIsAuthenticated &&
+											"cursor-pointer hover:bg-vscode-dropdown-background hover:border-vscode-dropdown-border transition-colors",
+									)}
+									style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}


[P2] Invisible cost pill still intercepts clicks (opacity: 0 retains pointer events). This can trigger a navigation when the pill is visually hidden. Disable pointer events and hide from a11y when not visible.

Suggested change

style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}

style={{

opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0,

pointerEvents: cost !== null && cost !== undefined && cost > 0 ? 'auto' : 'none'

}}

aria-hidden={!(cost !== null && cost !== undefined && cost > 0)}

brunobergher added 4 commits September 30, 2025 13:50

Working chart in CloudView

7b43022

Lint fixes

af0a90e

Actually makes data flow in

2c31616

i18n

d84e031

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Sep 30, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Sep 30, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Sep 30, 2025

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Sep 30, 2025

brunobergher added 3 commits September 30, 2025 14:54

Adds utm params

eda8cae

Adds links to CloudView from mentions of cost elsewhere if the user i…

c33cc29

…s authenticated

Removes requirement of user being authenticated for links to cloud

70a2478

roomote bot reviewed Sep 30, 2025

View reviewed changes

Adds missing translations

d1e7192

fix(cloud): usage preview fixes — clear timeout on response; correct …

f70062d

…bar height calc; robust array transform

brunobergher marked this pull request as ready for review September 30, 2025 14:26

brunobergher requested review from mrubens, cte and jr as code owners September 30, 2025 14:26

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. enhancement New feature or request labels Sep 30, 2025

ellipsis-dev bot reviewed Sep 30, 2025

View reviewed changes

webview-ui/src/i18n/locales/zh-CN/cloud.json Outdated Show resolved Hide resolved

mrubens reviewed Sep 30, 2025

View reviewed changes

.review/pr-8274 Outdated Show resolved Hide resolved

mrubens reviewed Sep 30, 2025

View reviewed changes

tmp/pr-8287-Roo-Code Outdated Show resolved Hide resolved

mrubens reviewed Sep 30, 2025

View reviewed changes

tmp/pr-8412 Outdated Show resolved Hide resolved

mrubens reviewed Sep 30, 2025

View reviewed changes

webview-ui/src/components/chat/TaskHeader.tsx Outdated Show resolved Hide resolved

mrubens reviewed Sep 30, 2025

View reviewed changes

webview-ui/src/components/cloud/UsagePreview.tsx Outdated Show resolved Hide resolved

roomote bot and others added 12 commits October 1, 2025 10:41

feat: add GLM-4.6 model support for z.ai provider (#8408)

7ab010a

Co-authored-by: Roo Code <[email protected]>

chore: add changeset for v3.28.14 (#8413)

b66c5ec

Changeset version bump (#8414)

e46eb8a

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Rubens <[email protected]>

A couple more sonnet 4.5 fixes (#8421)

22113cd

chore: Remove unsupported Gemini 2.5 Flash Image Preview free model (#…

1e287f9

…8359)

Include reasoning messages in cloud tasks (#8401)

bca20e5

fix: show send button when only images are selected in chat textarea (#…

3ec844a

…8423) Co-authored-by: Roo Code <[email protected]> Co-authored-by: Matt Rubens <[email protected]>

Add structured data to the homepage (#8427)

3f85776

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

Consolidate formatting functions

82e093b

Fixes in TaskHeader

09b2fa2

Chinese fix

ac7d139

Removes .review directory, no idea what happened here

a989db7

brunobergher and others added 7 commits October 1, 2025 10:44

Removes tmp directories

0d1cd24

Moves types to shared library

6f37b02

Test fixes

61a133d

Merge remote-tracking branch 'origin/main' into bb/experiment-stats

c13bf8b

Merge branch 'bb/experiment-stats' of github.com:RooCodeInc/Roo-Code …

5b83dd1

…into bb/experiment-stats * 'bb/experiment-stats' of github.com:RooCodeInc/Roo-Code:

Merge remote-tracking branch 'origin/main' into bb/experiment-stats

ab77ff2

roomote bot reviewed Oct 1, 2025

View reviewed changes

a11y improvements

35154ef

roomote bot reviewed Oct 2, 2025

View reviewed changes

-			<div
+			<div
+			  className="cursor-pointer group rounded-lg bg-vscode-editor-background hover:bg-vscode-list-hoverBackground transition-colors relative"
+			  role="button"
+			  tabIndex={0}
+			  onClick={onViewDetails}
+			  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onViewDetails(); } }}>

-									style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}
+									style={{
+									  opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0,
+									  pointerEvents: cost !== null && cost !== undefined && cost > 0 ? 'auto' : 'none'
+									}}
+									aria-hidden={!(cost !== null && cost !== undefined && cost > 0)}

feat: Experiment: Show a bit of stats in Cloud tab to help users discover there's more in Cloud #8415

Are you sure you want to change the base?

feat: Experiment: Show a bit of stats in Cloud tab to help users discover there's more in Cloud #8415

Uh oh!

Conversation

brunobergher commented Sep 30, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots / Videos

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brunobergher commented Sep 30, 2025

Uh oh!

roomote bot commented Sep 30, 2025

Uh oh!

roomote bot commented Sep 30, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mrubens Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jr Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 1, 2025

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brunobergher commented Sep 30, 2025 •

edited by ellipsis-dev bot

Loading

mrubens Sep 30, 2025 •

edited

Loading