Working

The shimmering status line Codex shows while a turn runs.

import { CodexTerminal } from "../components/codex-terminal";
import { CodexWorking } from "../components/codex-working";
import { CODEX_DEMO_SESSION } from "../constants/codex-demo";

export default function CodexWorkingExample() {
  return (
    <div className="w-full p-6">
      <CodexTerminal title={CODEX_DEMO_SESSION.title}>
        <CodexWorking elapsed="13s" />
      </CodexTerminal>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/codex-working

CodexWorking renders • Working (13s • esc to interrupt). A highlight sweeps across the label and the bullet blinks. Both animations use the Web Animations API, so there are no keyframes to add, and they stay off when the user prefers reduced motion. It has role="status".

CodexInterrupted is the red ■ Conversation interrupted line after a turn you stopped with Escape. Pass children to change the text.

Used in