authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-04 17:11:53-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-04 17:11:53-04:00
log935917f50a2d9ccdd772464de140c187ca80bb0b
tree1811df973cc5ae98e40423ad8c54cbb3530a3d35
parent24aef0e6c1bd5373a82eeed8054b50fc6e041b76
signature Signed by PGP key B5690EEEBB952194

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

2 files changed, 35 insertions(+), 1 deletions(-)

apps/web/src/components/chat/MessagesTimeline.tsx+7-1
......@@ -1918,11 +1918,13 @@ function LiveActivityRow({
19181918 iconName,
19191919 toolIcon,
19201920 failed = false,
1921 active = false,
19211922}: {
19221923 label: string;
19231924 iconName?: WorkEntryIconName;
19241925 toolIcon?: ToolActivityIcon | undefined;
19251926 failed?: boolean;
1927 active?: boolean;
19261928}) {
19271929 return (
19281930 <div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
......@@ -1932,6 +1934,7 @@ function LiveActivityRow({
19321934 toolIcon={toolIcon}
19331935 failed={failed}
19341936 announceFailure={failed}
1937 active={active}
19351938 />
19361939 </div>
19371940 );
......@@ -1943,12 +1946,14 @@ function LiveActivityContent({
19431946 toolIcon,
19441947 failed = false,
19451948 announceFailure = false,
1949 active = false,
19461950}: {
19471951 label: string;
19481952 iconName: WorkEntryIconName | undefined;
19491953 toolIcon?: ToolActivityIcon | undefined;
19501954 failed?: boolean;
19511955 announceFailure?: boolean;
1956 active?: boolean;
19521957}) {
19531958 const showTrailingFailureMark =
19541959 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
......@@ -1978,7 +1983,7 @@ function LiveActivityContent({
19781983 />
19791984 </span>
19801985 ) : null}
1981 <span className="min-w-0 flex-1 truncate">{label}</span>
1986 <span className={cn("min-w-0 flex-1 truncate", active && "live-tool-shine")}>{label}</span>
19821987 {showTrailingFailureMark ? (
19831988 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />
19841989 ) : null}
......@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "
20042009 iconName={workEntryIconName(row.entry)}
20052010 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}
20062011 failed={failed}
2012 active={row.active}
20072013 />
20082014 </button>
20092015 );
apps/web/src/index.css+28
......@@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
425425 }
426426}
427427
428@keyframes live-tool-shine {
429 from {
430 background-position:
431 -4.5rem 0,
432 0 0;
433 }
434 to {
435 background-position:
436 calc(100% + 4.5rem) 0,
437 0 0;
438 }
439}
440
441@utility live-tool-shine {
442 @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
443 color: transparent;
444 background-image:
445 linear-gradient(to right, transparent, var(--contrast-foreground), transparent),
446 linear-gradient(var(--contrast-secondary-label), var(--contrast-secondary-label));
447 background-size:
448 4.5rem 100%,
449 100% 100%;
450 background-repeat: no-repeat;
451 background-clip: text;
452 animation: live-tool-shine 2.2s steps(30) infinite;
453 }
454}
455
428456@property --assistant-citation-highlight-opacity {
429457 syntax: "<number>";
430458 inherits: true;