@kitnai/chat 0.3.1 → 0.5.0

package/llms.txt

@@ -0,0 +1,104 @@
+<!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
+# @kitnai/chat
+
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+
+## Install
+
+```bash
+npm install @kitnai/chat
+# SolidJS consumers also need the peer dep:
+npm install solid-js
+```
+
+## #1 rule: array/object data goes on JS PROPERTIES, not HTML attributes
+
+This is the single most common mistake. Arrays and objects (`messages`, `models`, `context`, `suggestions`, `slashCommands`, …) MUST be assigned as JavaScript properties on the element. They CANNOT be passed as HTML attributes — an HTML attribute is always a string and will be ignored or mis-parsed.
+
+```js
+const chat = document.querySelector('kitn-chat');
+chat.messages = [{ id: '1', role: 'assistant', content: 'Hi!' }]; // ✅ property
+```
+```html
+<kitn-chat messages="[...]"></kitn-chat>  <!-- ❌ never works -->
+```
+
+Only scalar values (string/number/boolean) work as attributes (e.g. `placeholder`, `loading`, `theme`).
+
+## Two layers
+
+**Layer 1 — batteries-included web components** (`import '@kitnai/chat/elements'`):
+Drop an element into any framework (React, Vue, plain HTML). Data in via JS properties; interactions out via non-bubbling CustomEvents.
+
+- `<kitn-chat>` — full chat UI (message list + prompt input). The primary starting point.
+- `<kitn-conversation-list>` — sidebar conversation browser with group support.
+- `<kitn-prompt-input>` — standalone composer with send button.
+
+**Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
+All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+
+## Key rules for the web components
+
+1. **Array/object data = JS properties** (see above). Scalars may be attributes.
+2. **Events are non-bubbling `CustomEvent`s** — listen directly on the element:
+   `chat.addEventListener('submit', (e) => console.log(e.detail.value))`
+3. **`theme` attribute** (`'light' | 'dark' | 'auto'`) works on every element. Default `auto` follows `prefers-color-scheme`.
+4. **Theming via CSS custom properties** — override `--kitn-color-*` tokens on `:root`; they pierce Shadow DOM.
+
+## ChatMessage schema (required for `<kitn-chat>`)
+
+```ts
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  reasoning?: { text: string; label?: string };
+  tools?: ToolPart[];
+  attachments?: AttachmentData[];
+  actions?: ('copy' | 'like' | 'dislike' | 'regenerate' | 'edit')[];
+}
+```
+
+## Framework wiring
+
+**Plain HTML / CDN**
+```html
+<script type="module" src="https://unpkg.com/@kitnai/chat/elements"></script>
+<kitn-chat style="display:block;height:100vh"></kitn-chat>
+<script type="module">
+  const chat = document.querySelector('kitn-chat');
+  chat.messages = [];
+</script>
+```
+
+**React** — typed wrappers auto-set properties and expose `on<Event>` props:
+```tsx
+import { KitnChat } from '@kitnai/chat/react';
+<KitnChat messages={messages} onSubmit={(e) => send(e.detail.value)} />
+```
+
+**Vue** — use the element directly; pass arrays via `.prop`:
+```vue
+<kitn-chat :messages.prop="messages" @submit="send" />
+```
+
+## Theming
+
+```css
+:root {
+  --kitn-color-background: #0f0f0f;
+  --kitn-color-primary: #7c3aed;
+  --kitn-color-muted: #1e1e1e;
+}
+```
+
+For plain HTML/CDN: `<link rel="stylesheet" href="…/@kitnai/chat/theme.tokens.css">`.
+For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
+
+## Docs
+
+- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
+- Working examples: https://github.com/kitn-ai/chat/tree/main/examples
+- Storybook: https://storybook.kitn.dev
+- Repository: https://github.com/kitn-ai/chat

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
-  "description": "SolidJS + Shadow-DOM web component kit for building AI chat interfaces.",
+  "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "shadow-dom",
+    "ai",
+    "chat",
+    "chatbot",
+    "llm",
+    "chat-ui",
+    "streaming",
+    "markdown",
+    "framework-agnostic",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "solid-js"
+  ],
   "license": "MIT",
   "homepage": "https://github.com/kitn-ai/chat#readme",
   "repository": {
@@ -16,22 +34,37 @@
   "types": "src/index.ts",
   "unpkg": "./dist/kitn-chat.es.js",
   "jsdelivr": "./dist/kitn-chat.es.js",
+  "customElements": "dist/custom-elements.json",
   "exports": {
     ".": "./src/index.ts",
-    "./elements": "./dist/kitn-chat.es.js",
-    "./theme.css": "./theme.css"
+    "./elements": {
+      "types": "./src/elements/element-types.d.ts",
+      "default": "./dist/kitn-chat.es.js"
+    },
+    "./theme.css": "./theme.css",
+    "./theme.tokens.css": "./dist/theme.tokens.css",
+    "./react": "./frameworks/react/index.tsx"
   },
   "files": [
     "dist",
     "src",
-    "theme.css"
+    "frameworks",
+    "theme.css",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "scripts": {
     "prepublishOnly": "npm run build",
     "prebuild": "npm run build:css",
     "build": "vite build --config vite.config.ts",
+    "postbuild": "npm run build:theme && npm run build:api",
+    "build:theme": "node scripts/build-theme-tokens.mjs",
+    "build:api": "node scripts/gen-element-api.mjs",
     "test": "vitest run",
+    "test:react": "vitest run --config vitest.react.config.ts",
     "test:watch": "vitest",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.react.json && tsc --noEmit -p tsconfig.react.test.json",
+    "examples": "echo 'Serving repo root on http://localhost:8000 — open http://localhost:8000/examples/composable/index.html' && python3 -m http.server 8000",
     "dev": "npm run build:css && storybook dev -p 6006",
     "storybook": "npm run build:css && storybook dev -p 6006",
     "build-storybook": "npm run build:css && storybook build",
@@ -39,7 +72,7 @@
     "build:css:watch": "tailwindcss -i src/elements/styles.css -o src/elements/compiled.css --watch"
   },
   "dependencies": {
-    "@kobalte/core": "^0.13.0",
+    "@floating-ui/dom": "^1.7.6",
     "@shikijs/langs": "^4.2.0",
     "@shikijs/themes": "^4.2.0",
     "class-variance-authority": "^0.7.0",
@@ -60,10 +93,18 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/browser-playwright": "4.1.2",
     "@vitest/coverage-v8": "4.1.2",
+    "axe-core": "^4.12.1",
     "jsdom": "^24.0.0",
     "playwright": "^1.59.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "remark-gfm": "^4.0.1",
     "storybook": "^10.3.5",
     "storybook-dark-mode": "^5.0.0",
     "storybook-solidjs-vite": "^10.0.12",
@@ -75,6 +116,12 @@
     "vitest": "^4.1.0"
   },
   "peerDependencies": {
+    "react": ">=18",
     "solid-js": "^1.9.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }

package/src/components/attachments.tsx

@@ -255,8 +255,10 @@ function AttachmentInfo(props: AttachmentInfoProps) {
     <Show when={ctx.variant !== 'grid'}>
       <div class={cn('min-w-0 flex-1', local.class)} {...rest}>
         <span class="block truncate">{label()}</span>
-        <Show when={local.showMediaType && ctx.data.mediaType}>
-          <span class="block truncate text-muted-foreground text-xs">
+        {/* The media-type subtitle is a two-line affordance — only the `list`
+            variant has room for it; `inline` chips are a fixed single-line height. */}
+        <Show when={local.showMediaType && ctx.variant === 'list' && ctx.data.mediaType}>
+          <span class="text-muted-foreground text-caption block truncate">
             {ctx.data.mediaType}
           </span>
         </Show>

package/src/components/chain-of-thought.tsx

@@ -33,7 +33,7 @@ function ChainOfThoughtTrigger(props: ChainOfThoughtTriggerProps) {
   return (
     <CollapsibleTrigger
       class={cn(
-        'group text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-start gap-1 text-left text-sm transition-colors',
+        'group text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-start gap-1 text-left text-meta transition-colors',
         props.class
       )}
     >

package/src/components/chat-scope-picker.tsx

@@ -26,7 +26,7 @@ export function ChatScopePicker(props: ChatScopePickerProps) {
       <DropdownContent class="min-w-[180px]">
         <DropdownItem onSelect={() => local.onScopeChange(undefined)}>All Content</DropdownItem>
         <Show when={local.availableAuthors?.length}>
-          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground/60">Authors</div>
+          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground">Authors</div>
           <For each={local.availableAuthors}>
             {(author) => (
               <DropdownItem onSelect={() => local.onScopeChange({ authors: [author] })}>{author}</DropdownItem>
@@ -34,7 +34,7 @@ export function ChatScopePicker(props: ChatScopePickerProps) {
           </For>
         </Show>
         <Show when={local.availableTags?.length}>
-          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground/60">Tags</div>
+          <div class="px-2 py-1 text-[10px] uppercase tracking-wider text-muted-foreground">Tags</div>
           <For each={local.availableTags}>
             {(tag) => (
               <DropdownItem onSelect={() => local.onScopeChange({ tags: [tag] })}>{tag}</DropdownItem>

package/src/components/chat-thread.tsx

@@ -0,0 +1,217 @@
+import { createSignal, For, Show } from 'solid-js';
+import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
+import { Message, MessageContent, MessageActions } from './message';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
+import { Tool } from './tool';
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from './attachments';
+import { ModelSwitcher } from './model-switcher';
+import { ScrollButton } from './scroll-button';
+import {
+  Context, ContextTrigger, ContextContent, ContextContentHeader,
+  ContextContentBody, ContextContentFooter, ContextInputUsage, ContextOutputUsage,
+} from './context';
+import { Button } from '../ui/button';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
+import type { Component } from 'solid-js';
+import { DefaultPromptInput } from '../elements/default-input';
+import type { SlashCommandItem } from './slash-command';
+import type { ChatMessage, ChatMessageAction } from '../elements/chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+import type { ModelOption } from '../types';
+
+export interface ChatThreadContextUsage {
+  usedTokens: number;
+  maxTokens: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  estimatedCost?: number;
+}
+
+export interface ChatThreadProps {
+  /** Extra classes for the thread root (e.g. `h-full`). */
+  class?: string;
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions. Set as a JS
+   *  property (`el.messages = [...]`). */
+  messages: ChatMessage[];
+  /** Controlled value of the input. When set, the host owns the input text and
+   *  must update it on `valuechange`; leave unset for uncontrolled behavior. */
+  value?: string;
+  /** Placeholder text shown in the empty input. */
+  placeholder?: string;
+  /** When true, shows the loading/streaming state and disables submit (use while
+   *  awaiting the assistant's reply). */
+  loading?: boolean;
+  /** Starter prompts shown above the input when the thread is empty. Clicking one
+   *  follows `suggestionMode`. Set as a JS property. */
+  suggestions?: string[];
+  /** What clicking a suggestion does: `'submit'` (default) sends it immediately
+   *  as if typed and submitted; `'fill'` just places it in the input. */
+  suggestionMode?: 'submit' | 'fill';
+  /** 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;
+  /** 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
+   *  header and a `modelchange` event fires on selection. */
+  models?: ModelOption[];
+  /** The currently selected model id (pairs with `models`). */
+  currentModel?: string;
+  /** Optional context-window token usage. When set, a Context token meter is
+   *  shown in the header. */
+  context?: ChatThreadContextUsage;
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
+  search?: boolean;
+  /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
+  voice?: boolean;
+  /** Slash commands — when set, typing `/` in the input opens the command
+   *  palette and fires `slashselect`. Set as a JS property. */
+  slashCommands?: SlashCommandItem[];
+  /** Command ids to highlight as active in the palette. */
+  slashActiveIds?: string[];
+  /** Single-line palette rows. */
+  slashCompact?: boolean;
+  // callbacks (the facade maps these to dispatch())
+  onValueChange?: (value: string) => void;
+  onSubmit?: (detail: { value: string; attachments: AttachmentData[] }) => void;
+  onSuggestionClick?: (value: string) => void;
+  onModelChange?: (modelId: string) => void;
+  onMessageAction?: (detail: { messageId: string; action: ChatMessageAction }) => void;
+  onSearch?: () => void;
+  onVoice?: () => void;
+  onSlashSelect?: (command: SlashCommandItem) => void;
+}
+
+const ACTION_LABEL: Record<ChatMessageAction, string> = {
+  copy: 'Copy', like: 'Like', dislike: 'Dislike', regenerate: 'Regenerate', edit: 'Edit',
+};
+const ACTION_ICON: Record<ChatMessageAction, Component<{ class?: string }>> = {
+  copy: Copy, like: ThumbsUp, dislike: ThumbsDown, regenerate: RefreshCw, edit: Pencil,
+};
+
+export function ChatThread(props: ChatThreadProps) {
+  const outer = useChatConfig();
+  const [internal, setInternal] = createSignal(props.value ?? '');
+  const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
+  const current = () => props.value ?? internal();
+  const handleChange = (v: string) => { setInternal(v); props.onValueChange?.(v); };
+  const handleSubmit = () => { props.onSubmit?.({ value: current(), attachments: attachments() }); setAttachments([]); };
+  const handleSuggestionClick = (v: string) => {
+    if ((props.suggestionMode ?? 'submit') === 'fill') { handleChange(v); props.onSuggestionClick?.(v); }
+    else { props.onSubmit?.({ value: v, attachments: attachments() }); setAttachments([]); }
+  };
+  const showHeader = () => !!(props.chatTitle || props.models || props.context);
+  const showScrollButton = () => props.scrollButton !== false;
+
+  return (
+    <ChatConfig proseSize={props.proseSize} codeTheme={props.codeTheme} codeHighlight={props.codeHighlight !== false} portalMount={outer.portalMount()}>
+      <div class={`flex h-full flex-col bg-background ${props.class ?? ''}`}>
+        <Show when={showHeader()}>
+          <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
+            <div class="text-sm font-semibold text-foreground">{props.chatTitle}</div>
+            <div class="flex items-center gap-2">
+              <Show when={props.models}>
+                <ModelSwitcher
+                  models={props.models!}
+                  currentModelId={props.currentModel ?? props.models![0]?.id ?? ''}
+                  onModelChange={(modelId) => props.onModelChange?.(modelId)}
+                />
+              </Show>
+              <Show when={props.context}>
+                <Context
+                  usedTokens={props.context!.usedTokens} maxTokens={props.context!.maxTokens}
+                  inputTokens={props.context!.inputTokens} outputTokens={props.context!.outputTokens}
+                  estimatedCost={props.context!.estimatedCost}
+                >
+                  <ContextTrigger />
+                  <ContextContent>
+                    <ContextContentHeader />
+                    <ContextContentBody><div class="space-y-1.5"><ContextInputUsage /><ContextOutputUsage /></div></ContextContentBody>
+                    <ContextContentFooter />
+                  </ContextContent>
+                </Context>
+              </Show>
+            </div>
+          </header>
+        </Show>
+        <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">
+              <For each={props.messages}>
+                {(m) => (
+                  <Message class={m.role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}>
+                    <Show when={m.reasoning}>
+                      <Reasoning class="mb-2 w-full">
+                        <ReasoningTrigger>{m.reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
+                        <ReasoningContent markdown>{m.reasoning!.text}</ReasoningContent>
+                      </Reasoning>
+                    </Show>
+                    <For each={m.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
+                    <Show when={m.attachments?.length}>
+                      <Attachments variant="inline" class={m.role === 'user' ? 'mb-2 justify-end' : 'mb-2'}>
+                        <For each={m.attachments!}>
+                          {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
+                        </For>
+                      </Attachments>
+                    </Show>
+                    <MessageContent
+                      markdown={m.role === 'assistant'}
+                      class={m.role === 'user' ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2' : 'bg-transparent p-0'}
+                    >
+                      {m.content}
+                    </MessageContent>
+                    <Show when={m.actions?.length}>
+                      <MessageActions class="mt-1 flex gap-0">
+                        <For each={m.actions!}>
+                          {(a) => (
+                            <Button
+                              variant="ghost" size="icon-sm" class="rounded-full"
+                              data-action={a} aria-label={ACTION_LABEL[a]}
+                              onClick={() => props.onMessageAction?.({ messageId: m.id, action: a })}
+                            >
+                              {(() => { const Icon = ACTION_ICON[a]; return <Icon class="size-3.5" />; })()}
+                            </Button>
+                          )}
+                        </For>
+                      </MessageActions>
+                    </Show>
+                  </Message>
+                )}
+              </For>
+              <ChatContainerScrollAnchor />
+            </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" />
+              </div>
+            </Show>
+          </ChatContainer>
+        </div>
+        <div class="shrink-0 px-4 pb-4">
+          <div class="mx-auto max-w-3xl">
+            <DefaultPromptInput
+              value={current()} placeholder={props.placeholder} loading={props.loading === true}
+              suggestions={props.suggestions} attachments={attachments()}
+              search={props.search === true} voice={props.voice === true}
+              slashCommands={props.slashCommands} slashActiveIds={props.slashActiveIds} slashCompact={props.slashCompact === true}
+              onValueChange={handleChange} onSubmit={handleSubmit} onSuggestionClick={handleSuggestionClick}
+              onAttachmentsChange={setAttachments}
+              onSearch={() => props.onSearch?.()} onVoice={() => props.onVoice?.()}
+              onSlashSelect={(command) => props.onSlashSelect?.(command)}
+            />
+          </div>
+        </div>
+      </div>
+    </ChatConfig>
+  );
+}

package/src/components/checkpoint.tsx

@@ -61,7 +61,11 @@ export function CheckpointTrigger(props: CheckpointTriggerProps) {
   const variant = () => props.variant ?? 'ghost';
   const size = () => props.size ?? 'sm';
 
-  const button = (
+  // A factory (not a single shared node): the Show fallback and the Tooltip
+  // child each need their OWN element instance, otherwise Solid reuses one DOM
+  // node across both branches and throws HierarchyRequestError when the tooltip
+  // branch mounts it.
+  const renderButton = () => (
     <Button
       variant={variant()}
       size={size()}
@@ -74,8 +78,8 @@ export function CheckpointTrigger(props: CheckpointTriggerProps) {
   );
 
   return (
-    <Show when={props.tooltip} fallback={button}>
-      <Tooltip content={props.tooltip!}>{button}</Tooltip>
+    <Show when={props.tooltip} fallback={renderButton()}>
+      <Tooltip content={props.tooltip!}>{renderButton()}</Tooltip>
     </Show>
   );
 }

package/src/components/context.tsx

@@ -1,8 +1,7 @@
-import { type JSX, Show, createContext, createMemo, splitProps, useContext } from 'solid-js';
-import { HoverCard as KHoverCard } from '@kobalte/core/hover-card';
+import { type JSX, Show, createContext, createMemo, useContext } from 'solid-js';
+import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '../ui/hover-card';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
-import { useChatConfig } from '../primitives/chat-config';
 
 const ICON_RADIUS = 10;
 const ICON_VIEWBOX = 24;
@@ -60,9 +59,9 @@ export function Context(props: ContextProps) {
 
   return (
     <ContextCtx.Provider value={value()}>
-      <KHoverCard openDelay={0} closeDelay={0}>
+      <HoverCardRoot openDelay={0}>
         {props.children}
-      </KHoverCard>
+      </HoverCardRoot>
     </ContextCtx.Provider>
   );
 }
@@ -123,7 +122,7 @@ export function ContextTrigger(props: ContextTriggerProps) {
   const renderedPercent = createMemo(() => fmtPercent.format(usedPercent()));
 
   return (
-    <KHoverCard.Trigger as="span">
+    <HoverCardTrigger>
       <Show
         when={!props.children}
         fallback={props.children}
@@ -133,7 +132,7 @@ export function ContextTrigger(props: ContextTriggerProps) {
           <ContextIcon />
         </Button>
       </Show>
-    </KHoverCard.Trigger>
+    </HoverCardTrigger>
   );
 }
 
@@ -145,18 +144,15 @@ export interface ContextContentProps {
 }
 
 export function ContextContent(props: ContextContentProps) {
-  const config = useChatConfig();
   return (
-    <KHoverCard.Portal mount={config.portalMount()}>
-      <KHoverCard.Content
-        class={cn(
-          'z-50 min-w-60 divide-y divide-border overflow-hidden rounded-lg bg-card shadow-lg animate-in fade-in-0 zoom-in-95',
-          props.class
-        )}
-      >
-        {props.children}
-      </KHoverCard.Content>
-    </KHoverCard.Portal>
+    <HoverCardContent
+      class={cn(
+        'min-w-60 divide-y divide-border overflow-hidden',
+        props.class
+      )}
+    >
+      {props.children}
+    </HoverCardContent>
   );
 }
 

package/src/components/conversation-item.tsx

@@ -10,7 +10,7 @@ export function ConversationItem(props: ConversationItemProps) {
     <button data-conversation-id={local.conversation.id} onClick={() => local.onSelect(local.conversation.id)}
       class={cn('w-full text-left rounded-lg px-2.5 py-2 transition-colors', local.isActive ? 'bg-muted' : 'hover:bg-muted/50', local.class)}>
       <div class={cn('truncate text-sm', local.isActive ? 'text-foreground font-medium' : 'text-muted-foreground')}>{local.conversation.title}</div>
-      <div class="text-muted-foreground/60 truncate mt-0.5 text-xs">{local.conversation.messageCount} messages</div>
+      <div class="text-muted-foreground truncate mt-0.5 text-xs">{local.conversation.messageCount} messages</div>
     </button>
   );
 }

package/src/components/conversation-list.tsx

@@ -43,20 +43,21 @@ export function ConversationList(props: ConversationListProps) {
     <div class={cn('flex flex-col h-full bg-sidebar', local.class)}>
       <div class="flex items-center justify-between p-3 pb-2">
         <div class="flex items-center gap-2">
-          <Button variant="ghost" size="icon-sm" onClick={local.onToggleSidebar}>
+          <Button variant="ghost" size="icon-sm" aria-label="Toggle sidebar" onClick={local.onToggleSidebar}>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
           </Button>
           <span class="text-sm font-semibold text-foreground">Chats</span>
         </div>
-        <Button variant="ghost" size="icon-sm" onClick={local.onNewChat}>
+        <Button variant="ghost" size="icon-sm" aria-label="New chat" onClick={local.onNewChat}>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         </Button>
       </div>
       <div class="px-3 pb-2">
         <div class="flex items-center gap-2 rounded-md bg-muted/40 px-2.5 py-1.5">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground/60"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
           <input type="text" value={searchQuery()} onInput={(e) => setSearchQuery(e.currentTarget.value)} placeholder="Search chats..."
-            class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground/60 focus:outline-none w-full" />
+            aria-label="Search chats"
+            class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full" />
         </div>
       </div>
       <ScrollArea class="flex-1 px-2">

package/src/components/message-skills.tsx

@@ -23,7 +23,7 @@ function MessageSkills(props: MessageSkillsProps) {
       <div class={cn("flex items-center gap-1 flex-wrap", props.class)}>
         <For each={props.skills}>
           {(skill) => (
-            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-violet-400/10 text-violet-400">
+            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-violet-400/10 text-violet-600 dark:text-violet-400">
               {skill.name}
             </span>
           )}

package/src/components/message.tsx

@@ -133,6 +133,7 @@ function MessageCopyButton(props: MessageCopyButtonProps) {
   return (
     <button
       class={props.class}
+      aria-label={copied() ? 'Copied' : 'Copy message'}
       onClick={() => {
         navigator.clipboard.writeText(props.content);
         setCopied(true);

package/src/components/model-switcher.tsx

@@ -13,7 +13,7 @@ export function ModelSwitcher(props: ModelSwitcherProps) {
     <Show when={local.models.length > 1}>
       <Dropdown>
         <DropdownTrigger as={(triggerProps: any) => (
-          <Button variant="ghost" size="sm" class={cn('gap-1 text-xs text-muted-foreground', local.class)} {...triggerProps}>
+          <Button variant="ghost" size="sm" class={cn('gap-1 text-meta text-muted-foreground', local.class)} {...triggerProps}>
             {currentModel()?.name ?? local.currentModelId}
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
           </Button>
@@ -23,8 +23,8 @@ export function ModelSwitcher(props: ModelSwitcherProps) {
             {(model) => (
               <DropdownItem onSelect={() => local.onModelChange(model.id)}>
                 <div class="flex flex-col">
-                  <span class={cn('text-sm', model.id === local.currentModelId && 'font-medium text-foreground')}>{model.name}</span>
-                  <Show when={model.provider}><span class="text-xs text-muted-foreground">{model.provider}</span></Show>
+                  <span class={cn('text-body', model.id === local.currentModelId && 'font-medium text-foreground')}>{model.name}</span>
+                  <Show when={model.provider}><span class="text-caption text-muted-foreground">{model.provider}</span></Show>
                 </div>
               </DropdownItem>
             )}