diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 4e55991f870371832e077dd0553637334e24f503..df952aeca3828fbe6a9cf10febef5d5c426a6d0e 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1918,11 +1918,13 @@ function LiveActivityRow({
iconName,
toolIcon,
failed = false,
+ active = false,
}: {
label: string;
iconName?: WorkEntryIconName;
toolIcon?: ToolActivityIcon | undefined;
failed?: boolean;
+ active?: boolean;
}) {
return (
@@ -1932,6 +1934,7 @@ function LiveActivityRow({
toolIcon={toolIcon}
failed={failed}
announceFailure={failed}
+ active={active}
/>
);
@@ -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);
@@ -1978,7 +1983,7 @@ function LiveActivityContent({
/>
) : null}
- {label}
+ {label}
{showTrailingFailureMark ? (
) : null}
@@ -2004,6 +2009,7 @@ function LiveWorkEntryTimelineRow({ row }: { row: Extract
);
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 54bb5b70d5fa81606493c888646b28301d189f53..1369cd31f5b3c74968d1331c064a54aa5df36671 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -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;
+ }
+}
+
@property --assistant-citation-highlight-opacity {
syntax: "";
inherits: true;