fix(ui): resource strip jumps sideways every time a network reading changes

Open Beginner friendly
  • Is something wrong?
#7,135 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, typescript
Domain
frontend

Research direction

Start with src/gaia/apps/webui/src/components/ResourceMonitor.css and ResourceMonitor.tsx to trace how tile widths and network readings are rendered. Add the position comparison described for visual/rtl.visual.ts, then check that CPU, memory, GPU and NPU tile positions stay fixed between short and long network readings.

Written by the indexing model from the issue text.

Description

agent-ui bug needs-human p3

The CPU, memory, GPU and NPU tiles in the Agent UI's resource strip shift left and right whenever a network reading changes length, for example from S: 0 R: 0 Kbps to S: 1.2 R: 160 Mbps. Reported by a tester on Fedora with v0.26.0-rc15, where the Wi-Fi tile keeps going from zero to a value and moving everything else.

Expected: a tile keeps its width and position whatever its reading says.

🔍 Technical details
  • .resource-tile is flex: 0 1 auto and .resource-tiles is justify-content: space-between (src/gaia/apps/webui/src/components/ResourceMonitor.css), so every tile's position depends on every other tile's text width.
  • The network detail string changes both its digits and its unit: rateUnit picks Kbps, Mbps or Gbps per sample in buildTiles (ResourceMonitor.tsx).
  • Fix direction: reserve a fixed width per reading. Add a rule to visual/rtl.visual.ts that compares tile positions between a short and a long reading, and watch it fail first.
Dominant language
Python
Stars
1.6k
Forks
169
Avg merge
15h 33m
Merged PRs (30d)
832

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from amd/gaia

All issues in amd/gaia

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.