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({...@@ -1918,11 +1918,13 @@ function LiveActivityRow({
1918 iconName,1918 iconName,
1919 toolIcon,1919 toolIcon,
1920 failed = false,1920 failed = false,
1921 active = false,
1921}: {1922}: {
1922 label: string;1923 label: string;
1923 iconName?: WorkEntryIconName;1924 iconName?: WorkEntryIconName;
1924 toolIcon?: ToolActivityIcon | undefined;1925 toolIcon?: ToolActivityIcon | undefined;
1925 failed?: boolean;1926 failed?: boolean;
1927 active?: boolean;
1926}) {1928}) {
1927 return (1929 return (
1928 <div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">1930 <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({...@@ -1932,6 +1934,7 @@ function LiveActivityRow({
1932 toolIcon={toolIcon}1934 toolIcon={toolIcon}
1933 failed={failed}1935 failed={failed}
1934 announceFailure={failed}1936 announceFailure={failed}
1937 active={active}
1935 />1938 />
1936 </div>1939 </div>
1937 );1940 );
...@@ -1943,12 +1946,14 @@ function LiveActivityContent({...@@ -1943,12 +1946,14 @@ function LiveActivityContent({
1943 toolIcon,1946 toolIcon,
1944 failed = false,1947 failed = false,
1945 announceFailure = false,1948 announceFailure = false,
1949 active = false,
1946}: {1950}: {
1947 label: string;1951 label: string;
1948 iconName: WorkEntryIconName | undefined;1952 iconName: WorkEntryIconName | undefined;
1949 toolIcon?: ToolActivityIcon | undefined;1953 toolIcon?: ToolActivityIcon | undefined;
1950 failed?: boolean;1954 failed?: boolean;
1951 announceFailure?: boolean;1955 announceFailure?: boolean;
1956 active?: boolean;
1952}) {1957}) {
1953 const showTrailingFailureMark =1958 const showTrailingFailureMark =
1954 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);1959 failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
...@@ -1978,7 +1983,7 @@ function LiveActivityContent({...@@ -1978,7 +1983,7 @@ function LiveActivityContent({
1978 />1983 />
1979 </span>1984 </span>
1980 ) : null}1985 ) : 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>
1982 {showTrailingFailureMark ? (1987 {showTrailingFailureMark ? (
1983 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />1988 <XIcon aria-hidden className={cn("size-3 shrink-0", failedToolIconClassName)} />
1984 ) : null}1989 ) : null}
...@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "...@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "
2004 iconName={workEntryIconName(row.entry)}2009 iconName={workEntryIconName(row.entry)}
2005 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}2010 toolIcon={row.entry.toolIcon ?? row.entry.toolSource?.icon}
2006 failed={failed}2011 failed={failed}
2012 active={row.active}
2007 />2013 />
2008 </button>2014 </button>
2009 );2015 );
apps/web/src/index.css+28
...@@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -425,6 +425,34 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
425 }425 }
426}426}
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
428@property --assistant-citation-highlight-opacity {456@property --assistant-citation-highlight-opacity {
429 syntax: "<number>";457 syntax: "<number>";
430 inherits: true;458 inherits: true;