@kitnai/chat 0.3.1 → 0.4.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
+
+> SolidJS + Shadow-DOM web component kit for building AI chat interfaces. 27 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; SolidJS is bundled in.
+
+## 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 27 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 27 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,6 +1,6 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "description": "SolidJS + Shadow-DOM web component kit for building AI chat interfaces.",
   "license": "MIT",
@@ -16,22 +16,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 +54,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 +75,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 +98,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/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>
             )}

package/src/components/prompt-input.tsx

@@ -121,8 +121,21 @@ function PromptInputTextarea(props: PromptInputTextareaProps) {
   ));
 
   function handleInput(e: InputEvent & { currentTarget: HTMLTextAreaElement }) {
-    adjustHeight(e.currentTarget);
-    ctx.setValue(e.currentTarget.value);
+    const el = e.currentTarget;
+    let value = el.value;
+    // Disallow leading whitespace — a prompt can't start with a space or blank
+    // line. Strip it (covers typing a space at the start AND pasting) and keep
+    // the caret in the right place.
+    if (/^\s/.test(value)) {
+      const stripped = value.replace(/^\s+/, '');
+      const removed = value.length - stripped.length;
+      const caret = Math.max(0, (el.selectionStart ?? 0) - removed);
+      el.value = stripped;
+      el.setSelectionRange(caret, caret);
+      value = stripped;
+    }
+    adjustHeight(el);
+    ctx.setValue(value);
   }
 
   function handleKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {

package/src/components/reasoning.tsx

@@ -74,7 +74,7 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
 
   return (
     <button
-      class={cn('flex cursor-pointer items-center gap-2', local.class)}
+      class={cn('flex cursor-pointer items-center gap-2 text-meta', local.class)}
       onClick={() => onOpenChange(!isOpen())}
       {...rest}
     >
@@ -142,7 +142,7 @@ function ReasoningContent(props: ReasoningContentProps) {
           // Markdown content is styled by the token-based `.chat-markdown` (see
           // Markdown component), which themes via design tokens — so no Tailwind
           // `prose`/`dark:prose-invert` is needed (those wouldn't follow a scoped theme).
-          'text-muted-foreground',
+          'text-muted-foreground text-body',
           local.contentClass
         )}
       >

package/src/components/scroll-button.tsx

@@ -16,6 +16,7 @@ function ScrollButton(props: ScrollButtonProps) {
     <Button
       variant={props.variant ?? 'outline'}
       size={props.size ?? 'sm'}
+      aria-label="Scroll to bottom"
       class={cn(
         'h-10 w-10 rounded-full transition-all duration-150 ease-out',
         !isAtBottom()

package/src/components/slash-command.tsx

@@ -99,11 +99,20 @@ function SlashCommand(props: SlashCommandProps) {
   });
 
   function selectItem(item: SlashCommandItem) {
-    ctx.setValue("");
+    // Insert the chosen command into the prompt (e.g. "/summarize ") so it
+    // appears in the input ready to send or edit. The trailing space ends the
+    // slash token, which closes the palette. Still fire onSelect so consumers
+    // can react to the selection.
+    ctx.setValue(item.label + " ");
     setOpen(false);
     props.onSelect(item);
-    // Refocus textarea
-    setTimeout(() => ctx.textareaRef?.focus(), 0);
+    // Refocus the textarea and place the caret at the end.
+    setTimeout(() => {
+      const ta = ctx.textareaRef;
+      if (!ta) return;
+      ta.focus();
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }, 0);
   }
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -163,7 +172,7 @@ function SlashCommand(props: SlashCommandProps) {
             {([category, items]) => (
               <>
                 <Show when={category}>
-                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-wide">
+                  <div class="px-3 pt-2 pb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wide">
                     {category}
                   </div>
                 </Show>
@@ -189,11 +198,11 @@ function SlashCommand(props: SlashCommandProps) {
                             <div class="text-xs flex items-center gap-1.5">
                               {item.label}
                               <Show when={isActive()}>
-                                <span class="text-[10px] text-violet-400">active</span>
+                                <span class="text-[10px] text-violet-600 dark:text-violet-400">active</span>
                               </Show>
                             </div>
                             <Show when={item.description}>
-                              <div class="text-xs text-muted-foreground/50 truncate">
+                              <div class="text-xs text-muted-foreground truncate">
                                 {item.description}
                               </div>
                             </Show>
@@ -202,9 +211,9 @@ function SlashCommand(props: SlashCommandProps) {
                           <Show when={isActive()}>
                             <span class="w-1 h-1 rounded-full bg-violet-400 flex-shrink-0" />
                           </Show>
-                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-400")}>{item.label}</span>
+                          <span class={cn("text-xs flex-shrink-0", isActive() && "text-violet-600 dark:text-violet-400")}>{item.label}</span>
                           <Show when={item.description}>
-                            <span class="text-xs text-muted-foreground/40 truncate">{item.description}</span>
+                            <span class="text-xs text-muted-foreground truncate">{item.description}</span>
                           </Show>
                         </Show>
                       </button>

package/src/components/source.tsx

@@ -35,7 +35,7 @@ function Source(props: SourceProps) {
 
   return (
     <SourceContext.Provider value={{ get href() { return props.href; }, get domain() { return domain(); } }}>
-      <HoverCardRoot openDelay={150} closeDelay={0}>
+      <HoverCardRoot openDelay={150}>
         {props.children}
       </HoverCardRoot>
     </SourceContext.Provider>
@@ -61,7 +61,7 @@ function SourceTrigger(props: SourceTriggerProps) {
         target="_blank"
         rel="noopener noreferrer"
         class={cn(
-          'bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
+          'bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
           props.showFavicon ? 'pr-2 pl-1' : 'px-2',
           props.class
         )}

package/src/components/thinking-bar.tsx

@@ -22,7 +22,7 @@ function ThinkingBar(props: ThinkingBarProps) {
       <Show
         when={local.onClick}
         fallback={
-          <TextShimmer class="cursor-default font-medium">{text()}</TextShimmer>
+          <TextShimmer class="cursor-default text-sm font-medium">{text()}</TextShimmer>
         }
       >
         <button
@@ -30,7 +30,7 @@ function ThinkingBar(props: ThinkingBarProps) {
           onClick={local.onClick}
           class="flex items-center gap-1 text-sm transition-opacity hover:opacity-80"
         >
-          <TextShimmer class="font-medium">{text()}</TextShimmer>
+          <TextShimmer class="text-sm font-medium">{text()}</TextShimmer>
           <ChevronRight class="text-muted-foreground size-4" />
         </button>
       </Show>

package/src/components/tool.tsx

@@ -46,10 +46,19 @@ function ToolStateIcon(props: { state: ToolPart['state'] }) {
   );
 }
 
-// Status chips: a saturated hue as text over a 15% translucent fill of the same
-// hue. This reads on both light and dark surfaces (mirroring the inline-code chip),
-// so it needs no `dark:` variant — which wouldn't follow a token-scoped theme anyway.
-const STATE_HUE: Record<ToolPart['state'], string> = {
+// Status chips: a hue as text over a 15% translucent fill of the same hue
+// (mirroring the inline-code chip). The TEXT color comes from a theme token
+// (--color-tool-*) whose light value is darkened so it reaches WCAG AA (4.5:1)
+// on the faint fill, while dark mode keeps a brighter hue for AA on the dark
+// surface — both modes resolve via the token's `.dark` override. The FILL keeps
+// a fixed bright hue so the chip's colored tint looks the same in both modes.
+const STATE_TOKEN: Record<ToolPart['state'], string> = {
+  'input-streaming': 'var(--color-tool-blue)',
+  'input-available': 'var(--color-tool-amber)',
+  'output-available': 'var(--color-tool-green)',
+  'output-error': 'var(--color-tool-red)',
+};
+const STATE_FILL: Record<ToolPart['state'], string> = {
   'input-streaming': 'hsl(217 91% 60%)', // blue
   'input-available': 'hsl(38 92% 50%)', // amber
   'output-available': 'hsl(142 71% 45%)', // green
@@ -57,8 +66,10 @@ const STATE_HUE: Record<ToolPart['state'], string> = {
 };
 
 function stateChip(state: ToolPart['state']): JSX.CSSProperties {
-  const hue = STATE_HUE[state];
-  return { color: hue, background: `color-mix(in oklab, ${hue} 15%, transparent)` };
+  return {
+    color: STATE_TOKEN[state],
+    background: `color-mix(in oklab, ${STATE_FILL[state]} 15%, transparent)`,
+  };
 }
 
 function ToolStateBadge(props: { state: ToolPart['state'] }) {

package/src/components/voice-input.tsx

@@ -16,6 +16,9 @@ export function VoiceInput(props: VoiceInputProps) {
   const { isRecording, start, stop } = useVoiceRecorder();
   const [isProcessing, setIsProcessing] = createSignal(false);
 
+  const label = () =>
+    isProcessing() ? 'Transcribing...' : isRecording() ? 'Stop recording' : 'Voice input';
+
   async function handleClick() {
     if (isRecording()) {
       stop();
@@ -76,10 +79,11 @@ export function VoiceInput(props: VoiceInputProps) {
         </For>
       </Show>
 
-      <Tooltip content={isProcessing() ? 'Transcribing...' : isRecording() ? 'Stop recording' : 'Voice input'}>
+      <Tooltip content={label()}>
         <Button
           variant="ghost"
           size="icon-sm"
+          aria-label={label()}
           onClick={handleClick}
           disabled={local.disabled || isProcessing()}
           class={cn(