AI thinking card

import { AiThinkingCard } from "@/components/blocks/ai-thinking-card";

import { AiThinkingCard } from "@/components/blocks/ai-thinking-card";

export function AssistantReply({ answer }: { answer?: string }) {
  return (
    <AiThinkingCard
      title="Squad AI"
      states={["Thinking", "Reading the brief", "Drafting a reply"]}
      answer={answer}
    />
  );
}

AiThinkingCard              (card-surface + t-resize — it tweens its own height)
├── .t-stagger × 3          (mark, title, toggle — each reveals on its own mount)
├── .t-icon-swap            (one grid cell, two children cross-fading)
│   ├── LoadingState        (the syncing pill's loader — pattern="drive", sm)
│   └── icon                (Phosphor, duotone — what the dots become)
├── title | .t-think        (the state while it thinks, the title once it answers)
│   └── .t-think            (rotating status line)
│       ├── .t-think-sizer  (hidden, holds the longest state — fixes the width)
│       └── .t-think-text   (the visible line; shimmer on ::before)
├── aside                   (right of the heading line)
├── collapse toggle         (Button + caret — `collapsible`, once there is content)
├── chip                    (`[label](chip:type/id)` → hover card, via `resolveChip`)
├── .t-stream-w × n         (the answer — one span per word, or per block with `markdown`)
└── footer                  (anything under the answer)