mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-06-13 22:34:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): baseline-align activity diff counts

Browse Source
This commit is contained in:
Xubin Ren 2026-05-24 18:04:39 +08:00
parent 00a6e720dc
commit 547f81e4aa
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
webui/src/components/thread/AgentActivityCluster.tsx
View File

@ -1776,7 +1776,10 @@ function FileEditRow({ edit }: { edit: FileEditSummary }) {
function DiffPair({ added, deleted }: { added: number; deleted: number }) { function DiffPair({ added, deleted }: { added: number; deleted: number }) {
return ( return (
<span className="inline-flex shrink-0 translate-y-[0.055em] items-center gap-1.5 tabular-nums"> <span
className="inline-flex shrink-0 items-baseline gap-1.5 leading-[inherit] tabular-nums"
data-testid="activity-diff-pair"
>
<DiffValue <DiffValue
sign="+" sign="+"
value={added} value={added}
@ -1794,8 +1797,11 @@ function DiffPair({ added, deleted }: { added: number; deleted: number }) {
function DiffValue({ sign, value, className }: { sign: string; value: number; className: string }) { function DiffValue({ sign, value, className }: { sign: string; value: number; className: string }) {
const safeValue = Number.isFinite(value) ? Math.max(0, Math.round(value)) : 0; const safeValue = Number.isFinite(value) ? Math.max(0, Math.round(value)) : 0;
return ( return (
<span className={cn("inline-flex", className)} aria-label={`${sign}${safeValue}`}> <span
<span className="inline-flex" aria-hidden> className={cn("inline-flex items-baseline leading-[inherit]", className)}
aria-label={`${sign}${safeValue}`}
>
<span className="inline-flex items-baseline leading-none" aria-hidden>
{sign} {sign}
<AnimatedNumber value={safeValue} /> <AnimatedNumber value={safeValue} />
</span> </span>
@ -1849,7 +1855,7 @@ function AnimatedNumber({ value }: { value: number }) {
function RollingNumber({ value }: { value: number }) { function RollingNumber({ value }: { value: number }) {
const digits = String(value).split(""); const digits = String(value).split("");
return ( return (
<span className="inline-flex h-[1em] overflow-hidden align-[-0.13em]" aria-hidden> <span className="inline-flex items-baseline leading-none" aria-hidden>
{digits.map((digit, index) => ( {digits.map((digit, index) => (
<RollingDigit <RollingDigit
key={`${digits.length}-${index}`} key={`${digits.length}-${index}`}
@ -1863,9 +1869,10 @@ function RollingNumber({ value }: { value: number }) {
function RollingDigit({ digit }: { digit: number }) { function RollingDigit({ digit }: { digit: number }) {
const safeDigit = Number.isFinite(digit) ? Math.min(9, Math.max(0, digit)) : 0; const safeDigit = Number.isFinite(digit) ? Math.min(9, Math.max(0, digit)) : 0;
return ( return (
<span className="relative inline-block h-[1em] w-[0.62em] overflow-hidden"> <span className="relative inline-block h-[1em] w-[0.62em] overflow-hidden align-baseline leading-none">
<span className="invisible block h-[1em] leading-none">0</span>
<span <span
className="flex flex-col transition-transform duration-200 ease-out will-change-transform" className="absolute inset-x-0 top-0 flex flex-col transition-transform duration-200 ease-out will-change-transform"
style={{ transform: `translateY(-${safeDigit}em)` }} style={{ transform: `translateY(-${safeDigit}em)` }}
> >
{Array.from({ length: 10 }, (_, n) => ( {Array.from({ length: 10 }, (_, n) => (

5
webui/src/tests/agent-activity-cluster.test.tsx
View File

@ -334,6 +334,11 @@ describe("AgentActivityCluster", () => {
const fileRef = screen.getByTestId("activity-file-reference"); const fileRef = screen.getByTestId("activity-file-reference");
expect(fileRef).toHaveTextContent("src/app.tsx"); expect(fileRef).toHaveTextContent("src/app.tsx");
expect(fileRef).toHaveAttribute("aria-label", "/Users/renxubin/project/src/app.tsx"); expect(fileRef).toHaveAttribute("aria-label", "/Users/renxubin/project/src/app.tsx");
for (const diffPair of screen.getAllByTestId("activity-diff-pair")) {
expect(diffPair).toHaveClass("items-baseline");
expect(diffPair).toHaveClass("leading-[inherit]");
expect(diffPair.className).not.toContain("translate-y");
}
await waitFor(() => { await waitFor(() => {
expect(screen.getAllByText("+12").length).toBeGreaterThan(0); expect(screen.getAllByText("+12").length).toBeGreaterThan(0);
expect(screen.getAllByText("-3").length).toBeGreaterThan(0); expect(screen.getAllByText("-3").length).toBeGreaterThan(0);