Skip to content

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

Closed
Rain120 wants to merge 3 commits into
openclaw:mainfrom
Rain120:feature/ui-layout_usage
Closed

feat(ui): tool name style in usage panel#42197
Rain120 wants to merge 3 commits into
openclaw:mainfrom
Rain120:feature/ui-layout_usage

Conversation

@Rain120

@Rain120 Rain120 commented Mar 10, 2026

Copy link
Copy Markdown
Contributor

Summary

The tool name style in usage panel

Change Type (select all)

  • Bug fix

Scope (select all touched areas)

  • UI / DX

Linked Issue/PR

Before

image

After

image

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: be591b7594

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread ui/src/ui/views/usage-styles/usageStyles-part3.ts Outdated
@greptile-apps

greptile-apps Bot commented Mar 10, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR improves the tool/skill/file name display in the usage panel's context breakdown by adding CSS truncation with text-overflow: ellipsis and native title tooltips, preventing long names from overflowing their containers.

  • title="${name}" attributes are added to all three breakdown item spans (skills, tools, files), correctly exposing the full name as a hover tooltip when text is visually truncated — a good UX improvement.
  • A new .mono CSS rule is added to usageStyles-part3.ts. The rule itself is correct in intent, but it is unscoped: the rest of the codebase already scopes .mono overrides to a parent class (e.g., .context-list-item .mono in usageStyles-part2.ts). Because the whole app renders in a light DOM (no Shadow DOM encapsulation), this style is injected globally when the usage tab is active and could unintentionally affect other .mono elements — most critically those in the persistent top-bar in app-render.ts. Scoping to .context-breakdown-item .mono would be the safe, consistent fix.

Confidence Score: 4/5

  • This PR is nearly safe to merge; the only concern is the unscoped .mono CSS rule which is a style best-practice issue rather than a functional bug.
  • The title tooltip additions are unambiguously correct. The CSS change achieves its visual goal but is unscoped, inconsistent with the existing pattern, and technically injects global styles when the usage tab is active. In practice the current impact appears minimal because other tabs' content is not in the DOM simultaneously and topbar .mono elements are protected by a higher-specificity rule, but it is still fragile and should be scoped.
  • ui/src/ui/views/usage-styles/usageStyles-part3.ts — the .mono rule should be scoped to .context-breakdown-item .mono.

Last reviewed commit: be591b7

Comment thread ui/src/ui/views/usage-styles/usageStyles-part3.ts Outdated
@openclaw-barnacle

Copy link
Copy Markdown

This pull request has been automatically marked as stale due to inactivity.
Please add updates or it will be closed.

@openclaw-barnacle openclaw-barnacle Bot added the stale Marked as stale due to inactivity label Apr 27, 2026
@clawsweeper

clawsweeper Bot commented Apr 27, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs changes before merge.

Workflow note: Future ClawSweeper reviews update this same comment in place.

How this review workflow works
  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Summary
The branch adds native title tooltips to usage context breakdown skill/tool/file names and adds scoped ellipsis CSS in the old split usage stylesheet.

Reproducibility: yes. at source/proof level: current main lacks the three title attributes and scoped ellipsis selector, while the inspected screenshots show the intended visual behavior. I did not establish a live browser reproduction in this read-only pass.

PR rating
Overall: 🦐 gold shrimp
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦐 gold shrimp
Summary: The visual proof is strong, but the patch remains blocked by a stale stylesheet path and live merge conflict.

Rank-up moves:

  • Move the scoped truncation selector into ui/src/styles/usage.css.
  • Keep the three title attributes and run focused usage render/style checks.
What the crustacean ranks mean
  • 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
  • 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
  • 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
  • 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
  • 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
  • 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
  • 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

PR egg
✨ Hatched: 🥚 common Gilded Merge Sprite

       /\  .---.  /\         
      /  \/     \/  \        
     /   ( -   - )   \       
    |       ._.       |      
    |   /|  ===  |\   |      
     \  \|______/|/  /       
      '._  `--'  _.'         
         '-.__.-'            
       _/|_|  |_|\_          
      /__|      |__\         
       .-----------.         
      '-------------'        

Rarity: 🥚 common.
Trait: hums during re-review.
Share on X: post this hatch
Copy: My PR egg hatched a 🥚 common Gilded Merge Sprite in ClawSweeper.

What is this egg doing here?
  • Eggs appear after the PR passes real-behavior proof. It is here for vibes, not verdicts: it does not change labels, ratings, merge decisions, or automation.
  • The shell reacts to review momentum: open follow-up work warms it up, re-review makes it wobble, and a clean final review lets it hatch.
  • How to hatch it: reach status: 👀 ready for maintainer look or status: 🚀 automerge armed; that usually means sufficient real-behavior proof, no blocking P0/P1/P2 findings, no security attention needed, and clean correctness.
  • The hatch is seeded from this repository and PR number, so the same PR keeps the same creature; the reviewed head SHA can only change safe visual details.
  • Rarity is just collectible sparkle: 🥚 common, 🌱 uncommon, 💎 rare, ✨ glimmer, and 🌈 legendary.

Real behavior proof
Sufficient (screenshot): The PR body's before/after screenshots were downloaded and inspected; they directly show the long usage-panel name overflowing before and truncating with tooltip after.

Mantis proof suggestion
A short browser visual proof would directly verify the visible usage-panel truncation and native tooltip behavior after the stale CSS path is refreshed. A maintainer can ask Mantis to capture proof by posting a new PR comment that starts with the OpenClaw Mantis account mention, followed by:

visual task: verify a usage context breakdown with a long tool name ellipsizes and the native title tooltip exposes the full name.

Risk before merge
Why this matters: - The live PR is currently conflicting and still edits a stylesheet file that current main has deleted, so the CSS fix will not land from the proposed path.

  • I did not run a live browser session or tests in this read-only pass; the behavior proof is the PR screenshots plus source inspection.

Maintainer options:

  1. Decide the mitigation before merge
    Refresh the branch so the current renderer keeps the three title attributes and ui/src/styles/usage.css owns the scoped .context-breakdown-item .mono ellipsis rule, then let automerge proceed after focused usage checks and mergeability are clean.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge
Automerge is armed and the only blocker is a narrow mechanical refresh from the deleted split stylesheet to the current consolidated usage stylesheet.

Security
Cleared: The diff only changes Lit-rendered attributes and CSS, with no dependency, workflow, secret, permission, or code-execution surface.

Review findings

  • [P2] Port the ellipsis rule to usage.css — ui/src/ui/views/usage-styles/usageStyles-part3.ts:327-333
Review details

Best possible solution:

Refresh the branch so the current renderer keeps the three title attributes and ui/src/styles/usage.css owns the scoped .context-breakdown-item .mono ellipsis rule, then let automerge proceed after focused usage checks and mergeability are clean.

Do we have a high-confidence way to reproduce the issue?

Yes at source/proof level: current main lacks the three title attributes and scoped ellipsis selector, while the inspected screenshots show the intended visual behavior. I did not establish a live browser reproduction in this read-only pass.

Is this the best way to solve the issue?

Mostly yes: title attributes plus a scoped context-breakdown CSS rule are the narrow maintainable solution. The current branch is not the best merge shape until the CSS moves to ui/src/styles/usage.css.

Label justifications:

  • P3: This is a small web UI readability improvement with a narrow stale-branch repair before merge.

Full review comments:

  • [P2] Port the ellipsis rule to usage.css — ui/src/ui/views/usage-styles/usageStyles-part3.ts:327-333
    Current main deleted ui/src/ui/views/usage-styles/usageStyles-part3.ts during the usage stylesheet consolidation, so this CSS hunk cannot merge or ship from that path. Move the scoped .context-breakdown-item .mono rule into ui/src/styles/usage.css while keeping the title attributes.
    Confidence: 0.92

Overall correctness: patch is incorrect
Overall confidence: 0.91

Acceptance criteria:

  • node scripts/run-vitest.mjs ui/src/ui/views/usage-render-details.test.ts ui/src/styles/usage.test.ts
  • git diff --check
  • Real UI proof: render a usage context breakdown with a long tool name and verify ellipsis plus native title tooltip.

What I checked:

Likely related people:

  • BunsDev: Commit a5309b6 added the consolidated ui/src/styles/usage.css, changed the usage renderer, and deleted the stale usageStyles-part3.ts path this PR still touches. (role: recent usage stylesheet consolidation contributor; confidence: high; commits: a5309b6f93db; files: ui/src/styles/usage.css, ui/src/ui/views/usage-render-details.ts, ui/src/ui/views/usage-styles/usageStyles-part3.ts)
  • steipete: History shows the focused usage renderer and split usage stylesheet structure came from the earlier usage refactor commits. (role: original usage renderer/style split contributor; confidence: medium; commits: 68dbbc7c5ff1, 6310b8b7fc16; files: ui/src/ui/views/usage-render-details.ts, ui/src/ui/views/usage-styles/usageStyles-part3.ts, ui/src/ui/views/usageStyles.ts)
  • sandypockets: Recent merged tooltip work modified ui/src/styles/usage.css and nearby usage overview files, making this a useful adjacent review route for scoped usage CSS behavior. (role: recent adjacent usage stylesheet contributor; confidence: medium; commits: a5a5df67da35; files: ui/src/styles/usage.css, ui/src/ui/views/usage-render-overview.ts, ui/src/ui/views/usage-render-overview.test.ts)

Codex review notes: model gpt-5.5, reasoning high; reviewed against 9b97e1ef2fd2.

@openclaw-barnacle openclaw-barnacle Bot removed the stale Marked as stale due to inactivity label Apr 28, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot added triage: needs-real-behavior-proof Candidate: external PR needs after-fix proof from a real setup. and removed proof: sufficient ClawSweeper judged the real behavior proof convincing. labels May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 10, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@openclaw-barnacle openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 11, 2026
@clawsweeper clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 12, 2026
@Takhoffman

Copy link
Copy Markdown
Contributor

@clawsweeper automerge

@clawsweeper

clawsweeper Bot commented May 19, 2026

Copy link
Copy Markdown
Contributor

🦞🔧
ClawSweeper picked up the repair feedback.

Source: clawsweeper[bot]
Feedback: structured ClawSweeper marker: fix-required (finding=review-feedback sha=d6d6c9dc3c6f3007ffccc2399a3dfc37f114f3c9)
Action: repair worker queued. Run: https://github.com/openclaw/clawsweeper/actions/runs/26123581651
Model: gpt-5.5

I will update this PR branch, or open a safe credited replacement, if the repair worker finds a narrow fix.

Automerge progress:

  • 2026-05-19 16:59:59 UTC review queued d6d6c9dc3c6f (queued)
  • 2026-05-19 19:39:20 UTC review requested repair d6d6c9dc3c6f (structured ClawSweeper marker: fix-required (finding=review-feedback sha=d6d6c9...)

@clawsweeper

clawsweeper Bot commented May 19, 2026

Copy link
Copy Markdown
Contributor

ClawSweeper 🐠 reef update

Thanks for the work here. ClawSweeper could not write to the source branch, so it opened a replacement PR rather than letting the fix drift. attribution still points back here.

Why replacement: ClawSweeper could not update the source PR branch directly; GitHub did not grant sufficient push rights to the bot for that branch.
Replacement PR: #84310
Why close: this run explicitly closes the superseded source PR after the credited replacement PR is open, so review continues in one place.
This closeout is intentional for this run: the replacement PR is now the active review lane.
Attribution is preserved in the replacement PR body and release-note trail.
Co-author credit kept:

fish notes: model gpt-5.5, reasoning high; reviewed against 5101461.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app: web-ui App: web-ui clawsweeper:automerge Maintainer opted this PR into bounded ClawSweeper-reviewed automerge P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. size: XS status: 🚀 automerge armed This PR is in ClawSweeper's automerge lane. triage: needs-real-behavior-proof Candidate: external PR needs after-fix proof from a real setup.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants