feat(usage): improve usage overview styling and localization by BunsDev · Pull Request #51951 · openclaw/openclaw

BunsDev · 2026-03-22T00:43:56Z

Summary

Describe the problem and fix in 2–5 bullets:

Problem: the usage overview and related chat/UI surfaces needed clearer styling, better responsive layout behavior, and stronger localization support.
Why it matters: usage data is more useful when it is easier to scan, visually consistent, and readable across screen sizes.
What changed: added dedicated usage page styling, expanded usage-related localization strings, improved usage overview rendering/layout options, and refined related chat/UI presentation behavior.
What did NOT change (scope boundary): no gateway/auth/memory/tooling contract changes, and no backend usage data model changes in this PR.

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Closes #
Related #

User-visible / Behavior Changes

Usage overview has updated styling and layout treatment.
Usage-related UI copy/localization coverage is expanded.
Usage insight/error presentation is more structured and configurable.
Chat/UI layout behavior is refined for consistency and responsiveness.
Context notices in chat can now be hidden based on token freshness.

Security Impact (required)

New permissions/capabilities? (No)
Secrets/tokens handling changed? (No)
New/changed network calls? (No)
Command/tool execution surface changed? (No)
Data access scope changed? (No)
If any Yes, explain risk + mitigation:

Repro + Verification

Environment

OS: macOS
Runtime/container: local dev checkout
Model/provider: n/a
Integration/channel (if any): OpenClaw web UI
Relevant config (redacted): default local dev setup

Steps

Open the usage overview in the UI.
Review insight cards, error states, and layout behavior across different viewport sizes.
Open chat-related UI states affected by the styling/layout changes.
Confirm localization strings render correctly in the updated usage views.

Expected

Usage overview is easier to scan and more visually consistent.
Responsive layouts behave more predictably.
Updated usage text/localization renders correctly.
Chat notices/layout changes behave as intended.

Actual

Matches expected based on commit intent and changed files; fresh manual verification/screenshots were not added during this PR body update.

Evidence

Attach at least one:

Failing test/log before + passing after
Trace/log snippets
Screenshot/recording
Perf numbers (if relevant)

Human Verification (required)

What you personally verified (not just CI), and how:

Verified scenarios: reviewed the actual compare range, commit messages, and touched files to align this PR description with the current branch contents.
Edge cases checked: none beyond code/commit inspection during PR metadata correction.
What you did not verify: fresh manual UI run, screenshots, and local test execution in this pass.

Review Conversations

I replied to or resolved every bot review conversation I addressed in this PR.
I left unresolved only the conversations that still need reviewer or maintainer judgment.

If a bot review conversation is addressed by this PR, resolve that conversation yourself. Do not leave bot review conversation cleanup for maintainers.

Compatibility / Migration

Backward compatible? (Yes)
Config/env changes? (No)
Migration needed? (No)
If yes, exact upgrade steps:

Failure Recovery (if this breaks)

How to disable/revert this change quickly: revert this PR / revert the touched usage/chat/style files.
Files/config to restore: UI usage rendering, localization, and style files only.
Known bad symptoms reviewers should watch for: usage cards/layout rendering incorrectly, broken localization text, chat notice regressions, or responsive styling regressions.

Risks and Mitigations

List only real risks for this PR. Add/remove entries as needed. If none, write None.

Risk: styling/layout changes may regress neighboring UI surfaces or breakpoints.
- Mitigation: scope is limited to touched usage/chat/style files and should be reviewed visually.
Risk: rendering option changes could create mismatched class usage across usage components.
- Mitigation: related rendering files were updated together in the same branch.

- Introduced a new `usage.css` file for styling the usage overview page. - Updated `en.ts` localization file to include new usage-related translations. - Refactored the usage rendering components to utilize the new localization strings for improved user experience. - Enhanced the `app-render-usage-tab.ts` to better structure the data passed to the rendering function.

…at components - Updated `package.json` to include new built dependencies. - Refined CSS styles across various files to improve UI consistency and accessibility, including adjustments to color themes and layout structures. - Introduced new responsive grid layouts for usage overview and chat components, enhancing the user experience on different screen sizes. - Added functionality to hide context notices based on token freshness in chat view. - Implemented new rendering functions for usage statistics, improving data presentation and user interaction.

- Added new CSS classes for improved layout and styling of usage insight cards and error lists. - Updated rendering functions to support customizable class names for usage insight cards and error lists, enhancing flexibility in UI presentation. - Implemented a wide card layout and specific styling for error lists to improve visual clarity and user experience.

greptile-apps · 2026-03-22T00:50:45Z

Greptile Summary

This PR continues incremental UX improvements to the session management and usage analytics UI. The main structural change is a refactor of the flat UsageProps type into four well-scoped sub-types (UsageDataState, UsageFilterState, UsageDisplayState, UsageDetailState) and a nested UsageCallbacks hierarchy — a clean separation of concerns that makes the props contract much easier to read and extend.

Key changes:

Type refactoring: usageTypes.ts breaks UsageProps into focused sub-types; call sites in app-render-usage-tab.ts and usage.ts are updated to match.
CSS modularisation: Inline styles injected via usageStyles-part{1,2,3}.ts string constants are replaced with a proper usage.css file imported through the stylesheet pipeline. The deleted files reduce ~2,000 lines of string-embedded CSS.
i18n: All previously hardcoded strings in the usage tab are now routed through the t() helper, with a comprehensive new usage namespace added to en.ts.
totalTokensFresh flag: A new optional boolean on GatewaySessionRow suppresses the context-window notice when token counts are stale; covered by a new unit test.
Theme-aware context-bar colours: renderContextNotice in chat.ts now reads --warn/--danger CSS variables at runtime instead of hardcoding amber→red RGB values.
Multi-session selection UX: Session bars support shift-click range selection and the "Clear Selection" action; filter chips reflect multi-session state.
Chat layout: .chat-group-messages is changed to max-width: 50% with flex: 1 1 auto, and user message alignment switches from flex-end to stretch — a visible responsive change worth visual verification before merge.

Potential concerns:

The new parseHexRgb helper in chat.ts silently returns NaN components for any non-6-digit-hex input (e.g. rgb(), named colours). Currently safe since --warn/--danger are always hex, but the function is fragile.
getComputedStyle(document.documentElement) is called on every render of renderContextNotice; caching would avoid repeated style recalculations.
The 50% max-width cap on .chat-group-messages may produce very narrow message columns on small viewports without a responsive override.

Confidence Score: 4/5

Safe to merge after confirming the chat-bubble layout change is visually acceptable on mobile viewports.
The structural refactoring is clean and mechanical with no behaviour changes. The i18n migration, CSS modularisation, and type reorganisation are all improvements. The only concerns are two P2 style issues in chat.ts (fragile hex parser, per-render getComputedStyle) and a potentially unintended visual regression from the max-width: 50% chat-layout change — none of which are blocking correctness issues.
ui/src/styles/chat/grouped.css (chat-bubble max-width and alignment change) and ui/src/ui/views/chat.ts (parseHexRgb robustness, getComputedStyle on every render)

Prompt To Fix All With AI

This is a comment left during a code review.
Path: ui/src/ui/views/chat.ts
Line: 254-258

Comment:
**`parseHexRgb` silently produces `NaN` for non-hex inputs**

The function assumes exactly a 6-digit hex string. If `getComputedStyle` ever returns `--warn` or `--danger` as an `rgb(...)`, `rgba(...)`, or named color value (e.g. from a user-provided theme override), `parseInt(h.slice(0, 2), 16)` will silently return `NaN`, making `color` become `rgb(NaN, NaN, NaN)` — which browsers silently ignore, causing no color change.

The fallback `|| "#f59e0b"` only triggers when the property is empty/undefined, not when it contains a non-hex string. Consider adding a guard:

```suggestion
function parseHexRgb(hex: string): [number, number, number] | null {
  const h = hex.trim().replace(/^#/, "");
  if (!/^[0-9a-fA-F]{6}$/.test(h)) return null;
  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
}
```

Then guard the callers: `const parsed = parseHexRgb(warnHex); if (!parsed) return nothing;`

In practice `--warn` and `--danger` in `base.css` are always 6-digit hex today, so this won't currently bite — but it's a silent failure mode worth closing.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: ui/src/ui/views/chat.ts
Line: 275-276

Comment:
**`getComputedStyle` called on every render**

`getComputedStyle(document.documentElement)` is called inside `renderContextNotice`, which runs on every chat re-render cycle. This is a relatively expensive browser call (it forces style recalculation). Since the CSS variables `--warn` and `--danger` are only set once at startup (or on theme change), consider reading them once at module level or memoising the hex values, rather than querying them on every render.

```suggestion
// At module scope:
let _cachedWarnHex: string | null = null;
let _cachedDangerHex: string | null = null;
function getThemeColors() {
  if (!_cachedWarnHex) {
    const s = getComputedStyle(document.documentElement);
    _cachedWarnHex = s.getPropertyValue("--warn").trim() || "#f59e0b";
    _cachedDangerHex = s.getPropertyValue("--danger").trim() || "#ef4444";
  }
  return { warnHex: _cachedWarnHex, dangerHex: _cachedDangerHex! };
}
```

(Invalidate the cache on theme change if that's ever supported.)

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: ui/src/styles/chat/grouped.css
Line: 22-32

Comment:
**Chat message container width capped at 50% regardless of viewport**

Changing `.chat-group-messages` from `max-width: min(900px, calc(100% - 60px))` to `max-width: 50%` is a significant visual change. On narrow viewports (e.g. 375 px wide mobile), the messages column would be at most ~187 px, which can produce extremely narrow text wrapping.

Additionally, changing `.chat-group.user .chat-group-messages` from `align-items: flex-end` to `align-items: stretch`, combined with `.chat-bubble { display: block; width: 100%; }`, means user messages now stretch to the full column width instead of being content-sized and right-aligned. That's a meaningful UX shift (user bubbles become blocks, not floating right-aligned "speech bubbles").

If this is intentional for the new responsive layout, a responsive safety net would help:

```css
@media (max-width: 600px) {
  .chat-group-messages {
    max-width: 80%;
  }
}
```

Worth verifying visually on mobile before merge.

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: "Merge branch 'main' ..."}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 39487d6b74

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

aisle-research-bot · 2026-03-22T00:58:47Z

🔒 Aisle Security Analysis

We found 2 potential security issue(s) in this PR:

#	Severity	Title
1	🟡 Medium	CSV/Excel formula injection in Usage CSV export (Sessions/Daily)
2	🟡 Medium	Supply-chain hardening regression: new allowlisted build-script dependencies in pnpm.onlyBuiltDependencies

1. 🟡 CSV/Excel formula injection in Usage CSV export (Sessions/Daily)

Property	Value
Severity	Medium
CWE	CWE-1236
Location	`ui/src/ui/views/usage.ts:509-528`

Description

The Usage export menu allows downloading session/daily metrics as CSV. Exported cells are built from session metadata (e.g., session.label, session.key, agentId, channel, provider, model). These values can plausibly be influenced by users or remote data.

The CSV builder only performs RFC4180-style quoting (commas/quotes/newlines) and does not neutralize spreadsheet formula metacharacters. If an exported value begins with =, +, -, or @ (optionally preceded by whitespace), opening the CSV in Excel/Google Sheets can execute the formula (CSV injection), enabling data exfiltration (e.g., WEBSERVICE) and in some environments command execution via legacy features.

Vulnerable flow:

Input: session/user-controlled strings (label/key/channel/provider/model, etc.)
Transform: buildSessionsCsv(...) / buildDailyCsv(...) using csvEscape(...) (quoting only)
Sink: downloadTextFile(..., "text/csv") producing a CSV file that users open in spreadsheet apps

Vulnerable code (export trigger):

downloadTextFile(
  `openclaw-usage-sessions-${exportStamp}.csv`,
  buildSessionsCsv(filteredSessions),
  "text/csv",
)

Related escaping logic (insufficient; does not prevent formula execution):

function csvEscape(value: string): string {
  if (/[",\n]/.test(value)) {
    return `"${value.replaceAll('"', '""')}"`;
  }
  return value;
}

Recommendation

Neutralize spreadsheet formulas before CSV quoting/escaping for all string cells.

A common mitigation is to prefix dangerous values with an apostrophe (') (or another agreed safe prefix) when the first non-whitespace character is one of = + - @.

Example fix (in csvEscape/CSV builder):

function neutralizeSpreadsheetFormula(value: string): string {
  // Prevent Excel/Sheets formula interpretation
  if (/^\s*[=+\-@]/.test(value)) {
    return `'${value}`;
  }
  return value;
}

function csvEscape(value: string): string {
  const safe = neutralizeSpreadsheetFormula(value);
  if (/[",\r\n]/.test(safe)) {
    return `"${safe.replaceAll('"', '""')}"`;
  }
  return safe;
}

Also consider:

Sanitizing all exported fields that originate outside the application’s trusted code paths (labels, keys, channel names, provider/model strings).
Adding \r to the newline detection for robust CSV formatting across platforms.

2. 🟡 Supply-chain hardening regression: new allowlisted build-script dependencies in pnpm.onlyBuiltDependencies

Property	Value
Severity	Medium
CWE	CWE-829
Location	`package.json:800-807`

Description

The project uses pnpm's onlyBuiltDependencies as a build-script allowlist (see .npmrc comment). This change expands that allowlist to include two additional packages:

@discordjs/opus
@tloncorp/tlon-skill

When a dependency is present in onlyBuiltDependencies, pnpm is allowed to execute its native build steps / lifecycle scripts during install. If either package (or its supply chain) is compromised, this increases the risk of arbitrary code execution during pnpm install in developer and CI environments compared to the previous configuration.

Vulnerable change:

"onlyBuiltDependencies": [
  "@discordjs/opus",
  "@tloncorp/tlon-skill",
  ...
]

Recommendation

Keep the build-script allowlist as small as possible and add compensating controls when new entries are required.

Recommended actions:

Verify necessity: confirm these packages truly need lifecycle scripts/native builds to function.
Pin & monitor: ensure versions are pinned (or constrained via pnpm.overrides) and monitored.
Harden installs in CI: run installs in a sandboxed environment and consider enforcing --ignore-scripts globally except in controlled build steps.

Example: pin via overrides (if these are transitives):

{
  "pnpm": {
    "overrides": {
      "@discordjs/opus": "0.10.0",
      "@tloncorp/tlon-skill": "0.2.2"
    }
  }
}

This reduces unexpected upgrades while still allowing required builds for the explicitly-reviewed versions.

Analyzed PR: #51951 at commit a37f786

_{Last updated on: 2026-03-22T01:33:18Z}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a37f786220

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-22T01:14:57Z

+  min-height: 244px;
+  padding: 6px 2px 0;
+  overflow-x: auto;
+}


Keep daily chart tooltip overflow visible

The daily usage tooltips are positioned above each bar (.daily-bar-tooltip uses bottom: calc(100% + 8px)), but .daily-chart-bars now sets overflow-x: auto; in browsers this makes vertical overflow non-visible, so hover tooltips get clipped/cut off instead of being readable. This regresses the day-level breakdown workflow, especially when inspecting bars near the viewport edges or after horizontal scrolling.

Useful? React with 👍 / 👎.

…w#51951) * feat(usage): add usage page styles and localization - Introduced a new `usage.css` file for styling the usage overview page. - Updated `en.ts` localization file to include new usage-related translations. - Refactored the usage rendering components to utilize the new localization strings for improved user experience. - Enhanced the `app-render-usage-tab.ts` to better structure the data passed to the rendering function. * feat(ui): enhance styling and functionality for usage overview and chat components - Updated `package.json` to include new built dependencies. - Refined CSS styles across various files to improve UI consistency and accessibility, including adjustments to color themes and layout structures. - Introduced new responsive grid layouts for usage overview and chat components, enhancing the user experience on different screen sizes. - Added functionality to hide context notices based on token freshness in chat view. - Implemented new rendering functions for usage statistics, improving data presentation and user interaction. * feat(usage): enhance usage overview styling and rendering options - Added new CSS classes for improved layout and styling of usage insight cards and error lists. - Updated rendering functions to support customizable class names for usage insight cards and error lists, enhancing flexibility in UI presentation. - Implemented a wide card layout and specific styling for error lists to improve visual clarity and user experience. * fix(ui): address review feedback on usage and chat layout * docs(changelog): add entry for usage UI improvements

BunsDev added 3 commits March 21, 2026 19:37

openclaw-barnacle Bot added app: web-ui App: web-ui size: XL maintainer Maintainer-authored PR labels Mar 22, 2026

BunsDev marked this pull request as ready for review March 22, 2026 00:45

BunsDev changed the title ~~feat(ui): continue UX improvements for session management~~ feat(usage): improve usage overview styling and localization Mar 22, 2026

greptile-apps Bot reviewed Mar 22, 2026

View reviewed changes

Comment thread ui/src/ui/views/chat.ts Outdated

Comment thread ui/src/ui/views/chat.ts

Comment thread ui/src/styles/chat/grouped.css

chatgpt-codex-connector Bot reviewed Mar 22, 2026

View reviewed changes

Comment thread ui/src/styles/usage.css

Comment thread ui/src/styles/chat/grouped.css Outdated

BunsDev self-assigned this Mar 22, 2026

fix(ui): address review feedback on usage and chat layout

6fc4167

BunsDev force-pushed the ui/3-14-ux-improvements branch from 39487d6 to 6fc4167 Compare March 22, 2026 00:58

BunsDev and others added 3 commits March 21, 2026 20:02

Merge branch 'main' into ui/3-14-ux-improvements

07a51f0

Merge branch 'main' into ui/3-14-ux-improvements

c414f4b

docs(changelog): add entry for usage UI improvements

a37f786

BunsDev merged commit a5309b6 into main Mar 22, 2026
37 checks passed

BunsDev deleted the ui/3-14-ux-improvements branch March 22, 2026 01:07

chatgpt-codex-connector Bot reviewed Mar 22, 2026

View reviewed changes

github-actions Bot mentioned this pull request Mar 22, 2026

📡 Upstream Digest — 2026-03-22 01:25 UTC curtismercier/openclaw-mods#327

Open

BunsDev mentioned this pull request Mar 22, 2026

refactor(usage): drop empty detail placeholder state #52013

Merged

20 tasks

steipete mentioned this pull request Apr 25, 2026

[Bug]: wierd pages in browser #45251

Closed

clawsweeper Bot mentioned this pull request Apr 30, 2026

Usage tab: bar chart tooltip clipped on tall bars (overflow:clip on .usage-left-card) #59212

Closed

clawsweeper Bot mentioned this pull request May 2, 2026

fix(ui): reset transient chat overlays and style context notice #47187

Closed

clawsweeper Bot mentioned this pull request May 11, 2026

feat(ui): tool name style in usage panel #42197

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(usage): improve usage overview styling and localization#51951

feat(usage): improve usage overview styling and localization#51951
BunsDev merged 7 commits into
mainfrom
ui/3-14-ux-improvements

BunsDev commented Mar 22, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Mar 22, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Uh oh!

aisle-research-bot Bot commented Mar 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

BunsDev commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

User-visible / Behavior Changes

Security Impact (required)

Repro + Verification

Environment

Steps

Expected

Actual

Evidence

Human Verification (required)

Review Conversations

Compatibility / Migration

Failure Recovery (if this breaks)

Risks and Mitigations

Uh oh!

greptile-apps Bot commented Mar 22, 2026

Greptile Summary

Confidence Score: 4/5

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

aisle-research-bot Bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔒 Aisle Security Analysis

1. 🟡 CSV/Excel formula injection in Usage CSV export (Sessions/Daily)

Description

Recommendation

2. 🟡 Supply-chain hardening regression: new allowlisted build-script dependencies in pnpm.onlyBuiltDependencies

Description

Recommendation

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BunsDev commented Mar 22, 2026 •

edited

Loading

aisle-research-bot Bot commented Mar 22, 2026 •

edited

Loading