Status

The orange spinner line while Claude works and the dim summary after a turn.

import {
  ClaudeCodeSpinner,
  ClaudeCodeTurnSummary,
} from "../components/claude-code-status";
import { ClaudeCodeTerminal } from "../components/claude-code-terminal";
import { CLAUDE_CODE_SESSION } from "../constants/claude-code-session";

const [turn] = CLAUDE_CODE_SESSION.turns;

export default function ClaudeCodeStatusExample() {
  return (
    <ClaudeCodeTerminal title="claude — status">
      <ClaudeCodeSpinner {...CLAUDE_CODE_SESSION.pending.spinner} />
      <ClaudeCodeSpinner elapsed="2s" verb="Frosting" />
      <ClaudeCodeTurnSummary {...turn.summary} />
      <ClaudeCodeTurnSummary doneAt="9:42 AM" duration="19s" />
    </ClaudeCodeTerminal>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-code-status

ClaudeCodeSpinner is the line Claude Code shows while a turn runs: an orange glyph that cycles through · ✢ ✳ ✶ ✻ ✽, the verb in orange and the elapsed time, tokens and extra details in dim parentheses. A tip prints on a ⎿ line under it. The glyph holds still with paused or when the visitor prefers reduced motion, and the root is a role="status" region.

ClaudeCodeTurnSummary is the dim ✻ Cogitated for 7s · done 9:41 AM line after a finished turn. It takes duration, doneAt and verb, which defaults to Worked.

ClaudeCodeInterrupted is the ⎿ Interrupted · What should Claude do instead? line after a turn you stopped with Escape. Change the text after the dot with hint.

Used in