Skip to content

fix(web): restore the running tool label shine #9777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 4 commits into from
Sep 4, 2026
Merged

fix(web): restore the running tool label shine #9777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
39f208e
fix(web): restore active tool call animation
maria-rcks Sep 4, 2026
91e7065
fix(docs): leave upstream composer rewrite intact
maria-rcks Sep 4, 2026
0652e96
fix(web): restore the sweeping tool label shine
maria-rcks Sep 4, 2026
ad0cdf6
fix(web): respect contrast settings in tool shine
maria-rcks Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/web/src/components/chat/MessagesTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1918,11 +1918,13 @@ function LiveActivityRow({
iconName,
toolIcon,
failed = false,
active = false,
}: {
label: string;
iconName?: WorkEntryIconName;
toolIcon?: ToolActivityIcon | undefined;
failed?: boolean;
active?: boolean;
}) {
return (
<div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
Expand All @@ -1932,6 +1934,7 @@ function LiveActivityRow({
toolIcon={toolIcon}
failed={failed}
announceFailure={failed}
active={active}
/>
</div>
);
Expand All @@ -1943,12 +1946,14 @@ function LiveActivityContent({
toolIcon,
failed = false,
announceFailure = false,
active = false,
}: {
label: string;
iconName: WorkEntryIconName | undefined;
toolIcon?: ToolActivityIcon | undefined;
failed?: boolean;
announceFailure?: boolean;
active?: boolean;
}) {
const showTrailingFailureMark =
failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
Expand Down Expand Up @@ -1978,7 +1983,7 @@ function LiveActivityContent({
/>
</span>
) : null}
<span className="min-w-0 flex-1 truncate">{label}</span>
<span className={cn("min-w-0 flex-1 truncate", active && "live-tool-shine")}>{label}</span>
{showTrailingFailureMark ? (
<XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />
) : null}
Expand All @@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "
iconName={workEntryIconName(row.entry)}
toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}
failed={failed}
active={row.active}
/>
</button>
);
Expand Down
28 changes: 28 additions & 0 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
}
}

@keyframes live-tool-shine {
from {
background-position:
-4.5rem 0,
0 0;
}
to {
background-position:
calc(100% + 4.5rem) 0,
0 0;
}
}

@utility live-tool-shine {
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
color: transparent;
background-image:
linear-gradient(to right, transparent, var(--contrast-foreground), transparent),
linear-gradient(var(--contrast-secondary-label), var(--contrast-secondary-label));
background-size:
4.5rem 100%,
100% 100%;
background-repeat: no-repeat;
background-clip: text;
animation: live-tool-shine 2.2s steps(30) infinite;
}
Comment thread
maria-rcks marked this conversation as resolved.
}

@property --assistant-citation-highlight-opacity {
syntax: "<number>";
inherits: true;
Expand Down
Loading