@kitn.ai/ui 0.18.2 → 0.19.0

package/src/elements/element-manifest.json

@@ -4,6 +4,7 @@
     "kai-prompt-input": "prompt-input",
     "kai-chat": "chat",
     "kai-workspace": "chat-workspace",
+    "kai-thread": "thread",
     "kai-thinking-bar": "thinking-bar",
     "kai-model-switcher": "model-switcher",
     "kai-attachments": "attachments",
@@ -91,6 +92,9 @@
     "chat-workspace": [
       "kai-workspace"
     ],
+    "thread": [
+      "kai-thread"
+    ],
     "thinking-bar": [
       "kai-thinking-bar"
     ],

package/src/elements/element-meta.json

@@ -5200,6 +5200,15 @@
         "description": "Which item index is maximized (null = none). Declarative source of truth.",
         "default": "null",
         "displayType": "undefined | null | number"
+      },
+      {
+        "name": "handle",
+        "type": "undefined | \"none\" | \"line\" | \"grip\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three.",
+        "default": "'line'",
+        "displayType": "undefined | \"none\" | \"line\" | \"grip\""
       }
     ],
     "events": [
@@ -6768,6 +6777,114 @@
     ],
     "tokens": []
   },
+  {
+    "tag": "kai-thread",
+    "className": "KaiThreadElement",
+    "displayName": "Thread",
+    "props": [
+      {
+        "name": "messages",
+        "type": "undefined | { id: string; role: \"user\" | \"assistant\"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: \"input-streaming\" | \"input-available\" | \"output-available\" | \"output-error\"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | (\"copy\" | \"like\" | \"dislike\" | \"regenerate\" | \"edit\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | \"like\" | \"dislike\" }[]",
+        "optional": true,
+        "scalar": false,
+        "description": "The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not).",
+        "displayType": "undefined | { id: string; role: \"user\" | \"assistant\"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: \"input-streaming\" | \"input-available\" | \"output-available\" | \"output-error\"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | (\"copy\" | \"like\" | \"dislike\" | \"regenerate\" | \"edit\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | \"like\" | \"dislike\" }[]"
+      },
+      {
+        "name": "loading",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply.",
+        "default": "false",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "proseSize",
+        "type": "undefined | \"sm\" | \"lg\" | \"xs\" | \"base\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`.",
+        "default": "'sm'",
+        "displayType": "undefined | \"sm\" | \"lg\" | \"xs\" | \"base\""
+      },
+      {
+        "name": "codeTheme",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`).",
+        "default": "'github-dark-dimmed'",
+        "displayType": "undefined | string"
+      },
+      {
+        "name": "codeHighlight",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true.",
+        "default": "true",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "actionsReveal",
+        "type": "undefined | \"always\" | \"hover\"",
+        "optional": true,
+        "scalar": true,
+        "description": "Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`).",
+        "default": "'always'",
+        "displayType": "undefined | \"always\" | \"hover\""
+      },
+      {
+        "name": "scrollButton",
+        "type": "undefined | false | true",
+        "optional": true,
+        "scalar": true,
+        "description": "Show the scroll-to-bottom button inside the scroll area. Default true.",
+        "default": "true",
+        "displayType": "undefined | false | true"
+      },
+      {
+        "name": "class",
+        "type": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Extra classes applied to the thread's inner root.",
+        "displayType": "undefined | string"
+      }
+    ],
+    "events": [
+      {
+        "name": "kai-message-action",
+        "detail": "{ messageId: string; action: string; state?: undefined | \"on\" | \"off\" }",
+        "description": "A message's action button was clicked. `action` is the built-in name (`copy` / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear.",
+        "displayDetail": "{ messageId: string; action: string; state?: undefined | \"on\" | \"off\" }"
+      }
+    ],
+    "methods": [
+      {
+        "name": "scrollToBottom",
+        "params": "behavior?: ScrollBehavior",
+        "returns": "void",
+        "description": "Scroll the message list to the bottom (default `'smooth'`)."
+      }
+    ],
+    "composedFrom": [
+      {
+        "name": "Thread",
+        "group": "Components",
+        "storyId": "solid-advanced-elements-thread--docs"
+      }
+    ],
+    "tokens": [],
+    "slots": [
+      {
+        "name": "empty",
+        "mode": "replace",
+        "doc": "Custom zero-state rendered in the message area while the thread is empty; replaces the built-in default."
+      }
+    ]
+  },
   {
     "tag": "kai-toast-region",
     "className": "KaiToastRegionElement",

package/src/elements/element-types.d.ts

@@ -923,6 +923,8 @@ export interface KaiResizableElement extends HTMLElement {
   orientation?: "vertical" | "horizontal";
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: null | number;
+  /** Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. */
+  handle?: "none" | "line" | "grip";
 }
 
 export interface KaiResizableItemElement extends HTMLElement {
@@ -1213,6 +1215,27 @@ export interface KaiThinkingBarElement extends HTMLElement {
   stopLabel?: string;
 }
 
+export interface KaiThreadElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). */
+  messages?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string }; feedback?: "like" | "dislike" }[];
+  /** Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
+  proseSize?: "sm" | "lg" | "xs" | "base";
+  /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: "always" | "hover";
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Extra classes applied to the thread's inner root. */
+  class?: string;
+}
+
 export interface KaiToastRegionElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -1412,6 +1435,7 @@ declare global {
     'kai-tasks': KaiTasksElement;
     'kai-text-shimmer': KaiTextShimmerElement;
     'kai-thinking-bar': KaiThinkingBarElement;
+    'kai-thread': KaiThreadElement;
     'kai-toast-region': KaiToastRegionElement;
     'kai-tool': KaiToolElement;
     'kai-tooltip': KaiTooltipElement;

package/src/elements/icon-names.json

@@ -30,6 +30,7 @@
   "message-square",
   "mic",
   "monitor",
+  "moon",
   "more-horizontal",
   "panel-left",
   "paperclip",
@@ -43,6 +44,7 @@
   "smile",
   "sparkles",
   "square-pen",
+  "sun",
   "workflow",
   "x"
 ]

package/src/elements/menu.tsx

@@ -79,12 +79,15 @@ interface Events {
 /**
  * `<kai-menu>` — a cascading action menu driven by a JSON items-tree.
  *
- * Set the `items` property in JavaScript (array, not attribute). The trigger
- * is slotted — put your icon/button content in `slot="trigger"`:
+ * Set the `items` property in JavaScript (array, not attribute). The menu
+ * provides its own trigger button (accessible + keyboard-wired); slot only the
+ * VISUAL content into `slot="trigger"` (an icon, text, an `<svg>`) — never your
+ * own `<button>`/`<a>`, which would nest interactive elements. Set the
+ * accessible name with the `label` attribute (for an icon-only trigger):
  *
  * ```html
- * <kai-menu>
- *   <button slot="trigger" aria-label="Open menu">+</button>
+ * <kai-menu label="Open menu">
+ *   <span slot="trigger">+</span>
  * </kai-menu>
  * <script type="module">
  *   import '@kitn.ai/ui/elements';

package/src/elements/register-impl.ts

@@ -7,6 +7,8 @@ import './conversation-list';
 import './prompt-input';
 import './chat';
 import './chat-workspace';
+// Message-list composable (the scrolling thread slice, sans composer/header)
+import './thread';
 // Composable leaf elements (spike — see docs/handoff + examples/composable)
 import './thinking-bar';
 import './model-switcher';

package/src/elements/resizable.tsx

@@ -55,6 +55,14 @@ interface GroupProps extends Record<string, unknown> {
   orientation?: Orientation;
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: number | null;
+  /**
+   * Divider affordance drawn inside each draggable handle's 8px grab zone:
+   * - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag.
+   * - `grip` — a dotted grip handle.
+   * - `none` — no visible divider, just the invisible hit-area.
+   * The full grab zone and keyboard/ARIA behavior are identical for all three.
+   */
+  handle?: 'line' | 'grip' | 'none';
 }
 
 interface GroupEvents extends Record<string, unknown> {
@@ -75,6 +83,7 @@ interface GroupEvents extends Record<string, unknown> {
 defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
   orientation: 'horizontal',
   maximizedIndex: null,
+  handle: 'line',
 }, (props, { element, dispatch }) => {
   const [items, setItems] = createSignal<ItemInfo[]>([]);
   const orientation = (): Orientation => (props.orientation === 'vertical' ? 'vertical' : 'horizontal');
@@ -452,7 +461,7 @@ defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
             <>
               <Show when={i() > 0}>
                 <ResizableHandle
-                  withHandle
+                  handle={props.handle ?? 'line'}
                   orientation={orientation()}
                   static={isStatic()}
                   onPanelResize={() => {
@@ -516,6 +525,68 @@ defineWebComponent<GroupProps, GroupEvents>('kai-resizable', {
   );
 });
 
+/**
+ * Reflect a `<kai-resizable-item>`'s reactive CONFIG props to the ATTRIBUTES the
+ * parent `<kai-resizable>` reads (`readItems()` + its `size`/`min`/`max`/`locked`
+ * MutationObserver). Framework runtimes (React et al.) assign these as DOM
+ * *properties* — `el.size = "280px"` — but component-register only mirrors
+ * attribute→property, never the reverse, so a property-set size never becomes an
+ * attribute and the parent silently falls back to a flexible split. This is the
+ * exact class of bug the `collapsed` reflection already fixed; extended here to
+ * `size`/`min`/`max` (strings) and `locked` (boolean). `hidden` is deliberately
+ * NOT reflected — native `el.hidden` reflects to the attribute on its own and the
+ * parent honours the `hidden` property directly (and maximize drives `hidden`).
+ *
+ * Durability (don't fight drags): the parent WRITES `size` back to the live percent
+ * during a drag (`persistSizes` → `setAttribute('size', …)`), and that attribute
+ * write back-propagates into this prop's signal (component-register's
+ * attributeChangedCallback → property → the solid-element prop signal). A naive
+ * "reflect on every signal change" effect would therefore re-stomp the dragged size
+ * the next time a framework re-render re-asserts the ORIGINAL declared `size`
+ * (e.g. React re-runs `el.size = "280px"` on every render). So each string reflect
+ * only writes when the value the CONSUMER declared actually changes: a signal value
+ * that already equals the current attribute came FROM an attribute write (a drag),
+ * not the consumer, so it is left untouched and is not adopted as the new baseline.
+ * Net effect: a dragged size survives re-renders, while an explicit `size` change
+ * still applies. `size` prop signals use Solid's DEFAULT (same-value-skipping)
+ * equality — this guard is needed on top of that only because of the drag-write
+ * back-propagation, which same-value-skip alone can't see.
+ *
+ * Exported for unit testing (the live Shadow-DOM element is not jsdom-friendly).
+ */
+export function reflectItemConfig(
+  element: HTMLElement,
+  props: { readonly size?: string; readonly min?: string; readonly max?: string },
+  flag: (name: string) => boolean,
+) {
+  const norm = (v: unknown): string | null => (v == null || v === '' ? null : String(v));
+  const reflectString = (name: 'size' | 'min' | 'max') => {
+    // Last value the CONSUMER declared (distinct from a value the parent wrote to
+    // the attribute mid-drag). Starts `undefined`, which `norm` never returns, so
+    // the first genuine value always reflects.
+    let lastConsumer: string | null | undefined;
+    createEffect(() => {
+      const desired = norm(props[name]); // reactive read
+      if (desired === lastConsumer) return; // consumer intent unchanged → leave the attr (the drag owns it)
+      const current = element.getAttribute(name);
+      // Already matches — either untouched or the parent wrote it (drag). Don't
+      // adopt it as the consumer baseline and don't fight it.
+      if (desired === current) return;
+      lastConsumer = desired;
+      if (desired === null) element.removeAttribute(name);
+      else element.setAttribute(name, desired);
+    });
+  };
+  reflectString('size');
+  reflectString('min');
+  reflectString('max');
+  // Boolean: mirror the `collapsed`/`loading` precedent — a bare `locked` attribute
+  // and the IDL property are both honoured via `flag`. The parent also writes
+  // `locked` during maximize/restore; because `flag` re-derives from that same
+  // attribute state, the reflection stays self-consistent (no fight).
+  createEffect(() => { element.toggleAttribute('locked', flag('locked')); });
+}
+
 interface ItemProps extends Record<string, unknown> {
   /** Initial main-axis size: `"280px"` (fixed) or `"25%"`/`25` (percent). Omitted → flexible. */
   size?: string;
@@ -551,7 +622,7 @@ defineWebComponent<ItemProps>('kai-resizable-item', {
   locked: false,
   hidden: false,
   collapsed: false,
-}, (_props, { element, flag }) => {
+}, (props, { element, flag }) => {
   // Reflect the reactive `collapsed` prop to the `collapsed` ATTRIBUTE the parent
   // <kai-resizable> reads (and observes). This is what makes a bare JSX boolean
   // collapse the panel at INITIAL render from any framework: component-register
@@ -563,6 +634,11 @@ defineWebComponent<ItemProps>('kai-resizable-item', {
   // `hidden`, so the back-compat hidden path and maximize (which drive `hidden`)
   // are untouched.
   createEffect(() => { element.toggleAttribute('collapsed', flag('collapsed')); });
+  // Reflect the other config props (`size`/`min`/`max`/`locked`) property→attribute
+  // for the SAME reason — a framework that sets them as DOM properties (React et al.)
+  // would otherwise be invisible to the parent. See reflectItemConfig for the
+  // drag-durability guard on `size`.
+  reflectItemConfig(element, props, flag);
   return (
   <>
     {/* The item host fills the panel's single grid cell (the panel stretches it on

package/src/elements/slots.ts

@@ -552,11 +552,18 @@ export const MENU_PARTS: PartDef[] = [
   { name: 'shortcut', doc: 'The right-aligned per-item keyboard shortcut, rendered as kai-kbd key caps. Shown only when an item carries a `shortcut`.', recipe: 'kai-menu::part(shortcut) { opacity: 0.8 }' },
 ];
 
+/** Slots of `<kai-thread>` (the standalone scrolling message list; messages come
+ *  from the `messages` prop). */
+export const THREAD_SLOTS: SlotDef[] = [
+  { name: 'empty', mode: 'replace', doc: 'Custom zero-state rendered in the message area while the thread is empty; replaces the built-in default.' },
+];
+
 export const ELEMENT_COMPOSITION: Record<string, ElementComposition> = {
   'kai-chat': { slots: CHAT_SLOTS, parts: CHAT_PARTS },
   'kai-command': { parts: COMMAND_PARTS },
   'kai-conversations': { slots: CONVERSATIONS_SLOTS, parts: CONVERSATIONS_PARTS },
   'kai-message': { slots: MESSAGE_SLOTS, parts: MESSAGE_PARTS },
+  'kai-thread': { slots: THREAD_SLOTS },
   'kai-prompt-input': { slots: PROMPT_INPUT_SLOTS, parts: PROMPT_INPUT_PARTS },
   'kai-button': { slots: BUTTON_SLOTS, parts: BUTTON_PARTS },
   'kai-badge': { parts: BADGE_PARTS },

package/src/elements/thread.tsx

@@ -0,0 +1,105 @@
+import { createSignal, onMount, onCleanup } from 'solid-js';
+import { defineWebComponent } from './define';
+import { readSlots, THREAD_SLOTS } from './slots';
+import { Thread, type ThreadController } from '../components/thread';
+import type { ChatMessage } from './chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+
+interface Props extends Record<string, unknown> {
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS
+   *  property (`el.messages = [...]`); a NEW array reference per streaming chunk
+   *  re-renders (mutating in place does not). */
+  messages?: ChatMessage[];
+  /** Show a typing indicator on the pending assistant turn — set while awaiting
+   *  the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+   *  Defaults to `'sm'`. */
+  proseSize?: ProseSize;
+  /** Shiki theme name for syntax-highlighted code blocks (e.g.
+   *  `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
+   *  `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or
+   *  only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: 'always' | 'hover';
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Extra classes applied to the thread's inner root. */
+  class?: string;
+}
+
+/** Events fired by `<kai-thread>`. */
+interface Events extends Record<string, unknown> {
+  /** A message's action button was clicked. `action` is the built-in name (`copy`
+   *  / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is
+   *  present only for the toggleable feedback votes: `'on'` when a like/dislike is
+   *  set, `'off'` when re-tapped to clear. */
+  'kai-message-action': { messageId: string; action: string; state?: 'on' | 'off' };
+}
+
+/**
+ * `<kai-thread>` — the scrolling message list of a chat, as a standalone
+ * composable element: one message row per `messages` entry with markdown / code
+ * highlight / reasoning + tool panels / avatars / action row, stick-to-bottom
+ * scroll with a scroll-to-bottom button, an optional typing indicator, and an
+ * `empty` slot. It fills the height its parent gives it and scrolls internally
+ * (`:host { display:block; height:100% }`). No composer, header, suggestions, or
+ * sidebar — pair it with `<kai-prompt-input>` and your own layout, or reach for
+ * the batteries-included `<kai-chat>`. Emits `kai-message-action`; exposes
+ * `scrollToBottom()`.
+ */
+defineWebComponent<Props, Events>('kai-thread', {
+  messages: undefined,
+  loading: false,
+  proseSize: 'sm',
+  codeTheme: 'github-dark-dimmed',
+  codeHighlight: true,
+  actionsReveal: 'always',
+  scrollButton: true,
+  class: undefined,
+}, (props, { element, dispatch, flag, expose }) => {
+  let controller: ThreadController | undefined;
+
+  // Detect whether the consumer projected `slot="empty"` content, so the built-in
+  // default only renders when they did NOT.
+  const [slots, setSlots] = createSignal<Record<string, boolean>>({});
+  onMount(() => {
+    const read = () => setSlots(readSlots(element, THREAD_SLOTS));
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(element, { childList: true });
+    onCleanup(() => observer.disconnect());
+  });
+
+  // Imperative method API — forward the thread's scroll control onto the host.
+  expose({
+    /** Scroll the message list to the bottom (default `'smooth'`). */
+    scrollToBottom: (behavior?: ScrollBehavior) => controller?.scrollToBottom(behavior),
+  });
+
+  return (
+    <>
+      {/* Fill the height the parent gives us and scroll internally, like
+          <kai-resizable>. Consumers only need to give a parent (or the element) a
+          height. */}
+      <style>{':host{display:block;height:100%}'}</style>
+      <Thread
+        class={props.class as string | undefined}
+        messages={(props.messages as ChatMessage[] | undefined) ?? []}
+        loading={flag('loading')}
+        proseSize={props.proseSize as ProseSize}
+        codeTheme={props.codeTheme as string}
+        codeHighlight={flag('codeHighlight')}
+        actionsReveal={props.actionsReveal as 'always' | 'hover'}
+        scrollButton={props.scrollButton !== false}
+        empty={slots()['empty'] ? <slot name="empty" /> : undefined}
+        onMessageAction={(detail) => dispatch('kai-message-action', detail)}
+        controllerRef={(c) => (controller = c)}
+      />
+    </>
+  );
+});

package/src/ui/action-icons.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'solid-js';
 import {
   Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil,
-  Share, Bookmark, Download, Link, Trash2, Check, X, Star, Flag, Reply, MoreHorizontal,
+  Share, Bookmark, Download, Link, Trash2, Check, X, Star, Flag, Reply, MoreHorizontal, Volume2,
 } from 'lucide-solid';
 import type { ChatMessageAction } from '../elements/chat-types';
 
@@ -33,6 +33,7 @@ const ICONS: Record<string, IconComponent> = {
   flag: Flag,
   reply: Reply,
   more: MoreHorizontal,
+  'volume-2': Volume2,
 };
 
 /** Resolve a curated icon name to its component, or `undefined` when unknown

package/src/ui/icon.tsx

@@ -8,6 +8,7 @@ import {
   House, Clock, Lock, Box, Briefcase, PanelLeft, Circle, SlidersHorizontal, Workflow, SquarePen,
   Archive, ArrowUp, Bookmark, Copy, Ellipsis, ExternalLink, Flag,
   GitBranch, GitPullRequest, ListFilter, RotateCw,
+  Moon, Sun,
 } from 'lucide-solid';
 
 type IconComponent = Component<{ class?: string }>;
@@ -64,6 +65,9 @@ const NAMED_ICONS: Record<string, IconComponent> = {
   'git-pull-request': GitPullRequest,
   'list-filter': ListFilter,
   'rotate-cw': RotateCw,
+  // Theme / appearance glyphs.
+  moon: Moon,
+  sun: Sun,
 };
 
 /** Render an item icon.

package/src/ui/overlay.tsx

@@ -206,7 +206,14 @@ export function usePosition(
     // on unmount via onCleanup.
     const cleanup = autoUpdate(ref, float, update);
     let ro: ResizeObserver | undefined;
-    if (typeof ResizeObserver === 'function') {
+    // Only a REAL element can be observed. The composer's trigger menu anchors to a
+    // VIRTUAL reference (a caret-rect object exposing just getBoundingClientRect, no
+    // DOM node); ResizeObserver.observe() throws "parameter 1 is not of type 'Element'"
+    // on it, and that uncaught throw aborts this effect before onCleanup registers,
+    // which corrupted the menu's reactive scope so it never re-opened after the first
+    // time. autoUpdate already tracks the virtual anchor; this ResizeObserver is a
+    // real-element-only add-on for ancestor/element resizes.
+    if (typeof ResizeObserver === 'function' && ref instanceof Element) {
       ro = new ResizeObserver(update);
       ro.observe(ref);
       for (const ancestor of getOverflowAncestors(ref)) {