@kitn.ai/ui 0.25.2 → 0.27.0

package/src/components/chat-thread.tsx

@@ -19,6 +19,7 @@ import type { ProseSize } from '../primitives/chat-config';
 import type { ModelOption } from '../types';
 import type { CardComponentMap } from '../primitives/card-registry';
 import type { CardSchemaMap } from './card-renderer';
+import type { JSX } from 'solid-js';
 
 export interface ChatThreadContextUsage {
   usedTokens: number;
@@ -45,6 +46,11 @@ export interface ChatThreadProps {
    *  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;
+  /** The custom-element host node to emit card events off when no `CardProvider`
+   *  is present, forwarded through `MessageBody` to `CardRenderer`. The
+   *  element facades pass their own host element so card events leave as the
+   *  bubbling `kai-card` CustomEvent. */
+  cardHostElement?: HTMLElement;
   /** Value of the input. A **string** is controlled (the host owns the text and
    *  updates it on `kai-value-change`). A **ComposerDoc** is a one-time seed that
    *  pre-populates pills; the user then edits freely. Leave unset for uncontrolled. */
@@ -73,6 +79,19 @@ export interface ChatThreadProps {
   /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
    *  `<pre>` blocks (lighter, no highlighter load). Default true. */
   codeHighlight?: boolean;
+  /** How `reasoning` parts render across the thread. `'full'` (default) is the
+   *  current collapsible-disclosure behavior; `'compact'` shows only a shimmer
+   *  loader while a reasoning part streams and nothing once it settles (no
+   *  expandable detail); `'off'` renders reasoning parts not at all. Forwarded
+   *  to every `MessageBody` as `reasoningMode`. */
+  reasoning?: 'full' | 'compact' | 'off';
+  /** Seeds the reasoning disclosure open AND keeps it tracking the stream
+   *  (open while streaming, closes when it settles): the pre-Task-19f `full`
+   *  behavior. Default false/absent: the panel starts closed (just the
+   *  "Thinking" shimmer chip) and only opens on click, the current default
+   *  (owner ruling, 2026-08-26). Meaningless when `reasoning` is `'compact'`
+   *  or `'off'`. Forwarded to every `MessageBody` as `reasoningDefaultOpen`. */
+  reasoningOpen?: boolean;
   /** Optional header title shown on the left of the header. */
   chatTitle?: string;
   /** Optional model list. When set (>1 model) a ModelSwitcher is shown in the
@@ -90,6 +109,17 @@ export interface ChatThreadProps {
   headerStart?: boolean;
   /** Whether the host has `slot="header-end"` content (right of the controls). */
   headerEnd?: boolean;
+  /** Extra content rendered in the header-end region, AFTER `slot="header-end"`.
+   *  This is a JSX escape hatch for a caller composing `ChatThread` directly as a
+   *  Solid component (no shadow-DOM host, so there is no light-DOM node to slot) —
+   *  the `kai-dock`-docked construct widget is the motivating case: it needs its
+   *  own close affordance to sit IN the header row, sharing it with the title
+   *  instead of floating as a second control with no visible relationship to the
+   *  chat surface. Renders alongside the named slot rather than replacing it, so a
+   *  real `slot="header-end"` consumer and this prop can both be present. Counts
+   *  toward `showHeader()` the same as `headerEnd`, so a construct with no title
+   *  and only this content still gets a header row to sit in. */
+  headerEndContent?: JSX.Element;
   // ── Composition slots ─────────────────────────────────────────────────────
   // Each flag below is set by the `<kai-chat>` facade when matching light-DOM
   // `slot="…"` content is projected, and gates one composition slot. Two kinds:
@@ -106,6 +136,17 @@ export interface ChatThreadProps {
   sidebar?: boolean;
   /** REPLACE: custom zero-state rendered in the message area while the thread is empty (replaces the empty message list only; the composer and its suggestions still render). */
   empty?: boolean;
+  /** REPLACE, JSX form: the empty-state content itself, for a caller composing
+   *  `ChatThread` directly as a Solid component rather than through the `<kai-chat>`
+   *  shadow-DOM boundary that `empty`/`slot="empty"` targets. Renders INSIDE this
+   *  component's own tree — so a caller passing the kit's own `<Empty>` composition
+   *  (`components/empty.tsx`) gets it fully styled by the adopted stylesheet, unlike
+   *  `slot="empty"`: that slot only ever receives LIGHT-DOM children of the shadow
+   *  HOST, and light-DOM nodes are outside the shadow root's adopted stylesheets, so
+   *  Tailwind-utility-class content projected there renders bare. Takes priority
+   *  over `empty`/`slot="empty"` when both are set — the two are alternate delivery
+   *  mechanisms for the same region, not additive like `headerEndContent`. */
+  emptyContent?: JSX.Element;
   /** REPLACE: full custom composer in place of the built-in prompt input. The
    *  projected content wires its own submit (the data-flow boundary). */
   composer?: boolean;
@@ -120,8 +161,12 @@ export interface ChatThreadProps {
   accept?: MediaTypeFilter;
   /** Files the composer refused because `accept` excluded them. */
   onAttachmentsRejected?: (rejected: RejectedAttachment[]) => void;
-  /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
-  search?: boolean;
+  /** When `false`, hides the built-in paperclip attach button. Defaults to
+   *  `true` (undeclared keeps today's behavior: attach visible), matching
+   *  `DefaultPromptInput`'s own default: only an explicit `false` hides it. */
+  attach?: boolean;
+  /** Show a web-search (Globe) button in the input toolbar; calls `onWebSearch`. */
+  webSearch?: boolean;
   /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
   voice?: boolean;
   /** Rich entity triggers. Each `{ char, kind, items }` opens a caret-anchored
@@ -140,7 +185,7 @@ export interface ChatThreadProps {
   onSuggestionClick?: (value: string) => void;
   onModelChange?: (modelId: string) => void;
   onMessageAction?: (detail: MessageActionDetail) => void;
-  onSearch?: () => void;
+  onWebSearch?: () => void;
   onVoice?: () => void;
   /** Receive the imperative controller once mounted. The kai-chat facade forwards
    *  these as element methods (focus/clear/send/scrollToBottom). */
@@ -194,6 +239,30 @@ export interface ChatThreadController {
  *  Contract: `id` must be unique per message. It already had to be — the
  *  feedback/copy state above this list is keyed by it.
  */
+/** How an ASSISTANT row aligns its parts across the column (K-D11).
+ *
+ *  `stretch`, not `start`. An assistant turn is a `flex flex-col` box, so under
+ *  `items-start` every part is a flex item with a fit-content cross size —
+ *  `min(max-content, column)`. Prose is wider than the column so a text bubble
+ *  looked right, and a generative-UI card was as wide as its widest button: the
+ *  ops-console parameters form measured 285px inside a 768px column while the
+ *  approval card beside it filled all 768. A card in a chat thread filling its
+ *  column is a fact about the medium, and no consumer can reach it — the card
+ *  element is created inside `<kai-chat>`'s shadow root.
+ *
+ *  Stretch rather than `w-full` on the cards, for two reasons: it is one lever
+ *  instead of one per card surface (the Solid `Card` root AND every `kai-*`
+ *  card host, whose shadow wrapper is `display: contents`), and stretching only
+ *  applies where the cross size is `auto`, so a part that states its own width
+ *  is untouched — `Attachments variant="grid"` stays `w-fit`. `Tool` and
+ *  `Reasoning` already asked for `w-full` explicitly; this is the same
+ *  intention, applied once.
+ *
+ *  USER rows keep `items-end`: their bubble is `max-w-[85%]` and right aligned,
+ *  and stretching it would break both.
+ */
+const ASSISTANT_ALIGN = 'items-stretch';
+
 export function ChatThread(props: ChatThreadProps) {
   const outer = useChatConfig();
   const reveal = () => (props.actionsReveal === 'hover' ? 'hover' : 'always');
@@ -228,7 +297,7 @@ export function ChatThread(props: ChatThreadProps) {
     if ((props.suggestionMode ?? 'submit') === 'fill') { handleChange(v); props.onSuggestionClick?.(v); }
     else { props.onSubmit?.({ value: v, attachments: attachments() }); afterSubmit(); }
   };
-  const showHeader = () => !!(props.chatTitle || props.models || props.context || props.headerStart || props.headerEnd);
+  const showHeader = () => !!(props.chatTitle || props.models || props.context || props.headerStart || props.headerEnd || props.headerEndContent);
   // Suggestions are conversation starters: show only on an empty thread unless
   // the host opts into persisting them.
   const visibleSuggestions = () =>
@@ -304,6 +373,11 @@ export function ChatThread(props: ChatThreadProps) {
                     {/* Consumer-injected trailing controls (share, settings, …).
                         Projects light-DOM `slot="header-end"` children of <kai-chat>. */}
                     <slot name="header-end" />
+                    {/* JSX escape hatch for a Solid-composed caller with no shadow-DOM
+                        host to slot into (see the prop doc) — a docked widget's own
+                        close affordance is the motivating case, sharing this row with
+                        the title instead of floating as an unrelated second control. */}
+                    {props.headerEndContent}
                   </div>
                 </header>
               </Show>
@@ -314,11 +388,15 @@ export function ChatThread(props: ChatThreadProps) {
           <div class="relative flex-1 overflow-hidden">
             <ChatContainer class="h-full px-4 py-3">
               <ChatContainerContent class="mx-auto w-full max-w-3xl space-y-4">
-                {/* REPLACE — custom empty-state slot, shown only while the thread is
+                {/* REPLACE — custom empty-state content, shown only while the thread is
                     empty. The component still owns WHEN it shows (data state); the
-                    consumer owns WHAT it looks like. */}
-                <Show when={props.empty && props.messages.length === 0}>
-                  <slot name="empty" />
+                    consumer owns WHAT it looks like. `emptyContent` (JSX, rendered
+                    in-tree and fully styled) wins over `empty`/`slot="empty"`
+                    (light-DOM projection) when both are set — see the prop doc. */}
+                <Show when={(props.empty || props.emptyContent) && props.messages.length === 0}>
+                  <Show when={props.emptyContent} fallback={<slot name="empty" />}>
+                    {props.emptyContent}
+                  </Show>
                 </Show>
                 {/* Keyed by message id (see the note above this component), so a
                     streaming delta updates the row instead of replacing it. */}
@@ -335,8 +413,19 @@ export function ChatThread(props: ChatThreadProps) {
                         const body = (
                           <MessageBody
                             parts={m().parts}
+                            /* F-21: streaming-ness = the thread's ONE existing
+                               loading signal + being the last message and an
+                               assistant turn. No second streaming source. The
+                               reasoning disclosure no longer auto-opens on it
+                               by default (Task 19f, owner ruling 2026-08-26) —
+                               only the trigger's shimmer reflects streaming
+                               unless `reasoningOpen` opts back in. */
+                            isStreaming={props.loading === true && m().role === 'assistant' && i() === props.messages.length - 1}
+                            reasoningMode={props.reasoning}
+                            reasoningDefaultOpen={props.reasoningOpen}
                             cardTypes={props.cardTypes}
                             cardSchemas={props.cardSchemas}
+                            cardHostElement={props.cardHostElement}
                             isUser={m().role === 'user'}
                             markdown={m().role === 'assistant'}
                             actions={m().actions}
@@ -356,7 +445,7 @@ export function ChatThread(props: ChatThreadProps) {
                           <Show
                             when={m().avatar}
                             fallback={
-                              <Message role={m().role} class={`${rowGroup()}${m().role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}`}>
+                              <Message role={m().role} class={`${rowGroup()}${m().role === 'user' ? 'flex-col items-end' : `flex-col ${ASSISTANT_ALIGN}`}`}>
                                 {body}
                               </Message>
                             }
@@ -364,7 +453,7 @@ export function ChatThread(props: ChatThreadProps) {
                             {(av) => (
                               <Message role={m().role} class={rowGroup()}>
                                 <MessageAvatar src={av().src ?? ''} alt={av().alt ?? ''} fallback={av().fallback} />
-                                <div class={`flex min-w-0 flex-1 flex-col ${m().role === 'user' ? 'items-end' : 'items-start'}`}>
+                                <div class={`flex min-w-0 flex-1 flex-col ${m().role === 'user' ? 'items-end' : ASSISTANT_ALIGN}`}>
                                   {body}
                                 </div>
                               </Message>
@@ -379,7 +468,10 @@ export function ChatThread(props: ChatThreadProps) {
               </ChatContainerContent>
               <Show when={showScrollButton()}>
                 <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
-                  <ScrollButton class="shadow-sm" />
+                  {/* The button now owns its elevation (kai-elevation); a `shadow-sm`
+                      here would set box-shadow a second time and the winner would
+                      be stylesheet order, not this call site. */}
+                  <ScrollButton />
                 </div>
               </Show>
             </ChatContainer>
@@ -401,11 +493,11 @@ export function ChatThread(props: ChatThreadProps) {
                     value={current()} placeholder={props.placeholder} loading={props.loading === true}
                     suggestions={visibleSuggestions()} attachments={attachments()}
                     accept={props.accept} onAttachmentsRejected={props.onAttachmentsRejected}
-                    search={props.search === true} voice={props.voice === true}
+                    attach={props.attach} webSearch={props.webSearch === true} voice={props.voice === true}
                     triggers={props.triggers} kindIcons={props.kindIcons}
                     onValueChange={handleChange} onSubmit={handleSubmit} onSuggestionClick={handleSuggestionClick}
                     onAttachmentsChange={(a) => { setAttachments(a); props.onAttachmentsChange?.(a); }}
-                    onSearch={() => props.onSearch?.()} onVoice={() => props.onVoice?.()}
+                    onWebSearch={() => props.onWebSearch?.()} onVoice={() => props.onVoice?.()}
                   />
                 }
               >

package/src/components/choice-card.tsx

@@ -14,6 +14,7 @@ import {
 } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
+import { Radio } from '../ui/radio';
 import { HoverCard } from '../ui/hover-card';
 import { Card } from './card';
 import { DismissedStub } from './dismissed-stub';
@@ -21,7 +22,7 @@ import type { CardEnvelope, CardEvent, CardHost, CardResolution } from '../primi
 import { useCardResolution } from './use-card-resolution';
 import { emitCardEvent } from '../primitives/card-routing';
 import { useCardHost } from '../primitives/card-host';
-import { Check, X } from 'lucide-solid';
+import { Check } from 'lucide-solid';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types (choice.schema.json) — AUTHORED IN ../primitives/card-data-types.ts.
@@ -430,6 +431,10 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
   const groupLabel = (): string => local.heading ?? local.data?.prompt ?? 'Choose an option';
   const promptId = `kai-choice-prompt-${uid}`;
   const otherInputId = `kai-choice-other-${uid}`;
+  // The shared `name` is what makes the rows ONE native control: mutual exclusion,
+  // form participation and "2 of 4" from a screen reader all come from it. Scoped to
+  // this card's uid so two ChoiceCards on a page never de-select each other.
+  const radioName = `kai-choice-${uid}`;
 
   return (
     <Show when={valid()} fallback={<Card heading={local.heading} errorMessage={errorMessage()} />}>
@@ -443,14 +448,18 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
           when={!res.isDeferred()}
           fallback={<DismissedStub type={CHOICE_CARD_TYPE} title={local.heading} onReopen={onReopen} />}
         >
-        <Card heading={local.heading}>
+        {/* `prompt` is the card's supporting sentence — the same role `form`'s
+            `description` plays — so it goes through the shell's `description`
+            slot rather than being re-implemented in the body. That is what gives
+            it the muted colour: at full `text-foreground` it was the same colour
+            as the heading above it, which flattened the hierarchy. `descriptionId`
+            keeps the radiogroup's `aria-describedby` pointing at it. */}
+        <Card
+          heading={local.heading}
+          description={local.data?.prompt}
+          descriptionId={promptId}
+        >
           <div class={cn('flex flex-col gap-3', local.class)}>
-            <Show when={local.data?.prompt}>
-              <p id={promptId} class="text-sm text-foreground">
-                {local.data?.prompt}
-              </p>
-            </Show>
-
             <Show
               when={!res.isResolved()}
               fallback={<ResolvedChoice choice={resolvedChoice()!} optimistic={res.isOptimistic()} />}
@@ -462,7 +471,7 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
                 aria-describedby={local.data?.prompt ? promptId : undefined}
                 aria-disabled={isDisabled() ? 'true' : undefined}
                 class={cn(
-                  'divide-y divide-border overflow-hidden rounded-lg border border-input',
+                  'divide-y divide-border overflow-hidden rounded-lg border border-border',
                   isDisabled() && 'cursor-not-allowed opacity-60',
                 )}
                 onKeyDown={onGroupKeyDown}
@@ -477,8 +486,10 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
                     return (
                       <ListRow
                         opt={opt}
+                        name={radioName}
                         checked={checked()}
                         tabStop={tabStop()}
+                        groupDisabled={isDisabled()}
                         descId={descId}
                         hasDesc={hasDesc()}
                         onPick={() => {
@@ -518,14 +529,23 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
 
               <div class="flex w-full flex-wrap items-center justify-between gap-2">
                 <Show when={local.data?.dismissible === true}>
+                  {/* The contract `dismiss` verb — a footer ACTION (it emits
+                      `{kind:'dismiss'}` and collapses the card to a re-openable
+                      stub), not the chrome close in `Card`'s own `dismissible`
+                      prop, which the contract cards deliberately never set.
+                      Labelled rather than a bare ghost ✕: every other control in
+                      this row says what it does, and an unlabelled 28px glyph
+                      300px from the primary button reads as stray chrome. Same
+                      shape in all four cards — `form` already looked like this.
+                      `aria-label` is kept (redundant with the text) so the
+                      element tests that select on it keep working. */}
                   <Button
                     type="button"
                     variant="ghost"
-                    size="icon-sm"
                     aria-label="Dismiss"
                     onClick={onDismiss}
                   >
-                    <X size={16} aria-hidden="true" />
+                    Dismiss
                   </Button>
                 </Show>
                 <Button type="button" class="ml-auto" disabled={!canSubmit()} onClick={submit}>
@@ -542,14 +562,19 @@ export function ChoiceCard(props: ChoiceCardProps): JSX.Element {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Internal list-row presentation: a `role="radio"` with the kit's
-// selectable-list styling.
+// Internal list-row presentation: a `<label>` row wrapping a REAL
+// `<input type="radio">` (the `Radio` primitive), with the kit's selectable-list
+// styling.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface RowProps {
   opt: ChoiceOption;
+  /** The shared form-control name every radio in this card's group carries. */
+  name: string;
   checked: boolean;
   tabStop: boolean;
+  /** The whole group is frozen (`disabled` prop), not just this row. */
+  groupDisabled: boolean;
   descId: string;
   hasDesc: boolean;
   onPick: () => void;
@@ -558,7 +583,7 @@ interface RowProps {
 
 function RecommendedPill(): JSX.Element {
   return (
-    <span class="inline-flex items-center rounded-full bg-[var(--color-primary)] px-1.5 py-0.5 text-[0.625rem] font-medium uppercase leading-none tracking-wide text-[var(--color-primary-foreground,white)]">
+    <span class="inline-flex items-center rounded-full bg-[var(--color-primary)] px-1.5 py-0.5 text-micro font-medium uppercase leading-none tracking-wide text-[var(--color-primary-foreground,white)]">
       Recommended
     </span>
   );
@@ -587,25 +612,76 @@ function IconBadge(props: { name: string }): JSX.Element {
   );
 }
 
+/**
+ * One row of the radiogroup.
+ *
+ * The control is a REAL `<input type="radio">` (the `Radio` primitive over
+ * `.kai-radio`), not the `aria-hidden` ring-shaped `<span>` this row used to draw.
+ * That is what buys form participation — a `name`, a `value`, and a real entry in a
+ * native `FormData` — which a `<div role="radio">` can never have, and it removes the
+ * fourth hand-rolled radio from the kit.
+ *
+ * WHY `role="radio"` IS ON THE INPUT AND NOT ON THE ROW. `choice-card.tsx`'s own
+ * keyboard handler and `response-compare.tsx` both drive `[role="radio"]`, an
+ * ATTRIBUTE selector that a native radio's implicit role does not match, so the role
+ * has to be written somewhere. Putting it on the `<label>` wrapper (which the plan
+ * suggested) would nest a radio inside a radio and announce the row twice; putting it
+ * on the input states the role the input already has. `aria-checked` / `aria-disabled`
+ * are likewise redundant with `checked` / `disabled` and kept in lockstep with them —
+ * they are the state the element tests read, and a redundant ARIA attribute that never
+ * disagrees with the DOM is harmless where a second radio in the a11y tree is not.
+ *
+ * The row's `<label>` is what makes a click anywhere on it select the option, which is
+ * the browser's own behaviour rather than the `onClick` re-implementation it replaces.
+ * The `onClick` is kept as well: it is the path the existing tests fire, and both paths
+ * land on the same idempotent `select()`.
+ */
 function ListRow(props: RowProps): JSX.Element {
+  // The row is inert when the option itself is disabled OR the whole group is frozen.
+  // The group case has to reach the native `disabled` attribute: an enabled input
+  // would visibly check itself on click while `select()` refuses the state change, and
+  // the DOM would then be lying about the selection.
+  const inert = (): boolean => props.opt.disabled === true || props.groupDisabled;
+  const pick = (): void => {
+    if (inert()) return;
+    props.onPick();
+  };
   return (
-    <div
-      role="radio"
-      aria-checked={props.checked}
-      aria-disabled={props.opt.disabled ? 'true' : undefined}
-      aria-describedby={props.hasDesc ? props.descId : undefined}
-      data-option-id={props.opt.id}
-      tabindex={props.opt.disabled ? -1 : props.tabStop ? 0 : -1}
-      onClick={() => !props.opt.disabled && props.onPick()}
-      onFocus={props.onFocus}
+    <label
+      onClick={pick}
       class={cn(
-        'flex items-center gap-3 px-3 py-2.5 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+        'flex items-center gap-3 px-3 py-2.5 text-sm transition-colors',
+        // The focus ring stays on the ROW and stays inset — the same 2px inset ring the
+        // focusable `div` painted. Focus now lands on the input inside it, so the
+        // selector moves from `focus-visible:` to `has-[:focus-visible]:`; the input's
+        // own outline is suppressed below so there is one ring, not two. That is the
+        // pattern src/elements/styles.css sanctions at its `:focus-visible` rule.
+        'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring',
         props.opt.disabled
           ? 'cursor-not-allowed opacity-60 text-foreground'
           : 'cursor-pointer hover:bg-muted/50',
         props.checked ? 'bg-accent font-medium text-accent-foreground' : 'text-foreground',
       )}
     >
+      {/* FIRST in the row, ahead of any media. It used to sit AFTER the thumbnail/icon
+          badge, so a list where only some options carried media had a ragged control
+          column (measured 98px vs 50px in the `WithOther` story). The control column is
+          the one thing every row shares, so it leads. */}
+      <Radio
+        role="radio"
+        name={props.name}
+        value={props.opt.id}
+        checked={props.checked}
+        disabled={inert()}
+        aria-checked={props.checked}
+        aria-disabled={props.opt.disabled ? 'true' : undefined}
+        aria-describedby={props.hasDesc ? props.descId : undefined}
+        data-option-id={props.opt.id}
+        tabindex={props.opt.disabled ? -1 : props.tabStop ? 0 : -1}
+        class="focus-visible:outline-none"
+        onChange={pick}
+        onFocus={props.onFocus}
+      />
       <Show when={props.opt.media?.image}>
         <HoverCard
           openDelay={150}
@@ -623,17 +699,6 @@ function ListRow(props: RowProps): JSX.Element {
       <Show when={!props.opt.media?.image && props.opt.media?.icon}>
         <IconBadge name={props.opt.media!.icon!} />
       </Show>
-      <span
-        aria-hidden="true"
-        class={cn(
-          'flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-full border-[1.5px] transition-colors',
-          props.checked ? 'border-[var(--color-primary)]' : 'border-input bg-background',
-        )}
-      >
-        <Show when={props.checked}>
-          <span class="h-2 w-2 rounded-full bg-[var(--color-primary)]" />
-        </Show>
-      </span>
       <span class="flex min-w-0 flex-col gap-0.5">
         <span class="flex items-center gap-2">
           <span class="truncate">{props.opt.label}</span>
@@ -652,7 +717,7 @@ function ListRow(props: RowProps): JSX.Element {
           {props.opt.meta}
         </span>
       </Show>
-    </div>
+    </label>
   );
 }
 
@@ -663,7 +728,7 @@ function ResolvedChoice(props: {
   const c = props.choice;
   return (
     <div
-      class="flex items-center gap-3 rounded-lg border border-input bg-accent px-3 py-2.5 text-sm font-medium text-accent-foreground"
+      class="flex items-center gap-3 rounded-lg border border-border bg-accent px-3 py-2.5 text-sm font-medium text-accent-foreground"
       role={props.optimistic ? 'status' : undefined}
     >
       <Check size={16} aria-hidden="true" />

package/src/components/coachmark.tsx

@@ -228,7 +228,7 @@ export function Coachmark(props: CoachmarkProps) {
                 <Show when={props.badge}>
                   <span
                     part="badge"
-                    class={cn('inline-flex items-center rounded-full px-1.5 py-0.5 text-[0.625rem] font-medium uppercase leading-none tracking-wide', BADGE_CLS)}
+                    class={cn('inline-flex items-center rounded-full px-1.5 py-0.5 text-micro font-medium uppercase leading-none tracking-wide', BADGE_CLS)}
                   >
                     {props.badge}
                   </span>

package/src/components/code-block.tsx

@@ -1,4 +1,5 @@
-import { type JSX, splitProps, createResource, Show } from 'solid-js';
+import { type JSX, splitProps, createResource, createSignal, onCleanup, Show } from 'solid-js';
+import { Copy, Check } from 'lucide-solid';
 import { cn } from '../utils/cn';
 import { useChatConfig } from '../primitives/chat-config';
 import { highlight, isCodeHighlightingEnabled } from '../primitives/highlighter';
@@ -7,10 +8,69 @@ import { highlight, isCodeHighlightingEnabled } from '../primitives/highlighter'
 
 export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
   children?: JSX.Element;
+  /**
+   * Render a copy button in a header row above the code.
+   *
+   * DEFAULT OFF, and deliberately. This component is shared by three surfaces —
+   * `markdown.tsx` (every fenced block in every assistant message), `artifact.tsx`
+   * (the code panel), and the `<kai-code-block>` facade — and only the ELEMENT is
+   * documented as shipping a copy button. Defaulting on would add one to every code
+   * block in every message, a kit-wide visible change. The facade opts in; the other
+   * two are untouched, which `tests/elements/code-block.test.tsx` pins both
+   * behaviourally and at the call sites.
+   */
+  copy?: boolean;
+  /**
+   * The exact text the copy button puts on the clipboard.
+   *
+   * Named for what it DOES rather than what it holds, because the distinction is the
+   * whole contract: by the time the button is clicked the source has been through
+   * Shiki, so anything read back out of the DOM is either `<span>`-laden HTML or a
+   * `textContent` reconstruction — and the reconstruction is where tabs, blank lines
+   * and trailing newlines quietly change. This prop never goes near the highlighter.
+   */
+  copyText?: string;
+}
+
+/** How long the button stays in its acknowledged state. Matches MessageCopyButton. */
+const COPIED_MS = 2000;
+
+function CodeBlockCopyButton(props: { text: string }) {
+  const [copied, setCopied] = createSignal(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  // A click just before unmount would otherwise set state on a disposed owner.
+  onCleanup(() => clearTimeout(timer));
+
+  return (
+    <button
+      type="button"
+      part="copy"
+      // The name carries the state, so a screen-reader user gets the same
+      // acknowledgement the icon swap gives a sighted one. The glyph is decorative.
+      aria-label={copied() ? 'Copied' : 'Copy code'}
+      class={cn(
+        'inline-flex items-center justify-center rounded-md p-1.5',
+        'text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      )}
+      onClick={() => {
+        // Same mechanism as MessageCopyButton. A rejected promise (no permission,
+        // insecure context) must not become an unhandled rejection.
+        void Promise.resolve(navigator.clipboard?.writeText(props.text)).catch(() => {});
+        setCopied(true);
+        clearTimeout(timer);
+        timer = setTimeout(() => setCopied(false), COPIED_MS);
+      }}
+    >
+      <Show when={copied()} fallback={<Copy size={14} aria-hidden="true" />}>
+        <Check size={14} aria-hidden="true" class="text-emerald-500" />
+      </Show>
+    </button>
+  );
 }
 
 function CodeBlock(props: CodeBlockProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
+  const [local, rest] = splitProps(props, ['children', 'class', 'copy', 'copyText']);
   return (
     <div
       class={cn(
@@ -23,6 +83,15 @@ function CodeBlock(props: CodeBlockProps) {
       )}
       {...rest}
     >
+      <Show when={local.copy}>
+        {/* A header row, NOT an overlay on the code: the code region scrolls
+            horizontally, so a button inside it would ride off-screen with the code.
+            Always visible — hover-only affordances fail touch outright and are
+            undiscoverable everywhere else. */}
+        <CodeBlockGroup class="justify-end border-b border-border px-2 py-1">
+          <CodeBlockCopyButton text={local.copyText ?? ''} />
+        </CodeBlockGroup>
+      </Show>
       {local.children}
     </div>
   );
@@ -53,8 +122,8 @@ function CodeBlockCode(props: CodeBlockCodeProps) {
 
   const codeTextSize = () => {
     switch (config.proseSize()) {
-      case 'xs': return 'text-[11px]';
-      case 'sm': return 'text-[13px]';
+      case 'xs': return 'text-caption';
+      case 'sm': return 'text-compact';
       case 'base': return 'text-sm';
       case 'lg': return 'text-base';
     }
@@ -62,7 +131,11 @@ function CodeBlockCode(props: CodeBlockCodeProps) {
 
   const classNames = () =>
     cn(
-      'w-full overflow-x-auto [&>pre]:px-4 [&>pre]:py-4',
+      // `kai-focus-inset`: this region fills a rounded `overflow: clip` wrapper,
+      // so the default focus outline (offset 2px, i.e. entirely outside the
+      // border box) was clipped away and keyboard users saw nothing. The inset
+      // ring is drawn inside the box, where the wrapper cannot erase it.
+      'w-full overflow-x-auto kai-focus-inset [&>pre]:px-4 [&>pre]:py-4',
       codeTextSize(),
       local.class
     );
@@ -102,4 +175,7 @@ function CodeBlockGroup(props: CodeBlockGroupProps) {
   );
 }
 
+// CodeBlockCopyButton is deliberately NOT exported: `src/index.ts` re-exports this
+// module's public trio, and adding a fourth symbol here that index.ts does not carry
+// would create a half-public component. It is an implementation detail of `copy`.
 export { CodeBlock, CodeBlockCode, CodeBlockGroup };