From 74f381da6a615ae159d2c60b5cc73302d8262b9c Mon Sep 17 00:00:00 2001
From: Michael Buluma <1452922+buluma@users.noreply.github.com>
Date: Wed, 2 Sep 2026 06:43:49 +0300
Subject: [PATCH 1/3] feat(web): rotate a whimsical verb on the composer stop
 button

Accessible-only for now: the stop-generation button is a fixed-size
icon-only circle, so the rotating verb (Pondering, Noodling, ...) only
reaches aria-label/title, not a visible label.
---
 .../chat/ComposerPrimaryActions.tsx           |  8 ++++-
 apps/web/src/hooks/useSpinnerVerb.ts          | 30 +++++++++++++++++
 apps/web/src/lib/spinnerVerbs.test.ts         | 19 +++++++++++
 apps/web/src/lib/spinnerVerbs.ts              | 32 +++++++++++++++++++
 4 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/hooks/useSpinnerVerb.ts
 create mode 100644 apps/web/src/lib/spinnerVerbs.test.ts
 create mode 100644 apps/web/src/lib/spinnerVerbs.ts

diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
index d8626496..fc3ec47d 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
@@ -2,6 +2,7 @@ import { memo, type PointerEventHandler } from "react";
 import { ChevronDownIcon, ChevronLeftIcon } from "lucide-react";
 import { useEnvironmentIdentificationMode } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
+import { useSpinnerVerb } from "~/hooks/useSpinnerVerb";
 import { StageBackdropButtonArt, useSidebarStageBackdropVariant } from "../SidebarStageBackdrop";
 import { Button } from "../ui/button";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
@@ -80,6 +81,10 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   const stageBackdropVariant = useSidebarStageBackdropVariant(
     environmentIdentificationMode === "artwork",
   );
+  // Accessible-only flavor text (aria-label/title), not a visible label: the
+  // stop button is a fixed-size icon-only circle with no room to grow.
+  const spinnerVerb = useSpinnerVerb(isRunning);
+  const stopGenerationLabel = spinnerVerb ? `Stop ${spinnerVerb.toLowerCase()}` : "Stop generation";
 
   const renderStopGenerationButton = (insidePendingAction: boolean) => (
     <button
@@ -90,7 +95,8 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
       )}
       {...pointerFocusProps}
       onClick={onInterrupt}
-      aria-label="Stop generation"
+      aria-label={stopGenerationLabel}
+      title={stopGenerationLabel}
     >
       <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
         <rect x="2" y="2" width="8" height="8" rx="1.5" />
diff --git a/apps/web/src/hooks/useSpinnerVerb.ts b/apps/web/src/hooks/useSpinnerVerb.ts
new file mode 100644
index 00000000..a61cf88f
--- /dev/null
+++ b/apps/web/src/hooks/useSpinnerVerb.ts
@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from "react";
+import { pickRandomSpinnerVerb } from "~/lib/spinnerVerbs";
+
+const ROTATE_INTERVAL_MS = 2_500;
+
+/**
+ * Rotating whimsical verb ("Pondering", "Noodling", ...) for the duration
+ * `active` stays true. Picks a fresh verb on activation and every
+ * ROTATE_INTERVAL_MS afterward; returns null while inactive so callers don't
+ * have to special-case an idle placeholder.
+ */
+export function useSpinnerVerb(active: boolean): string | null {
+  const [verb, setVerb] = useState<string | null>(null);
+  const verbRef = useRef<string | null>(null);
+  verbRef.current = verb;
+
+  useEffect(() => {
+    if (!active) {
+      setVerb(null);
+      return;
+    }
+    setVerb((current) => current ?? pickRandomSpinnerVerb());
+    const timer = window.setInterval(() => {
+      setVerb(pickRandomSpinnerVerb(verbRef.current ?? undefined));
+    }, ROTATE_INTERVAL_MS);
+    return () => window.clearInterval(timer);
+  }, [active]);
+
+  return verb;
+}
diff --git a/apps/web/src/lib/spinnerVerbs.test.ts b/apps/web/src/lib/spinnerVerbs.test.ts
new file mode 100644
index 00000000..97f3c594
--- /dev/null
+++ b/apps/web/src/lib/spinnerVerbs.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { pickRandomSpinnerVerb, SPINNER_VERBS } from "./spinnerVerbs";
+
+describe("pickRandomSpinnerVerb", () => {
+  it("always returns one of the known verbs", () => {
+    for (let i = 0; i < 50; i++) {
+      expect(SPINNER_VERBS).toContain(pickRandomSpinnerVerb());
+    }
+  });
+
+  it("never repeats the excluded verb back-to-back", () => {
+    for (const verb of SPINNER_VERBS) {
+      for (let i = 0; i < 20; i++) {
+        expect(pickRandomSpinnerVerb(verb)).not.toBe(verb);
+      }
+    }
+  });
+});
diff --git a/apps/web/src/lib/spinnerVerbs.ts b/apps/web/src/lib/spinnerVerbs.ts
new file mode 100644
index 00000000..58849732
--- /dev/null
+++ b/apps/web/src/lib/spinnerVerbs.ts
@@ -0,0 +1,32 @@
+/**
+ * Whimsical single-word verbs shown while a thread is generating, mirroring
+ * Claude Code's CLI spinner. Kept generic (no product-specific jokes) since
+ * this ships to every helmcode user, not just one person's local config.
+ */
+export const SPINNER_VERBS: readonly string[] = [
+  "Pondering",
+  "Noodling",
+  "Marinating",
+  "Cogitating",
+  "Percolating",
+  "Ruminating",
+  "Mulling",
+  "Brewing",
+  "Simmering",
+  "Tinkering",
+  "Puzzling",
+  "Synthesizing",
+  "Deliberating",
+  "Contemplating",
+  "Scheming",
+  "Working",
+];
+
+export function pickRandomSpinnerVerb(exclude?: string): string {
+  if (SPINNER_VERBS.length <= 1) return SPINNER_VERBS[0] ?? "Working";
+  let next = SPINNER_VERBS[Math.floor(Math.random() * SPINNER_VERBS.length)];
+  while (next === exclude) {
+    next = SPINNER_VERBS[Math.floor(Math.random() * SPINNER_VERBS.length)];
+  }
+  return next ?? "Working";
+}

From 0a12120555942feec7939a8156273a0db39e04fc Mon Sep 17 00:00:00 2001
From: Michael Buluma <1452922+buluma@users.noreply.github.com>
Date: Wed, 2 Sep 2026 06:43:58 +0300
Subject: [PATCH 2/3] feat(web): show the rotating verb visibly in the composer
 footer

Wires useSpinnerVerb into ComposerFooterPrimaryActions, the wrapper that
actually renders in the live composer, next to the existing
"Preparing worktree..." label slot.
---
 apps/web/src/components/chat/ChatComposer.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 37ad39c1..47ebb3e3 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -225,6 +225,7 @@ import {
 import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
 import { searchProviderSkills } from "../../providerSkillSearch";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useSpinnerVerb } from "../../hooks/useSpinnerVerb";
 import type { ReviewCommentContext } from "../../reviewCommentContext";
 
 const runtimeModeConfig: Record<
@@ -411,6 +412,9 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
   onInterrupt: () => void;
   onImplementPlanInNewThread: () => void;
 }) {
+  // Only while actually running and not already showing the worktree-prep
+  // label, so the two never compete for the same slot.
+  const spinnerVerb = useSpinnerVerb(props.isRunning && !props.isPreparingWorktree);
   return (
     <>
       {props.activeContextWindow ? (
@@ -421,6 +425,10 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
       ) : null}
       {props.isPreparingWorktree ? (
         <span className="text-secondary-label text-xs">Preparing worktree...</span>
+      ) : spinnerVerb ? (
+        <span aria-hidden="true" className="text-secondary-label text-xs">
+          {spinnerVerb}...
+        </span>
       ) : null}
       <ComposerPrimaryActions
         compact={props.compact}

From ba107f8cfcacecf32b73eb44a896d9c976fc7052 Mon Sep 17 00:00:00 2001
From: Michael Buluma <1452922+buluma@users.noreply.github.com>
Date: Wed, 2 Sep 2026 06:49:01 +0300
Subject: [PATCH 3/3] fix(web): share one spinner verb between the footer label
 and the stop button

Each called useSpinnerVerb independently, so the visible footer text and the stop button's aria-label/title could show two different verbs at the same moment. ComposerFooterPrimaryActions now owns the hook and passes the value down.
---
 apps/web/src/components/chat/ChatComposer.tsx               | 3 +++
 apps/web/src/components/chat/ComposerPrimaryActions.test.ts | 3 +++
 apps/web/src/components/chat/ComposerPrimaryActions.tsx     | 6 ++++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 47ebb3e3..063e3497 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -442,6 +442,7 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
         isEnvironmentUnavailable={props.isEnvironmentUnavailable}
         isPreparingWorktree={props.isPreparingWorktree}
         hasSendableContent={props.hasSendableContent}
+        spinnerVerb={spinnerVerb}
         preserveComposerFocusOnPointerDown={props.preserveComposerFocusOnPointerDown ?? false}
         onPreviousPendingQuestion={props.onPreviousPendingQuestion}
         onInterrupt={props.onInterrupt}
@@ -2801,6 +2802,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                       }
                       isPreparingWorktree={false}
                       hasSendableContent={false}
+                      spinnerVerb={null}
                       preserveComposerFocusOnPointerDown
                       onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
                       onInterrupt={handleInterruptPrimaryAction}
@@ -3084,6 +3086,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     }
                     isPreparingWorktree={false}
                     hasSendableContent={false}
+                    spinnerVerb={null}
                     preserveComposerFocusOnPointerDown
                     onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
                     onInterrupt={handleInterruptPrimaryAction}
diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.test.ts b/apps/web/src/components/chat/ComposerPrimaryActions.test.ts
index 3dbcd39e..beae8319 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.test.ts
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.test.ts
@@ -37,6 +37,7 @@ function renderPendingActions(isRunning: boolean) {
       isEnvironmentUnavailable: false,
       isPreparingWorktree: false,
       hasSendableContent: false,
+      spinnerVerb: null,
       onPreviousPendingQuestion: () => {},
       onInterrupt: () => {},
       onImplementPlanInNewThread: () => {},
@@ -58,6 +59,7 @@ function renderStandaloneStop() {
       isEnvironmentUnavailable: false,
       isPreparingWorktree: false,
       hasSendableContent: false,
+      spinnerVerb: null,
       onPreviousPendingQuestion: () => {},
       onInterrupt: () => {},
       onImplementPlanInNewThread: () => {},
@@ -79,6 +81,7 @@ function renderSendButton() {
       isEnvironmentUnavailable: false,
       isPreparingWorktree: false,
       hasSendableContent: true,
+      spinnerVerb: null,
       onPreviousPendingQuestion: () => {},
       onInterrupt: () => {},
       onImplementPlanInNewThread: () => {},
diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
index fc3ec47d..9280f5f6 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
@@ -2,7 +2,6 @@ import { memo, type PointerEventHandler } from "react";
 import { ChevronDownIcon, ChevronLeftIcon } from "lucide-react";
 import { useEnvironmentIdentificationMode } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
-import { useSpinnerVerb } from "~/hooks/useSpinnerVerb";
 import { StageBackdropButtonArt, useSidebarStageBackdropVariant } from "../SidebarStageBackdrop";
 import { Button } from "../ui/button";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
@@ -28,6 +27,9 @@ interface ComposerPrimaryActionsProps {
   isEnvironmentUnavailable: boolean;
   isPreparingWorktree: boolean;
   hasSendableContent: boolean;
+  // Shares one rotating verb with the visible footer label (ComposerFooterPrimaryActions
+  // owns the hook) so the stop button's accessible name and the visible text never disagree.
+  spinnerVerb: string | null;
   preserveComposerFocusOnPointerDown?: boolean;
   onPreviousPendingQuestion: () => void;
   onInterrupt: () => void;
@@ -68,6 +70,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   isEnvironmentUnavailable,
   isPreparingWorktree,
   hasSendableContent,
+  spinnerVerb,
   preserveComposerFocusOnPointerDown = false,
   onPreviousPendingQuestion,
   onInterrupt,
@@ -83,7 +86,6 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   );
   // Accessible-only flavor text (aria-label/title), not a visible label: the
   // stop button is a fixed-size icon-only circle with no room to grow.
-  const spinnerVerb = useSpinnerVerb(isRunning);
   const stopGenerationLabel = spinnerVerb ? `Stop ${spinnerVerb.toLowerCase()}` : "Stop generation";
 
   const renderStopGenerationButton = (insidePendingAction: boolean) => (