From a4507a9cb0b738440fffa6dc066983b34452c515 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 12 Feb 2026 11:22:10 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A4=96=20feat:=20add=20animated=20SVG?=
 =?UTF-8?q?=20thinking=20icon=20with=20synced=20shimmer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Render an animated SVG to the left of the streaming "Thinking..." shimmer label in ReasoningMessage.
- Keep the icon and text shimmer in lockstep by sharing the same shimmer duration and sweep keyframes.
- Add shimmer-surface overlay styles for non-text shimmer surfaces and keep existing non-streaming lightbulb behavior.

---

_Generated with `mux` • Model: `openai:gpt-5.3-codex` • Thinking: `xhigh` • Cost: `.04`_

<!-- mux-attribution: model=openai:gpt-5.3-codex thinking=xhigh costs=1.04 -->
---
 .../assets/animations/thinking-dots.svg       |  1 +
 .../components/Messages/ReasoningMessage.tsx  | 31 +++++++++++++++++--
 src/browser/styles/globals.css                | 27 ++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/browser/assets/animations/thinking-dots.svg

diff --git a/src/browser/assets/animations/thinking-dots.svg b/src/browser/assets/animations/thinking-dots.svg
new file mode 100644
index 0000000000..e97ba3d7b2
--- /dev/null
+++ b/src/browser/assets/animations/thinking-dots.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="944" height="772" viewBox="0 0 944 772" style="width:100%;height:100%"><defs><clipPath id="_R_G_L_4_C_0"><path id="_R_G_L_4_C_0_P_0" fill-rule="nonzero" d="M188 -129 C188,-129 -190.42,-129 -190.42,-129 C-190.42,-129 -190.42,128.47 -190.42,128.47 C-190.42,128.47 188,128.47 188,128.47 C188,128.47 188,-129 188,-129z "/></clipPath><clipPath id="_R_G_L_3_C_0"><path id="_R_G_L_3_C_0_P_0" fill-rule="nonzero" d="M188 -129 C188,-129 -190.42,-129 -190.42,-129 C-190.42,-129 -190.42,128.47 -190.42,128.47 C-190.42,128.47 188,128.47 188,128.47 C188,128.47 188,-129 188,-129z "/></clipPath><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_3_G_G_0_D_0_P_0" fill="freeze" attributeName="fill" from="#000000" to="#000000" keyTimes="0;0.2586207;0.3275862;1" values="#000000;#000000;#1b1b1b;#1b1b1b" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_3_G_G_0_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z " to="M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keyTimes="0;0.1293103;0.1939655;0.2586207;0.3232759;0.387931;0.4525862;0.5172414;1" values="M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z ;M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z ;M144 -132 C144,-132 -57,-132 -57,-132 C-57,-132 -68,-59 -80,-10 C-91.02,35 -99,128 -99,128 C-99,128 124,128 124,128 C124,128 132,37.33 132,-8 C132,-49.33 144,-132 144,-132z ;M158 -132 C158,-132 -8,-132 -8,-132 C-8,-132 -28,-51 -40,-2 C-51.02,43 -77,128 -77,128 C-77,128 132,128 132,128 C132,128 147.85,37.22 151,-8 C154,-51 158,-132 158,-132z ;M126 -132 C126,-132 105,-132 105,-132 C105,-132 59,-54 33,-4 C11.62,37.11 -40,128 -40,128 C-40,128 145,128 145,128 C145,128 160,84.33 160,39 C160,-37 126,-132 126,-132z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 161.27,87.91 150,44 C131,-30 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_3_G_G_0_D_1_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z " to="M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keyTimes="0;0.0646552;0.1293103;0.1939655;0.2586207;0.3232759;0.387931;0.8706897;1" values="M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z ;M144 -132 C144,-132 -57,-132 -57,-132 C-57,-132 -68,-59 -80,-10 C-91.02,35 -99,128 -99,128 C-99,128 124,128 124,128 C124,128 132,37.33 132,-8 C132,-49.33 144,-132 144,-132z ;M158 -132 C158,-132 -8,-132 -8,-132 C-8,-132 -28,-51 -40,-2 C-51.02,43 -77,128 -77,128 C-77,128 132,128 132,128 C132,128 147.85,37.22 151,-8 C154,-51 158,-132 158,-132z ;M126 -132 C126,-132 105,-132 105,-132 C105,-132 59,-54 33,-4 C11.62,37.11 -40,128 -40,128 C-40,128 145,128 145,128 C145,128 160,84.33 160,39 C160,-37 126,-132 126,-132z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 161.27,87.91 150,44 C131,-30 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_3_G_N_1_T_0_M" fill="freeze" attributeName="opacity" from="0" to="0" keyTimes="0;0.3362069;0.3362078;0.6465517;0.6465517;1" values="0;0;1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline"/><clipPath id="_R_G_L_2_C_0"><path id="_R_G_L_2_C_0_P_0" fill-rule="nonzero" d="M188 -129 C188,-129 -190.42,-129 -190.42,-129 C-190.42,-129 -190.42,128.47 -190.42,128.47 C-190.42,128.47 188,128.47 188,128.47 C188,128.47 188,-129 188,-129z "/></clipPath><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_2_G_G_0_D_0_P_0" fill="freeze" attributeName="fill" from="#191919" to="#191919" keyTimes="0;0.4741379;0.5517241;1" values="#191919;#191919;#000000;#000000" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_2_G_G_0_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z " to="M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z " keyTimes="0;0.3232759;0.387931;0.4525862;0.5172414;0.5818966;0.6465517;0.7758621;1" values="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z ;M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z ;M49 -131 C49,-131 -146,-131 -146,-131 C-146,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M49 -131 C49,-131 -156,-131 -156,-131 C-156,-131 -151,-67 -134.82,-26.65 C-117.41,16.78 -63,131 -63,131 C-63,131 -51,131 -51,131 C-51,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M49 -131 C49,-131 -145,-131 -145,-131 C-145,-131 -151.61,-81.45 -155.82,-40.65 C-160.61,5.89 -127,131 -127,131 C-127,131 -115,131 -115,131 C-115,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M84 -131 C84,-131 -130,-131 -130,-131 C-130,-131 -140.61,-49.63 -144.82,-8.82 C-149.61,37.71 -157,131 -157,131 C-157,131 22,131 22,131 C22,131 41.75,49.14 51,10.06 C62.42,-38.2 84,-131 84,-131z ;M102 -130 C102,-130 -122,-131 -122,-131 C-122,-131 -117.35,-18.03 -120.15,9.18 C-123.35,40.2 -129.67,131 -129.67,131 C-129.67,131 91.67,131 91.67,131 C91.67,131 90.32,34.37 93,7.73 C97,-32 102,-130 102,-130z ;M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z ;M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_2_G_G_0_D_1_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z " to="M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z " keyTimes="0;0.1939655;0.2586207;0.3232759;0.387931;0.4525862;0.5172414;0.6465517;0.8706897;1" values="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z ;M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z ;M49 -131 C49,-131 -146,-131 -146,-131 C-146,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M49 -131 C49,-131 -156,-131 -156,-131 C-156,-131 -151,-67 -134.82,-26.65 C-117.41,16.78 -63,131 -63,131 C-63,131 -51,131 -51,131 C-51,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M49 -131 C49,-131 -145,-131 -145,-131 C-145,-131 -151.61,-81.45 -155.82,-40.65 C-160.61,5.89 -127,131 -127,131 C-127,131 -115,131 -115,131 C-115,131 -51.52,45.76 -33,10.12 C-8,-38 49,-131 49,-131z ;M84 -131 C84,-131 -130,-131 -130,-131 C-130,-131 -140.61,-49.63 -144.82,-8.82 C-149.61,37.71 -157,131 -157,131 C-157,131 22,131 22,131 C22,131 41.75,49.14 51,10.06 C62.42,-38.2 84,-131 84,-131z ;M102 -130 C102,-130 -122,-131 -122,-131 C-122,-131 -117.35,-18.03 -120.15,9.18 C-123.35,40.2 -129.67,131 -129.67,131 C-129.67,131 91.67,131 91.67,131 C91.67,131 90.32,34.37 93,7.73 C97,-32 102,-130 102,-130z ;M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z ;M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z ;M108 -131 C108,-131 -106,-131 -106,-131 C-106,-131 -106.82,-23.82 -106.82,-23.82 C-106.82,-23.82 -108,131 -108,131 C-108,131 108,131 108,131 C108,131 108,-8.94 108,-8.94 C108,-8.94 108,-131 108,-131z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_2_G_N_1_T_0_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.3232759;0.3232767;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline"/><clipPath id="_R_G_L_1_C_0"><path id="_R_G_L_1_C_0_P_0" fill-rule="nonzero" d="M188 -129 C188,-129 -190.42,-129 -190.42,-129 C-190.42,-129 -190.42,128.47 -190.42,128.47 C-190.42,128.47 188,128.47 188,128.47 C188,128.47 188,-129 188,-129z "/></clipPath><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_D_0_P_0" fill="freeze" attributeName="fill" from="#000000" to="#000000" keyTimes="0;0.4568966;0.5258621;1" values="#000000;#000000;#1b1b1b;#1b1b1b" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z " to="M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z " keyTimes="0;0.0862069;0.1293103;0.1939655;0.2586207;0.3232759;0.387931;0.5172414;0.5818966;0.6465517;0.7112069;0.7672414;1" values="M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z ;M-67.47 -131.87 C-67.47,-131.87 -97.76,-131.73 -97.76,-131.73 C-97.76,-131.73 -106.52,-48.65 -99.23,-14.12 C-91.54,25.07 -100.8,126.13 -100.8,126.13 C-100.8,126.13 -91.5,126.13 -91.5,126.13 C-91.5,126.13 -94.4,48.57 -90.85,2.15 C-86,-66.6 -67.47,-131.87 -67.47,-131.87z ;M-89.08 -132 C-89.08,-132 -126.92,-132 -126.92,-132 C-126.92,-132 -121.33,-44.14 -116.79,-10.04 C-111.94,29.21 -110.94,130 -110.94,130 C-110.94,130 -102.06,130 -102.06,130 C-102.06,130 -101,49 -99.75,0.93 C-98,-71 -89.08,-132 -89.08,-132z ;M-55.5 -131 C-55.5,-131 -137.5,-131 -137.5,-131 C-137.5,-131 -128.4,-33.76 -127.98,-0.32 C-127.4,39.02 -119.33,131 -119.33,131 C-119.33,131 -96.67,131 -96.67,131 C-96.67,131 -86.97,37.28 -79.5,3.89 C-70.29,-39.57 -55.5,-131 -55.5,-131z ;M1 -131 C1,-131 -153,-131 -153,-131 C-153,-131 -153.45,-47.5 -149.82,-7.82 C-145.45,39.84 -129,131 -129,131 C-129,131 -79,131 -79,131 C-79,131 -56.26,50.2 -44,10.06 C-29.59,-37.14 1,-131 1,-131z ;M102.75 -130 C102.75,-130 -121.25,-130 -121.25,-130 C-121.25,-130 -144.09,-52.52 -151.66,-15.89 C-163.73,33.42 -142,131 -142,131 C-142,131 -39.5,131 -39.5,131 C-39.5,131 2.58,45.7 21.98,7.05 C49.21,-44.57 102.75,-130 102.75,-130z ;M152.5 -131 C152.5,-131 -57.5,-129 -57.5,-129 C-57.5,-129 -106.73,-43.53 -125.5,-9.96 C-154,41 -155,131 -155,131 C-155,131 0,131 0,131 C0,131 61.41,41.21 87.97,4.04 C128,-52 152.5,-131 152.5,-131z ;M161 -131 C161,-131 50,-131 50,-131 C50,-131 -3,-39 -25.13,-1.82 C-50.67,41.06 -113,131 -113,131 C-113,131 129,131 129,131 C129,131 147.52,41.95 152.49,-2.94 C157.2,-45.46 161,-131 161,-131z ;M132 -131 C132,-131 84,-131 84,-131 C84,-131 69,-74 51.87,-4.82 C33.84,67.97 23,131 23,131 C23,131 154,131 154,131 C154,131 151.78,46.17 149.49,1.06 C147,-48 132,-131 132,-131z ;M122 -131 C122,-131 102,-131 102,-131 C102,-131 98.64,-76.99 94.87,-5.82 C91,67 92,132 92,132 C92,132 129,131 129,131 C129,131 124.78,37.17 122.49,-7.94 C120,-57 122,-131 122,-131z ;M113 -131 C113,-131 106,-131 106,-131 C106,-131 104.64,-76.99 100.87,-5.82 C97,67 98,132 98,132 C98,132 120,131 120,131 C120,131 115.78,37.17 113.49,-7.94 C111,-57 113,-131 113,-131z ;M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z ;M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_1_G_G_0_D_1_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-89.08 -132 C-89.08,-132 -126.92,-132 -126.92,-132 C-126.92,-132 -121.33,-44.14 -116.79,-10.04 C-111.94,29.21 -110.94,130 -110.94,130 C-110.94,130 -102.06,130 -102.06,130 C-102.06,130 -101,49 -99.75,0.93 C-98,-71 -89.08,-132 -89.08,-132z " to="M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z " keyTimes="0;0.0646552;0.1293103;0.1939655;0.2586207;0.387931;0.4525862;0.5172414;0.5818966;0.637931;0.8706897;1" values="M-89.08 -132 C-89.08,-132 -126.92,-132 -126.92,-132 C-126.92,-132 -121.33,-44.14 -116.79,-10.04 C-111.94,29.21 -110.94,130 -110.94,130 C-110.94,130 -102.06,130 -102.06,130 C-102.06,130 -101,49 -99.75,0.93 C-98,-71 -89.08,-132 -89.08,-132z ;M-55.5 -131 C-55.5,-131 -137.5,-131 -137.5,-131 C-137.5,-131 -128.4,-33.76 -127.98,-0.32 C-127.4,39.02 -119.33,131 -119.33,131 C-119.33,131 -96.67,131 -96.67,131 C-96.67,131 -86.97,37.28 -79.5,3.89 C-70.29,-39.57 -55.5,-131 -55.5,-131z ;M1 -131 C1,-131 -153,-131 -153,-131 C-153,-131 -153.45,-47.5 -149.82,-7.82 C-145.45,39.84 -129,131 -129,131 C-129,131 -79,131 -79,131 C-79,131 -56.26,50.2 -44,10.06 C-29.59,-37.14 1,-131 1,-131z ;M102.75 -130 C102.75,-130 -121.25,-130 -121.25,-130 C-121.25,-130 -144.09,-52.52 -151.66,-15.89 C-163.73,33.42 -142,131 -142,131 C-142,131 -39.5,131 -39.5,131 C-39.5,131 2.58,45.7 21.98,7.05 C49.21,-44.57 102.75,-130 102.75,-130z ;M152.5 -131 C152.5,-131 -57.5,-129 -57.5,-129 C-57.5,-129 -106.73,-43.53 -125.5,-9.96 C-154,41 -155,131 -155,131 C-155,131 0,131 0,131 C0,131 61.41,41.21 87.97,4.04 C128,-52 152.5,-131 152.5,-131z ;M161 -131 C161,-131 50,-131 50,-131 C50,-131 -3,-39 -25.13,-1.82 C-50.67,41.06 -113,131 -113,131 C-113,131 129,131 129,131 C129,131 147.52,41.95 152.49,-2.94 C157.2,-45.46 161,-131 161,-131z ;M132 -131 C132,-131 84,-131 84,-131 C84,-131 69,-74 51.87,-4.82 C33.84,67.97 23,131 23,131 C23,131 154,131 154,131 C154,131 151.78,46.17 149.49,1.06 C147,-48 132,-131 132,-131z ;M122 -131 C122,-131 102,-131 102,-131 C102,-131 98.64,-76.99 94.87,-5.82 C91,67 92,132 92,132 C92,132 129,131 129,131 C129,131 124.78,37.17 122.49,-7.94 C120,-57 122,-131 122,-131z ;M113 -131 C113,-131 106,-131 106,-131 C106,-131 104.64,-76.99 100.87,-5.82 C97,67 98,132 98,132 C98,132 120,131 120,131 C120,131 115.78,37.17 113.49,-7.94 C111,-57 113,-131 113,-131z ;M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z ;M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z ;M107.5 -131 C107.5,-131 100.5,-131 100.5,-131 C100.5,-131 99.14,-76.99 95.37,-5.82 C91.5,67 92.5,132 92.5,132 C92.5,132 114.5,131 114.5,131 C114.5,131 110.28,37.17 107.99,-7.94 C105.5,-57 107.5,-131 107.5,-131z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_1_G" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.7241379;0.7758621;1" values="1;1;0;0" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_1_G_N_1_T_0_M" fill="freeze" attributeName="opacity" from="0" to="0" keyTimes="0;0.0689655;0.0689664;0.9051724;0.9051724;1" values="0;0;1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline"/><clipPath id="_R_G_L_0_C_0"><path id="_R_G_L_0_C_0_P_0" fill-rule="nonzero" d="M188 -129 C188,-129 -190.42,-129 -190.42,-129 C-190.42,-129 -190.42,128.47 -190.42,128.47 C-190.42,128.47 188,128.47 188,128.47 C188,128.47 188,-129 188,-129z "/></clipPath><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="fill" from="#000000" to="#000000" keyTimes="0;0.2586207;0.3275862;1" values="#000000;#000000;#1b1b1b;#1b1b1b" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z " to="M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keyTimes="0;0.1293103;0.1939655;0.2586207;0.3232759;0.387931;0.4525862;0.5172414;1" values="M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z ;M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z ;M144 -132 C144,-132 -57,-132 -57,-132 C-57,-132 -68,-59 -80,-10 C-91.02,35 -99,128 -99,128 C-99,128 124,128 124,128 C124,128 132,37.33 132,-8 C132,-49.33 144,-132 144,-132z ;M158 -132 C158,-132 -8,-132 -8,-132 C-8,-132 -28,-51 -40,-2 C-51.02,43 -77,128 -77,128 C-77,128 132,128 132,128 C132,128 147.85,37.22 151,-8 C154,-51 158,-132 158,-132z ;M126 -132 C126,-132 105,-132 105,-132 C105,-132 59,-54 33,-4 C11.62,37.11 -40,128 -40,128 C-40,128 145,128 145,128 C145,128 160,84.33 160,39 C160,-37 126,-132 126,-132z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 161.27,87.91 150,44 C131,-30 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_0_G_G_0_D_1_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z " to="M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keyTimes="0;0.0646552;0.1293103;0.1939655;0.2586207;0.3232759;0.387931;0.8706897;1" values="M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z ;M144 -132 C144,-132 -57,-132 -57,-132 C-57,-132 -68,-59 -80,-10 C-91.02,35 -99,128 -99,128 C-99,128 124,128 124,128 C124,128 132,37.33 132,-8 C132,-49.33 144,-132 144,-132z ;M158 -132 C158,-132 -8,-132 -8,-132 C-8,-132 -28,-51 -40,-2 C-51.02,43 -77,128 -77,128 C-77,128 132,128 132,128 C132,128 147.85,37.22 151,-8 C154,-51 158,-132 158,-132z ;M126 -132 C126,-132 105,-132 105,-132 C105,-132 59,-54 33,-4 C11.62,37.11 -40,128 -40,128 C-40,128 145,128 145,128 C145,128 160,84.33 160,39 C160,-37 126,-132 126,-132z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 161.27,87.91 150,44 C131,-30 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 158,128 158,128 C158,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z ;M40 -123 C40,-123 24,-122 24,-122 C24,-122 105,-29 79,21 C57.62,62.11 0,128 0,128 C0,128 130,128 130,128 C130,128 140,70 118,30 C81.18,-36.94 40,-123 40,-123z " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.3189655;0.3362069;1" values="1;1;0;0" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animate repeatCount="indefinite" dur="1.9333333s" begin="0s" xlink:href="#_R_G_L_0_G_N_1_T_0_M" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.4655172;0.4655173;1" values="1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline"/><animate attributeType="XML" attributeName="opacity" dur="2s" from="0" to="1" xlink:href="#time_group"/></defs><g id="_R_G"><g id="_R_G_L_4_G_N_1_T_0" transform=" translate(472, 386) scale(2.91, 2.91) translate(0, 0)"><g id="_R_G_L_4_G"><g clip-path="url(#_R_G_L_4_C_0)"><path id="_R_G_L_4_G_G_0_D_0_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z "/><path id="_R_G_L_4_G_G_0_D_1_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="0" stroke-opacity="1" d=" M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z "/></g></g></g><g id="_R_G_L_3_G_N_1_T_0_M"><g id="_R_G_L_3_G_N_1_T_0" transform=" translate(472, 386) scale(2.91, 2.91) translate(0, 0)"><g id="_R_G_L_3_G"><g clip-path="url(#_R_G_L_3_C_0)"><path id="_R_G_L_3_G_G_0_D_0_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z "/><path id="_R_G_L_3_G_G_0_D_1_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="0" stroke-opacity="1" d=" M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z "/></g></g></g></g><g id="_R_G_L_2_G_N_1_T_0_M"><g id="_R_G_L_2_G_N_1_T_0" transform=" translate(472, 386) scale(2.91, 2.91) translate(0, 0)"><g id="_R_G_L_2_G"><g clip-path="url(#_R_G_L_2_C_0)"><path id="_R_G_L_2_G_G_0_D_0_P_0" fill="#191919" fill-opacity="1" fill-rule="nonzero" d=" M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z "/><path id="_R_G_L_2_G_G_0_D_1_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="0" stroke-opacity="1" d=" M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z "/></g></g></g></g><g id="_R_G_L_1_G_N_1_T_0_M"><g id="_R_G_L_1_G_N_1_T_0" transform=" translate(472, 386) scale(2.91, 2.91) translate(0, 0)"><g id="_R_G_L_1_G"><g clip-path="url(#_R_G_L_1_C_0)"><path id="_R_G_L_1_G_G_0_D_0_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M73 -131 C73,-131 -122,-131 -122,-131 C-122,-131 -134,-78 -108.82,-40.65 C-82.67,-1.85 -33,131 -33,131 C-33,131 -21,131 -21,131 C-21,131 -51.52,45.76 -33,10.12 C-8,-38 73,-131 73,-131z "/><path id="_R_G_L_1_G_G_0_D_1_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="0" stroke-opacity="1" d=" M-89.08 -132 C-89.08,-132 -126.92,-132 -126.92,-132 C-126.92,-132 -121.33,-44.14 -116.79,-10.04 C-111.94,29.21 -110.94,130 -110.94,130 C-110.94,130 -102.06,130 -102.06,130 C-102.06,130 -101,49 -99.75,0.93 C-98,-71 -89.08,-132 -89.08,-132z "/></g></g></g></g><g id="_R_G_L_0_G_N_1_T_0_M"><g id="_R_G_L_0_G_N_1_T_0" transform=" translate(472, 386) scale(2.91, 2.91) translate(0, 0)"><g id="_R_G_L_0_G"><g clip-path="url(#_R_G_L_0_C_0)"><path id="_R_G_L_0_G_G_0_D_0_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M109 -132 C109,-132 -108,-132 -108,-132 C-108,-132 -108,-51.33 -108,-11 C-108,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 109,37.33 109,-8 C109,-49.33 109,-132 109,-132z "/><path id="_R_G_L_0_G_G_0_D_1_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="0" stroke-opacity="1" d=" M127 -132 C127,-132 -90,-132 -90,-132 C-90,-132 -97,-51.33 -97,-11 C-97,35.33 -108,128 -108,128 C-108,128 109,128 109,128 C109,128 123,37.33 123,-8 C123,-49.33 127,-132 127,-132z "/></g></g></g></g></g><g id="time_group"/></svg>
diff --git a/src/browser/components/Messages/ReasoningMessage.tsx b/src/browser/components/Messages/ReasoningMessage.tsx
index 01eaa8b101..ac344e53fc 100644
--- a/src/browser/components/Messages/ReasoningMessage.tsx
+++ b/src/browser/components/Messages/ReasoningMessage.tsx
@@ -5,6 +5,7 @@ import { TypewriterMarkdown } from "./TypewriterMarkdown";
 import { normalizeReasoningMarkdown } from "./MarkdownStyles";
 import { cn } from "@/common/lib/utils";
 import { Shimmer } from "../ai-elements/shimmer";
+import ThinkingDots from "@/browser/assets/animations/thinking-dots.svg?react";
 import { Lightbulb } from "lucide-react";
 
 interface ReasoningMessageProps {
@@ -13,6 +14,13 @@ interface ReasoningMessageProps {
 }
 
 const REASONING_FONT_CLASSES = "font-primary text-[12px] leading-[18px]";
+const THINKING_SHIMMER_DURATION_SECONDS = 2;
+type ThinkingShimmerStyle = React.CSSProperties &
+  Record<"--shimmer-duration" | "--shimmer-color", string>;
+const THINKING_SHIMMER_STYLE: ThinkingShimmerStyle = {
+  "--shimmer-duration": `${THINKING_SHIMMER_DURATION_SECONDS}s`,
+  "--shimmer-color": "var(--color-thinking-mode)",
+};
 
 export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, className }) => {
   const [isExpanded, setIsExpanded] = useState(message.isStreaming);
@@ -105,11 +113,30 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
           )}
         >
           <span className="text-xs">
-            <Lightbulb className={cn("size-3.5", isStreaming && "animate-pulse")} />
+            {isStreaming ? (
+              <span
+                className={cn(
+                  "shimmer-surface inline-flex size-3.5 items-center justify-center rounded-[2px]",
+                  "text-thinking-mode"
+                )}
+                style={THINKING_SHIMMER_STYLE}
+                aria-hidden
+              >
+                {/* Keep the icon shimmer in lockstep with the text shimmer while streaming. */}
+                <ThinkingDots className="size-full fill-current" />
+              </span>
+            ) : (
+              <Lightbulb className="size-3.5" />
+            )}
           </span>
           <div className="flex min-w-0 items-center gap-1 truncate">
             {isStreaming ? (
-              <Shimmer colorClass="var(--color-thinking-mode)">Thinking...</Shimmer>
+              <Shimmer
+                duration={THINKING_SHIMMER_DURATION_SECONDS}
+                colorClass="var(--color-thinking-mode)"
+              >
+                Thinking...
+              </Shimmer>
             ) : hasContent ? (
               <MarkdownRenderer
                 content={summaryLine}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index 62a7c135be..696d7c7113 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1945,6 +1945,33 @@ pre code {
   -webkit-box-decoration-break: clone;
 }
 
+/* The streaming animated SVG should shimmer in sync with "Thinking..." text. */
+.shimmer-surface {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.shimmer-surface::after {
+  --shimmer-overlay: color-mix(in srgb, var(--shimmer-color, var(--color-muted-foreground)) 35%, black);
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 35%,
+    var(--shimmer-overlay) 50%,
+    transparent 65%,
+    transparent 100%
+  );
+  background-size: 300% 100%;
+  animation: shimmer-text-sweep var(--shimmer-duration, 1.4s) steps(42, end) infinite;
+  mix-blend-mode: multiply;
+}
+
 @keyframes shimmer-text-sweep {
   from {
     background-position: 100% 0;

From bb80023dd08a823fb1536d8368a6a9f215cd6d00 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 12 Feb 2026 15:10:54 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A4=96=20fix:=20move=20streaming=20SV?=
 =?UTF-8?q?G=20indicator=20to=20streaming=20status=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Revert the animated SVG from reasoning message rows.
- Add a reusable StreamingActivityIcon and use it at the start of streaming status labels.
- Apply the icon + shimmer treatment to StreamingBarrier and WorkspaceStatusIndicator streaming states.
- Keep the shared shimmer overlay utility for non-text surfaces.

---

_Generated with `mux` • Model: `openai:gpt-5.3-codex` • Thinking: `xhigh` • Cost: `.04`_

<!-- mux-attribution: model=openai:gpt-5.3-codex thinking=xhigh costs=1.04 -->
---
 .../Messages/ChatBarrier/BaseBarrier.tsx      |  7 +++-
 .../Messages/ChatBarrier/StreamingBarrier.tsx |  1 +
 .../ChatBarrier/StreamingBarrierView.tsx      | 31 +++++++++++++++-
 .../components/Messages/ReasoningMessage.tsx  | 31 +---------------
 .../components/WorkspaceStatusIndicator.tsx   | 37 +++++++++++++++++--
 .../icons/StreamingActivityIcon.tsx           | 32 ++++++++++++++++
 src/browser/styles/globals.css                |  2 +-
 7 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 src/browser/components/icons/StreamingActivityIcon.tsx

diff --git a/src/browser/components/Messages/ChatBarrier/BaseBarrier.tsx b/src/browser/components/Messages/ChatBarrier/BaseBarrier.tsx
index becde41fd5..318cc60c9a 100644
--- a/src/browser/components/Messages/ChatBarrier/BaseBarrier.tsx
+++ b/src/browser/components/Messages/ChatBarrier/BaseBarrier.tsx
@@ -2,10 +2,11 @@ import React from "react";
 import { cn } from "@/common/lib/utils";
 
 interface BaseBarrierProps {
-  text: string;
+  text: React.ReactNode;
   color: string;
   animate?: boolean;
   className?: string;
+  leadingElement?: React.ReactNode;
 }
 
 export const BaseBarrier: React.FC<BaseBarrierProps> = ({
@@ -13,6 +14,7 @@ export const BaseBarrier: React.FC<BaseBarrierProps> = ({
   color,
   animate = false,
   className,
+  leadingElement,
 }) => {
   return (
     <div
@@ -29,9 +31,10 @@ export const BaseBarrier: React.FC<BaseBarrierProps> = ({
         }}
       />
       <div
-        className="font-mono text-[10px] tracking-wide whitespace-nowrap uppercase"
+        className="flex items-center gap-1 font-mono text-[10px] tracking-wide whitespace-nowrap uppercase"
         style={{ color }}
       >
+        {leadingElement}
         {text}
       </div>
       <div
diff --git a/src/browser/components/Messages/ChatBarrier/StreamingBarrier.tsx b/src/browser/components/Messages/ChatBarrier/StreamingBarrier.tsx
index 3fe626caf3..571cd8b3c8 100644
--- a/src/browser/components/Messages/ChatBarrier/StreamingBarrier.tsx
+++ b/src/browser/components/Messages/ChatBarrier/StreamingBarrier.tsx
@@ -130,6 +130,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({ workspaceId,
       tps={tps}
       cancelText={cancelText}
       className={className}
+      isStreamingPhase={phase === "streaming"}
       hintElement={
         showCompactionHint ? (
           <button
diff --git a/src/browser/components/Messages/ChatBarrier/StreamingBarrierView.tsx b/src/browser/components/Messages/ChatBarrier/StreamingBarrierView.tsx
index 26de605784..7716b94c0a 100644
--- a/src/browser/components/Messages/ChatBarrier/StreamingBarrierView.tsx
+++ b/src/browser/components/Messages/ChatBarrier/StreamingBarrierView.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { Shimmer } from "@/browser/components/ai-elements/shimmer";
+import { StreamingActivityIcon } from "@/browser/components/icons/StreamingActivityIcon";
 import { BaseBarrier } from "./BaseBarrier";
 
 export interface StreamingBarrierViewProps {
@@ -8,6 +10,7 @@ export interface StreamingBarrierViewProps {
   tps?: number;
   cancelText: string;
   className?: string;
+  isStreamingPhase?: boolean;
   /** Optional hint element shown after status (e.g., settings link) */
   hintElement?: React.ReactNode;
 }
@@ -18,11 +21,37 @@ export interface StreamingBarrierViewProps {
  * Keep this file free of WorkspaceStore imports so it can be reused by alternate
  * frontends (e.g. the VS Code webview) without pulling in the desktop state layer.
  */
+const STREAMING_SHIMMER_DURATION_SECONDS = 2;
+
 export const StreamingBarrierView: React.FC<StreamingBarrierViewProps> = (props) => {
+  const statusText = props.isStreamingPhase ? (
+    <Shimmer
+      duration={STREAMING_SHIMMER_DURATION_SECONDS}
+      colorClass="var(--color-assistant-border)"
+    >
+      {props.statusText}
+    </Shimmer>
+  ) : (
+    props.statusText
+  );
+
+  const leadingElement = props.isStreamingPhase ? (
+    <StreamingActivityIcon
+      className="size-3"
+      shimmerColor="var(--color-assistant-border)"
+      shimmerDurationSeconds={STREAMING_SHIMMER_DURATION_SECONDS}
+    />
+  ) : undefined;
+
   return (
     <div className={`flex items-center justify-between gap-4 ${props.className ?? ""}`}>
       <div className="flex flex-1 items-center gap-2">
-        <BaseBarrier text={props.statusText} color="var(--color-assistant-border)" animate />
+        <BaseBarrier
+          text={statusText}
+          leadingElement={leadingElement}
+          color="var(--color-assistant-border)"
+          animate
+        />
         {props.hintElement}
         {props.tokenCount !== undefined && (
           <span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
diff --git a/src/browser/components/Messages/ReasoningMessage.tsx b/src/browser/components/Messages/ReasoningMessage.tsx
index ac344e53fc..01eaa8b101 100644
--- a/src/browser/components/Messages/ReasoningMessage.tsx
+++ b/src/browser/components/Messages/ReasoningMessage.tsx
@@ -5,7 +5,6 @@ import { TypewriterMarkdown } from "./TypewriterMarkdown";
 import { normalizeReasoningMarkdown } from "./MarkdownStyles";
 import { cn } from "@/common/lib/utils";
 import { Shimmer } from "../ai-elements/shimmer";
-import ThinkingDots from "@/browser/assets/animations/thinking-dots.svg?react";
 import { Lightbulb } from "lucide-react";
 
 interface ReasoningMessageProps {
@@ -14,13 +13,6 @@ interface ReasoningMessageProps {
 }
 
 const REASONING_FONT_CLASSES = "font-primary text-[12px] leading-[18px]";
-const THINKING_SHIMMER_DURATION_SECONDS = 2;
-type ThinkingShimmerStyle = React.CSSProperties &
-  Record<"--shimmer-duration" | "--shimmer-color", string>;
-const THINKING_SHIMMER_STYLE: ThinkingShimmerStyle = {
-  "--shimmer-duration": `${THINKING_SHIMMER_DURATION_SECONDS}s`,
-  "--shimmer-color": "var(--color-thinking-mode)",
-};
 
 export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, className }) => {
   const [isExpanded, setIsExpanded] = useState(message.isStreaming);
@@ -113,30 +105,11 @@ export const ReasoningMessage: React.FC<ReasoningMessageProps> = ({ message, cla
           )}
         >
           <span className="text-xs">
-            {isStreaming ? (
-              <span
-                className={cn(
-                  "shimmer-surface inline-flex size-3.5 items-center justify-center rounded-[2px]",
-                  "text-thinking-mode"
-                )}
-                style={THINKING_SHIMMER_STYLE}
-                aria-hidden
-              >
-                {/* Keep the icon shimmer in lockstep with the text shimmer while streaming. */}
-                <ThinkingDots className="size-full fill-current" />
-              </span>
-            ) : (
-              <Lightbulb className="size-3.5" />
-            )}
+            <Lightbulb className={cn("size-3.5", isStreaming && "animate-pulse")} />
           </span>
           <div className="flex min-w-0 items-center gap-1 truncate">
             {isStreaming ? (
-              <Shimmer
-                duration={THINKING_SHIMMER_DURATION_SECONDS}
-                colorClass="var(--color-thinking-mode)"
-              >
-                Thinking...
-              </Shimmer>
+              <Shimmer colorClass="var(--color-thinking-mode)">Thinking...</Shimmer>
             ) : hasContent ? (
               <MarkdownRenderer
                 content={summaryLine}
diff --git a/src/browser/components/WorkspaceStatusIndicator.tsx b/src/browser/components/WorkspaceStatusIndicator.tsx
index 4837b664c7..27e4d1f8ed 100644
--- a/src/browser/components/WorkspaceStatusIndicator.tsx
+++ b/src/browser/components/WorkspaceStatusIndicator.tsx
@@ -1,11 +1,16 @@
 import { useWorkspaceSidebarState } from "@/browser/stores/WorkspaceStore";
 import { ModelDisplay } from "@/browser/components/Messages/ModelDisplay";
+import { Shimmer } from "@/browser/components/ai-elements/shimmer";
 import { EmojiIcon } from "@/browser/components/icons/EmojiIcon";
+import { StreamingActivityIcon } from "@/browser/components/icons/StreamingActivityIcon";
 import { CircleHelp, ExternalLinkIcon, Loader2 } from "lucide-react";
 import { memo } from "react";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { Button } from "./ui/button";
 
+const STREAMING_STATUS_SHIMMER_DURATION_SECONDS = 2;
+const STREAMING_STATUS_SHIMMER_COLOR = "var(--color-muted)";
+
 export const WorkspaceStatusIndicator = memo<{
   workspaceId: string;
   fallbackModel: string;
@@ -63,23 +68,47 @@ export const WorkspaceStatusIndicator = memo<{
 
   const modelToShow = canInterrupt ? (currentModel ?? fallbackModel) : fallbackModel;
   const suffix = phase === "starting" ? "- starting..." : "- streaming...";
+  const isStreamingPhase = phase === "streaming";
 
   return (
     <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
       {phase === "starting" && (
         <Loader2 aria-hidden="true" className="h-3 w-3 shrink-0 animate-spin opacity-70" />
       )}
+      {isStreamingPhase && (
+        <StreamingActivityIcon
+          className="text-muted h-3 w-3 shrink-0"
+          shimmerColor={STREAMING_STATUS_SHIMMER_COLOR}
+          shimmerDurationSeconds={STREAMING_STATUS_SHIMMER_DURATION_SECONDS}
+        />
+      )}
       {modelToShow ? (
         <>
           <span className="min-w-0 truncate">
             <ModelDisplay modelString={modelToShow} showTooltip={false} />
           </span>
-          <span className="shrink-0 opacity-70">{suffix}</span>
+          {isStreamingPhase ? (
+            <Shimmer
+              className="shrink-0 opacity-70"
+              duration={STREAMING_STATUS_SHIMMER_DURATION_SECONDS}
+              colorClass={STREAMING_STATUS_SHIMMER_COLOR}
+            >
+              {suffix}
+            </Shimmer>
+          ) : (
+            <span className="shrink-0 opacity-70">{suffix}</span>
+          )}
         </>
+      ) : isStreamingPhase ? (
+        <Shimmer
+          className="min-w-0 truncate"
+          duration={STREAMING_STATUS_SHIMMER_DURATION_SECONDS}
+          colorClass={STREAMING_STATUS_SHIMMER_COLOR}
+        >
+          Assistant - streaming...
+        </Shimmer>
       ) : (
-        <span className="min-w-0 truncate">
-          {phase === "starting" ? "Assistant - starting..." : "Assistant - streaming..."}
-        </span>
+        <span className="min-w-0 truncate">Assistant - starting...</span>
       )}
     </div>
   );
diff --git a/src/browser/components/icons/StreamingActivityIcon.tsx b/src/browser/components/icons/StreamingActivityIcon.tsx
new file mode 100644
index 0000000000..f122377ede
--- /dev/null
+++ b/src/browser/components/icons/StreamingActivityIcon.tsx
@@ -0,0 +1,32 @@
+import ThinkingDots from "@/browser/assets/animations/thinking-dots.svg?react";
+import { cn } from "@/common/lib/utils";
+
+interface StreamingActivityIconProps {
+  className?: string;
+  shimmerColor: string;
+  shimmerDurationSeconds: number;
+}
+
+type StreamingActivityIconStyle = React.CSSProperties &
+  Record<"--shimmer-duration" | "--shimmer-color", string>;
+
+/**
+ * Animated streaming indicator used beside "...streaming" labels.
+ * The shimmer overlay shares the same duration and color as the adjacent text.
+ */
+export function StreamingActivityIcon(props: StreamingActivityIconProps) {
+  const style: StreamingActivityIconStyle = {
+    "--shimmer-duration": `${props.shimmerDurationSeconds}s`,
+    "--shimmer-color": props.shimmerColor,
+  };
+
+  return (
+    <span
+      className={cn("shimmer-surface inline-flex items-center justify-center", props.className)}
+      style={style}
+      aria-hidden
+    >
+      <ThinkingDots className="size-full fill-current" />
+    </span>
+  );
+}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index 696d7c7113..ecd5b887ac 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1945,7 +1945,7 @@ pre code {
   -webkit-box-decoration-break: clone;
 }
 
-/* The streaming animated SVG should shimmer in sync with "Thinking..." text. */
+/* Shared shimmer overlay for non-text surfaces (e.g., streaming status icons). */
 .shimmer-surface {
   position: relative;
   display: inline-flex;

From 68d212ad2cce2b5e88989db7c2781d6ce8b7baa9 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Thu, 12 Feb 2026 15:19:30 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A4=96=20fix:=20make=20streaming=20SV?=
 =?UTF-8?q?G=20animation=20run=20per=20icon=20instance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Render the uploaded SVG as raw markup and scope all internal IDs per component instance.
- Avoid duplicate ID collisions between multiple streaming indicators, which can break SMIL animate href targets.
- Keep shimmer overlay styling and explicitly size injected SVG nodes.

---

_Generated with `mux` • Model: `openai:gpt-5.3-codex` • Thinking: `xhigh` • Cost: `.04`_

<!-- mux-attribution: model=openai:gpt-5.3-codex thinking=xhigh costs=1.04 -->
---
 .../icons/StreamingActivityIcon.tsx           | 21 ++++++++++++++-----
 src/browser/styles/globals.css                |  6 ++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/browser/components/icons/StreamingActivityIcon.tsx b/src/browser/components/icons/StreamingActivityIcon.tsx
index f122377ede..3339b2dcca 100644
--- a/src/browser/components/icons/StreamingActivityIcon.tsx
+++ b/src/browser/components/icons/StreamingActivityIcon.tsx
@@ -1,5 +1,6 @@
-import ThinkingDots from "@/browser/assets/animations/thinking-dots.svg?react";
+import thinkingDotsSvg from "@/browser/assets/animations/thinking-dots.svg?raw";
 import { cn } from "@/common/lib/utils";
+import { useId } from "react";
 
 interface StreamingActivityIconProps {
   className?: string;
@@ -10,6 +11,12 @@ interface StreamingActivityIconProps {
 type StreamingActivityIconStyle = React.CSSProperties &
   Record<"--shimmer-duration" | "--shimmer-color", string>;
 
+function scopeStreamingSvgIds(svgMarkup: string, idPrefix: string): string {
+  // The uploaded SVG contains many <animate href="#..."> links. Multiple instances of
+  // identical IDs collide in the DOM, which can make later icons appear static.
+  return svgMarkup.replaceAll('"_R_G', `"${idPrefix}_R_G`).replaceAll("#_R_G", `#${idPrefix}_R_G`);
+}
+
 /**
  * Animated streaming indicator used beside "...streaming" labels.
  * The shimmer overlay shares the same duration and color as the adjacent text.
@@ -19,14 +26,18 @@ export function StreamingActivityIcon(props: StreamingActivityIconProps) {
     "--shimmer-duration": `${props.shimmerDurationSeconds}s`,
     "--shimmer-color": props.shimmerColor,
   };
+  const iconId = useId().replaceAll(":", "");
+  const scopedSvg = scopeStreamingSvgIds(thinkingDotsSvg, `mux_streaming_${iconId}`);
 
   return (
     <span
-      className={cn("shimmer-surface inline-flex items-center justify-center", props.className)}
+      className={cn(
+        "streaming-activity-icon shimmer-surface inline-flex items-center justify-center",
+        props.className
+      )}
       style={style}
       aria-hidden
-    >
-      <ThinkingDots className="size-full fill-current" />
-    </span>
+      dangerouslySetInnerHTML={{ __html: scopedSvg }}
+    />
   );
 }
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index ecd5b887ac..6210832648 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -1953,6 +1953,12 @@ pre code {
   isolation: isolate;
 }
 
+.streaming-activity-icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .shimmer-surface::after {
   --shimmer-overlay: color-mix(in srgb, var(--shimmer-color, var(--color-muted-foreground)) 35%, black);
   content: "";