From cada229f4a7e2300e9958555ed68ca069ef04a1c Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Wed, 1 Jul 2026 17:05:20 -0400
Subject: [PATCH 01/12] feat: add expandable pills and tool workflow styling
 from Ozwell widget

Addresses #290. Brings the Ozwell chat widget's pill patterns into the
UI package as themeable components:

- PillSelect: collapsible option selector (the reasoning-mode capsule ->
  segmented control). Any number of options, fully themeable via tokens.
- ThinkingBlock: reasoning pill that shows "Thinking" with a pulsing dot
  while streaming, then "Thought for Xs" when done. Click to expand/collapse.
- MCPToolCall: status pill header (green success / red error kept the same)
  with friendly tool names (underscores stripped, tense-shifted), result
  and resource links in a capped-width box, and toggleable raw params with
  a smooth expand/collapse animation.
- CollapsiblePill: shared primitive behind the thinking + tool pills.
---
 src/components/AI/AIMessage.stories.tsx       |  50 +++-
 src/components/AI/AIMessage.tsx               | 105 +++++----
 src/components/AI/CollapsiblePill.tsx         |  74 ++++++
 src/components/AI/MCPToolCall.tsx             | 217 ++++++++----------
 src/components/AI/index.ts                    |   3 +
 .../PillSelect/PillSelect.stories.tsx         | 113 +++++++++
 src/components/PillSelect/PillSelect.tsx      | 108 +++++++++
 src/components/PillSelect/index.ts            |   5 +
 src/index.ts                                  |   1 +
 9 files changed, 514 insertions(+), 162 deletions(-)
 create mode 100644 src/components/AI/CollapsiblePill.tsx
 create mode 100644 src/components/PillSelect/PillSelect.stories.tsx
 create mode 100644 src/components/PillSelect/PillSelect.tsx
 create mode 100644 src/components/PillSelect/index.ts

diff --git a/src/components/AI/AIMessage.stories.tsx b/src/components/AI/AIMessage.stories.tsx
index 9eef4a02..33f86489 100644
--- a/src/components/AI/AIMessage.stories.tsx
+++ b/src/components/AI/AIMessage.stories.tsx
@@ -165,11 +165,31 @@ export const StreamingMessage: Story = {
   },
 };
 
-/** A collapsible reasoning ("thinking") block ahead of the final answer. */
-export const ThinkingBlock: Story = {
+/** Thinking pill while the model is actively reasoning — pulsing dot, "Thinking" label. */
+export const ThinkingActive: Story = {
   render: () => {
     const message: AIMessage = {
-      id: '5',
+      id: '5a',
+      role: 'assistant',
+      content: [
+        {
+          type: 'thinking',
+          text: 'The user wants to add a new patient. I should use the create_patient tool with the provided information. Validating date format and required fields...',
+          collapsed: false,
+        },
+      ],
+      timestamp: new Date(),
+      status: 'streaming',
+    };
+    return <AIMessageDisplay message={message} />;
+  },
+};
+
+/** Thinking pill after the model finished — "Thought" label, no dot, collapsed by default. */
+export const ThinkingComplete: Story = {
+  render: () => {
+    const message: AIMessage = {
+      id: '5b',
       role: 'assistant',
       content: [
         {
@@ -189,6 +209,30 @@ export const ThinkingBlock: Story = {
   },
 };
 
+/** Thinking pill expanded — user clicked to reveal reasoning content. */
+export const ThinkingExpanded: Story = {
+  render: () => {
+    const message: AIMessage = {
+      id: '5c',
+      role: 'assistant',
+      content: [
+        {
+          type: 'thinking',
+          text: 'The user wants to add a new patient. I should use the create_patient tool with the provided information. I need to validate the date format and ensure all required fields are present.',
+          collapsed: false,
+        },
+        {
+          type: 'text',
+          text: "I'll create a new patient record for John Smith.",
+        },
+      ],
+      timestamp: new Date(),
+      status: 'complete',
+    };
+    return <AIMessageDisplay message={message} />;
+  },
+};
+
 /**
  * Demonstrates the `renderTextContent` extension point. This trivial demo turns
  * `**bold**` into `<strong>`; in a real app you would plug in a full Markdown
diff --git a/src/components/AI/AIMessage.tsx b/src/components/AI/AIMessage.tsx
index 0c97844e..de00ce7c 100644
--- a/src/components/AI/AIMessage.tsx
+++ b/src/components/AI/AIMessage.tsx
@@ -14,7 +14,8 @@ import type {
   MCPResourceLink,
 } from './types';
 import { MCPToolCallDisplay } from './MCPToolCall';
-import { SparklesIcon, ChevronIcon } from './icons';
+import { SparklesIcon } from './icons';
+import { CollapsiblePill } from './CollapsiblePill';
 import { AudioPlayer } from '../AudioPlayer';
 
 // ============================================================================
@@ -161,6 +162,61 @@ function AITypingIndicator({ className }: { className?: string }) {
   );
 }
 
+// ============================================================================
+// Thinking Block
+// ============================================================================
+
+function ThinkingBlock({
+  text,
+  streaming,
+  defaultCollapsed = false,
+}: {
+  text: string;
+  streaming: boolean;
+  defaultCollapsed?: boolean;
+}) {
+  const startedAt = React.useRef(Date.now());
+  const [elapsed, setElapsed] = React.useState<number | null>(null);
+  const prevStreaming = React.useRef(streaming);
+
+  React.useEffect(() => {
+    if (prevStreaming.current && !streaming) {
+      setElapsed(Math.round((Date.now() - startedAt.current) / 1000));
+    }
+    prevStreaming.current = streaming;
+  }, [streaming]);
+
+  const label = streaming
+    ? 'Thinking'
+    : elapsed !== null && elapsed > 0
+      ? `Thought for ${elapsed}s`
+      : 'Thought';
+
+  const dot = streaming ? (
+    <span
+      aria-hidden="true"
+      className="inline-block h-1.5 w-1.5 rounded-full bg-violet-500 dark:bg-violet-400"
+      style={{ animation: 'thinking-pulse 1.2s ease-in-out infinite' }}
+    />
+  ) : null;
+
+  return (
+    <div data-slot="ai-message-thinking">
+      <style>{`@keyframes thinking-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }`}</style>
+      <CollapsiblePill
+        label={label}
+        leadingIcon={dot}
+        defaultOpen={!defaultCollapsed}
+        pillClassName="bg-violet-50 border-violet-200 text-violet-600 hover:bg-violet-100 dark:bg-violet-950/30 dark:border-violet-800 dark:text-violet-400 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500"
+      >
+        <div className="border-l-2 border-violet-200 pl-3 text-[13px] leading-relaxed text-neutral-600 italic dark:border-violet-700 dark:text-neutral-400">
+          {text}
+        </div>
+      </CollapsiblePill>
+    </div>
+  );
+}
+
 // ============================================================================
 // Content Block Renderer
 // ============================================================================
@@ -182,10 +238,6 @@ function ContentBlock({
   role,
   renderTextContent,
 }: ContentBlockProps) {
-  const [isCollapsed, setIsCollapsed] = React.useState(
-    content.collapsed ?? false
-  );
-
   if (content.type === 'text' && content.text) {
     if (renderTextContent) {
       return (
@@ -213,44 +265,11 @@ function ContentBlock({
 
   if (content.type === 'thinking' && content.text) {
     return (
-      <div
-        data-slot="ai-message-thinking"
-        className="rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50"
-      >
-        <button
-          onClick={() => setIsCollapsed(!isCollapsed)}
-          className="flex w-full items-center justify-between px-3 py-2 text-left"
-        >
-          <span className="text-muted-foreground flex items-center gap-2 text-sm">
-            <svg
-              aria-hidden="true"
-              className="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth="1.5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-              />
-            </svg>
-            Thinking...
-          </span>
-          <ChevronIcon
-            direction={isCollapsed ? 'right' : 'down'}
-            className="text-neutral-400"
-          />
-        </button>
-        {!isCollapsed && (
-          <div className="border-t border-neutral-200 px-3 py-2 dark:border-neutral-700">
-            <p className="text-sm text-neutral-600 italic dark:text-neutral-400">
-              {content.text}
-            </p>
-          </div>
-        )}
-      </div>
+      <ThinkingBlock
+        text={content.text}
+        streaming={streaming}
+        defaultCollapsed={content.collapsed ?? false}
+      />
     );
   }
 
diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
new file mode 100644
index 00000000..5ac58ff5
--- /dev/null
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { ChevronIcon } from './icons';
+
+export interface CollapsiblePillProps {
+  label: string;
+  leadingIcon?: React.ReactNode;
+  density?: 'standard' | 'condensed';
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  pillClassName?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function CollapsiblePill({
+  label,
+  leadingIcon,
+  density = 'standard',
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  pillClassName,
+  className,
+  children,
+}: CollapsiblePillProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const toggle = () => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <div data-slot="collapsible-pill" className={className}>
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={isOpen}
+        className={cn(
+          'inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+          density === 'condensed'
+            ? 'rounded-[8px] px-2 py-0.5 text-[10px]'
+            : 'rounded-[10px] px-[11px] py-1 text-[11px]',
+          pillClassName
+        )}
+      >
+        {leadingIcon}
+        <span>{label}</span>
+        <ChevronIcon
+          direction={isOpen ? 'down' : 'right'}
+          className={
+            density === 'condensed'
+              ? 'h-2.5 w-2.5 opacity-60'
+              : 'h-3 w-3 opacity-60'
+          }
+        />
+      </button>
+      {children && (
+        <div
+          className={cn(
+            'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
+            isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
+          )}
+        >
+          <div className="mt-1.5">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index ec12e5ad..72c6fb01 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn';
 import type {
   MCPToolCall,
@@ -543,34 +543,6 @@ function ToolResultDisplay({
 // MCP Tool Call Component
 // ============================================================================
 
-const toolCallVariants = cva(
-  ['rounded-lg border', 'overflow-hidden', 'transition-all duration-200'],
-  {
-    variants: {
-      status: {
-        pending:
-          'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50',
-        running:
-          'border-primary-200 bg-primary-50/50 dark:border-primary-800 dark:bg-primary-900/20',
-        success:
-          'border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-900/20',
-        error:
-          'border-red-200 bg-red-50/50 dark:border-red-800 dark:bg-red-900/20',
-        cancelled:
-          'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50 opacity-60',
-      },
-      compact: {
-        true: 'p-2',
-        false: 'p-3',
-      },
-    },
-    defaultVariants: {
-      status: 'pending',
-      compact: false,
-    },
-  }
-);
-
 // Human-readable tool names
 const TOOL_FRIENDLY_NAMES: Record<string, string> = {
   create_patient: 'Creating patient',
@@ -664,11 +636,25 @@ function getParameterSummary(
   return null;
 }
 
-export interface MCPToolCallDisplayProps extends VariantProps<
-  typeof toolCallVariants
-> {
+// Pill header colors per status (Ozwell-style status pill)
+const statusPillClasses: Record<MCPToolStatus, string> = {
+  pending:
+    'bg-neutral-100 border-neutral-200 text-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400',
+  running:
+    'bg-primary-50 border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800 dark:text-primary-300',
+  success:
+    'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-300',
+  error:
+    'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300',
+  cancelled:
+    'bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700',
+};
+
+export interface MCPToolCallDisplayProps {
   /** The tool call to display */
   toolCall: MCPToolCall;
+  /** Compact (condensed) sizing — tighter pill and box */
+  compact?: boolean;
   /** Whether to show parameters (in detailed view) */
   showParameters?: boolean;
   /** Whether the component is collapsible to show details */
@@ -703,103 +689,102 @@ export function MCPToolCallDisplay({
   };
 
   const friendlyName = getToolFriendlyName(toolCall.toolName, toolCall.status);
+  const durationLabel = formatDuration(toolCall.duration);
+  const pillLabel = durationLabel
+    ? `${friendlyName} · ${durationLabel}`
+    : friendlyName;
   const paramSummary = getParameterSummary(
     toolCall.toolName,
     toolCall.parameters
   );
 
   return (
-    <div
-      data-slot="ai-tool-call"
-      className={cn(
-        toolCallVariants({ status: toolCall.status, compact }),
-        className
-      )}
-    >
-      {/* Main Content - Always Visible */}
-      <div className="flex items-start gap-3">
-        {/* Tool Icon */}
-        <div
-          data-slot="ai-tool-icon"
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/50 text-neutral-600 dark:bg-neutral-700/50 dark:text-neutral-400"
-        >
-          {getToolIcon(toolCall.toolName)}
-        </div>
+    <div data-slot="ai-tool-call" className={cn('space-y-1.5', className)}>
+      {/* Status Pill Header — standalone, above the box */}
+      <span
+        data-slot="ai-tool-pill"
+        className={cn(
+          'inline-flex items-center gap-1.5 border font-medium',
+          compact
+            ? 'rounded-[8px] px-2 py-0.5 text-[10px]'
+            : 'rounded-[10px] px-[11px] py-1 text-[11px]',
+          statusPillClasses[toolCall.status]
+        )}
+      >
+        <ToolStatusIcon status={toolCall.status} />
+        <span>{pillLabel}</span>
+      </span>
 
-        {/* Content */}
-        <div data-slot="ai-tool-content" className="min-w-0 flex-1">
-          {/* Friendly Status Line */}
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium text-neutral-900 dark:text-white">
-              {friendlyName}
-            </span>
-            <ToolStatusIcon status={toolCall.status} />
-            {toolCall.duration && (
-              <span className="text-xs text-neutral-600 dark:text-neutral-400">
-                {formatDuration(toolCall.duration)}
-              </span>
-            )}
+      {/* Detail box — result, links, and expandable params */}
+      <div
+        className={cn(
+          'w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50',
+          compact ? 'p-2' : 'p-3'
+        )}
+      >
+        {/* Parameter Summary (user-friendly) */}
+        {paramSummary && toolCall.status !== 'success' && (
+          <p className="text-muted-foreground text-sm">{paramSummary}</p>
+        )}
+
+        {/* Result Summary & Links */}
+        {toolCall.result && (
+          <div data-slot="ai-tool-result">
+            <ToolResultDisplay
+              result={toolCall.result}
+              onLinkClick={onLinkClick}
+              showRawData={showDetails}
+            />
           </div>
+        )}
 
-          {/* Parameter Summary (user-friendly) */}
-          {paramSummary && toolCall.status !== 'success' && (
-            <p className="text-muted-foreground mt-0.5 text-sm">
-              {paramSummary}
+        {/* Error */}
+        {toolCall.error && (
+          <div className="rounded-md bg-red-100 p-2 dark:bg-red-900/30">
+            <p className="text-sm text-red-700 dark:text-red-300">
+              {toolCall.error}
             </p>
-          )}
-
-          {/* Result Summary & Links */}
-          {toolCall.result && (
-            <div data-slot="ai-tool-result" className="mt-2">
-              <ToolResultDisplay
-                result={toolCall.result}
-                onLinkClick={onLinkClick}
-                showRawData={showDetails}
-              />
-            </div>
-          )}
-
-          {/* Error */}
-          {toolCall.error && (
-            <div className="mt-2 rounded-md bg-red-100 p-2 dark:bg-red-900/30">
-              <p className="text-sm text-red-700 dark:text-red-300">
-                {toolCall.error}
-              </p>
-            </div>
-          )}
+          </div>
+        )}
 
-          {/* Show Details Toggle */}
-          {collapsible && showParameters && toolCall.parameters.length > 0 && (
-            <button
-              onClick={() => setShowDetails(!showDetails)}
-              className="mt-2 flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
+        {/* Show Details Toggle */}
+        {collapsible && showParameters && toolCall.parameters.length > 0 && (
+          <button
+            onClick={() => setShowDetails(!showDetails)}
+            className="flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
+          >
+            <svg
+              aria-hidden="true"
+              className={cn(
+                'h-3 w-3 transition-transform',
+                showDetails && 'rotate-90'
+              )}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="2"
             >
-              <svg
-                aria-hidden="true"
-                className={cn(
-                  'h-3 w-3 transition-transform',
-                  showDetails && 'rotate-90'
-                )}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-              {showDetails ? 'Hide' : 'Show'} details
-            </button>
-          )}
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+            {showDetails ? 'Hide' : 'Show'} details
+          </button>
+        )}
 
-          {/* Technical Details (collapsed by default) */}
-          {showDetails && showParameters && toolCall.parameters.length > 0 && (
+        {/* Technical Details — smooth expand/collapse */}
+        {showParameters && toolCall.parameters.length > 0 && (
+          <div
+            className={cn(
+              'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
+              showDetails ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
+            )}
+          >
             <div
               data-slot="ai-tool-parameters"
-              className="mt-3 rounded-md bg-neutral-100 p-2 dark:bg-neutral-800"
+              className="rounded-md bg-neutral-100 p-2 dark:bg-neutral-800"
             >
               <h4 className="mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400">
                 Parameters
@@ -822,8 +807,8 @@ export function MCPToolCallDisplay({
                 ))}
               </div>
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/AI/index.ts b/src/components/AI/index.ts
index ed50346b..dbae79b8 100644
--- a/src/components/AI/index.ts
+++ b/src/components/AI/index.ts
@@ -26,6 +26,9 @@ export {
   type SpinnerIconProps,
 } from './icons';
 
+// Collapsible Pill (shared primitive for thinking + tool display)
+export { CollapsiblePill, type CollapsiblePillProps } from './CollapsiblePill';
+
 // MCP Tool Call Display
 export {
   MCPToolCallDisplay,
diff --git a/src/components/PillSelect/PillSelect.stories.tsx b/src/components/PillSelect/PillSelect.stories.tsx
new file mode 100644
index 00000000..a6ce4b2e
--- /dev/null
+++ b/src/components/PillSelect/PillSelect.stories.tsx
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { PillSelect } from './PillSelect';
+
+const meta: Meta<typeof PillSelect> = {
+  title: 'Components/Navigation/PillSelect',
+  component: PillSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    value: { control: 'text' },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PillSelect>;
+
+const defaultOptions = [
+  { value: 'option-1', label: 'Option 1' },
+  { value: 'option-2', label: 'Option 2' },
+  { value: 'option-3', label: 'Option 3' },
+  { value: 'option-4', label: 'Option 4' },
+];
+
+/** Default collapsed state — click to expand and pick an option. */
+export const Default: Story = {
+  args: {
+    options: defaultOptions,
+    defaultValue: 'option-2',
+    label: 'Mode',
+  },
+};
+
+/** No label — shows only the selected option value in collapsed state. */
+export const NoLabel: Story = {
+  args: {
+    options: defaultOptions,
+    defaultValue: 'option-1',
+  },
+};
+
+/** Two options. */
+export const TwoOptions: Story = {
+  args: {
+    options: [
+      { value: 'off', label: 'Off' },
+      { value: 'on', label: 'On' },
+    ],
+    defaultValue: 'on',
+    label: 'Feature',
+  },
+};
+
+/** Many options. */
+export const ManyOptions: Story = {
+  args: {
+    options: [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' },
+      { value: '4', label: 'Option 4' },
+      { value: '5', label: 'Option 5' },
+      { value: '6', label: 'Option 6' },
+    ],
+    defaultValue: '3',
+    label: 'Size',
+  },
+};
+
+/** One option disabled. */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      { value: 'option-1', label: 'Option 1' },
+      { value: 'option-2', label: 'Option 2', disabled: true },
+      { value: 'option-3', label: 'Option 3' },
+    ],
+    defaultValue: 'option-1',
+    label: 'Mode',
+  },
+};
+
+function ControlledDemo() {
+  const [value, setValue] = React.useState('option-2');
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <PillSelect
+        options={defaultOptions}
+        value={value}
+        onValueChange={setValue}
+        label="Mode"
+      />
+      <p className="text-muted-foreground text-sm">Selected: {value}</p>
+    </div>
+  );
+}
+
+/** Controlled — parent owns the value. */
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};
+
+/** Disabled — collapsed pill is not clickable. */
+export const Disabled: Story = {
+  args: {
+    options: defaultOptions,
+    defaultValue: 'option-2',
+    label: 'Mode',
+    disabled: true,
+  },
+};
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
new file mode 100644
index 00000000..d9f3e730
--- /dev/null
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useEscapeKey } from '../../hooks/useEscapeKey';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PillSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface PillSelectProps {
+  options: PillSelectOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function PillSelect({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  label,
+  disabled = false,
+  className,
+}: PillSelectProps) {
+  const [internalValue, setInternalValue] = React.useState(
+    defaultValue ?? options[0]?.value ?? ''
+  );
+  const [expanded, setExpanded] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const selectedOption = options.find((o) => o.value === value);
+
+  useClickOutside(ref, () => setExpanded(false), expanded);
+  useEscapeKey(() => setExpanded(false), expanded);
+
+  function handleSelect(option: PillSelectOption) {
+    if (option.disabled) return;
+    if (controlledValue === undefined) setInternalValue(option.value);
+    onValueChange?.(option.value);
+    setExpanded(false);
+  }
+
+  const collapsedLabel = [label, selectedOption?.label ?? value]
+    .filter(Boolean)
+    .join(': ');
+
+  return (
+    <div ref={ref} className={cn('inline-flex', className)}>
+      {expanded ? (
+        <div
+          role="group"
+          aria-label={label}
+          className="border-border bg-muted inline-flex items-center rounded-full border p-0.5"
+        >
+          {options.map((option) => {
+            const selected = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                disabled={option.disabled}
+                onClick={() => handleSelect(option)}
+                aria-pressed={selected}
+                className={cn(
+                  'focus-visible:ring-ring rounded-full px-3 py-0.5 text-sm transition-colors focus:outline-none focus-visible:ring-2',
+                  selected
+                    ? 'bg-background text-foreground font-semibold shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground font-normal',
+                  option.disabled && 'cursor-not-allowed opacity-40'
+                )}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setExpanded(true)}
+          className={cn(
+            'border-border bg-muted text-foreground inline-flex items-center rounded-full border px-3 py-0.5 text-sm transition-colors',
+            'hover:bg-muted/80 focus-visible:ring-ring focus:outline-none focus-visible:ring-2',
+            disabled && 'cursor-not-allowed opacity-50'
+          )}
+        >
+          {collapsedLabel}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/PillSelect/index.ts b/src/components/PillSelect/index.ts
new file mode 100644
index 00000000..0d573a1a
--- /dev/null
+++ b/src/components/PillSelect/index.ts
@@ -0,0 +1,5 @@
+export {
+  PillSelect,
+  type PillSelectProps,
+  type PillSelectOption,
+} from './PillSelect';
diff --git a/src/index.ts b/src/index.ts
index bf9ba28c..2fb8c2fe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -139,6 +139,7 @@ export * from './components/ScheduleCalendar';
 export * from './components/SchedulePicker';
 export * from './components/ScrollArea';
 export * from './components/Select';
+export * from './components/PillSelect';
 export * from './components/ServiceAccordion';
 export * from './components/ServiceBadge';
 export * from './components/ServiceCard';

From 6d802581b1b9e907f454a91075c8dafa05b771c4 Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Thu, 2 Jul 2026 15:41:06 -0400
Subject: [PATCH 02/12] feat: pill-first tool call, hide flag, safelist +
 review fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MCPToolCall: default shows only the status pill; clicking it reveals the
  whole box (result, links, raw params) in one click with a "Show details"
  tooltip. Input summary now rides in the pill while running
  ("Creating patient · John Smith"); success shows duration instead.
- Add `hidden` prop to turn the tool-call display off entirely (mirrors the
  Ozwell widget debug flag).
- tailwind-preset: safelist the AI pill arbitrary utilities, the violet
  thinking-pill classes, and the green/red status pill colors so Tailwind 3
  consumers get them.
- CollapsiblePill: don't mutate internal state when controlled; add optional
  title (tooltip).
- PillSelect: no trailing colon when empty; disable the pill when there are
  no options.
- Stories: add PillOnly and Hidden; refresh control docs.
---
 src/components/AI/CollapsiblePill.tsx     |  10 +-
 src/components/AI/MCPToolCall.stories.tsx |  34 +++-
 src/components/AI/MCPToolCall.tsx         | 221 +++++++++++-----------
 src/components/PillSelect/PillSelect.tsx  |  11 +-
 src/tailwind-preset.ts                    |  47 +++++
 5 files changed, 201 insertions(+), 122 deletions(-)

diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index 5ac58ff5..a780caf8 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -11,6 +11,8 @@ export interface CollapsiblePillProps {
   onOpenChange?: (open: boolean) => void;
   pillClassName?: string;
   className?: string;
+  /** Native tooltip shown on hover (e.g. "Show details") */
+  title?: string;
   children?: React.ReactNode;
 }
 
@@ -23,14 +25,17 @@ export function CollapsiblePill({
   onOpenChange,
   pillClassName,
   className,
+  title,
   children,
 }: CollapsiblePillProps) {
+  const isControlled = controlledOpen !== undefined;
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
 
   const toggle = () => {
     const next = !isOpen;
-    setInternalOpen(next);
+    // Only own the state when uncontrolled; a controlled consumer drives it.
+    if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   };
 
@@ -40,6 +45,7 @@ export function CollapsiblePill({
         type="button"
         onClick={toggle}
         aria-expanded={isOpen}
+        title={title}
         className={cn(
           'inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
           density === 'condensed'
diff --git a/src/components/AI/MCPToolCall.stories.tsx b/src/components/AI/MCPToolCall.stories.tsx
index 27f8922d..80e31873 100644
--- a/src/components/AI/MCPToolCall.stories.tsx
+++ b/src/components/AI/MCPToolCall.stories.tsx
@@ -52,13 +52,14 @@ const meta: Meta<typeof MCPToolCallDisplay> = {
     },
     collapsible: {
       control: 'boolean',
-      description: 'Whether the technical details can be collapsed/expanded.',
+      description:
+        'Whether the raw parameters can be collapsed/expanded (the "Show details" toggle inside the box).',
       table: { defaultValue: { summary: 'true' } },
     },
     defaultCollapsed: {
       control: 'boolean',
       description:
-        'Initial collapsed state. `true` hides the technical details by default.',
+        'Initial state. `true` shows only the pill; the box (result + params) opens when the pill is clicked.',
       table: { defaultValue: { summary: 'true' } },
     },
     compact: {
@@ -66,6 +67,12 @@ const meta: Meta<typeof MCPToolCallDisplay> = {
       description:
         'Render a condensed single-line variant, ideal for dense lists.',
     },
+    hidden: {
+      control: 'boolean',
+      description:
+        'Hide the whole tool-call display (mirrors the Ozwell widget debug flag).',
+      table: { defaultValue: { summary: 'false' } },
+    },
     onLinkClick: {
       action: 'onLinkClick',
       description: 'Called when a resource link in the result is clicked.',
@@ -116,3 +123,26 @@ export const Compact: Story = {
     collapsible: false,
   },
 };
+
+/**
+ * Pill only by default — the box (result + params) stays hidden until the pill
+ * is clicked. While running, the pill shows the input summary
+ * (e.g. "Creating patient · John Smith").
+ */
+export const PillOnly: Story = {
+  args: {
+    toolCall: pendingToolCall,
+    defaultCollapsed: true,
+  },
+};
+
+/**
+ * `hidden` turns the whole display off at once — the equivalent of the Ozwell
+ * widget's debug flag for toggling tool-call visibility.
+ */
+export const Hidden: Story = {
+  args: {
+    toolCall: successToolCall,
+    hidden: true,
+  },
+};
diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index 72c6fb01..b8da367d 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -7,6 +7,7 @@
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn';
+import { CollapsiblePill } from './CollapsiblePill';
 import type {
   MCPToolCall,
   MCPToolStatus,
@@ -655,12 +656,14 @@ export interface MCPToolCallDisplayProps {
   toolCall: MCPToolCall;
   /** Compact (condensed) sizing — tighter pill and box */
   compact?: boolean;
-  /** Whether to show parameters (in detailed view) */
+  /** Whether to show the raw parameters ("Show details") inside the box */
   showParameters?: boolean;
-  /** Whether the component is collapsible to show details */
+  /** Whether the raw parameters can be collapsed/expanded inside the box */
   collapsible?: boolean;
-  /** Default collapsed state (true = hide details) */
+  /** Default collapsed state (true = pill only, box hidden until clicked) */
   defaultCollapsed?: boolean;
+  /** Hide the whole tool-call display (mirrors Ozwell's debug flag) */
+  hidden?: boolean;
   /** Callback when a resource link is clicked */
   onLinkClick?: (link: MCPResourceLink) => void;
   /** Additional class name */
@@ -677,11 +680,10 @@ export function MCPToolCallDisplay({
   collapsible = true,
   defaultCollapsed = true,
   compact,
+  hidden = false,
   onLinkClick,
   className,
 }: MCPToolCallDisplayProps) {
-  const [showDetails, setShowDetails] = React.useState(!defaultCollapsed);
-
   const formatDuration = (ms?: number) => {
     if (!ms) return null;
     if (ms < 1000) return `${ms}ms`;
@@ -690,126 +692,119 @@ export function MCPToolCallDisplay({
 
   const friendlyName = getToolFriendlyName(toolCall.toolName, toolCall.status);
   const durationLabel = formatDuration(toolCall.duration);
-  const pillLabel = durationLabel
-    ? `${friendlyName} · ${durationLabel}`
-    : friendlyName;
   const paramSummary = getParameterSummary(
     toolCall.toolName,
     toolCall.parameters
   );
 
-  return (
-    <div data-slot="ai-tool-call" className={cn('space-y-1.5', className)}>
-      {/* Status Pill Header — standalone, above the box */}
-      <span
-        data-slot="ai-tool-pill"
-        className={cn(
-          'inline-flex items-center gap-1.5 border font-medium',
-          compact
-            ? 'rounded-[8px] px-2 py-0.5 text-[10px]'
-            : 'rounded-[10px] px-[11px] py-1 text-[11px]',
-          statusPillClasses[toolCall.status]
-        )}
-      >
-        <ToolStatusIcon status={toolCall.status} />
-        <span>{pillLabel}</span>
-      </span>
+  // While running, show the input summary in the pill (e.g. "Creating patient
+  // · John Smith"). On success the name already appears as the result link, so
+  // show the duration instead to avoid duplication.
+  const detailBit =
+    toolCall.status === 'success'
+      ? durationLabel
+      : (paramSummary ?? durationLabel);
+  const pillLabel = detailBit ? `${friendlyName} · ${detailBit}` : friendlyName;
 
-      {/* Detail box — result, links, and expandable params */}
-      <div
-        className={cn(
-          'w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50',
-          compact ? 'p-2' : 'p-3'
-        )}
-      >
-        {/* Parameter Summary (user-friendly) */}
-        {paramSummary && toolCall.status !== 'success' && (
-          <p className="text-muted-foreground text-sm">{paramSummary}</p>
-        )}
+  const hasParams = showParameters && toolCall.parameters.length > 0;
+  const hasBoxContent = Boolean(toolCall.result || toolCall.error || hasParams);
 
-        {/* Result Summary & Links */}
-        {toolCall.result && (
-          <div data-slot="ai-tool-result">
-            <ToolResultDisplay
-              result={toolCall.result}
-              onLinkClick={onLinkClick}
-              showRawData={showDetails}
-            />
-          </div>
-        )}
+  if (hidden) return null;
 
-        {/* Error */}
-        {toolCall.error && (
-          <div className="rounded-md bg-red-100 p-2 dark:bg-red-900/30">
-            <p className="text-sm text-red-700 dark:text-red-300">
-              {toolCall.error}
-            </p>
-          </div>
-        )}
+  // Everything the pill reveals in one click: result, links, and raw params.
+  const box = (
+    <div
+      className={cn(
+        'w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50',
+        compact ? 'p-2' : 'p-3'
+      )}
+    >
+      {/* Result Summary & Links */}
+      {toolCall.result && (
+        <div data-slot="ai-tool-result">
+          <ToolResultDisplay
+            result={toolCall.result}
+            onLinkClick={onLinkClick}
+          />
+        </div>
+      )}
 
-        {/* Show Details Toggle */}
-        {collapsible && showParameters && toolCall.parameters.length > 0 && (
-          <button
-            onClick={() => setShowDetails(!showDetails)}
-            className="flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
-          >
-            <svg
-              aria-hidden="true"
-              className={cn(
-                'h-3 w-3 transition-transform',
-                showDetails && 'rotate-90'
-              )}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-            {showDetails ? 'Hide' : 'Show'} details
-          </button>
-        )}
+      {/* Error */}
+      {toolCall.error && (
+        <div className="rounded-md bg-red-100 p-2 dark:bg-red-900/30">
+          <p className="text-sm text-red-700 dark:text-red-300">
+            {toolCall.error}
+          </p>
+        </div>
+      )}
 
-        {/* Technical Details — smooth expand/collapse */}
-        {showParameters && toolCall.parameters.length > 0 && (
-          <div
-            className={cn(
-              'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
-              showDetails ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
-            )}
-          >
-            <div
-              data-slot="ai-tool-parameters"
-              className="rounded-md bg-neutral-100 p-2 dark:bg-neutral-800"
-            >
-              <h4 className="mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400">
-                Parameters
-              </h4>
-              <div className="space-y-0.5">
-                {toolCall.parameters.map((param) => (
-                  <div
-                    key={param.name}
-                    className="flex items-start gap-2 text-xs"
-                  >
-                    <span className="font-mono text-neutral-600 dark:text-neutral-400">
-                      {param.name}:
-                    </span>
-                    <span className="font-mono text-neutral-700 dark:text-neutral-300">
-                      {typeof param.value === 'string'
-                        ? param.value
-                        : JSON.stringify(param.value)}
-                    </span>
-                  </div>
-                ))}
+      {/* Raw parameters — revealed together with the box */}
+      {hasParams && (
+        <div
+          data-slot="ai-tool-parameters"
+          className="rounded-md bg-neutral-100 p-2 dark:bg-neutral-800"
+        >
+          <h4 className="mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400">
+            Parameters
+          </h4>
+          <div className="space-y-0.5">
+            {toolCall.parameters.map((param) => (
+              <div key={param.name} className="flex items-start gap-2 text-xs">
+                <span className="font-mono text-neutral-600 dark:text-neutral-400">
+                  {param.name}:
+                </span>
+                <span className="font-mono text-neutral-700 dark:text-neutral-300">
+                  {typeof param.value === 'string'
+                    ? param.value
+                    : JSON.stringify(param.value)}
+                </span>
               </div>
-            </div>
+            ))}
           </div>
-        )}
-      </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const staticPill = (
+    <span
+      data-slot="ai-tool-pill"
+      className={cn(
+        'inline-flex items-center gap-1.5 border font-medium',
+        compact
+          ? 'rounded-[8px] px-2 py-0.5 text-[10px]'
+          : 'rounded-[10px] px-[11px] py-1 text-[11px]',
+        statusPillClasses[toolCall.status]
+      )}
+    >
+      <ToolStatusIcon status={toolCall.status} />
+      <span>{pillLabel}</span>
+    </span>
+  );
+
+  return (
+    <div data-slot="ai-tool-call" className={className}>
+      {!hasBoxContent ? (
+        staticPill
+      ) : collapsible ? (
+        // Pill click reveals the whole box (result + params) in one go.
+        <CollapsiblePill
+          label={pillLabel}
+          leadingIcon={<ToolStatusIcon status={toolCall.status} />}
+          density={compact ? 'condensed' : 'standard'}
+          defaultOpen={!defaultCollapsed}
+          pillClassName={statusPillClasses[toolCall.status]}
+          title="Show details"
+        >
+          {box}
+        </CollapsiblePill>
+      ) : (
+        // Non-collapsible: pill + box always visible.
+        <div className="space-y-1.5">
+          {staticPill}
+          {box}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index d9f3e730..39aef89f 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -55,9 +55,10 @@ export function PillSelect({
     setExpanded(false);
   }
 
-  const collapsedLabel = [label, selectedOption?.label ?? value]
-    .filter(Boolean)
-    .join(': ');
+  const hasOptions = options.length > 0;
+  const valuePart = selectedOption?.label ?? value;
+  const collapsedLabel =
+    label && valuePart ? `${label}: ${valuePart}` : label || valuePart;
 
   return (
     <div ref={ref} className={cn('inline-flex', className)}>
@@ -92,12 +93,12 @@ export function PillSelect({
       ) : (
         <button
           type="button"
-          disabled={disabled}
+          disabled={disabled || !hasOptions}
           onClick={() => setExpanded(true)}
           className={cn(
             'border-border bg-muted text-foreground inline-flex items-center rounded-full border px-3 py-0.5 text-sm transition-colors',
             'hover:bg-muted/80 focus-visible:ring-ring focus:outline-none focus-visible:ring-2',
-            disabled && 'cursor-not-allowed opacity-50'
+            (disabled || !hasOptions) && 'cursor-not-allowed opacity-50'
           )}
         >
           {collapsedLabel}
diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
index e494e4bb..39ea3666 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -406,6 +406,53 @@ export const miewebUISafelist = [
   // injected <svg> so the diagram sizes naturally instead of collapsing.
   '[&_svg]:h-auto',
   '[&_svg]:max-w-none',
+  // AI pills — CollapsiblePill / MCPToolCall arbitrary utilities
+  'rounded-[8px]',
+  'rounded-[10px]',
+  'px-[11px]',
+  'max-h-0',
+  'max-h-[500px]',
+  'transition-[max-height,opacity]',
+  // ThinkingBlock (violet reasoning pill)
+  'bg-violet-50',
+  'bg-violet-500',
+  'border-violet-200',
+  'text-violet-600',
+  'hover:bg-violet-100',
+  'focus-visible:ring-violet-500',
+  'dark:bg-violet-400',
+  'dark:bg-violet-950/30',
+  'dark:border-violet-700',
+  'dark:border-violet-800',
+  'dark:hover:bg-violet-950/50',
+  'dark:text-violet-400',
+  // MCPToolCall status pills (green success / red error kept the same)
+  'bg-green-50',
+  'border-green-200',
+  'text-green-700',
+  'dark:bg-green-900/20',
+  'dark:border-green-800',
+  'dark:text-green-300',
+  'bg-red-50',
+  'border-red-200',
+  'text-red-700',
+  'dark:bg-red-900/20',
+  'dark:border-red-800',
+  'dark:text-red-300',
+  'bg-neutral-100',
+  'border-neutral-200',
+  'text-neutral-600',
+  'text-neutral-400',
+  'dark:bg-neutral-800',
+  'dark:border-neutral-700',
+  'dark:text-neutral-400',
+  'bg-primary-50',
+  'border-primary-200',
+  'text-primary-800',
+  'dark:bg-primary-900/20',
+  'dark:border-primary-800',
+  'dark:text-primary-300',
+  'opacity-60',
 ];
 
 export interface MiewebUIPreset {

From cde658ce522d680b6ea2ac2b5a7f988ab423e0ec Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:58:24 -0400
Subject: [PATCH 03/12] fix: address ai pill review feedback

---
 src/components/AI/CollapsiblePill.tsx     |  5 +++++
 src/components/AI/MCPToolCall.stories.tsx | 26 +++++------------------
 src/components/AI/MCPToolCall.tsx         | 13 +++++++-----
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index a780caf8..177ee428 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -31,6 +31,7 @@ export function CollapsiblePill({
   const isControlled = controlledOpen !== undefined;
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
+  const contentId = React.useId();
 
   const toggle = () => {
     const next = !isOpen;
@@ -45,6 +46,7 @@ export function CollapsiblePill({
         type="button"
         onClick={toggle}
         aria-expanded={isOpen}
+        aria-controls={children ? contentId : undefined}
         title={title}
         className={cn(
           'inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
@@ -67,6 +69,9 @@ export function CollapsiblePill({
       </button>
       {children && (
         <div
+          id={contentId}
+          aria-hidden={!isOpen}
+          inert={!isOpen || undefined}
           className={cn(
             'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
             isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
diff --git a/src/components/AI/MCPToolCall.stories.tsx b/src/components/AI/MCPToolCall.stories.tsx
index 80e31873..e4f30196 100644
--- a/src/components/AI/MCPToolCall.stories.tsx
+++ b/src/components/AI/MCPToolCall.stories.tsx
@@ -19,21 +19,8 @@ const meta: Meta<typeof MCPToolCallDisplay> = {
     layout: 'padded',
     docs: {
       description: {
-        component: [
-          '`MCPToolCallDisplay` renders a single **Model Context Protocol (MCP) tool invocation**',
-          'inside an AI conversation — for example, an assistant calling a `create_patient` tool.',
-          '',
-          'It shows a friendly, human-readable summary by default (tool name, status, duration, and',
-          'any resulting resource link), and hides the technical parameter/JSON details behind a',
-          '_Show details_ toggle so non-technical users are not overwhelmed.',
-          '',
-          '### Status states',
-          '`pending` · `running` · `success` · `error` · `cancelled` — each renders a distinct icon and color.',
-          '',
-          '### When to use',
-          'Embed it inside an `AIMessage` content block of type `tool_use`, or render it standalone to',
-          'visualize an in-progress or completed tool call. Inside `AIChat` this happens automatically.',
-        ].join('\n'),
+        component:
+          'Renders an MCP tool invocation as a status pill with an optional detail box for results, errors, and parameters.',
       },
     },
   },
@@ -53,14 +40,14 @@ const meta: Meta<typeof MCPToolCallDisplay> = {
     collapsible: {
       control: 'boolean',
       description:
-        'Whether the raw parameters can be collapsed/expanded (the "Show details" toggle inside the box).',
+        'Whether clicking the pill toggles the entire detail box open/closed.',
       table: { defaultValue: { summary: 'true' } },
     },
     defaultCollapsed: {
       control: 'boolean',
       description:
-        'Initial state. `true` shows only the pill; the box (result + params) opens when the pill is clicked.',
-      table: { defaultValue: { summary: 'true' } },
+        'Initial detail-box state. When omitted, completed tool calls start expanded and in-progress calls start collapsed.',
+      table: { defaultValue: { summary: 'status-based' } },
     },
     compact: {
       control: 'boolean',
@@ -103,7 +90,6 @@ export const Running: Story = {
 export const Success: Story = {
   args: {
     toolCall: successToolCall,
-    defaultCollapsed: false,
   },
 };
 
@@ -111,7 +97,6 @@ export const Success: Story = {
 export const Error: Story = {
   args: {
     toolCall: errorToolCall,
-    defaultCollapsed: false,
   },
 };
 
@@ -132,7 +117,6 @@ export const Compact: Story = {
 export const PillOnly: Story = {
   args: {
     toolCall: pendingToolCall,
-    defaultCollapsed: true,
   },
 };
 
diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index b8da367d..ecf6bc43 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -656,11 +656,11 @@ export interface MCPToolCallDisplayProps {
   toolCall: MCPToolCall;
   /** Compact (condensed) sizing — tighter pill and box */
   compact?: boolean;
-  /** Whether to show the raw parameters ("Show details") inside the box */
+  /** Whether to include raw parameters inside the detail box */
   showParameters?: boolean;
-  /** Whether the raw parameters can be collapsed/expanded inside the box */
+  /** Whether clicking the pill can expand/collapse the entire detail box */
   collapsible?: boolean;
-  /** Default collapsed state (true = pill only, box hidden until clicked) */
+  /** Default collapsed state. By default, completed tool calls start expanded. */
   defaultCollapsed?: boolean;
   /** Hide the whole tool-call display (mirrors Ozwell's debug flag) */
   hidden?: boolean;
@@ -678,7 +678,7 @@ export function MCPToolCallDisplay({
   toolCall,
   showParameters = true,
   collapsible = true,
-  defaultCollapsed = true,
+  defaultCollapsed,
   compact,
   hidden = false,
   onLinkClick,
@@ -708,6 +708,9 @@ export function MCPToolCallDisplay({
 
   const hasParams = showParameters && toolCall.parameters.length > 0;
   const hasBoxContent = Boolean(toolCall.result || toolCall.error || hasParams);
+  const isCompleted =
+    toolCall.status === 'success' || toolCall.status === 'error';
+  const effectiveDefaultCollapsed = defaultCollapsed ?? !isCompleted;
 
   if (hidden) return null;
 
@@ -792,7 +795,7 @@ export function MCPToolCallDisplay({
           label={pillLabel}
           leadingIcon={<ToolStatusIcon status={toolCall.status} />}
           density={compact ? 'condensed' : 'standard'}
-          defaultOpen={!defaultCollapsed}
+          defaultOpen={!effectiveDefaultCollapsed}
           pillClassName={statusPillClasses[toolCall.status]}
           title="Show details"
         >

From 933cb0e9e5d2def0f0a6aac36d17597a0e0338cd Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Fri, 17 Jul 2026 15:25:49 -0400
Subject: [PATCH 04/12] Apply suggestions from code review

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/AI/CollapsiblePill.tsx    | 4 +++-
 src/components/AI/MCPToolCall.tsx        | 2 +-
 src/components/PillSelect/PillSelect.tsx | 6 +++---
 src/tailwind-preset.ts                   | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index 177ee428..c0e919d0 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -74,7 +74,9 @@ export function CollapsiblePill({
           inert={!isOpen || undefined}
           className={cn(
             'overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out',
-            isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
+            isOpen
+              ? 'max-h-[500px] overflow-y-auto opacity-100'
+              : 'max-h-0 opacity-0'
           )}
         >
           <div className="mt-1.5">{children}</div>
diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index ecf6bc43..6aa45181 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -797,7 +797,7 @@ export function MCPToolCallDisplay({
           density={compact ? 'condensed' : 'standard'}
           defaultOpen={!effectiveDefaultCollapsed}
           pillClassName={statusPillClasses[toolCall.status]}
-          title="Show details"
+          title="Toggle details"
         >
           {box}
         </CollapsiblePill>
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index 39aef89f..a50fee2a 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -49,7 +49,7 @@ export function PillSelect({
   useEscapeKey(() => setExpanded(false), expanded);
 
   function handleSelect(option: PillSelectOption) {
-    if (option.disabled) return;
+    if (disabled || option.disabled) return;
     if (controlledValue === undefined) setInternalValue(option.value);
     onValueChange?.(option.value);
     setExpanded(false);
@@ -74,7 +74,7 @@ export function PillSelect({
               <button
                 key={option.value}
                 type="button"
-                disabled={option.disabled}
+                disabled={disabled || option.disabled}
                 onClick={() => handleSelect(option)}
                 aria-pressed={selected}
                 className={cn(
@@ -82,7 +82,7 @@ export function PillSelect({
                   selected
                     ? 'bg-background text-foreground font-semibold shadow-sm'
                     : 'text-muted-foreground hover:text-foreground font-normal',
-                  option.disabled && 'cursor-not-allowed opacity-40'
+                  (disabled || option.disabled) && 'cursor-not-allowed opacity-40'
                 )}
               >
                 {option.label}
diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
index 39ea3666..39aec3fe 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -413,6 +413,7 @@ export const miewebUISafelist = [
   'max-h-0',
   'max-h-[500px]',
   'transition-[max-height,opacity]',
+  'overflow-y-auto',
   // ThinkingBlock (violet reasoning pill)
   'bg-violet-50',
   'bg-violet-500',

From 42f25b48ed0568189e2cd8a86cab2eef5976bdd0 Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 11:15:14 -0400
Subject: [PATCH 05/12] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/PillSelect/PillSelect.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index a50fee2a..f589b8ac 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -77,6 +77,7 @@ export function PillSelect({
                 disabled={disabled || option.disabled}
                 onClick={() => handleSelect(option)}
                 aria-pressed={selected}
+                autoFocus={selected}
                 className={cn(
                   'focus-visible:ring-ring rounded-full px-3 py-0.5 text-sm transition-colors focus:outline-none focus-visible:ring-2',
                   selected

From 714560fe860f96a588bf2091380f30cdfe70867e Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 15:56:20 -0400
Subject: [PATCH 06/12] fix: address pill accessibility review

---
 src/components/AI/CollapsiblePill.tsx    | 2 +-
 src/components/PillSelect/PillSelect.tsx | 8 ++++----
 src/tailwind-preset.ts                   | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index c0e919d0..a57bc622 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -49,7 +49,7 @@ export function CollapsiblePill({
         aria-controls={children ? contentId : undefined}
         title={title}
         className={cn(
-          'inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
+          'focus-visible:ring-ring inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
           density === 'condensed'
             ? 'rounded-[8px] px-2 py-0.5 text-[10px]'
             : 'rounded-[10px] px-[11px] py-1 text-[11px]',
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index f589b8ac..3196ffd9 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -65,25 +65,25 @@ export function PillSelect({
       {expanded ? (
         <div
           role="group"
-          aria-label={label}
+          aria-label={label ? `${label} options` : 'Options'}
           className="border-border bg-muted inline-flex items-center rounded-full border p-0.5"
         >
           {options.map((option) => {
             const selected = option.value === value;
+            const optionDisabled = disabled || option.disabled;
             return (
               <button
                 key={option.value}
                 type="button"
-                disabled={disabled || option.disabled}
+                disabled={optionDisabled}
                 onClick={() => handleSelect(option)}
                 aria-pressed={selected}
-                autoFocus={selected}
                 className={cn(
                   'focus-visible:ring-ring rounded-full px-3 py-0.5 text-sm transition-colors focus:outline-none focus-visible:ring-2',
                   selected
                     ? 'bg-background text-foreground font-semibold shadow-sm'
                     : 'text-muted-foreground hover:text-foreground font-normal',
-                  (disabled || option.disabled) && 'cursor-not-allowed opacity-40'
+                  optionDisabled && 'cursor-not-allowed opacity-40'
                 )}
               >
                 {option.label}
diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
index 39aec3fe..65641241 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -414,6 +414,8 @@ export const miewebUISafelist = [
   'max-h-[500px]',
   'transition-[max-height,opacity]',
   'overflow-y-auto',
+  'focus-visible:ring-ring',
+  'focus-visible:ring-offset-1',
   // ThinkingBlock (violet reasoning pill)
   'bg-violet-50',
   'bg-violet-500',

From 6e9bd51b2aa502e2bf6c1d922544fe81b3e841fd Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 16:52:47 -0400
Subject: [PATCH 07/12] fix: set cancelled pill dark text

---
 src/components/AI/MCPToolCall.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index 6aa45181..03841d69 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -648,7 +648,7 @@ const statusPillClasses: Record<MCPToolStatus, string> = {
   error:
     'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300',
   cancelled:
-    'bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700',
+    'bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400',
 };
 
 export interface MCPToolCallDisplayProps {

From eba8a230192107fab79eee4b91de9c7a211356b6 Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:15:32 -0400
Subject: [PATCH 08/12] fix: address ai pill review followups

---
 src/components/AI/AIMessage.tsx       |  4 +---
 src/components/AI/CollapsiblePill.tsx | 13 ++-----------
 src/tailwind-preset.ts                |  2 ++
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/AI/AIMessage.tsx b/src/components/AI/AIMessage.tsx
index de00ce7c..1bb89352 100644
--- a/src/components/AI/AIMessage.tsx
+++ b/src/components/AI/AIMessage.tsx
@@ -195,14 +195,12 @@ function ThinkingBlock({
   const dot = streaming ? (
     <span
       aria-hidden="true"
-      className="inline-block h-1.5 w-1.5 rounded-full bg-violet-500 dark:bg-violet-400"
-      style={{ animation: 'thinking-pulse 1.2s ease-in-out infinite' }}
+      className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-violet-500 dark:bg-violet-400"
     />
   ) : null;
 
   return (
     <div data-slot="ai-message-thinking">
-      <style>{`@keyframes thinking-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }`}</style>
       <CollapsiblePill
         label={label}
         leadingIcon={dot}
diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index a57bc622..9387ee9a 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -7,8 +7,6 @@ export interface CollapsiblePillProps {
   leadingIcon?: React.ReactNode;
   density?: 'standard' | 'condensed';
   defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
   pillClassName?: string;
   className?: string;
   /** Native tooltip shown on hover (e.g. "Show details") */
@@ -21,23 +19,16 @@ export function CollapsiblePill({
   leadingIcon,
   density = 'standard',
   defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange,
   pillClassName,
   className,
   title,
   children,
 }: CollapsiblePillProps) {
-  const isControlled = controlledOpen !== undefined;
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentId = React.useId();
 
   const toggle = () => {
-    const next = !isOpen;
-    // Only own the state when uncontrolled; a controlled consumer drives it.
-    if (!isControlled) setInternalOpen(next);
-    onOpenChange?.(next);
+    setIsOpen((open) => !open);
   };
 
   return (
diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
index 65641241..2b588952 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -423,6 +423,8 @@ export const miewebUISafelist = [
   'text-violet-600',
   'hover:bg-violet-100',
   'focus-visible:ring-violet-500',
+  'animate-pulse',
+  'text-[13px]',
   'dark:bg-violet-400',
   'dark:bg-violet-950/30',
   'dark:border-violet-700',

From c946107c26d303375ff3f18e30bb7ee04314aa7d Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:24:04 -0400
Subject: [PATCH 09/12] fix: sync pill open state with status

---
 src/components/AI/CollapsiblePill.test.tsx | 30 ++++++++++++++++++++++
 src/components/AI/CollapsiblePill.tsx      |  4 +++
 2 files changed, 34 insertions(+)
 create mode 100644 src/components/AI/CollapsiblePill.test.tsx

diff --git a/src/components/AI/CollapsiblePill.test.tsx b/src/components/AI/CollapsiblePill.test.tsx
new file mode 100644
index 00000000..2fb8507d
--- /dev/null
+++ b/src/components/AI/CollapsiblePill.test.tsx
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderWithTheme } from '../../test/test-utils';
+import { CollapsiblePill } from './CollapsiblePill';
+
+describe('CollapsiblePill', () => {
+  it('syncs open state when defaultOpen changes', () => {
+    const { rerender } = renderWithTheme(
+      <CollapsiblePill label="Tool" defaultOpen={false}>
+        <div>Tool details</div>
+      </CollapsiblePill>
+    );
+
+    const button = screen.getByRole('button', { name: /tool/i });
+    const content = document.getElementById(
+      button.getAttribute('aria-controls') ?? ''
+    );
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+    expect(content).toHaveAttribute('aria-hidden', 'true');
+
+    rerender(
+      <CollapsiblePill label="Tool" defaultOpen>
+        <div>Tool details</div>
+      </CollapsiblePill>
+    );
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(content).toHaveAttribute('aria-hidden', 'false');
+  });
+});
diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index 9387ee9a..b23ab5c6 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -27,6 +27,10 @@ export function CollapsiblePill({
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentId = React.useId();
 
+  React.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+
   const toggle = () => {
     setIsOpen((open) => !open);
   };

From 07b3be0a2095186fa9069a6380483504b8bd47fe Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:33:05 -0400
Subject: [PATCH 10/12] fix: render static pill without disclosure aria

---
 src/components/AI/CollapsiblePill.test.tsx | 10 ++++++++
 src/components/AI/CollapsiblePill.tsx      | 28 ++++++++++++----------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/AI/CollapsiblePill.test.tsx b/src/components/AI/CollapsiblePill.test.tsx
index 2fb8507d..1fb14483 100644
--- a/src/components/AI/CollapsiblePill.test.tsx
+++ b/src/components/AI/CollapsiblePill.test.tsx
@@ -4,6 +4,16 @@ import { renderWithTheme } from '../../test/test-utils';
 import { CollapsiblePill } from './CollapsiblePill';
 
 describe('CollapsiblePill', () => {
+  it('renders as a plain pill when there is no content to expand', () => {
+    renderWithTheme(<CollapsiblePill label="Tool" />);
+
+    const button = screen.getByRole('button', { name: /tool/i });
+    expect(button).toBeDisabled();
+    expect(button).not.toHaveAttribute('aria-expanded');
+    expect(button).not.toHaveAttribute('aria-controls');
+    expect(button.querySelector('svg')).not.toBeInTheDocument();
+  });
+
   it('syncs open state when defaultOpen changes', () => {
     const { rerender } = renderWithTheme(
       <CollapsiblePill label="Tool" defaultOpen={false}>
diff --git a/src/components/AI/CollapsiblePill.tsx b/src/components/AI/CollapsiblePill.tsx
index b23ab5c6..9369d2f1 100644
--- a/src/components/AI/CollapsiblePill.tsx
+++ b/src/components/AI/CollapsiblePill.tsx
@@ -24,6 +24,7 @@ export function CollapsiblePill({
   title,
   children,
 }: CollapsiblePillProps) {
+  const hasContent = Boolean(children);
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentId = React.useId();
 
@@ -39,10 +40,11 @@ export function CollapsiblePill({
     <div data-slot="collapsible-pill" className={className}>
       <button
         type="button"
-        onClick={toggle}
-        aria-expanded={isOpen}
-        aria-controls={children ? contentId : undefined}
+        onClick={hasContent ? toggle : undefined}
+        aria-expanded={hasContent ? isOpen : undefined}
+        aria-controls={hasContent ? contentId : undefined}
         title={title}
+        disabled={!hasContent}
         className={cn(
           'focus-visible:ring-ring inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
           density === 'condensed'
@@ -53,16 +55,18 @@ export function CollapsiblePill({
       >
         {leadingIcon}
         <span>{label}</span>
-        <ChevronIcon
-          direction={isOpen ? 'down' : 'right'}
-          className={
-            density === 'condensed'
-              ? 'h-2.5 w-2.5 opacity-60'
-              : 'h-3 w-3 opacity-60'
-          }
-        />
+        {hasContent && (
+          <ChevronIcon
+            direction={isOpen ? 'down' : 'right'}
+            className={
+              density === 'condensed'
+                ? 'h-2.5 w-2.5 opacity-60'
+                : 'h-3 w-3 opacity-60'
+            }
+          />
+        )}
       </button>
-      {children && (
+      {hasContent && (
         <div
           id={contentId}
           aria-hidden={!isOpen}

From c19f84d361f9894da3794fb3ea4486d3fb5b3ce5 Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Thu, 23 Jul 2026 14:44:20 -0400
Subject: [PATCH 11/12] fix: cover pill select accessibility edge cases

---
 src/components/PillSelect/PillSelect.test.tsx | 93 +++++++++++++++++++
 src/components/PillSelect/PillSelect.tsx      |  4 +-
 2 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PillSelect/PillSelect.test.tsx

diff --git a/src/components/PillSelect/PillSelect.test.tsx b/src/components/PillSelect/PillSelect.test.tsx
new file mode 100644
index 00000000..e42f347b
--- /dev/null
+++ b/src/components/PillSelect/PillSelect.test.tsx
@@ -0,0 +1,93 @@
+import { describe, expect, it, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithTheme } from '../../test/test-utils';
+import { PillSelect } from './PillSelect';
+
+const options = [
+  { value: 'small', label: 'Small' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'large', label: 'Large' },
+];
+
+describe('PillSelect', () => {
+  it('renders an accessible fallback when no label or options are provided', () => {
+    renderWithTheme(<PillSelect options={[]} />);
+
+    expect(screen.getByRole('button', { name: /no options/i })).toBeDisabled();
+  });
+
+  it('expands and selects an enabled option', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    renderWithTheme(
+      <PillSelect
+        options={options}
+        defaultValue="small"
+        label="Size"
+        onValueChange={onValueChange}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /size: small/i }));
+    await user.click(screen.getByRole('button', { name: /medium/i }));
+
+    expect(onValueChange).toHaveBeenCalledWith('medium');
+    expect(screen.getByRole('button', { name: /size: medium/i })).toBeVisible();
+  });
+
+  it('does not select disabled options', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    renderWithTheme(
+      <PillSelect
+        options={[options[0], { ...options[1], disabled: true }]}
+        defaultValue="small"
+        label="Size"
+        onValueChange={onValueChange}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /size: small/i }));
+    expect(screen.getByRole('button', { name: /medium/i })).toBeDisabled();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('uses the controlled value from props', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    renderWithTheme(
+      <PillSelect
+        options={options}
+        value="large"
+        label="Size"
+        onValueChange={onValueChange}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /size: large/i })).toBeVisible();
+    await user.click(screen.getByRole('button', { name: /size: large/i }));
+    await user.click(screen.getByRole('button', { name: /small/i }));
+
+    expect(onValueChange).toHaveBeenCalledWith('small');
+  });
+
+  it('closes expanded options with Escape', async () => {
+    const user = userEvent.setup();
+
+    renderWithTheme(
+      <PillSelect options={options} defaultValue="small" label="Size" />
+    );
+
+    await user.click(screen.getByRole('button', { name: /size: small/i }));
+    expect(screen.getByRole('group', { name: /size options/i })).toBeVisible();
+
+    await user.keyboard('{Escape}');
+
+    expect(screen.queryByRole('group', { name: /size options/i })).toBeNull();
+    expect(screen.getByRole('button', { name: /size: small/i })).toBeVisible();
+  });
+});
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index 3196ffd9..b4809967 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -58,7 +58,9 @@ export function PillSelect({
   const hasOptions = options.length > 0;
   const valuePart = selectedOption?.label ?? value;
   const collapsedLabel =
-    label && valuePart ? `${label}: ${valuePart}` : label || valuePart;
+    label && valuePart
+      ? `${label}: ${valuePart}`
+      : label || valuePart || 'No options';
 
   return (
     <div ref={ref} className={cn('inline-flex', className)}>

From a4c4ef1f097304e461f1b5176d6ee6768b887fcb Mon Sep 17 00:00:00 2001
From: Aditya Damerla <75409196+aditya-damerla128@users.noreply.github.com>
Date: Thu, 23 Jul 2026 14:58:01 -0400
Subject: [PATCH 12/12] fix: address copilot cleanup comments

---
 src/components/AI/MCPToolCall.tsx        | 41 ------------------------
 src/components/PillSelect/PillSelect.tsx |  5 +--
 2 files changed, 3 insertions(+), 43 deletions(-)

diff --git a/src/components/AI/MCPToolCall.tsx b/src/components/AI/MCPToolCall.tsx
index 03841d69..f52d7ef5 100644
--- a/src/components/AI/MCPToolCall.tsx
+++ b/src/components/AI/MCPToolCall.tsx
@@ -445,18 +445,14 @@ export function ResourceLink({ link, onClick, className }: ResourceLinkProps) {
 interface ToolResultDisplayProps {
   result: MCPToolResult;
   onLinkClick?: (link: MCPResourceLink) => void;
-  showRawData?: boolean;
   className?: string;
 }
 
 function ToolResultDisplay({
   result,
   onLinkClick,
-  showRawData = false,
   className,
 }: ToolResultDisplayProps) {
-  const [showJson, setShowJson] = React.useState(false);
-
   if (result.type === 'error') {
     return (
       <div
@@ -474,9 +470,6 @@ function ToolResultDisplay({
     );
   }
 
-  const hasRawData =
-    result.type === 'json' && result.data !== undefined && result.data !== null;
-
   return (
     <div className={cn('space-y-2', className)}>
       {result.summary && (
@@ -502,40 +495,6 @@ function ToolResultDisplay({
           ))}
         </div>
       )}
-
-      {/* Raw JSON data - hidden by default */}
-      {hasRawData && showRawData && (
-        <div className="mt-2">
-          <button
-            onClick={() => setShowJson(!showJson)}
-            className="flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
-          >
-            <svg
-              aria-hidden="true"
-              className={cn(
-                'h-3 w-3 transition-transform',
-                showJson && 'rotate-90'
-              )}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-            {showJson ? 'Hide' : 'Show'} raw data
-          </button>
-          {showJson && (
-            <pre className="mt-2 max-h-40 overflow-auto rounded-md bg-neutral-100 p-2 text-xs dark:bg-neutral-800">
-              {JSON.stringify(result.data, null, 2)}
-            </pre>
-          )}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/components/PillSelect/PillSelect.tsx b/src/components/PillSelect/PillSelect.tsx
index b4809967..b9f85f6a 100644
--- a/src/components/PillSelect/PillSelect.tsx
+++ b/src/components/PillSelect/PillSelect.tsx
@@ -44,9 +44,10 @@ export function PillSelect({
 
   const value = controlledValue !== undefined ? controlledValue : internalValue;
   const selectedOption = options.find((o) => o.value === value);
+  const close = React.useCallback(() => setExpanded(false), []);
 
-  useClickOutside(ref, () => setExpanded(false), expanded);
-  useEscapeKey(() => setExpanded(false), expanded);
+  useClickOutside(ref, close, expanded);
+  useEscapeKey(close, expanded);
 
   function handleSelect(option: PillSelectOption) {
     if (disabled || option.disabled) return;