Style stalled bubble

app/helpers/entropy_helper.rb

@@ -15,7 +15,8 @@ module EntropyHelper
     if card.last_activity_spike_at
       {
         stalledAfterDays: card.entropy.days_before_reminder,
-        lastActivitySpikeAt: card.last_activity_spike_at.iso8601
+        lastActivitySpikeAt: card.last_activity_spike_at.iso8601,
+        action: "Stalled"
       }
     end
   end

app/javascript/controllers/bubble_controller.js

@@ -56,7 +56,11 @@ export default class extends Controller {
   }
 
   #showStalled() {
-    this.#toggleDisplayedContainer(false)
+    this.entropyTopTarget.innerHTML = "Stalled for"
+    this.entropyDaysTarget.innerHTML = signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date())
+    this.entropyBottomTarget.innerHTML = "days"
+
+    this.#toggleDisplayedContainer(true)
   }
 
   #hide() {

app/views/cards/display/preview/_bubble.html.erb

@@ -25,6 +25,20 @@
   </div>
 
   <div data-bubble-target="stalled">
-    😴
+    <svg viewBox="0 0 200 100">
+      <path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
+      <text text-anchor="middle" fill="currentColor">
+        <textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
+      </text>
+    </svg>
+
+    <span class="bubble__number" data-bubble-target="entropyDays"></span>
+
+    <svg viewBox="0 0 200 100">
+      <path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
+      <text text-anchor="middle" fill="currentColor">
+        <textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></textPath>
+      </text>
+    </svg>
   </div>
 <% end %>