diff --git a/apps/ui/content/docs/(root)/chat.mdx b/apps/ui/content/docs/(root)/chat.mdx
index a9b948e37..12e6f9dcd 100644
--- a/apps/ui/content/docs/(root)/chat.mdx
+++ b/apps/ui/content/docs/(root)/chat.mdx
@@ -167,14 +167,14 @@ Import components directly from their files. There is no required global chat pr
 | Area | Components | Responsibility |
 | --- | --- | --- |
 | Conversation | `ChatConversation`, `useChatScroll` | Scroll viewport, end following, jump to latest, overlay slot |
-| Message | `ChatMessage` | Incoming/outgoing row, avatar, author, grouping, actions, reactions, footer |
+| Message | `ChatMessage`, `ChatMessageTimestamp` | Incoming/outgoing row, avatar, author, grouping, actions, reactions, footer, timestamp |
 | Surfaces | `ChatMessageBubble`, `ChatBubble`, `ChatMessageLayout` | Standalone previews and custom row compositions |
-| Content | `ChatMessageText`, `ChatCollapsibleMessage`, `ChatReplyReference` | Mention emphasis, long text, quoted message navigation |
+| Content | `ChatMessageText`, `ChatMessageMarkdown`, `ChatCollapsibleMessage`, `ChatReplyReference` | Mention emphasis, Markdown prose, long text, quoted message navigation |
 | Composer | `Composer`, `ComposerInput`, `ComposerPopup`, `ComposerList`, `ComposerItem`, `ComposerSubmit` | Shared coss Composer: structured draft, send, adaptive layout, and mentions |
 | Actions | `ChatMessageActionToolbar`, `ChatReactionPicker`, `ChatReactionChip` | Reply/menu controls, emoji selection, reactor list |
 | Focused reply | `ChatReplyPreview` | Move the selected message above the composer, dim the timeline, cancel/exit |
 | Timeline | `ChatDatePill`, `ChatUnreadDivider`, `ChatJumpToLatestButton` | Sticky date markers, unread boundary, latest navigation |
-| Activity | `ChatTypingIndicator`, `ChatDeliveryIndicator` | Typing and delivery presentation |
+| Activity | `ChatTypingIndicator`, `ChatDeliveryIndicator`, `ChatMessageCaret` | Typing, delivery, and streaming presentation |
 | People | `ChatMemberList`, `ChatMemberSection`, `ChatMessageInfo` | Member rows and receipt groups with supplied actions |
 | States | `ChatEmptyState`, `ChatLoadingState`, `ChatStatusBar` | Joining, unavailable history, loading, connection feedback |
 
@@ -220,6 +220,66 @@ The toolbar reserves its width beside the bubble and appears on hover, keyboard
 
 `ChatReactionChip` is controlled through `selected`, `count`, and `onClick`; it does not update your reaction data. Supply `emoji` and an accessible `label` describing the action and count. Clicking or pressing Enter/Space toggles the reaction. With `reactorContent`, delayed hover, keyboard focus, or a long touch opens the list; also provide `reactorLabel`. The caller renders names, avatars, and a “You” marker, with a bounded scroll area for long lists. Set `animateEntrance` only for newly added chips.
 
+## Timestamps, Markdown, and streaming
+
+These parts cover replies written by an assistant or agent as well as by people. They render what you pass them: your application formats dates, parses Markdown, and owns the stream.
+
+### Timestamps
+
+<ComponentPreview name="p-chat-1" />
+
+`ChatMessageTimestamp` renders a `<time>` element. Pass the machine value as `dateTime`, either a `Date` (serialized to an ISO 8601 instant) or a string you already hold, and the visible label as children. It doesn’t format or localize the label; format it with `Intl.DateTimeFormat` or your date library. Place it in the `footer` slot, where it takes the footer’s size and color, or in a header. Add a `title` with the full date if the label is relative or short.
+
+```tsx
+<ChatMessage
+  side="incoming"
+  footer={
+    <ChatMessageTimestamp dateTime={message.createdAt}>
+      {timeFormatter.format(message.createdAt)}
+    </ChatMessageTimestamp>
+  }
+>
+  {message.text}
+</ChatMessage>
+```
+
+### Markdown
+
+<ComponentPreview name="p-chat-2" />
+
+`ChatMessageMarkdown` styles the elements your Markdown parser renders: headings, paragraphs, lists, links, inline code, code blocks, tables, block quotes, and rules. Its text uses the same size and line height as `ChatMessageText`. Chat doesn’t include a parser. Pass the parser’s React output as children, for example with `react-markdown` and `remark-gfm` for tables:
+
+```tsx
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+<ChatMessage side="incoming" bubble={false}>
+  <ChatMessageMarkdown>
+    <Markdown remarkPlugins={[remarkGfm]}>{reply.text}</Markdown>
+  </ChatMessageMarkdown>
+</ChatMessage>
+```
+
+If your parser returns an HTML string, sanitize it first, then pass it through `dangerouslySetInnerHTML`. Code blocks scroll horizontally. Tables keep their table semantics for screen readers, so they don’t scroll by themselves: wrap each table in an element through your renderer (for example a `table` component that returns `<div><table {...props} /></div>`) and that wrapper scrolls. An unwrapped wide table scrolls the whole Markdown block instead.
+
+### Streaming replies
+
+<ComponentPreview name="p-chat-3" />
+
+Set `streaming` on `ChatMessage` (or `ChatMessageContent`) while text is still arriving. It adds `data-streaming` to the content so you can style the in-progress state. Append text to the same message rather than replacing it, and keep a stable key so the row isn’t remounted.
+
+`ChatMessageCaret` is an optional end-of-text caret. Place it inside the last text block: as `ChatMessageText` children, or inside the final element your Markdown renderer produces. If it sits after a block, it lands on a line of its own, so leave it out when your renderer can’t place it. The caret takes no inline space, so showing or removing it never rewraps the text. It pulses unless the reader prefers reduced motion. Remove it when the stream ends.
+
+```tsx
+<ChatMessage side="incoming" streaming={streaming}>
+  <ChatMessageText text={reply.text}>
+    {streaming && <ChatMessageCaret />}
+  </ChatMessageText>
+</ChatMessage>
+```
+
+To keep the row from jumping when the stream finishes, render the footer from the start, for example with a “Writing…” label that becomes the timestamp. These parts don’t announce anything. `ChatConversation` uses `live="polite"` by default, which can read every appended chunk, so set `live="off"` for streamed replies and announce phase changes, such as a finished or failed reply, from one application-owned status region.
+
 ## Composer and mentions
 
 Use the shared [Composer](/ui/docs/components/composer) with a controlled `ComposerValue`, `onValueChange`, and `onSubmit`. Convert accepted drafts with `getComposerText(value).trim()` and clear them with `[]`. The minimal example uses `ComposerInput render={<textarea />}` for plain text. Mentions require the default contenteditable input.
diff --git a/apps/ui/public/r/chat.json b/apps/ui/public/r/chat.json
index f02c36b55..626ca505e 100644
--- a/apps/ui/public/r/chat.json
+++ b/apps/ui/public/r/chat.json
@@ -75,6 +75,12 @@
       "type": "registry:component",
       "target": "@components/chat/chat-message-bubble.tsx"
     },
+    {
+      "path": "registry/default/chat/chat-message-caret.tsx",
+      "content": "import type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ChatMessageCaret({\n  className,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"children\">): ReactElement {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"chat-message-caret\"\n      className={cn(\n        // Zero inline size: showing or removing the caret never rewraps text.\n        \"relative inline-block h-[1em] w-0 align-[-0.125em] after:absolute after:inset-y-0 after:start-0.5 after:w-0.5 after:rounded-full after:bg-current after:opacity-64 motion-safe:after:animate-pulse\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
+      "type": "registry:component",
+      "target": "@components/chat/chat-message-caret.tsx"
+    },
     {
       "path": "registry/default/chat/chat-message-info.tsx",
       "content": "\"use client\";\n\nimport type { ReactElement, ReactNode } from \"react\";\nimport { type ChatMemberEntry, ChatMemberSection } from \"./chat-members\";\nimport { ChatMessageFooter } from \"./chat-message-layout\";\n\nexport type ChatMessageInfoProps = {\n  message: ReactNode;\n  metadata: ReactNode;\n  groups: readonly {\n    id: string;\n    label: string;\n    icon?: ReactNode;\n    members: readonly ChatMemberEntry[];\n  }[];\n};\n\nexport function ChatMessageInfo({\n  message,\n  metadata,\n  groups,\n}: ChatMessageInfoProps): ReactElement {\n  return (\n    <div data-slot=\"chat-message-info\">\n      <div className=\"mb-7 flex flex-col items-end gap-1\">\n        <div className=\"w-fit min-w-0 max-w-[83%]\">{message}</div>\n        <ChatMessageFooter>{metadata}</ChatMessageFooter>\n      </div>\n      <div className=\"flex flex-col gap-7\">\n        {groups.map((group) => (\n          <ChatMemberSection\n            key={group.id}\n            label={group.label}\n            heading={\n              <>\n                {group.icon}\n                {group.label}\n              </>\n            }\n            members={group.members}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n",
@@ -83,19 +89,31 @@
     },
     {
       "path": "registry/default/chat/chat-message-layout.tsx",
-      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type ChatMessageLayoutProps = useRender.ComponentProps<\"article\"> & {\n  align?: \"start\" | \"end\";\n};\n\nexport function ChatMessageLayout({\n  align = \"start\",\n  className,\n  render,\n  ...props\n}: ChatMessageLayoutProps): ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"chat-message\",\n    \"data-align\": align,\n    className: cn(\n      \"group/message relative grid scroll-m-8 grid-cols-1 items-start rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring has-[>[data-slot=chat-message-avatar]]:grid-cols-[auto_minmax(0,1fr)] has-[>[data-slot=chat-message-avatar]]:gap-x-2 has-[>[data-slot=chat-message-header]]:gap-y-1\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"article\",\n    render,\n    props: mergeProps<\"article\">(defaultProps, props),\n  });\n}\n\nexport function ChatMessageAvatar({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-avatar\"\n      className={cn(\"col-start-1 row-start-2 w-7\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ChatMessageHeader({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-header\"\n      className={cn(\n        \"col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-1 px-1 font-medium text-muted-foreground text-xs group-data-[align=end]/message:justify-self-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatMessageContent({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-content\"\n      className={cn(\n        \"col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-2 flex min-w-0 flex-col gap-1 group-data-[align=end]/message:items-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatMessageFooter({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-footer\"\n      className={cn(\n        \"flex items-center gap-1.5 px-1 pt-0.5 text-[.625rem] text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type ChatMessageLayoutProps = useRender.ComponentProps<\"article\"> & {\n  align?: \"start\" | \"end\";\n};\n\nexport function ChatMessageLayout({\n  align = \"start\",\n  className,\n  render,\n  ...props\n}: ChatMessageLayoutProps): ReactElement {\n  const defaultProps = {\n    \"data-slot\": \"chat-message\",\n    \"data-align\": align,\n    className: cn(\n      \"group/message relative grid scroll-m-8 grid-cols-1 items-start rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring has-[>[data-slot=chat-message-avatar]]:grid-cols-[auto_minmax(0,1fr)] has-[>[data-slot=chat-message-avatar]]:gap-x-2 has-[>[data-slot=chat-message-header]]:gap-y-1\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"article\",\n    render,\n    props: mergeProps<\"article\">(defaultProps, props),\n  });\n}\n\nexport function ChatMessageAvatar({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-avatar\"\n      className={cn(\"col-start-1 row-start-2 w-7\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ChatMessageHeader({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-header\"\n      className={cn(\n        \"col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-1 px-1 font-medium text-muted-foreground text-xs group-data-[align=end]/message:justify-self-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type ChatMessageContentProps = ComponentProps<\"div\"> & {\n  streaming?: boolean;\n};\n\nexport function ChatMessageContent({\n  streaming = false,\n  className,\n  ...props\n}: ChatMessageContentProps): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-content\"\n      data-streaming={streaming || undefined}\n      className={cn(\n        \"col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-2 flex min-w-0 flex-col gap-1 group-data-[align=end]/message:items-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ChatMessageFooter({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-footer\"\n      className={cn(\n        \"flex items-center gap-1.5 px-1 pt-0.5 text-[.625rem] text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
       "type": "registry:component",
       "target": "@components/chat/chat-message-layout.tsx"
     },
+    {
+      "path": "registry/default/chat/chat-message-markdown.tsx",
+      "content": "import type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ChatMessageMarkdown({\n  className,\n  ...props\n}: ComponentProps<\"div\">): ReactElement {\n  return (\n    <div\n      data-slot=\"chat-message-markdown\"\n      className={cn(\n        \"min-w-0 break-words text-sm leading-[1.55] [&>:first-child]:mt-0 [&>:last-child]:mb-0\",\n        \"[&_:is(h1,h2,h3,h4,h5,h6)]:mt-4 [&_:is(h1,h2,h3,h4,h5,h6)]:mb-2 [&_:is(h1,h2,h3,h4,h5,h6)]:font-semibold [&_:is(h1,h2,h3,h4,h5,h6)]:leading-snug [&_:is(p,ul,ol,pre,blockquote,table)]:my-3 [&_h1]:text-lg [&_h2]:text-base [&_h6]:text-muted-foreground\",\n        \"[&_a:hover]:decoration-foreground [&_a]:underline [&_a]:decoration-foreground/32 [&_a]:underline-offset-2 [&_hr]:my-4 [&_strong]:font-semibold\",\n        \"[&_:is(ul,ol)]:ps-5 [&_li+li]:mt-1 [&_li>:is(ul,ol)]:mt-1 [&_li>:is(ul,ol)]:mb-0 [&_li>p]:my-0 [&_li]:marker:text-muted-foreground [&_ol>li]:marker:tabular-nums [&_ol]:list-decimal [&_ul]:list-disc\",\n        \"[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-foreground/8 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_code]:font-mono [&_code]:text-[.875em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-foreground/4 [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:leading-normal\",\n        \"[&_blockquote]:border-s-2 [&_blockquote]:ps-3 [&_blockquote]:text-muted-foreground\",\n        \"has-[>table]:overflow-x-auto [&_:has(>table)]:overflow-x-auto [&_:is(th,td):first-child]:ps-0 [&_:is(th,td):last-child]:pe-0 [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-1.5 [&_table]:border-collapse [&_tbody_tr:last-child]:border-b-0 [&_td]:align-top [&_td]:tabular-nums [&_th]:text-start [&_th]:align-bottom [&_th]:font-medium [&_tr]:border-b\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n",
+      "type": "registry:component",
+      "target": "@components/chat/chat-message-markdown.tsx"
+    },
     {
       "path": "registry/default/chat/chat-message-text.tsx",
-      "content": "import type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type ChatMessageTextProps = Omit<ComponentProps<\"p\">, \"children\"> & {\n  text: string;\n  mentions?: readonly string[];\n};\n\nexport function ChatMessageText({\n  text,\n  mentions = [],\n  className,\n  ...props\n}: ChatMessageTextProps): ReactElement {\n  const names = new Set(mentions.map((name) => `@${name}`));\n  const parts = text.split(/(@[\\p{L}\\p{N}_.-]+)/u);\n  return (\n    <p\n      className={cn(\n        \"m-0 whitespace-pre-wrap break-words text-sm leading-[1.55]\",\n        className,\n      )}\n      {...props}\n    >\n      {parts.map((part, index) => {\n        if (index > 0 && !/(?:^|\\s)$/.test(parts[index - 1] ?? \"\")) return part;\n        const mention = names.has(part) ? part : part.replace(/[.-]+$/, \"\");\n        if (!names.has(mention)) return part;\n        return (\n          <span key={`${index}-${part}`}>\n            <span className=\"font-medium\">{mention}</span>\n            {part.slice(mention.length)}\n          </span>\n        );\n      })}\n    </p>\n  );\n}\n",
+      "content": "import type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type ChatMessageTextProps = ComponentProps<\"p\"> & {\n  text: string;\n  mentions?: readonly string[];\n};\n\nexport function ChatMessageText({\n  text,\n  mentions = [],\n  children,\n  className,\n  ...props\n}: ChatMessageTextProps): ReactElement {\n  const names = new Set(mentions.map((name) => `@${name}`));\n  const parts = text.split(/(@[\\p{L}\\p{N}_.-]+)/u);\n  return (\n    <p\n      data-slot=\"chat-message-text\"\n      className={cn(\n        \"m-0 whitespace-pre-wrap break-words text-sm leading-[1.55]\",\n        className,\n      )}\n      {...props}\n    >\n      {parts.map((part, index) => {\n        if (index > 0 && !/(?:^|\\s)$/.test(parts[index - 1] ?? \"\")) return part;\n        const mention = names.has(part) ? part : part.replace(/[.-]+$/, \"\");\n        if (!names.has(mention)) return part;\n        return (\n          <span key={`${index}-${part}`}>\n            <span className=\"font-medium\">{mention}</span>\n            {part.slice(mention.length)}\n          </span>\n        );\n      })}\n      {children}\n    </p>\n  );\n}\n",
       "type": "registry:component",
       "target": "@components/chat/chat-message-text.tsx"
     },
+    {
+      "path": "registry/default/chat/chat-message-timestamp.tsx",
+      "content": "import type { ComponentProps, ReactElement } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { getChatDateTime } from \"./lib/get-chat-date-time\";\n\nexport type ChatMessageTimestampProps = Omit<\n  ComponentProps<\"time\">,\n  \"dateTime\"\n> & {\n  dateTime: Date | string;\n};\n\nexport function ChatMessageTimestamp({\n  dateTime,\n  className,\n  ...props\n}: ChatMessageTimestampProps): ReactElement {\n  return (\n    <time\n      data-slot=\"chat-message-timestamp\"\n      dateTime={getChatDateTime(dateTime)}\n      className={cn(\"whitespace-nowrap tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n",
+      "type": "registry:component",
+      "target": "@components/chat/chat-message-timestamp.tsx"
+    },
     {
       "path": "registry/default/chat/chat-message.tsx",
-      "content": "\"use client\";\n\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { ChatBubbleReactions } from \"./chat-bubble\";\nimport {\n  ChatMessageBubble,\n  type ChatMessageBubbleProps,\n} from \"./chat-message-bubble\";\nimport {\n  ChatMessageAvatar,\n  ChatMessageContent,\n  ChatMessageFooter,\n  ChatMessageHeader,\n  ChatMessageLayout,\n  type ChatMessageLayoutProps,\n} from \"./chat-message-layout\";\nimport { ChatMessageText } from \"./chat-message-text\";\n\ntype ChatMessageAnimationProps = Pick<\n  ChatMessageBubbleProps,\n  \"animateEntrance\" | \"highlighted\" | \"onAnimationComplete\"\n>;\n\nexport type ChatMessageProps = Omit<\n  ChatMessageLayoutProps,\n  \"align\" | \"children\"\n> &\n  ChatMessageAnimationProps & {\n    side: \"incoming\" | \"outgoing\";\n    author?: ReactNode;\n    avatar?: ReactNode;\n    grouped?: boolean;\n    lifted?: boolean;\n    children: ReactNode;\n    actions?: ReactNode;\n    reactions?: ReactNode;\n    footer?: ReactNode;\n    bubble?: boolean;\n    bubbleProps?: Omit<\n      ChatMessageBubbleProps,\n      \"side\" | \"firstInGroup\" | \"children\" | keyof ChatMessageAnimationProps\n    >;\n  };\n\nexport function ChatMessage({\n  side,\n  author,\n  avatar,\n  grouped = false,\n  lifted = false,\n  children,\n  actions,\n  reactions,\n  footer,\n  bubble = true,\n  bubbleProps,\n  animateEntrance,\n  highlighted,\n  onAnimationComplete,\n  ...props\n}: ChatMessageProps): ReactElement {\n  const own = side === \"outgoing\";\n  return (\n    <ChatMessageLayout align={own ? \"end\" : \"start\"} {...props}>\n      {!own && !grouped && author && (\n        <ChatMessageHeader className={lifted ? \"invisible\" : undefined}>\n          {author}\n        </ChatMessageHeader>\n      )}\n      {!own && avatar && (\n        <ChatMessageAvatar className={lifted ? \"invisible\" : undefined}>\n          {!grouped && avatar}\n        </ChatMessageAvatar>\n      )}\n      <ChatMessageContent>\n        {bubble ? (\n          <div\n            className={cn(\n              \"flex w-full min-w-0 items-center gap-2\",\n              own && \"flex-row-reverse\",\n            )}\n          >\n            <div className=\"relative min-w-0 max-w-[83%] shrink\">\n              <ChatMessageBubble\n                {...bubbleProps}\n                side={side}\n                firstInGroup={!grouped}\n                animateEntrance={animateEntrance}\n                highlighted={highlighted}\n                onAnimationComplete={onAnimationComplete}\n                className={cn(lifted && \"invisible\", bubbleProps?.className)}\n              >\n                {typeof children === \"string\" ? (\n                  <ChatMessageText text={children} />\n                ) : (\n                  children\n                )}\n              </ChatMessageBubble>\n            </div>\n            {actions}\n          </div>\n        ) : (\n          children\n        )}\n        {reactions && <ChatBubbleReactions>{reactions}</ChatBubbleReactions>}\n        {footer && <ChatMessageFooter>{footer}</ChatMessageFooter>}\n      </ChatMessageContent>\n    </ChatMessageLayout>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { ChatBubbleReactions } from \"./chat-bubble\";\nimport {\n  ChatMessageBubble,\n  type ChatMessageBubbleProps,\n} from \"./chat-message-bubble\";\nimport {\n  ChatMessageAvatar,\n  ChatMessageContent,\n  ChatMessageFooter,\n  ChatMessageHeader,\n  ChatMessageLayout,\n  type ChatMessageLayoutProps,\n} from \"./chat-message-layout\";\nimport { ChatMessageText } from \"./chat-message-text\";\n\ntype ChatMessageAnimationProps = Pick<\n  ChatMessageBubbleProps,\n  \"animateEntrance\" | \"highlighted\" | \"onAnimationComplete\"\n>;\n\nexport type ChatMessageProps = Omit<\n  ChatMessageLayoutProps,\n  \"align\" | \"children\"\n> &\n  ChatMessageAnimationProps & {\n    side: \"incoming\" | \"outgoing\";\n    author?: ReactNode;\n    avatar?: ReactNode;\n    grouped?: boolean;\n    lifted?: boolean;\n    children: ReactNode;\n    actions?: ReactNode;\n    reactions?: ReactNode;\n    footer?: ReactNode;\n    streaming?: boolean;\n    bubble?: boolean;\n    bubbleProps?: Omit<\n      ChatMessageBubbleProps,\n      \"side\" | \"firstInGroup\" | \"children\" | keyof ChatMessageAnimationProps\n    >;\n  };\n\nexport function ChatMessage({\n  side,\n  author,\n  avatar,\n  grouped = false,\n  lifted = false,\n  children,\n  actions,\n  reactions,\n  footer,\n  streaming,\n  bubble = true,\n  bubbleProps,\n  animateEntrance,\n  highlighted,\n  onAnimationComplete,\n  ...props\n}: ChatMessageProps): ReactElement {\n  const own = side === \"outgoing\";\n  return (\n    <ChatMessageLayout align={own ? \"end\" : \"start\"} {...props}>\n      {!own && !grouped && author && (\n        <ChatMessageHeader className={lifted ? \"invisible\" : undefined}>\n          {author}\n        </ChatMessageHeader>\n      )}\n      {!own && avatar && (\n        <ChatMessageAvatar className={lifted ? \"invisible\" : undefined}>\n          {!grouped && avatar}\n        </ChatMessageAvatar>\n      )}\n      <ChatMessageContent streaming={streaming}>\n        {bubble ? (\n          <div\n            className={cn(\n              \"flex w-full min-w-0 items-center gap-2\",\n              own && \"flex-row-reverse\",\n            )}\n          >\n            <div className=\"relative min-w-0 max-w-[83%] shrink\">\n              <ChatMessageBubble\n                {...bubbleProps}\n                side={side}\n                firstInGroup={!grouped}\n                animateEntrance={animateEntrance}\n                highlighted={highlighted}\n                onAnimationComplete={onAnimationComplete}\n                className={cn(lifted && \"invisible\", bubbleProps?.className)}\n              >\n                {typeof children === \"string\" ? (\n                  <ChatMessageText text={children} />\n                ) : (\n                  children\n                )}\n              </ChatMessageBubble>\n            </div>\n            {actions}\n          </div>\n        ) : (\n          children\n        )}\n        {reactions && <ChatBubbleReactions>{reactions}</ChatBubbleReactions>}\n        {footer && <ChatMessageFooter>{footer}</ChatMessageFooter>}\n      </ChatMessageContent>\n    </ChatMessageLayout>\n  );\n}\n",
       "type": "registry:component",
       "target": "@components/chat/chat-message.tsx"
     },
@@ -153,6 +171,12 @@
       "type": "registry:component",
       "target": "@components/chat/hooks/use-chat-scroll.ts"
     },
+    {
+      "path": "registry/default/chat/lib/get-chat-date-time.ts",
+      "content": "export function getChatDateTime(value: Date | string): string | undefined {\n  if (typeof value === \"string\") return value;\n  if (Number.isNaN(value.getTime())) return undefined;\n  return value.toISOString();\n}\n",
+      "type": "registry:component",
+      "target": "@components/chat/lib/get-chat-date-time.ts"
+    },
     {
       "path": "registry/default/chat/lib/split-chat-message-preview.ts",
       "content": "export function splitChatMessagePreview(\n  text: string,\n  maxPreviewLength = 500,\n): { preview: string; remainder: string | null } {\n  if (text.length <= maxPreviewLength)\n    return { preview: text, remainder: null };\n\n  const limit = Math.max(1, Math.floor(maxPreviewLength));\n  const paragraphBreak = text.lastIndexOf(\"\\n\\n\", limit);\n  let splitAt = limit;\n  if (paragraphBreak > limit / 2) {\n    splitAt = paragraphBreak;\n  } else {\n    for (let index = limit; index > 0; index--) {\n      if (/\\s/u.test(text[index] ?? \"\")) {\n        splitAt = index;\n        break;\n      }\n    }\n  }\n\n  if (typeof Intl.Segmenter === \"function\") {\n    const segments = new Intl.Segmenter(undefined, {\n      granularity: \"grapheme\",\n    }).segment(text);\n    for (const { index, segment } of segments) {\n      if (index + segment.length > splitAt) {\n        splitAt = index || segment.length;\n        break;\n      }\n    }\n  } else if (/^[\\uDC00-\\uDFFF]$/u.test(text[splitAt] ?? \"\")) {\n    splitAt = splitAt === 1 ? 2 : splitAt - 1;\n  }\n\n  return {\n    preview: text.slice(0, splitAt).trimEnd(),\n    remainder: text.slice(splitAt).trimStart() || null,\n  };\n}\n",
diff --git a/apps/ui/public/r/p-chat-1.json b/apps/ui/public/r/p-chat-1.json
new file mode 100644
index 000000000..d3e1db767
--- /dev/null
+++ b/apps/ui/public/r/p-chat-1.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-chat-1",
+  "description": "Chat messages with machine-readable timestamps in the footer",
+  "registryDependencies": [
+    "@coss/chat"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-chat-1.tsx",
+      "content": "import { ChatMessage } from \"@/registry/default/chat/chat-message\";\nimport { ChatMessageTimestamp } from \"@/registry/default/chat/chat-message-timestamp\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-4\">\n      <ChatMessage\n        side=\"incoming\"\n        author=\"Riley\"\n        footer={\n          <ChatMessageTimestamp\n            dateTime=\"2026-10-17T09:41:00Z\"\n            title=\"17 October 2026, 09:41\"\n          >\n            09:41\n          </ChatMessageTimestamp>\n        }\n      >\n        Can we move the design review to Thursday?\n      </ChatMessage>\n      <ChatMessage\n        side=\"outgoing\"\n        footer={\n          <ChatMessageTimestamp\n            dateTime=\"2026-10-17T09:43:00Z\"\n            title=\"17 October 2026, 09:43\"\n          >\n            09:43\n          </ChatMessageTimestamp>\n        }\n      >\n        Thursday works. I’ll send the new invite.\n      </ChatMessage>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+  },
+  "categories": [
+    "chat",
+    "time"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-chat-2.json b/apps/ui/public/r/p-chat-2.json
new file mode 100644
index 000000000..647e5ce0c
--- /dev/null
+++ b/apps/ui/public/r/p-chat-2.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-chat-2",
+  "description": "Assistant reply with styled Markdown headings, lists, tables, and code",
+  "registryDependencies": [
+    "@coss/chat"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-chat-2.tsx",
+      "content": "import { ChatMessage } from \"@/registry/default/chat/chat-message\";\nimport { ChatMessageMarkdown } from \"@/registry/default/chat/chat-message-markdown\";\n\nexport default function Particle() {\n  return (\n    <ChatMessage\n      side=\"incoming\"\n      author=\"Assistant\"\n      bubble={false}\n      className=\"w-full max-w-md\"\n    >\n      <ChatMessageMarkdown className=\"px-1\">\n        <h3>Interview schedule</h3>\n        <p>\n          The earliest window that works for every interviewer is{\" \"}\n          <strong>Tuesday at 10:30</strong>. Check the{\" \"}\n          <a href=\"#availability\">shared availability</a> before you send\n          invites.\n        </p>\n        <ol>\n          <li>Confirm each interviewer’s calendar</li>\n          <li>\n            Send booking links with a <code>15m</code> buffer\n          </li>\n          <li>Hold a short debrief after each call</li>\n        </ol>\n        <table>\n          <thead>\n            <tr>\n              <th>Team</th>\n              <th>Open slots</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td>Design</td>\n              <td>4</td>\n            </tr>\n            <tr>\n              <td>Engineering</td>\n              <td>7</td>\n            </tr>\n          </tbody>\n        </table>\n        <pre>\n          <code>{\"buffer: 15\\nminimumNotice: 24h\"}</code>\n        </pre>\n        <blockquote>\n          <p>Keep Tuesday morning free for focus time.</p>\n        </blockquote>\n      </ChatMessageMarkdown>\n    </ChatMessage>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md"
+  },
+  "categories": [
+    "chat",
+    "text editor"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/p-chat-3.json b/apps/ui/public/r/p-chat-3.json
new file mode 100644
index 000000000..b752d79ee
--- /dev/null
+++ b/apps/ui/public/r/p-chat-3.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-chat-3",
+  "description": "Streaming reply with a trailing caret that never shifts layout",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/chat"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-chat-3.tsx",
+      "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { ChatMessage } from \"@/registry/default/chat/chat-message\";\nimport { ChatMessageCaret } from \"@/registry/default/chat/chat-message-caret\";\nimport { ChatMessageText } from \"@/registry/default/chat/chat-message-text\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nconst reply =\n  \"Tuesday at 10:30 works for every interviewer. I’ve held the slot and added a 15-minute buffer before the next call.\";\nconst chunks = reply.match(/\\S+\\s*/g) ?? [];\n\nexport default function Particle() {\n  const [count, setCount] = useState(0);\n  const streaming = count < chunks.length;\n\n  useEffect(() => {\n    if (count >= chunks.length) return;\n    const timeout = window.setTimeout(() => setCount(count + 1), 90);\n    return () => window.clearTimeout(timeout);\n  }, [count]);\n\n  return (\n    <div className=\"flex w-full max-w-sm flex-col items-start gap-4\">\n      <ChatMessage\n        side=\"incoming\"\n        author=\"Assistant\"\n        className=\"w-full\"\n        streaming={streaming}\n        footer={streaming ? \"Writing…\" : \"Just now\"}\n      >\n        <ChatMessageText text={chunks.slice(0, count).join(\"\")}>\n          {streaming && <ChatMessageCaret />}\n        </ChatMessageText>\n      </ChatMessage>\n      <Button\n        disabled={streaming}\n        size=\"sm\"\n        variant=\"outline\"\n        onClick={() => setCount(0)}\n      >\n        <RotateCcwIcon aria-hidden=\"true\" />\n        Replay\n      </Button>\n    </div>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+  },
+  "categories": [
+    "chat",
+    "loading"
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index d72ba6d71..bd3fe5e4f 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -1058,6 +1058,11 @@
           "type": "registry:component",
           "target": "@components/chat/chat-message-bubble.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-caret.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-caret.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message-info.tsx",
           "type": "registry:component",
@@ -1068,11 +1073,21 @@
           "type": "registry:component",
           "target": "@components/chat/chat-message-layout.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-markdown.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-markdown.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message-text.tsx",
           "type": "registry:component",
           "target": "@components/chat/chat-message-text.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-timestamp.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-timestamp.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message.tsx",
           "type": "registry:component",
@@ -1123,6 +1138,11 @@
           "type": "registry:component",
           "target": "@components/chat/hooks/use-chat-scroll.ts"
         },
+        {
+          "path": "registry/default/chat/lib/get-chat-date-time.ts",
+          "type": "registry:component",
+          "target": "@components/chat/lib/get-chat-date-time.ts"
+        },
         {
           "path": "registry/default/chat/lib/split-chat-message-preview.ts",
           "type": "registry:component",
@@ -4429,6 +4449,73 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "chat",
+        "time"
+      ],
+      "description": "Chat messages with machine-readable timestamps in the footer",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+      },
+      "name": "p-chat-1",
+      "registryDependencies": [
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "chat",
+        "text editor"
+      ],
+      "description": "Assistant reply with styled Markdown headings, lists, tables, and code",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md"
+      },
+      "name": "p-chat-2",
+      "registryDependencies": [
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "chat",
+        "loading"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Streaming reply with a trailing caret that never shifts layout",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+      },
+      "name": "p-chat-3",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "checkbox"
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index d72ba6d71..bd3fe5e4f 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -1058,6 +1058,11 @@
           "type": "registry:component",
           "target": "@components/chat/chat-message-bubble.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-caret.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-caret.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message-info.tsx",
           "type": "registry:component",
@@ -1068,11 +1073,21 @@
           "type": "registry:component",
           "target": "@components/chat/chat-message-layout.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-markdown.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-markdown.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message-text.tsx",
           "type": "registry:component",
           "target": "@components/chat/chat-message-text.tsx"
         },
+        {
+          "path": "registry/default/chat/chat-message-timestamp.tsx",
+          "type": "registry:component",
+          "target": "@components/chat/chat-message-timestamp.tsx"
+        },
         {
           "path": "registry/default/chat/chat-message.tsx",
           "type": "registry:component",
@@ -1123,6 +1138,11 @@
           "type": "registry:component",
           "target": "@components/chat/hooks/use-chat-scroll.ts"
         },
+        {
+          "path": "registry/default/chat/lib/get-chat-date-time.ts",
+          "type": "registry:component",
+          "target": "@components/chat/lib/get-chat-date-time.ts"
+        },
         {
           "path": "registry/default/chat/lib/split-chat-message-preview.ts",
           "type": "registry:component",
@@ -4429,6 +4449,73 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "chat",
+        "time"
+      ],
+      "description": "Chat messages with machine-readable timestamps in the footer",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-1.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+      },
+      "name": "p-chat-1",
+      "registryDependencies": [
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "chat",
+        "text editor"
+      ],
+      "description": "Assistant reply with styled Markdown headings, lists, tables, and code",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md"
+      },
+      "name": "p-chat-2",
+      "registryDependencies": [
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
+    {
+      "categories": [
+        "chat",
+        "loading"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "description": "Streaming reply with a trailing caret that never shifts layout",
+      "files": [
+        {
+          "path": "registry/default/particles/p-chat-3.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"
+      },
+      "name": "p-chat-3",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/chat"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "checkbox"
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 6836ed672..224728ee6 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -1038,6 +1038,10 @@ export const Index: Record<string, any> = {
       path: "registry/default/chat/chat-message-bubble.tsx",
       type: "registry:component",
       target: "@components/chat/chat-message-bubble.tsx"
+    },{
+      path: "registry/default/chat/chat-message-caret.tsx",
+      type: "registry:component",
+      target: "@components/chat/chat-message-caret.tsx"
     },{
       path: "registry/default/chat/chat-message-info.tsx",
       type: "registry:component",
@@ -1046,10 +1050,18 @@ export const Index: Record<string, any> = {
       path: "registry/default/chat/chat-message-layout.tsx",
       type: "registry:component",
       target: "@components/chat/chat-message-layout.tsx"
+    },{
+      path: "registry/default/chat/chat-message-markdown.tsx",
+      type: "registry:component",
+      target: "@components/chat/chat-message-markdown.tsx"
     },{
       path: "registry/default/chat/chat-message-text.tsx",
       type: "registry:component",
       target: "@components/chat/chat-message-text.tsx"
+    },{
+      path: "registry/default/chat/chat-message-timestamp.tsx",
+      type: "registry:component",
+      target: "@components/chat/chat-message-timestamp.tsx"
     },{
       path: "registry/default/chat/chat-message.tsx",
       type: "registry:component",
@@ -1090,6 +1102,10 @@ export const Index: Record<string, any> = {
       path: "registry/default/chat/hooks/use-chat-scroll.ts",
       type: "registry:component",
       target: "@components/chat/hooks/use-chat-scroll.ts"
+    },{
+      path: "registry/default/chat/lib/get-chat-date-time.ts",
+      type: "registry:component",
+      target: "@components/chat/lib/get-chat-date-time.ts"
     },{
       path: "registry/default/chat/lib/split-chat-message-preview.ts",
       type: "registry:component",
@@ -3939,6 +3955,60 @@ export const Index: Record<string, any> = {
     categories: ["card","frame"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center"},
   },
+  "p-chat-1": {
+    name: "p-chat-1",
+    description: "Chat messages with machine-readable timestamps in the footer",
+    type: "registry:block",
+    registryDependencies: ["@coss/chat"],
+    files: [{
+      path: "registry/default/particles/p-chat-1.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-chat-1.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["chat","time"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"},
+  },
+  "p-chat-2": {
+    name: "p-chat-2",
+    description: "Assistant reply with styled Markdown headings, lists, tables, and code",
+    type: "registry:block",
+    registryDependencies: ["@coss/chat"],
+    files: [{
+      path: "registry/default/particles/p-chat-2.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-chat-2.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["chat","text editor"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md"},
+  },
+  "p-chat-3": {
+    name: "p-chat-3",
+    description: "Streaming reply with a trailing caret that never shifts layout",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/chat"],
+    files: [{
+      path: "registry/default/particles/p-chat-3.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-chat-3.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["chat","loading"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm"},
+  },
   "p-checkbox-1": {
     name: "p-checkbox-1",
     description: "Basic checkbox",
diff --git a/apps/ui/registry/default/chat/chat-message-caret.tsx b/apps/ui/registry/default/chat/chat-message-caret.tsx
new file mode 100644
index 000000000..4ca07b81a
--- /dev/null
+++ b/apps/ui/registry/default/chat/chat-message-caret.tsx
@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/registry/default/lib/utils";
+
+export function ChatMessageCaret({
+  className,
+  ...props
+}: Omit<ComponentProps<"span">, "children">): ReactElement {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="chat-message-caret"
+      className={cn(
+        // Zero inline size: showing or removing the caret never rewraps text.
+        "relative inline-block h-[1em] w-0 align-[-0.125em] after:absolute after:inset-y-0 after:start-0.5 after:w-0.5 after:rounded-full after:bg-current after:opacity-64 motion-safe:after:animate-pulse",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/ui/registry/default/chat/chat-message-layout.tsx b/apps/ui/registry/default/chat/chat-message-layout.tsx
index ea464f753..add721748 100644
--- a/apps/ui/registry/default/chat/chat-message-layout.tsx
+++ b/apps/ui/registry/default/chat/chat-message-layout.tsx
@@ -60,13 +60,19 @@ export function ChatMessageHeader({
   );
 }
 
+export type ChatMessageContentProps = ComponentProps<"div"> & {
+  streaming?: boolean;
+};
+
 export function ChatMessageContent({
+  streaming = false,
   className,
   ...props
-}: ComponentProps<"div">): ReactElement {
+}: ChatMessageContentProps): ReactElement {
   return (
     <div
       data-slot="chat-message-content"
+      data-streaming={streaming || undefined}
       className={cn(
         "col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-2 flex min-w-0 flex-col gap-1 group-data-[align=end]/message:items-end",
         className,
diff --git a/apps/ui/registry/default/chat/chat-message-markdown.tsx b/apps/ui/registry/default/chat/chat-message-markdown.tsx
new file mode 100644
index 000000000..548f6c3df
--- /dev/null
+++ b/apps/ui/registry/default/chat/chat-message-markdown.tsx
@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/registry/default/lib/utils";
+
+export function ChatMessageMarkdown({
+  className,
+  ...props
+}: ComponentProps<"div">): ReactElement {
+  return (
+    <div
+      data-slot="chat-message-markdown"
+      className={cn(
+        "min-w-0 break-words text-sm leading-[1.55] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+        "[&_:is(h1,h2,h3,h4,h5,h6)]:mt-4 [&_:is(h1,h2,h3,h4,h5,h6)]:mb-2 [&_:is(h1,h2,h3,h4,h5,h6)]:font-semibold [&_:is(h1,h2,h3,h4,h5,h6)]:leading-snug [&_:is(p,ul,ol,pre,blockquote,table)]:my-3 [&_h1]:text-lg [&_h2]:text-base [&_h6]:text-muted-foreground",
+        "[&_a:hover]:decoration-foreground [&_a]:underline [&_a]:decoration-foreground/32 [&_a]:underline-offset-2 [&_hr]:my-4 [&_strong]:font-semibold",
+        "[&_:is(ul,ol)]:ps-5 [&_li+li]:mt-1 [&_li>:is(ul,ol)]:mt-1 [&_li>:is(ul,ol)]:mb-0 [&_li>p]:my-0 [&_li]:marker:text-muted-foreground [&_ol>li]:marker:tabular-nums [&_ol]:list-decimal [&_ul]:list-disc",
+        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-foreground/8 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_code]:font-mono [&_code]:text-[.875em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-foreground/4 [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:leading-normal",
+        "[&_blockquote]:border-s-2 [&_blockquote]:ps-3 [&_blockquote]:text-muted-foreground",
+        "has-[>table]:overflow-x-auto [&_:has(>table)]:overflow-x-auto [&_:is(th,td):first-child]:ps-0 [&_:is(th,td):last-child]:pe-0 [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-1.5 [&_table]:border-collapse [&_tbody_tr:last-child]:border-b-0 [&_td]:align-top [&_td]:tabular-nums [&_th]:text-start [&_th]:align-bottom [&_th]:font-medium [&_tr]:border-b",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/ui/registry/default/chat/chat-message-text.tsx b/apps/ui/registry/default/chat/chat-message-text.tsx
index 48a6037af..9a70f5a84 100644
--- a/apps/ui/registry/default/chat/chat-message-text.tsx
+++ b/apps/ui/registry/default/chat/chat-message-text.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactElement } from "react";
 import { cn } from "@/registry/default/lib/utils";
 
-export type ChatMessageTextProps = Omit<ComponentProps<"p">, "children"> & {
+export type ChatMessageTextProps = ComponentProps<"p"> & {
   text: string;
   mentions?: readonly string[];
 };
@@ -9,6 +9,7 @@ export type ChatMessageTextProps = Omit<ComponentProps<"p">, "children"> & {
 export function ChatMessageText({
   text,
   mentions = [],
+  children,
   className,
   ...props
 }: ChatMessageTextProps): ReactElement {
@@ -16,6 +17,7 @@ export function ChatMessageText({
   const parts = text.split(/(@[\p{L}\p{N}_.-]+)/u);
   return (
     <p
+      data-slot="chat-message-text"
       className={cn(
         "m-0 whitespace-pre-wrap break-words text-sm leading-[1.55]",
         className,
@@ -33,6 +35,7 @@ export function ChatMessageText({
           </span>
         );
       })}
+      {children}
     </p>
   );
 }
diff --git a/apps/ui/registry/default/chat/chat-message-timestamp.tsx b/apps/ui/registry/default/chat/chat-message-timestamp.tsx
new file mode 100644
index 000000000..a82500364
--- /dev/null
+++ b/apps/ui/registry/default/chat/chat-message-timestamp.tsx
@@ -0,0 +1,25 @@
+import type { ComponentProps, ReactElement } from "react";
+import { cn } from "@/registry/default/lib/utils";
+import { getChatDateTime } from "./lib/get-chat-date-time";
+
+export type ChatMessageTimestampProps = Omit<
+  ComponentProps<"time">,
+  "dateTime"
+> & {
+  dateTime: Date | string;
+};
+
+export function ChatMessageTimestamp({
+  dateTime,
+  className,
+  ...props
+}: ChatMessageTimestampProps): ReactElement {
+  return (
+    <time
+      data-slot="chat-message-timestamp"
+      dateTime={getChatDateTime(dateTime)}
+      className={cn("whitespace-nowrap tabular-nums", className)}
+      {...props}
+    />
+  );
+}
diff --git a/apps/ui/registry/default/chat/chat-message.tsx b/apps/ui/registry/default/chat/chat-message.tsx
index 8c023afe3..b633923d4 100644
--- a/apps/ui/registry/default/chat/chat-message.tsx
+++ b/apps/ui/registry/default/chat/chat-message.tsx
@@ -36,6 +36,7 @@ export type ChatMessageProps = Omit<
     actions?: ReactNode;
     reactions?: ReactNode;
     footer?: ReactNode;
+    streaming?: boolean;
     bubble?: boolean;
     bubbleProps?: Omit<
       ChatMessageBubbleProps,
@@ -53,6 +54,7 @@ export function ChatMessage({
   actions,
   reactions,
   footer,
+  streaming,
   bubble = true,
   bubbleProps,
   animateEntrance,
@@ -73,7 +75,7 @@ export function ChatMessage({
           {!grouped && avatar}
         </ChatMessageAvatar>
       )}
-      <ChatMessageContent>
+      <ChatMessageContent streaming={streaming}>
         {bubble ? (
           <div
             className={cn(
diff --git a/apps/ui/registry/default/chat/lib/get-chat-date-time.ts b/apps/ui/registry/default/chat/lib/get-chat-date-time.ts
new file mode 100644
index 000000000..4a73525c0
--- /dev/null
+++ b/apps/ui/registry/default/chat/lib/get-chat-date-time.ts
@@ -0,0 +1,5 @@
+export function getChatDateTime(value: Date | string): string | undefined {
+  if (typeof value === "string") return value;
+  if (Number.isNaN(value.getTime())) return undefined;
+  return value.toISOString();
+}
diff --git a/apps/ui/registry/default/particles/p-chat-1.tsx b/apps/ui/registry/default/particles/p-chat-1.tsx
new file mode 100644
index 000000000..7e3091c0e
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-chat-1.tsx
@@ -0,0 +1,36 @@
+import { ChatMessage } from "@/registry/default/chat/chat-message";
+import { ChatMessageTimestamp } from "@/registry/default/chat/chat-message-timestamp";
+
+export default function Particle() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4">
+      <ChatMessage
+        side="incoming"
+        author="Riley"
+        footer={
+          <ChatMessageTimestamp
+            dateTime="2026-10-17T09:41:00Z"
+            title="17 October 2026, 09:41"
+          >
+            09:41
+          </ChatMessageTimestamp>
+        }
+      >
+        Can we move the design review to Thursday?
+      </ChatMessage>
+      <ChatMessage
+        side="outgoing"
+        footer={
+          <ChatMessageTimestamp
+            dateTime="2026-10-17T09:43:00Z"
+            title="17 October 2026, 09:43"
+          >
+            09:43
+          </ChatMessageTimestamp>
+        }
+      >
+        Thursday works. I’ll send the new invite.
+      </ChatMessage>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-chat-2.tsx b/apps/ui/registry/default/particles/p-chat-2.tsx
new file mode 100644
index 000000000..b48222842
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-chat-2.tsx
@@ -0,0 +1,54 @@
+import { ChatMessage } from "@/registry/default/chat/chat-message";
+import { ChatMessageMarkdown } from "@/registry/default/chat/chat-message-markdown";
+
+export default function Particle() {
+  return (
+    <ChatMessage
+      side="incoming"
+      author="Assistant"
+      bubble={false}
+      className="w-full max-w-md"
+    >
+      <ChatMessageMarkdown className="px-1">
+        <h3>Interview schedule</h3>
+        <p>
+          The earliest window that works for every interviewer is{" "}
+          <strong>Tuesday at 10:30</strong>. Check the{" "}
+          <a href="#availability">shared availability</a> before you send
+          invites.
+        </p>
+        <ol>
+          <li>Confirm each interviewer’s calendar</li>
+          <li>
+            Send booking links with a <code>15m</code> buffer
+          </li>
+          <li>Hold a short debrief after each call</li>
+        </ol>
+        <table>
+          <thead>
+            <tr>
+              <th>Team</th>
+              <th>Open slots</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Design</td>
+              <td>4</td>
+            </tr>
+            <tr>
+              <td>Engineering</td>
+              <td>7</td>
+            </tr>
+          </tbody>
+        </table>
+        <pre>
+          <code>{"buffer: 15\nminimumNotice: 24h"}</code>
+        </pre>
+        <blockquote>
+          <p>Keep Tuesday morning free for focus time.</p>
+        </blockquote>
+      </ChatMessageMarkdown>
+    </ChatMessage>
+  );
+}
diff --git a/apps/ui/registry/default/particles/p-chat-3.tsx b/apps/ui/registry/default/particles/p-chat-3.tsx
new file mode 100644
index 000000000..515159d57
--- /dev/null
+++ b/apps/ui/registry/default/particles/p-chat-3.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { RotateCcwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ChatMessage } from "@/registry/default/chat/chat-message";
+import { ChatMessageCaret } from "@/registry/default/chat/chat-message-caret";
+import { ChatMessageText } from "@/registry/default/chat/chat-message-text";
+import { Button } from "@/registry/default/ui/button";
+
+const reply =
+  "Tuesday at 10:30 works for every interviewer. I’ve held the slot and added a 15-minute buffer before the next call.";
+const chunks = reply.match(/\S+\s*/g) ?? [];
+
+export default function Particle() {
+  const [count, setCount] = useState(0);
+  const streaming = count < chunks.length;
+
+  useEffect(() => {
+    if (count >= chunks.length) return;
+    const timeout = window.setTimeout(() => setCount(count + 1), 90);
+    return () => window.clearTimeout(timeout);
+  }, [count]);
+
+  return (
+    <div className="flex w-full max-w-sm flex-col items-start gap-4">
+      <ChatMessage
+        side="incoming"
+        author="Assistant"
+        className="w-full"
+        streaming={streaming}
+        footer={streaming ? "Writing…" : "Just now"}
+      >
+        <ChatMessageText text={chunks.slice(0, count).join("")}>
+          {streaming && <ChatMessageCaret />}
+        </ChatMessageText>
+      </ChatMessage>
+      <Button
+        disabled={streaming}
+        size="sm"
+        variant="outline"
+        onClick={() => setCount(0)}
+      >
+        <RotateCcwIcon aria-hidden="true" />
+        Replay
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/ui/registry/registry-categories.ts b/apps/ui/registry/registry-categories.ts
index 8cd8eefb3..74c2fce65 100644
--- a/apps/ui/registry/registry-categories.ts
+++ b/apps/ui/registry/registry-categories.ts
@@ -18,6 +18,7 @@ export const registryCategories = [
   "button",
   "calendar",
   "card",
+  "chat",
   "checkbox",
   "checkbox group",
   "collapsible",
diff --git a/apps/ui/registry/registry-chat.ts b/apps/ui/registry/registry-chat.ts
index 4c614582a..c43589b27 100644
--- a/apps/ui/registry/registry-chat.ts
+++ b/apps/ui/registry/registry-chat.ts
@@ -66,6 +66,11 @@ export const chat: Registry["items"] = [
         type: "registry:component",
         target: "@components/chat/chat-message-bubble.tsx",
       },
+      {
+        path: "chat/chat-message-caret.tsx",
+        type: "registry:component",
+        target: "@components/chat/chat-message-caret.tsx",
+      },
       {
         path: "chat/chat-message-info.tsx",
         type: "registry:component",
@@ -76,11 +81,21 @@ export const chat: Registry["items"] = [
         type: "registry:component",
         target: "@components/chat/chat-message-layout.tsx",
       },
+      {
+        path: "chat/chat-message-markdown.tsx",
+        type: "registry:component",
+        target: "@components/chat/chat-message-markdown.tsx",
+      },
       {
         path: "chat/chat-message-text.tsx",
         type: "registry:component",
         target: "@components/chat/chat-message-text.tsx",
       },
+      {
+        path: "chat/chat-message-timestamp.tsx",
+        type: "registry:component",
+        target: "@components/chat/chat-message-timestamp.tsx",
+      },
       {
         path: "chat/chat-message.tsx",
         type: "registry:component",
@@ -131,6 +146,11 @@ export const chat: Registry["items"] = [
         type: "registry:component",
         target: "@components/chat/hooks/use-chat-scroll.ts",
       },
+      {
+        path: "chat/lib/get-chat-date-time.ts",
+        type: "registry:component",
+        target: "@components/chat/lib/get-chat-date-time.ts",
+      },
       {
         path: "chat/lib/split-chat-message-preview.ts",
         type: "registry:component",
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index bf00d6f02..a67c903c0 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -1679,6 +1679,45 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/button", "@coss/card", "@coss/empty"],
     type: "registry:block",
   },
+  {
+    categories: categories("chat", "time"),
+    description: "Chat messages with machine-readable timestamps in the footer",
+    files: [{ path: "particles/p-chat-1.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm",
+    },
+    name: "p-chat-1",
+    registryDependencies: ["@coss/chat"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("chat", "text editor"),
+    description:
+      "Assistant reply with styled Markdown headings, lists, tables, and code",
+    files: [{ path: "particles/p-chat-2.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md",
+    },
+    name: "p-chat-2",
+    registryDependencies: ["@coss/chat"],
+    type: "registry:block",
+  },
+  {
+    categories: categories("chat", "loading"),
+    dependencies: ["lucide-react"],
+    description:
+      "Streaming reply with a trailing caret that never shifts layout",
+    files: [{ path: "particles/p-chat-3.tsx", type: "registry:block" }],
+    meta: {
+      className:
+        "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-sm",
+    },
+    name: "p-chat-3",
+    registryDependencies: ["@coss/button", "@coss/chat"],
+    type: "registry:block",
+  },
   {
     categories: categories("checkbox"),
     description: "Basic checkbox",
diff --git a/apps/ui/scripts/validate-registry-deps.mts b/apps/ui/scripts/validate-registry-deps.mts
index d3294ea56..4676b3a8c 100644
--- a/apps/ui/scripts/validate-registry-deps.mts
+++ b/apps/ui/scripts/validate-registry-deps.mts
@@ -84,6 +84,12 @@ function parseImports(content: string): {
       continue;
     }
 
+    // Check if it's a chat family import (@/registry/default/chat/*)
+    if (/^@\/registry\/default\/chat\//.test(importPath)) {
+      registryDeps.add(getRegistryPackageName("chat"));
+      continue;
+    }
+
     // Check if it's already a @coss import
     if (importPath.startsWith("@coss/")) {
       // Skip @coss/utils as it's a common utility that shouldn't be treated as a dependency
diff --git a/apps/ui/tests/chat/get-chat-date-time.test.ts b/apps/ui/tests/chat/get-chat-date-time.test.ts
new file mode 100644
index 000000000..f12fdbe9f
--- /dev/null
+++ b/apps/ui/tests/chat/get-chat-date-time.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "bun:test";
+import { getChatDateTime } from "../../registry/default/chat/lib/get-chat-date-time";
+
+describe("chat timestamp machine value", () => {
+  it("serializes a Date as an ISO 8601 instant", () => {
+    expect(getChatDateTime(new Date(Date.UTC(2026, 9, 17, 8, 42)))).toBe(
+      "2026-10-17T08:42:00.000Z",
+    );
+  });
+
+  it.each([
+    "2026-10-17",
+    "2026-10-17T10:42+02:00",
+    "PT2H30M",
+  ])("passes the caller’s %s string through unchanged", (value) => {
+    expect(getChatDateTime(value)).toBe(value);
+  });
+
+  it("omits the machine value for an invalid Date instead of throwing", () => {
+    expect(getChatDateTime(new Date("not a date"))).toBeUndefined();
+  });
+});
diff --git a/packages/ui/src/chat/chat-message-caret.tsx b/packages/ui/src/chat/chat-message-caret.tsx
new file mode 100644
index 000000000..ef25cf90a
--- /dev/null
+++ b/packages/ui/src/chat/chat-message-caret.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@coss/ui/lib/utils";
+import type { ComponentProps, ReactElement } from "react";
+
+export function ChatMessageCaret({
+  className,
+  ...props
+}: Omit<ComponentProps<"span">, "children">): ReactElement {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="chat-message-caret"
+      className={cn(
+        // Zero inline size: showing or removing the caret never rewraps text.
+        "relative inline-block h-[1em] w-0 align-[-0.125em] after:absolute after:inset-y-0 after:start-0.5 after:w-0.5 after:rounded-full after:bg-current after:opacity-64 motion-safe:after:animate-pulse",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/ui/src/chat/chat-message-layout.tsx b/packages/ui/src/chat/chat-message-layout.tsx
index d17c25b69..924b982ae 100644
--- a/packages/ui/src/chat/chat-message-layout.tsx
+++ b/packages/ui/src/chat/chat-message-layout.tsx
@@ -60,13 +60,19 @@ export function ChatMessageHeader({
   );
 }
 
+export type ChatMessageContentProps = ComponentProps<"div"> & {
+  streaming?: boolean;
+};
+
 export function ChatMessageContent({
+  streaming = false,
   className,
   ...props
-}: ComponentProps<"div">): ReactElement {
+}: ChatMessageContentProps): ReactElement {
   return (
     <div
       data-slot="chat-message-content"
+      data-streaming={streaming || undefined}
       className={cn(
         "col-start-1 in-[[data-slot=chat-message]:has(>[data-slot=chat-message-avatar])]:col-start-2 row-start-2 flex min-w-0 flex-col gap-1 group-data-[align=end]/message:items-end",
         className,
diff --git a/packages/ui/src/chat/chat-message-markdown.tsx b/packages/ui/src/chat/chat-message-markdown.tsx
new file mode 100644
index 000000000..268660eac
--- /dev/null
+++ b/packages/ui/src/chat/chat-message-markdown.tsx
@@ -0,0 +1,24 @@
+import { cn } from "@coss/ui/lib/utils";
+import type { ComponentProps, ReactElement } from "react";
+
+export function ChatMessageMarkdown({
+  className,
+  ...props
+}: ComponentProps<"div">): ReactElement {
+  return (
+    <div
+      data-slot="chat-message-markdown"
+      className={cn(
+        "min-w-0 break-words text-sm leading-[1.55] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+        "[&_:is(h1,h2,h3,h4,h5,h6)]:mt-4 [&_:is(h1,h2,h3,h4,h5,h6)]:mb-2 [&_:is(h1,h2,h3,h4,h5,h6)]:font-semibold [&_:is(h1,h2,h3,h4,h5,h6)]:leading-snug [&_:is(p,ul,ol,pre,blockquote,table)]:my-3 [&_h1]:text-lg [&_h2]:text-base [&_h6]:text-muted-foreground",
+        "[&_a:hover]:decoration-foreground [&_a]:underline [&_a]:decoration-foreground/32 [&_a]:underline-offset-2 [&_hr]:my-4 [&_strong]:font-semibold",
+        "[&_:is(ul,ol)]:ps-5 [&_li+li]:mt-1 [&_li>:is(ul,ol)]:mt-1 [&_li>:is(ul,ol)]:mb-0 [&_li>p]:my-0 [&_li]:marker:text-muted-foreground [&_ol>li]:marker:tabular-nums [&_ol]:list-decimal [&_ul]:list-disc",
+        "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-foreground/8 [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_code]:font-mono [&_code]:text-[.875em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-foreground/4 [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:leading-normal",
+        "[&_blockquote]:border-s-2 [&_blockquote]:ps-3 [&_blockquote]:text-muted-foreground",
+        "has-[>table]:overflow-x-auto [&_:has(>table)]:overflow-x-auto [&_:is(th,td):first-child]:ps-0 [&_:is(th,td):last-child]:pe-0 [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-1.5 [&_table]:border-collapse [&_tbody_tr:last-child]:border-b-0 [&_td]:align-top [&_td]:tabular-nums [&_th]:text-start [&_th]:align-bottom [&_th]:font-medium [&_tr]:border-b",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/ui/src/chat/chat-message-text.tsx b/packages/ui/src/chat/chat-message-text.tsx
index 5c17e91dc..f8263679b 100644
--- a/packages/ui/src/chat/chat-message-text.tsx
+++ b/packages/ui/src/chat/chat-message-text.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@coss/ui/lib/utils";
 import type { ComponentProps, ReactElement } from "react";
 
-export type ChatMessageTextProps = Omit<ComponentProps<"p">, "children"> & {
+export type ChatMessageTextProps = ComponentProps<"p"> & {
   text: string;
   mentions?: readonly string[];
 };
@@ -9,6 +9,7 @@ export type ChatMessageTextProps = Omit<ComponentProps<"p">, "children"> & {
 export function ChatMessageText({
   text,
   mentions = [],
+  children,
   className,
   ...props
 }: ChatMessageTextProps): ReactElement {
@@ -16,6 +17,7 @@ export function ChatMessageText({
   const parts = text.split(/(@[\p{L}\p{N}_.-]+)/u);
   return (
     <p
+      data-slot="chat-message-text"
       className={cn(
         "m-0 whitespace-pre-wrap break-words text-sm leading-[1.55]",
         className,
@@ -33,6 +35,7 @@ export function ChatMessageText({
           </span>
         );
       })}
+      {children}
     </p>
   );
 }
diff --git a/packages/ui/src/chat/chat-message-timestamp.tsx b/packages/ui/src/chat/chat-message-timestamp.tsx
new file mode 100644
index 000000000..b8394ddcd
--- /dev/null
+++ b/packages/ui/src/chat/chat-message-timestamp.tsx
@@ -0,0 +1,25 @@
+import { cn } from "@coss/ui/lib/utils";
+import type { ComponentProps, ReactElement } from "react";
+import { getChatDateTime } from "./lib/get-chat-date-time";
+
+export type ChatMessageTimestampProps = Omit<
+  ComponentProps<"time">,
+  "dateTime"
+> & {
+  dateTime: Date | string;
+};
+
+export function ChatMessageTimestamp({
+  dateTime,
+  className,
+  ...props
+}: ChatMessageTimestampProps): ReactElement {
+  return (
+    <time
+      data-slot="chat-message-timestamp"
+      dateTime={getChatDateTime(dateTime)}
+      className={cn("whitespace-nowrap tabular-nums", className)}
+      {...props}
+    />
+  );
+}
diff --git a/packages/ui/src/chat/chat-message.tsx b/packages/ui/src/chat/chat-message.tsx
index be06a3686..ca851acd3 100644
--- a/packages/ui/src/chat/chat-message.tsx
+++ b/packages/ui/src/chat/chat-message.tsx
@@ -36,6 +36,7 @@ export type ChatMessageProps = Omit<
     actions?: ReactNode;
     reactions?: ReactNode;
     footer?: ReactNode;
+    streaming?: boolean;
     bubble?: boolean;
     bubbleProps?: Omit<
       ChatMessageBubbleProps,
@@ -53,6 +54,7 @@ export function ChatMessage({
   actions,
   reactions,
   footer,
+  streaming,
   bubble = true,
   bubbleProps,
   animateEntrance,
@@ -73,7 +75,7 @@ export function ChatMessage({
           {!grouped && avatar}
         </ChatMessageAvatar>
       )}
-      <ChatMessageContent>
+      <ChatMessageContent streaming={streaming}>
         {bubble ? (
           <div
             className={cn(
diff --git a/packages/ui/src/chat/lib/get-chat-date-time.ts b/packages/ui/src/chat/lib/get-chat-date-time.ts
new file mode 100644
index 000000000..4a73525c0
--- /dev/null
+++ b/packages/ui/src/chat/lib/get-chat-date-time.ts
@@ -0,0 +1,5 @@
+export function getChatDateTime(value: Date | string): string | undefined {
+  if (typeof value === "string") return value;
+  if (Number.isNaN(value.getTime())) return undefined;
+  return value.toISOString();
+}