@kitn.ai/ui 0.20.0 → 0.21.0

package/src/components/message.tsx

@@ -1,26 +1,70 @@
-import { type JSX, For, createSignal, splitProps, Show } from "solid-js";
+import { type JSX, For, Index, Switch, Match, createMemo, createSignal, splitProps, Show } from "solid-js";
 import { Tooltip } from "../ui/tooltip";
 import { Copy, Check } from "lucide-solid";
 import { cn } from "../utils/cn";
 import { Markdown } from "./markdown";
 import { Button } from "../ui/button";
 import { actionIcon, BUILTIN_ACTION_LABEL } from "../ui/action-icons";
-import type { ChatMessageAction, CustomAction, FeedbackVote } from "../elements/chat-types";
+import type { ChatMessageAction, CustomAction, FeedbackVote, MessagePart, MessageSource } from "../elements/chat-types";
 import { useChatConfig, textClass } from "../primitives/chat-config";
 import { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning";
-import { Tool, type ToolPart } from "./tool";
-import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from "./attachments";
+import { Tool } from "./tool";
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo } from "./attachments";
+import { Source, SourceTrigger, SourceContent, SourceList } from "./source";
+import { CardRenderer, type CardSchemaMap } from "./card-renderer";
+import type { CardComponentMap } from "../primitives/card-registry";
 
 // --- Message ---
 
-export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
+/** Who is speaking in a message row. This is the SEMANTIC role of the message,
+ *  not an ARIA role — see `MessageProps['role']`. */
+export type MessageRole = 'user' | 'assistant' | 'system';
+
+/** The accessible name given to a row that declares a speaker. `role="article"`
+ *  supports naming; the bare `<div>` a role-less `<Message>` renders does not,
+ *  so the label is only attached alongside that role. */
+const MESSAGE_ROLE_LABEL: Record<MessageRole, string> = {
+  user: 'User message',
+  assistant: 'Assistant message',
+  system: 'System message',
+};
+
+export interface MessageProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'role'> {
   children: JSX.Element;
+  /** Who is speaking: `'user'`, `'assistant'` or `'system'`.
+   *
+   *  This SHADOWS the inherited ARIA `role` attribute on purpose, and is the
+   *  reason `JSX.HTMLAttributes` is `Omit`ted above. Before this existed, `role`
+   *  resolved to ARIA and was spread straight onto the row, so `<Message
+   *  role="user">` shipped `role="user"` on a div — not a valid ARIA role, and a
+   *  critical axe `aria-roles` violation ("Role must be one of the valid ARIA
+   *  roles: user") on every message that used the prop. Chromium discards the
+   *  unknown token and computes `generic`, so the damage was a failed a11y audit
+   *  and a row with no accessible role or name at all, not a mis-announced one.
+   *
+   *  It is now consumed here and never reaches the DOM. What the row gets
+   *  instead is a VALID ARIA role that can carry a name — `role="article"` plus
+   *  an `aria-label` naming the speaker — and `data-role` for styling and
+   *  querying. Omit the prop and the row stays an unlabelled `<div>`, exactly as
+   *  before, so the many role-less call sites are untouched.
+   *
+   *  The trade-off: the row's ARIA role can no longer be set through this prop.
+   *  Pass `aria-label` (or any other ARIA attribute) to override the default
+   *  naming — the spread below still wins over what this computes. */
+  role?: MessageRole;
 }
 
 function Message(props: MessageProps) {
-  const [local, rest] = splitProps(props, ["children", "class"]);
+  const [local, rest] = splitProps(props, ["children", "class", "role"]);
   return (
-    <div part="row" class={cn("flex items-start gap-3", local.class)} {...rest}>
+    <div
+      part="row"
+      class={cn("flex items-start gap-3", local.class)}
+      data-role={local.role}
+      role={local.role ? 'article' : undefined}
+      aria-label={local.role ? MESSAGE_ROLE_LABEL[local.role] : undefined}
+      {...rest}
+    >
       {local.children}
     </div>
   );
@@ -29,8 +73,13 @@ function Message(props: MessageProps) {
 // --- MessageAvatar ---
 
 export interface MessageAvatarProps {
-  src: string;
-  alt: string;
+  /** Avatar image URL. Optional: with no `src` the component renders `fallback`
+   *  (initials), which is the whole point of having a fallback — requiring `src`
+   *  forced `<MessageAvatar src="" …/>` at every initials-only call site. */
+  src?: string;
+  /** Alt text for the image. Only meaningful alongside `src`; defaults to `''`
+   *  so an avatar stays decorative rather than announcing a filename. */
+  alt?: string;
   fallback?: string;
   class?: string;
 }
@@ -53,7 +102,7 @@ function MessageAvatar(props: MessageAvatarProps) {
       >
         <img
           src={props.src}
-          alt={props.alt}
+          alt={props.alt ?? ''}
           class="h-full w-full object-cover"
         />
       </Show>
@@ -253,18 +302,26 @@ function MessageActionBar(props: MessageActionBarProps) {
 // --- MessageBody ---
 
 export interface MessageBodyProps {
-  /** The message text/markdown. */
-  content: string;
-  /** Optional collapsible reasoning block, rendered above the content. */
-  reasoning?: { text: string; label?: string };
-  /** Tool-call parts, rendered above the content. */
-  tools?: ToolPart[];
-  /** Inline attachment previews, rendered above the content. */
-  attachments?: AttachmentData[];
+  /** The message's ordered parts (text, reasoning, tool, card, source, file),
+   *  rendered in a single pass in the order they appear. A run of consecutive
+   *  `source` parts renders as ONE citation row (`part="citations"`), placed
+   *  OUTSIDE the message bubble so a citation is never confused with a link the
+   *  model typed into its prose. */
+  parts: MessagePart[];
+  /** Add/override card type -> component entries, forwarded to `CardRenderer`
+   *  for `card` parts. */
+  cardTypes?: CardComponentMap;
+  /** JSON Schemas for the card types this app renders, keyed by envelope type,
+   *  forwarded to `CardRenderer` for `card` parts. The companion of `cardTypes`:
+   *  that says what DRAWS a card, this says what a VALID one looks like.
+   *  `createCardRegistry(...).validationSchemas` is exactly this shape. Without it
+   *  the kit checks its own seven built-ins and leaves your own card type
+   *  unvalidated. A schema here WINS over a built-in of the same name. */
+  cardSchemas?: CardSchemaMap;
   /** Whether this is a user message (right-aligned bubble) vs an assistant
    *  message (full-width transparent). */
   isUser: boolean;
-  /** Whether the content renders as markdown. */
+  /** Whether text parts render as markdown. */
   markdown: boolean;
   /** Action-bar entries — built-in names and/or custom descriptors. When empty
    *  the bar is not rendered. */
@@ -289,44 +346,235 @@ export interface MessageBodyProps {
   afterBody?: JSX.Element;
 }
 
+/** One render group over an ordered `parts` array. Two part types collapse runs:
+ *  consecutive `file` parts become a single `'files'` group so they share one
+ *  `<Attachments>` row (matching the pre-parts layout) instead of each opening
+ *  its own, and consecutive `source` parts become a single `'sources'` group so
+ *  the N citations one search produced are ONE wrapped row rather than N stacked
+ *  rows. Every other part is its own `'single'` group. Pure and order-preserving:
+ *  it only decides where the wrapper boundaries fall, never reorders or drops
+ *  anything, so a group sits exactly where its parts sat in `parts`. */
+export type MessagePartGroup =
+  | { kind: 'single'; part: Exclude<MessagePart, { type: 'file' } | { type: 'source' }> }
+  | { kind: 'files'; parts: Extract<MessagePart, { type: 'file' }>[] }
+  | { kind: 'sources'; parts: Extract<MessagePart, { type: 'source' }>[] };
+
+export function groupMessageParts(parts: MessagePart[]): MessagePartGroup[] {
+  const groups: MessagePartGroup[] = [];
+  for (const part of parts) {
+    if (part.type === 'file') {
+      const last = groups[groups.length - 1];
+      if (last?.kind === 'files') {
+        groups[groups.length - 1] = { kind: 'files', parts: [...last.parts, part] };
+        continue;
+      }
+      groups.push({ kind: 'files', parts: [part] });
+      continue;
+    }
+    if (part.type === 'source') {
+      const last = groups[groups.length - 1];
+      if (last?.kind === 'sources') {
+        groups[groups.length - 1] = { kind: 'sources', parts: [...last.parts, part] };
+        continue;
+      }
+      groups.push({ kind: 'sources', parts: [part] });
+      continue;
+    }
+    groups.push({ kind: 'single', part });
+  }
+  return groups;
+}
+
+/** The citation chip's label. `index` when the model numbered its citations;
+ *  otherwise `undefined` so `SourceTrigger` falls back to the domain. A source
+ *  with NO url has no domain to fall back to, so its title (then a generic word)
+ *  stands in rather than rendering an empty chip. */
+function citationLabel(s: MessageSource): string | number | undefined {
+  if (s.index !== undefined) return s.index;
+  if (s.url) return undefined;
+  return s.title || 'Source';
+}
+
+/** The hover card's headline. Every field is optional, so fall back through
+ *  title -> url -> a generic word. */
+function citationTitle(s: MessageSource): string {
+  return s.title || s.url || 'Source';
+}
+
+/** Narrow a group to one variant IN A SINGLE READ.
+ *
+ *  The render body below reads its group/part through accessors (see the
+ *  `<Index>` note in `MessageBody`), and TypeScript cannot narrow a
+ *  discriminated union across two separate accessor CALLS —
+ *  `g().kind === 'files' && g()` leaves the second call widened, because as far
+ *  as the compiler knows the two calls could return different values. So the
+ *  test and the cast happen together, on one already-read value. Returns
+ *  `false` rather than `undefined` so it reads as a plain falsy `<Match when>`. */
+function groupAs<T extends MessagePartGroup['kind']>(
+  group: MessagePartGroup,
+  kind: T,
+): Extract<MessagePartGroup, { kind: T }> | false {
+  return group.kind === kind ? (group as Extract<MessagePartGroup, { kind: T }>) : false;
+}
+
+/** The same single-read narrowing for `MessagePart`. */
+function partAs<T extends MessagePart['type']>(
+  part: MessagePart,
+  type: T,
+): Extract<MessagePart, { type: T }> | false {
+  return part.type === type ? (part as Extract<MessagePart, { type: T }>) : false;
+}
+
 /**
- * The shared message body: an optional reasoning block, tool calls, inline
- * attachments, the content bubble, and the action bar — in that order. This is
- * the single source of truth for how a message renders, consumed by `ChatThread`
+ * The shared message body: the message's `parts` rendered in a single ordered
+ * pass (text, reasoning, tool calls, generative-UI cards, citations and file
+ * attachments interleaved exactly as they appear), followed by the action bar.
+ * Runs of `source` and `file` parts each collapse into one row. This is the
+ * single source of truth for how a message renders, consumed by `ChatThread`
  * (the `<For>` over `messages`), the standalone `<kai-message>` facade, and (in
  * future) `kai-compare` for each candidate. Pure/prop-driven: all interaction
  * state (copied, feedback vote) is owned above and passed in.
  */
 function MessageBody(props: MessageBodyProps) {
+  const groups = createMemo(() => groupMessageParts(props.parts));
   return (
     <>
       {/* before-body (inject): a per-message header above everything else. */}
       <Show when={props.beforeBody}>{props.beforeBody}</Show>
-      <Show when={props.reasoning}>
-        {(r) => (
-          <Reasoning class="mb-2 w-full">
-            <ReasoningTrigger>{r().label ?? 'Reasoning'}</ReasoningTrigger>
-            <ReasoningContent markdown>{r().text}</ReasoningContent>
-          </Reasoning>
+      {/* <Index>, NOT <For>, on purpose — this is load-bearing.
+       *
+       *  A streaming message re-renders once per delta with a brand-new `parts`
+       *  array (a new reference IS the re-render signal), and
+       *  `groupMessageParts` allocates fresh wrapper objects on top of that. A
+       *  <For> is REFERENCE-keyed, so every chunk looks like an entirely new
+       *  list and every row is torn down and rebuilt. Everything the user has
+       *  done inside a row dies with it: expanding a tool panel or a reasoning
+       *  block mid-stream silently did nothing, because the disclosure opened
+       *  and was discarded microseconds later by the next token (a live probe
+       *  caught the collapsibles' `createUniqueId()` walking cl-9 -> cl-11 ->
+       *  cl-15 across three deltas).
+       *
+       *  <Index> keys by POSITION and hands each row its value as a SIGNAL, so
+       *  a row stays mounted while its content keeps updating. That is exactly
+       *  the shape of a stream: the folds behind `parts`
+       *  (appendTextPart/appendReasoningPart/upsertToolPart) only ever append
+       *  to the end or replace one part IN PLACE with the same variant — never
+       *  reorder, never change a part's type — so a part's position is a stable
+       *  identity, and a growing text/reasoning block or a tool patched from
+       *  `input-streaming` to `output-available` reaches the DOM through the
+       *  accessor instead of through a remount.
+       *
+       *  The trade-off of position-keying: splicing a part out of the MIDDLE of
+       *  a message shifts the rows after it, so their local state (an open
+       *  disclosure) stays with the position rather than following the part.
+       *  <For> got that right for a STATIC array and got streaming wrong every
+       *  single time — no consumer splices mid-message, every consumer streams.
+       *
+       *  This only works while the children read through the accessors below:
+       *  capturing `g().part` once re-freezes the row at its first delta. */}
+      <Index each={groups()}>
+        {(group) => (
+          <Switch fallback={null}>
+            <Match when={groupAs(group(), 'files')}>
+              {(g) => (
+                <Attachments variant="inline" class={props.isUser ? 'mb-2 justify-end' : 'mb-2'}>
+                  {/* Reference-keyed <For> is right HERE: the run's part objects
+                      are carried over untouched by the folds, and an attachment
+                      holds no state worth preserving. */}
+                  <For each={g().parts}>
+                    {(fp) => (
+                      <Attachment data={fp.attachment}>
+                        <AttachmentPreview />
+                        <AttachmentInfo />
+                      </Attachment>
+                    )}
+                  </For>
+                </Attachments>
+              )}
+            </Match>
+            <Match when={groupAs(group(), 'sources')}>
+              {(g) => (
+                // OUTSIDE the bubble, deliberately. A citation nested inside
+                // `MessageContent` is indistinguishable from a link the MODEL
+                // typed into its prose — which is exactly how the first version
+                // of the S12 conformance check passed while proving nothing.
+                // `SourceList` is its own container, so the row is a sibling of
+                // the content part, and `part="citations"` lets a consumer target
+                // it through the shadow boundary.
+                <SourceList part="citations" class={props.isUser ? 'justify-end' : undefined}>
+                  {/* Reference-keyed <For> is right HERE, as with files: the
+                      run's part objects are carried over untouched by the folds. */}
+                  <For each={g().parts}>
+                    {(sp) => (
+                      <Source href={sp.source.url}>
+                        <SourceTrigger label={citationLabel(sp.source)} />
+                        <SourceContent
+                          title={citationTitle(sp.source)}
+                          description={sp.source.snippet ?? ''}
+                        />
+                      </Source>
+                    )}
+                  </For>
+                </SourceList>
+              )}
+            </Match>
+            <Match when={groupAs(group(), 'single')}>
+              {(g) => {
+                // An ACCESSOR, never a captured value: the row outlives the
+                // delta that rebuilt this part, so every read below has to go
+                // through here for the new content to land. `partAs` does the
+                // type test and the narrowing cast in one read (see its note).
+                const part = () => g().part;
+                const reasoning = () => partAs(part(), 'reasoning');
+                // A reasoning part with NO text is a round-trip carrier, not
+                // something to show. Anthropic's redacted_thinking blocks carry
+                // an opaque blob with no readable text, and the block assembled
+                // at content_block_stop carries the verbatim payload the encoder
+                // must echo back. Both are empty-text parts that MUST stay in
+                // `parts` (the encoder needs them, in order) and must not render
+                // a blank disclosure.
+                const carrierOnly = () => { const r = reasoning(); return r !== false && r.text === ''; };
+                const shownReasoning = () => { const r = reasoning(); return r !== false && r.text !== '' && r; };
+                return (
+                  <Switch fallback={null}>
+                    <Match when={partAs(part(), 'text')}>
+                      {(p) => (
+                        <MessageContent
+                          part="bubble content"
+                          markdown={props.markdown}
+                          class={props.isUser
+                            ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+                            : 'bg-transparent p-0'}
+                        >
+                          {p().text}
+                        </MessageContent>
+                      )}
+                    </Match>
+                    <Match when={carrierOnly()}>{null}</Match>
+                    <Match when={shownReasoning()}>
+                      {(p) => (
+                        <Reasoning class="mb-2 w-full">
+                          <ReasoningTrigger>{p().label ?? 'Reasoning'}</ReasoningTrigger>
+                          <ReasoningContent markdown>{p().text}</ReasoningContent>
+                        </Reasoning>
+                      )}
+                    </Match>
+                    <Match when={partAs(part(), 'tool')}>
+                      {(p) => <Tool toolPart={p().tool} class="mb-2 w-full" />}
+                    </Match>
+                    <Match when={partAs(part(), 'card')}>
+                      {(p) => <CardRenderer envelope={p().envelope} types={props.cardTypes} schemas={props.cardSchemas} />}
+                    </Match>
+                    {/* No `source` match here on purpose: source parts never
+                        reach a 'single' group — they are collapsed into a
+                        'sources' run above and rendered as one citation row. */}
+                  </Switch>
+                );
+              }}
+            </Match>
+          </Switch>
         )}
-      </Show>
-      <For each={props.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
-      <Show when={props.attachments?.length}>
-        <Attachments variant="inline" class={props.isUser ? 'mb-2 justify-end' : 'mb-2'}>
-          <For each={props.attachments!}>
-            {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
-          </For>
-        </Attachments>
-      </Show>
-      <MessageContent
-        part="bubble content"
-        markdown={props.markdown}
-        class={props.isUser
-          ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
-          : 'bg-transparent p-0'}
-      >
-        {props.content}
-      </MessageContent>
+      </Index>
       <Show when={(props.actions?.length ?? 0) > 0}>
         <MessageActionBar
           actions={props.actions!}

package/src/components/reasoning.tsx

@@ -1,4 +1,4 @@
-import { type JSX, type Accessor, splitProps, createSignal, createContext, useContext, createEffect, onCleanup, Show } from 'solid-js';
+import { type JSX, type Accessor, splitProps, createSignal, createContext, useContext, createEffect, createUniqueId, onCleanup, Show } from 'solid-js';
 import { cn } from '../utils/cn';
 import { ChevronDown } from 'lucide-solid';
 import { Markdown } from './markdown';
@@ -8,6 +8,16 @@ interface ReasoningContextValue {
   isOpen: () => boolean;
   onOpenChange: (open: boolean) => void;
   disabled: () => boolean;
+  /** Id minted on the root and shared by the trigger's `aria-controls` and the
+   *  content's `id` — the same wiring `Collapsible` uses, so a screen reader can
+   *  name the panel this disclosure toggles. */
+  contentId: string;
+  /** ReasoningTrigger registers its button here on mount; the content reads it
+   *  when a panel holding focus collapses, so focus has somewhere to land. */
+  registerTrigger: (el: HTMLElement | undefined) => void;
+  /** The registered trigger. Deliberately a plain getter over a mutable
+   *  variable, NOT a signal — registration must not re-run the content effect. */
+  trigger: () => HTMLElement | undefined;
 }
 
 /** Imperative open controller, handed to a parent (the kai-reasoning facade) via
@@ -78,8 +88,24 @@ function Reasoning(props: ReasoningProps) {
   // by disabled — the facade's wireDisclosure applies disabled-gating itself.
   local.controllerRef?.({ open: isOpen, setOpen: handleOpenChange });
 
+  const contentId = createUniqueId();
+
+  // The trigger element, for the focus hand-off in ReasoningContent. Read once,
+  // at the moment a panel collapses — a signal would only add a spurious
+  // dependency to the content effect when the trigger mounts.
+  let triggerEl: HTMLElement | undefined;
+
   return (
-    <ReasoningContext.Provider value={{ isOpen, onOpenChange: handleOpenChange, disabled }}>
+    <ReasoningContext.Provider
+      value={{
+        isOpen,
+        onOpenChange: handleOpenChange,
+        disabled,
+        contentId,
+        registerTrigger: (el) => { triggerEl = el; },
+        trigger: () => triggerEl,
+      }}
+    >
       <div class={local.class}>{local.children}</div>
     </ReasoningContext.Provider>
   );
@@ -92,13 +118,34 @@ export interface ReasoningTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButt
 }
 
 function ReasoningTrigger(props: ReasoningTriggerProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
-  const { isOpen, onOpenChange, disabled } = useReasoningContext();
+  // `ref` is split out rather than left in `rest`: the trigger takes its own ref
+  // to register as the panel's focus-return target, and a spread `ref` would
+  // silently replace it. The consumer's ref is forwarded below instead.
+  const [local, rest] = splitProps(props, ['children', 'class', 'ref']);
+  const { isOpen, onOpenChange, disabled, contentId, registerTrigger } = useReasoningContext();
 
   return (
+    // The same disclosure contract as CollapsibleTrigger: an explicit
+    // `type="button"` (so a trigger inside a form never submits it),
+    // `aria-expanded` + `aria-controls` so assistive tech can read the state and
+    // find the panel, and the `data-state` / `data-expanded` / `data-closed`
+    // handles styling and tests hang off. `{...rest}` stays LAST so a consumer
+    // can still override any of them.
     <button
+      ref={(el) => {
+        registerTrigger(el);
+        // Solid hands a component's `ref` down as a callback; tolerate a raw
+        // element for the hand-written case.
+        if (typeof local.ref === 'function') (local.ref as (el: HTMLButtonElement) => void)(el);
+      }}
+      type="button"
       class={cn('flex cursor-pointer items-center gap-2 text-meta', local.class)}
       disabled={disabled() || undefined}
+      aria-expanded={isOpen()}
+      aria-controls={contentId}
+      data-expanded={isOpen() ? '' : undefined}
+      data-closed={isOpen() ? undefined : ''}
+      data-state={isOpen() ? 'open' : 'closed'}
       onClick={() => { if (!disabled()) onOpenChange(!isOpen()); }}
       {...rest}
     >
@@ -125,11 +172,29 @@ export interface ReasoningContentProps extends JSX.HTMLAttributes<HTMLDivElement
 
 function ReasoningContent(props: ReasoningContentProps) {
   const [local, rest] = splitProps(props, ['children', 'class', 'contentClass', 'markdown']);
-  const { isOpen } = useReasoningContext();
+  const { isOpen, contentId, trigger } = useReasoningContext();
 
   let contentRef: HTMLDivElement | undefined;
   let innerRef: HTMLDivElement | undefined;
 
+  /** Hand focus back to the trigger when the panel about to go inert is holding
+   *  it. Chromium keeps `activeElement` on the now-inert node for the rest of
+   *  the task and then resets the document's focus to `<body>` — so without this
+   *  a user who was inside the panel loses the focus ring entirely and their
+   *  next Tab restarts from the top. `Collapsible` has exactly this gap: it sets
+   *  `bool:inert` and never looks at where focus was. Runs BEFORE the attribute
+   *  lands, so the move is ours rather than the browser's fallback. */
+  const releaseFocus = () => {
+    if (!contentRef) return;
+    // getRootNode(), not `document`: inside the <kai-reasoning> shadow root
+    // document.activeElement only ever resolves to the HOST element.
+    const root = contentRef.getRootNode() as Document | ShadowRoot;
+    const active = root.activeElement;
+    // A disabled trigger cannot take focus; the browser then falls back to
+    // <body>, which is no worse than not trying.
+    if (active && contentRef.contains(active)) trigger()?.focus();
+  };
+
   createEffect(() => {
     if (!contentRef || !innerRef) return;
 
@@ -141,21 +206,43 @@ function ReasoningContent(props: ReasoningContentProps) {
 
     if (isOpen()) {
       contentRef.style.maxHeight = `${innerRef.scrollHeight}px`;
+      // Dropped in the same tick as the open, NOT on transitionend: the panel is
+      // interactive from the first frame, so an inert outliving the animation can
+      // never swallow the first click or Tab into it.
+      contentRef.removeAttribute('inert');
     } else {
       contentRef.style.maxHeight = '0px';
+      releaseFocus();
+      // Applied in the same tick as the collapse, again NOT on transitionend:
+      // `inert` has no visual effect of its own, so the 150ms max-height
+      // transition still runs to completion underneath it (verified in Chromium:
+      // transitionend fires and the final computed max-height is reached), while
+      // the a11y tree matches the collapsed intent immediately instead of 150ms
+      // late. setAttribute rather than the `inert` IDL property because Solid
+      // routes `inert` through Properties (el.inert = …), which jsdom does not
+      // reflect back to an attribute — the same reason Collapsible uses `bool:`.
+      contentRef.setAttribute('inert', '');
     }
 
     onCleanup(dispose);
   });
 
   return (
+    // `id` matches the trigger's `aria-controls`; `data-state` gives styling and
+    // tests an attribute handle on the panel instead of forcing them to read the
+    // animated `max-height`. `inert` while collapsed (as CollapsibleContent does)
+    // is owned by the effect above, not bound here — it has to be sequenced
+    // against the focus hand-off, and a second reactive owner would race it.
+    // `{...rest}` stays LAST so a consumer can still override.
     <div
       ref={contentRef}
+      id={contentId}
       class={cn(
         'overflow-hidden transition-[max-height] duration-150 ease-out',
         local.class
       )}
       style={{ 'max-height': '0px' }}
+      data-state={isOpen() ? 'open' : 'closed'}
       {...rest}
     >
       <div

package/src/components/response-compare-types.ts

@@ -6,6 +6,7 @@
 // isolation.
 import type { ToolPart } from './tool';
 import type { AttachmentData } from './attachments';
+import type { MessagePart } from '../elements/chat-types';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -125,3 +126,27 @@ export function isAnyStreaming(pair: ComparePair | null): boolean {
   if (!pair) return false;
   return pair.some((c) => c.streaming === true);
 }
+
+/** Map a `CompareCandidate`'s flat legacy fields (content/reasoning/tools/
+ *  attachments) into the ordered `MessagePart[]` `MessageBody` now renders.
+ *  `CompareCandidate` stays its own independent shape (it is `<kai-compare>`'s
+ *  public `data` JSON, not a `ChatMessage`). This is purely a render-time
+ *  adapter, applied at each `MessageBody` call site. Order: reasoning (the
+ *  thinking trace) → tool calls (the actions taken) → attachments (anything
+ *  produced) → the final text answer, mirroring how an assistant turn reads. */
+export function candidateToParts(candidate: CompareCandidate): MessagePart[] {
+  const parts: MessagePart[] = [];
+  if (candidate.reasoning) {
+    parts.push({ type: 'reasoning', text: candidate.reasoning.text, label: candidate.reasoning.label });
+  }
+  for (const tool of candidate.tools ?? []) {
+    parts.push({ type: 'tool', tool });
+  }
+  for (const attachment of candidate.attachments ?? []) {
+    parts.push({ type: 'file', attachment });
+  }
+  if (candidate.content) {
+    parts.push({ type: 'text', text: candidate.content });
+  }
+  return parts;
+}

package/src/components/response-compare.tsx

@@ -24,6 +24,7 @@ import {
   type CompareSelection,
   type ResponseCompareData,
   buildSelection,
+  candidateToParts,
   isAnyStreaming,
   normalizeCandidates,
 } from './response-compare-types';
@@ -37,7 +38,7 @@ export type {
   ResponseCompareData,
   CompareSelection,
 } from './response-compare-types';
-export { normalizeCandidates, buildSelection, isAnyStreaming } from './response-compare-types';
+export { normalizeCandidates, buildSelection, isAnyStreaming, candidateToParts } from './response-compare-types';
 
 export type CompareLayout = 'auto' | 'columns' | 'tabs';
 
@@ -386,10 +387,7 @@ function CompareColumn(props: ColumnProps): JSX.Element {
           when={props.candidate.streaming}
           fallback={
             <MessageBody
-              content={props.candidate.content}
-              reasoning={props.candidate.reasoning}
-              tools={props.candidate.tools}
-              attachments={props.candidate.attachments}
+              parts={candidateToParts(props.candidate)}
               isUser={false}
               markdown={true}
             />
@@ -445,10 +443,7 @@ function CollapsedWinner(props: {
         {(c) => (
           <div class="min-w-0">
             <MessageBody
-              content={c().content}
-              reasoning={c().reasoning}
-              tools={c().tools}
-              attachments={c().attachments}
+              parts={candidateToParts(c())}
               isUser={false}
               markdown={true}
             />