Thinking Indicator

The dots are three 4 px spans rotated to 0/120/240° and translated 5 px, in a
14 px box that rotates 360° every 1.6 s (linear). The label swap uses
`AnimatePresence mode="popLayout"` with y 6 px and blur 3 px over 240 ms. The
peek is `max-h-32 overflow-y-auto` with
`mask-image: linear-gradient(transparent, black 1.5rem)`, and `scrollTop` is
pinned to the bottom when the thoughts change. The pill tints ember while
thinking and goes muted when done.

- Reduced motion is read hydration-safely (server snapshot: no preference), with `MotionConfig` following it.

<!-- PEBBLE-LICENSE -->

registry/ai/thinking-indicator/thinking-indicator.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: thinking-indicator.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { AnimatePresence, MotionConfig, motion } from "motion/react";

import { cn } from "@/lib/utils";
import { ShimmerText } from "@/registry/text/shimmer-text/shimmer-text";

// Hydration-safe reduced motion: the server (and the hydration pass) render
// "no preference", then the real preference applies right after hydration.
const subscribeReduce = (onChange: () => void) => {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", onChange);
  return () => mq.removeEventListener("change", onChange);
};
const getReduce = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const useReduceMotion = () => React.useSyncExternalStore(subscribeReduce, getReduce, () => false);

export type ThinkingIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** What it is doing now, e.g. "Reading 4 sources". Swaps with a blur when it changes. */
  label: string;
  /** `thinking` shimmers; `done` settles to "Thought for 12s". */
  status?: "thinking" | "done";
  /** Seconds so far. The caller ticks it. */
  elapsed?: number;
  /** Running notes to peek at. Adds a toggle. */
  thoughts?: string;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Text for the done state; defaults to "Thought for {elapsed}". */
  doneLabel?: string;
};

export function formatSeconds(s = 0) {
  const n = Math.max(0, Math.round(s));
  return n < 60 ? `${n}s` : `${Math.floor(n / 60)}m ${String(n % 60).padStart(2, "0")}s`;
}

/** Three ember dots circling: small enough to sit inline with text. */
function Orbit({ live }: { live: boolean }) {
  const reduce = useReduceMotion();
  return (
    <motion.span
      aria-hidden
      className="relative inline-block size-3.5 shrink-0"
      animate={live && !reduce ? { rotate: 360 } : { rotate: 0 }}
      transition={
        live && !reduce ? { duration: 1.6, ease: "linear", repeat: Infinity } : { duration: 0 }
      }
    >
      {[0, 120, 240].map((a, i) => (
        <span
          key={a}
          className="absolute top-1/2 left-1/2 size-[4px] rounded-full bg-accent"
          style={{
            transform: `rotate(${a}deg) translate(5px) translate(-50%, -50%)`,
            opacity: 1 - i * 0.28,
          }}
        />
      ))}
    </motion.span>
  );
}

export function ThinkingIndicator({
  label,
  status = "thinking",
  elapsed,
  thoughts,
  defaultOpen = false,
  open: openProp,
  onOpenChange,
  doneLabel,
  className,
  ...props
}: ThinkingIndicatorProps) {
  const [inner, setInner] = React.useState(defaultOpen);
  const open = openProp ?? inner;
  const setOpen = (v: boolean) => {
    if (openProp === undefined) setInner(v);
    onOpenChange?.(v);
  };
  const reduce = useReduceMotion();
  const panelId = React.useId();
  const scroller = React.useRef<HTMLDivElement>(null);
  const done = status === "done";
  const text = done ? (doneLabel ?? `Thought for ${formatSeconds(elapsed)}`) : label;

  // Keep the newest thoughts in view while they grow.
  React.useEffect(() => {
    const el = scroller.current;
    if (el && open) el.scrollTop = el.scrollHeight;
  }, [thoughts, open]);

  const head = (
    <>
      {done ? (
        <svg viewBox="0 0 16 16" aria-hidden className="size-3.5 shrink-0 text-success-strong">
          <path
            d="m3.5 8.5 3 3 6-7"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ) : (
        <Orbit live />
      )}
      <span className="relative inline-flex min-w-0 overflow-hidden">
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span
            key={text}
            className="inline-block truncate"
            initial={{ opacity: 0, y: 6, filter: "blur(3px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -6, filter: "blur(3px)" }}
            transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
          >
            {done || reduce ? (
              <span className={done ? "text-muted-foreground" : "text-foreground"}>{text}</span>
            ) : (
              <ShimmerText duration={1.8}>{text}</ShimmerText>
            )}
          </motion.span>
        </AnimatePresence>
      </span>
      {!done && elapsed !== undefined && (
        <span className="shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums">
          {formatSeconds(elapsed)}
        </span>
      )}
      {thoughts !== undefined && (
        <svg
          viewBox="0 0 16 16"
          aria-hidden
          className={cn(
            "size-3.5 shrink-0 text-muted-foreground transition-transform duration-(--motion-base) ease-enter motion-reduce:transition-none",
            open && "rotate-180",
          )}
        >
          <path
            d="m4.5 6.5 3.5 3.5 3.5-3.5"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      )}
    </>
  );

  const headClass = cn(
    "inline-flex h-7 max-w-full items-center gap-2 rounded-full px-2.5 text-[13px] font-medium",
    !done && "bg-accent/8 ring-1 ring-accent/20",
    done && "bg-muted/60 ring-1 ring-hairline",
  );

  return (
    <MotionConfig reducedMotion={reduce ? "always" : "never"}>
      <div
        data-slot="thinking-indicator"
        data-status={status}
        aria-busy={!done || undefined}
        className={cn("flex w-full flex-col items-start gap-2", className)}
        {...props}
      >
        {thoughts !== undefined ? (
          <button
            type="button"
            aria-expanded={open}
            aria-controls={open ? panelId : undefined}
            onClick={() => setOpen(!open)}
            className={cn(
              headClass,
              "cursor-pointer transition-colors duration-(--motion-fast) hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
            )}
          >
            {head}
            <span className="sr-only">{open ? ", hide thoughts" : ", show thoughts"}</span>
          </button>
        ) : (
          <div className={headClass}>{head}</div>
        )}
        <span role="status" className="sr-only">
          {done ? text : label}
        </span>

        <AnimatePresence initial={false}>
          {thoughts !== undefined && open && (
            <motion.div
              id={panelId}
              key="peek"
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: "auto", opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={reduce ? { duration: 0 } : { duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
              className="w-full max-w-lg overflow-hidden"
            >
              <div
                ref={scroller}
                data-slot="thinking-indicator-thoughts"
                className="max-h-32 overflow-y-auto border-l-2 border-border [mask-image:linear-gradient(transparent,black_1.5rem)] py-1 pl-3 text-[13px] leading-6 whitespace-pre-line text-muted-foreground"
              >
                {thoughts}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </MotionConfig>
  );
}