Claude Thinking

1"use client";
2 
3import * as React from "react";
4 
5/**
6 * ClaudeThinking — Claude Code's "working" line.
7 *
8 * A pulsing sparkle glyph, a whimsical verb, and a live elapsed / interrupt
9 * hint. The verb carries Claude's understated shimmer: a lighter highlight
10 * drifts across the terracotta word like a gradient wave (done with
11 * background-clip: text so the DOM text stays selectable and announced). The
12 * whole line is a polite live region for screen readers.
13 */
14// Captured cycle from claude/thinking frames: · ✢ ✳ ✶ ✻ ✽ ✻ ✶ ✳ ✢
15const GLYPHS = ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
16const VERBS = [
17  "Thinking",
18  "Levitating",
19  "Schlepping",
20  "Herding",
21  "Percolating",
22  "Noodling",
23  "Conjuring",
24];
25 
26const CLAUDE = "#cd694a"; // terracotta base
27const HILITE = "#e79475"; // the highlight the wave carries
28const DIM = "#7d7d7d";
29 
30export function ClaudeThinking({
31  running = true,
32  verbs = VERBS,
33  showTokens = true,
34  className,
35}: {
36  running?: boolean;
37  verbs?: string[];
38  showTokens?: boolean;
39  className?: string;
40}) {
41  const prefersReduced = usePrefersReducedMotion();
42  const [glyph, setGlyph] = React.useState(0);
43  const [verbIdx, setVerbIdx] = React.useState(0);
44  const [secs, setSecs] = React.useState(0);
45 
46  React.useEffect(() => {
47    if (!running || prefersReduced) return;
48    const id = setInterval(() => setGlyph((g) => (g + 1) % GLYPHS.length), 110);
49    return () => clearInterval(id);
50  }, [running, prefersReduced]);
51 
52  React.useEffect(() => {
53    if (!running) return;
54    const id = setInterval(() => setSecs((s) => s + 1), 1000);
55    return () => clearInterval(id);
56  }, [running]);
57 
58  React.useEffect(() => {
59    if (!running) return;
60    // Verbs change slowly, like the real thing — not every second.
61    const id = setInterval(() => setVerbIdx((v) => (v + 1) % verbs.length), 5200);
62    return () => clearInterval(id);
63  }, [running, verbs.length]);
64 
65  if (!running) return null;
66 
67  const verb = verbs[verbIdx % verbs.length];
68  const tokens = showTokens ? ` · ↑ ${Math.max(0, secs * 137)} tokens` : "";
69 
70  return (
71    <div
72      role="status"
73      aria-live="polite"
74      className={className}
75      style={{
76        fontFamily: "var(--font-geist-mono, ui-monospace, monospace)",
77        fontSize: 13,
78        display: "flex",
79        alignItems: "center",
80        gap: 8,
81      }}
82    >
83      <style>{`
84        .cw-verb {
85// … truncated