@sero-ai/ui 0.4.1 → 0.5.0

package/src/components/ai-elements/speech-input.tsx

@@ -101,6 +101,7 @@ export const SpeechInput = ({
   const [isRecognitionReady, setIsRecognitionReady] = useState(false);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const mediaRecorderCleanupRef = useRef<(() => void) | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
   const onTranscriptionChangeRef = useRef<
@@ -184,6 +185,7 @@ export const SpeechInput = ({
       if (mediaRecorderRef.current?.state === "recording") {
         mediaRecorderRef.current.stop();
       }
+      mediaRecorderCleanupRef.current?.();
       if (streamRef.current) {
         for (const track of streamRef.current.getTracks()) {
           track.stop();
@@ -216,6 +218,7 @@ export const SpeechInput = ({
           track.stop();
         }
         streamRef.current = null;
+        cleanupMediaRecorder();
 
         const audioBlob = new Blob(audioChunksRef.current, {
           type: "audio/webm",
@@ -242,6 +245,19 @@ export const SpeechInput = ({
           track.stop();
         }
         streamRef.current = null;
+        cleanupMediaRecorder();
+      };
+
+      const cleanupMediaRecorder = () => {
+        mediaRecorder.removeEventListener("dataavailable", handleDataAvailable);
+        mediaRecorder.removeEventListener("stop", handleStop);
+        mediaRecorder.removeEventListener("error", handleError);
+        if (mediaRecorderRef.current === mediaRecorder) {
+          mediaRecorderRef.current = null;
+        }
+        if (mediaRecorderCleanupRef.current === cleanupMediaRecorder) {
+          mediaRecorderCleanupRef.current = null;
+        }
       };
 
       mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
@@ -249,6 +265,7 @@ export const SpeechInput = ({
       mediaRecorder.addEventListener("error", handleError);
 
       mediaRecorderRef.current = mediaRecorder;
+      mediaRecorderCleanupRef.current = cleanupMediaRecorder;
       mediaRecorder.start();
       setIsListening(true);
     } catch {

package/src/components/ai-elements/stack-trace.tsx

@@ -197,7 +197,7 @@ export const StackTrace = memo(
       <StackTraceContext.Provider value={contextValue}>
         <div
           className={cn(
-            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+            "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-base",
             className
           )}
           {...props}

package/src/components/ai-elements/task.tsx

@@ -31,7 +31,7 @@ export const TaskItemFile = ({
 export type TaskItemProps = ComponentProps<"div">;
 
 export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
-  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
+  <div className={cn("text-muted-foreground text-base", className)} {...props}>
     {children}
   </div>
 );
@@ -58,9 +58,9 @@ export const TaskTrigger = ({
 }: TaskTriggerProps) => (
   <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
     {children ?? (
-      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
+      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-base transition-colors hover:text-foreground">
         <SearchIcon className="size-4" />
-        <p className="text-sm">{title}</p>
+        <p className="text-base">{title}</p>
         <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
       </div>
     )}

package/src/components/ai-elements/terminal.tsx

@@ -107,7 +107,7 @@ export const TerminalTitle = ({
   ...props
 }: TerminalTitleProps) => (
   <div
-    className={cn("flex items-center gap-2 text-sm text-zinc-400", className)}
+    className={cn("flex items-center gap-2 text-base text-zinc-400", className)}
     {...props}
   >
     <TerminalIcon className="size-4" />
@@ -258,7 +258,7 @@ export const TerminalContent = ({
   return (
     <div
       className={cn(
-        "max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed",
+        "max-h-96 overflow-auto p-4 font-mono text-base leading-relaxed",
         className
       )}
       ref={containerRef}

package/src/components/ai-elements/test-results.tsx

@@ -151,7 +151,7 @@ export const TestResultsDuration = ({
   }
 
   return (
-    <span className={cn("text-muted-foreground text-sm", className)} {...props}>
+    <span className={cn("text-muted-foreground text-base", className)} {...props}>
       {children ?? formatDuration(summary.duration)}
     </span>
   );
@@ -263,7 +263,7 @@ export const TestSuiteName = ({
     >
       <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
       <TestStatusIcon status={status} />
-      <span className="font-medium text-sm">{children ?? name}</span>
+      <span className="font-medium text-base">{children ?? name}</span>
     </CollapsibleTrigger>
   );
 };
@@ -353,7 +353,7 @@ export const Test = ({
   return (
     <TestContext.Provider value={contextValue}>
       <div
-        className={cn("flex items-center gap-2 px-4 py-2 text-sm", className)}
+        className={cn("flex items-center gap-2 px-4 py-2 text-base", className)}
         {...props}
       >
         {children ?? (
@@ -469,7 +469,7 @@ export const TestErrorMessage = ({
 }: TestErrorMessageProps) => (
   <p
     className={cn(
-      "font-medium text-red-700 text-sm dark:text-red-400",
+      "font-medium text-red-700 text-base dark:text-red-400",
       className
     )}
     {...props}

package/src/components/ai-elements/tool.tsx

@@ -92,7 +92,7 @@ export const ToolHeader = ({
       {...props}
     >
       <div className="flex items-center gap-2">
-        <WrenchIcon className="size-4 text-muted-foreground" />
+        <WrenchIcon className="size-3.5 text-muted-foreground" />
         <span className="font-medium text-sm">{title ?? derivedName}</span>
         {getStatusBadge(state)}
       </div>
@@ -123,7 +123,7 @@ export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
       Parameters
     </h4>
     <div className="rounded-md bg-muted/50">
-      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+      <CodeBlock className="text-sm" code={JSON.stringify(input, null, 2)} language="json" />
     </div>
   </div>
 );
@@ -147,10 +147,10 @@ export const ToolOutput = ({
 
   if (typeof output === "object" && !isValidElement(output)) {
     Output = (
-      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
+      <CodeBlock className="text-sm" code={JSON.stringify(output, null, 2)} language="json" />
     );
   } else if (typeof output === "string") {
-    Output = <CodeBlock code={output} language="json" />;
+    Output = <CodeBlock className="text-sm" code={output} language="json" />;
   }
 
   return (

package/src/components/ai-elements/transcription.tsx

@@ -60,7 +60,7 @@ export const Transcription = ({
     <TranscriptionContext.Provider value={contextValue}>
       <div
         className={cn(
-          "flex flex-wrap gap-1 text-sm leading-relaxed",
+          "flex flex-wrap gap-1 text-base leading-relaxed",
           className
         )}
         data-slot="transcription"

package/src/components/ai-elements/web-preview.tsx

@@ -173,7 +173,7 @@ export const WebPreviewUrl = ({
 
   return (
     <Input
-      className="h-8 flex-1 text-sm"
+      className="h-8 flex-1 text-base"
       onChange={onChange ?? handleChange}
       onKeyDown={handleKeyDown}
       placeholder="Enter URL..."
@@ -227,7 +227,7 @@ export const WebPreviewConsole = ({
 
   return (
     <Collapsible
-      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      className={cn("border-t bg-muted/50 font-mono text-base", className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}

package/src/components/context-editor/CapabilitySection.tsx

@@ -53,7 +53,7 @@ export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillIn
       <div className="space-y-1">
         {items.length > 0 && (
           <div className="mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2">
-            <span className="text-[11px] font-medium text-[var(--text-secondary)]">
+            <span className="text-sm font-medium text-[var(--text-secondary)]">
               {includeAllLabel}
             </span>
             <Switch
@@ -75,7 +75,7 @@ export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillIn
         ))}
 
         {items.length === 0 && (
-          <span className="text-[11px] italic text-[var(--text-muted)]">
+          <span className="text-sm italic text-[var(--text-muted)]">
             {emptyLabel}
           </span>
         )}

package/src/components/context-editor/ContextEditor.tsx

@@ -81,7 +81,7 @@ export function ContextEditor({
         showCloseButton
       >
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 text-sm">
+          <DialogTitle className="flex items-center gap-2 text-base">
             <Settings2 className="size-4 text-[var(--text-muted)]" />
             {title}
           </DialogTitle>
@@ -113,7 +113,7 @@ export function ContextEditor({
         {applyError && (
           <div className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2">
             <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-status-error" />
-            <span className="text-[11px] text-status-error">{applyError}</span>
+            <span className="text-sm text-status-error">{applyError}</span>
           </div>
         )}
 

package/src/components/context-editor/PresetBar.tsx

@@ -39,7 +39,7 @@ export function PresetBar({
   return (
     <>
       <div className="flex items-center gap-2">
-        <span className="text-[11px] font-medium text-[var(--text-muted)]">
+        <span className="text-sm font-medium text-[var(--text-muted)]">
           Preset:
         </span>
         <Select value={activePresetId ?? ''} onValueChange={onPresetChange}>
@@ -68,7 +68,7 @@ export function PresetBar({
         {!showSaveInput && (
           <button type="button"
             onClick={onShowSave}
-            className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
           >
             <Save className="size-3" />
             Save as
@@ -78,7 +78,7 @@ export function PresetBar({
         {hasOverrides && (
           <button type="button"
             onClick={onReset}
-            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
           >
             <RotateCcw className="size-3" />
             Reset

package/src/components/context-editor/SystemPromptSection.tsx

@@ -59,7 +59,7 @@ export function SystemPromptSection({
     >
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-[10px] text-[var(--text-muted)]">
+          <span className="text-sm text-[var(--text-muted)]">
             {systemPrompt === null
               ? c.defaultHint
               : systemPrompt === ''
@@ -69,7 +69,7 @@ export function SystemPromptSection({
           {systemPrompt !== null && (
             <button type="button"
               onClick={() => onSystemPromptChange(null)}
-              className="text-[10px] text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)]"
+              className="text-sm text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)]"
             >
               Reset to default
             </button>
@@ -78,10 +78,10 @@ export function SystemPromptSection({
         <textarea aria-label="System prompt"
           value={displayedPrompt}
           onChange={(event) => onSystemPromptChange(event.target.value)}
-          className="h-80 w-full resize-y rounded-md border border-border/30 bg-[var(--bg-base)] p-2 font-mono text-[11px] text-[var(--text-secondary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
+          className="h-80 w-full resize-y rounded-md border border-border/30 bg-[var(--bg-base)] p-2 font-mono text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
           placeholder={c.placeholder}
         />
-        <p className="text-[10px] text-[var(--text-muted)]">{c.footnote}</p>
+        <p className="text-sm text-[var(--text-muted)]">{c.footnote}</p>
       </div>
     </ContextSection>
   );

package/src/components/context-editor/parts.tsx

@@ -94,7 +94,7 @@ export function ContextSection({
         </span>
 
         {count !== undefined && (
-          <span className="text-[11px] text-[var(--text-muted)]">
+          <span className="text-sm text-[var(--text-muted)]">
             ({count})
           </span>
         )}
@@ -102,7 +102,7 @@ export function ContextSection({
         {badge && (
           <span
             className={cn(
-              'ml-auto rounded-full px-2 py-0.5 text-[10px] font-medium',
+              'ml-auto rounded-full px-2 py-0.5 text-sm font-medium',
               badgeClass[badgeVariant],
             )}
           >
@@ -154,13 +154,13 @@ export function ToggleRow({
     >
       <div className="min-w-0 flex-1">
         <div className={cn(
-          'text-[11px] font-medium',
+          'text-sm font-medium',
           enabled ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]',
         )}>
           {name}
         </div>
         {description && (
-          <div className="mt-0.5 text-[10px] leading-snug text-[var(--text-muted)]/60">
+          <div className="mt-0.5 text-sm leading-snug text-[var(--text-muted)]/60">
             {description}
           </div>
         )}
@@ -202,13 +202,13 @@ export function SavePresetInput({
       <button type="button"
         onClick={() => name.trim() && onSave(name.trim())}
         disabled={!name.trim()}
-        className="rounded-md bg-[var(--accent-primary)] px-2 py-1 text-[11px] font-medium text-white disabled:opacity-50"
+        className="rounded-md bg-[var(--accent-primary)] px-2 py-1 text-sm font-medium text-white disabled:opacity-50"
       >
         Save
       </button>
       <button type="button"
         onClick={onCancel}
-        className="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+        className="text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
       >
         Cancel
       </button>

package/src/components/dashboard/activity-list.tsx

@@ -53,7 +53,7 @@ function ActivityListItem({
             {label}
           </span>
           {timestamp && (
-            <span className="shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]">
+            <span className="shrink-0 text-sm tabular-nums text-[var(--text-muted)]">
               {timestamp}
             </span>
           )}
@@ -88,7 +88,7 @@ function ActivityList({
     >
       {children}
       {overflowCount > 0 && (
-        <li className="pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]">
+        <li className="pl-5 pt-0.5 text-sm text-[var(--text-muted)]">
           +{overflowCount} more
         </li>
       )}

package/src/components/dashboard/empty-state.tsx

@@ -53,7 +53,7 @@ function EmptyState({
             <Icon icon={icon} size="md" className="text-current" />
           </EmptyMedia>
         )}
-        <EmptyTitle className="text-sm font-medium text-[var(--text-primary)]">
+        <EmptyTitle className="text-base font-medium text-[var(--text-primary)]">
           {title}
         </EmptyTitle>
         {message && (

package/src/components/dashboard/item-list.tsx

@@ -65,7 +65,7 @@ function ItemListItem({
         )}
       </ItemContent>
       {trailing && (
-        <span className="shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]">
+        <span className="shrink-0 text-sm tabular-nums text-[var(--text-muted)]">
           {trailing}
         </span>
       )}
@@ -95,7 +95,7 @@ function ItemList({
     >
       {children}
       {overflowCount > 0 && (
-        <span className="px-2 text-[11px] text-[var(--text-muted)]">
+        <span className="px-2 text-sm text-[var(--text-muted)]">
           +{overflowCount} more
         </span>
       )}

package/src/components/dashboard/layout.tsx

@@ -235,7 +235,7 @@ function Section({
         <div className="flex items-center justify-between gap-2">
           <div className="flex min-w-0 flex-col gap-0.5">
             {heading && (
-              <h3 className="truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">
+              <h3 className="truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]">
                 {heading}
               </h3>
             )}

package/src/components/dashboard/metric.tsx

@@ -67,7 +67,7 @@ function Metric({
     >
       <div className="flex items-center gap-1.5">
         {icon && <Icon icon={icon} size="sm" />}
-        <span className="truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]">
+        <span className="truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]">
           {label}
         </span>
       </div>

package/src/components/dashboard/stale-indicator.tsx

@@ -31,7 +31,7 @@ function StaleIndicator({
     <div
       data-slot="stale-indicator"
       className={cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className,
       )}
       {...props}

package/src/components/dashboard/typography.tsx

@@ -2,7 +2,7 @@
 //
 // Text, Heading and Icon give one type scale and one icon treatment so
 // equivalent text and icons render identically across widgets, replacing the
-// scattered `text-[9px]`/`text-[10px]` and per-widget muted colours.
+// scattered `text-xs`/`text-sm` and per-widget muted colours.
 
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -15,13 +15,13 @@ import { toneColor, type Tone } from "./tone";
 const textVariants = cva("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
+      body: "text-base text-[var(--text-primary)]",
       label:
-        "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+        "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
       numeric:
-        "text-sm font-semibold tabular-nums text-[var(--text-primary)]",
+        "text-base font-semibold tabular-nums text-[var(--text-primary)]",
     },
   },
   defaultVariants: { variant: "body" },
@@ -72,7 +72,7 @@ function Text({
 
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold",
 } as const;
 

package/src/components/model-selection/available-model-picker.tsx

@@ -102,7 +102,7 @@ export function AvailableModelPicker<
           role="button"
           tabIndex={disabled ? -1 : 0}
           className={cn(
-            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors',
+            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base transition-colors',
             'hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
             disabled && 'cursor-not-allowed opacity-50',
             className,
@@ -122,13 +122,13 @@ export function AvailableModelPicker<
                     <Sparkles className="size-3 shrink-0 text-amber-500/70" />
                   ) : null}
                 </div>
-                <div className="truncate text-[11px] text-muted-foreground">
+                <div className="truncate text-sm text-muted-foreground">
                   {selected.group.displayName}
                 </div>
               </div>
             </>
           ) : selected.fallbackLabel ? (
-            <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">
+            <span className="min-w-0 flex-1 truncate font-mono text-sm text-muted-foreground">
               {selected.fallbackLabel}
             </span>
           ) : (
@@ -169,11 +169,11 @@ export function AvailableModelPicker<
 
         <div className="max-h-[280px] overflow-y-auto py-1">
           {groups.length === 0 ? (
-            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
               {noModelsLabel}
             </div>
           ) : totalResults === 0 ? (
-            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
               {emptyLabel}
             </div>
           ) : (
@@ -186,7 +186,7 @@ export function AvailableModelPicker<
                     alt={group.displayName}
                     className="size-3.5 shrink-0 rounded-sm dark:invert"
                   />
-                  <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  <span className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
                     {group.displayName}
                   </span>
                 </div>
@@ -200,7 +200,7 @@ export function AvailableModelPicker<
                         type="button"
                         onClick={() => handleSelect(model.provider, model.modelId)}
                         className={cn(
-                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors',
+                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors',
                           isSelected
                             ? 'bg-secondary text-foreground'
                             : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground',

package/src/components/model-selection/thinking-level-picker.tsx

@@ -39,7 +39,7 @@ export function ThinkingLevelPicker({
             disabled={disabled || !isAvailable}
             onClick={() => onChange(level)}
             className={cn(
-              'rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors',
+              'rounded-md px-2 py-1.5 text-sm font-medium transition-colors',
               isActive
                 ? 'bg-background text-foreground shadow-sm'
                 : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',

package/src/components/model-selection/thinking-picker.tsx

@@ -0,0 +1,90 @@
+import { Brain } from 'lucide-react';
+import { motion } from 'motion/react';
+import { THINKING_LABELS, THINKING_LEVELS, type ThinkingLevel } from '@sero-ai/common';
+import { cn } from '../../lib/utils';
+
+// Compact labels so all seven segments stay on a single line and share the same
+// height — "Extra High" is the only label that would otherwise wrap.
+const COMPACT_LABELS: Record<ThinkingLevel, string> = {
+  ...THINKING_LABELS,
+  xhigh: 'X-High',
+};
+
+interface ThinkingPickerProps {
+  available: readonly string[];
+  current: string;
+  disabled: boolean;
+  onSelect: (level: string) => void;
+  className?: string;
+}
+
+export function ThinkingPicker({
+  available,
+  current,
+  disabled,
+  onSelect,
+  className
+}: ThinkingPickerProps) {
+  const levels = disabled
+    ? THINKING_LEVELS
+    : THINKING_LEVELS.filter((level) => level === 'off' || available.includes(level));
+  const activeIndex = Math.max(
+    0,
+    levels.indexOf((disabled ? 'off' : current) as ThinkingLevel),
+  );
+  const isOff = disabled || current === 'off';
+  const isMax = !disabled && current === 'max';
+
+  return (
+    <div
+      className={cn(`flex flex-col gap-2 border-[var(--border-subtle)] px-3 py-3 transition-opacity duration-150 ${
+        disabled ? 'pointer-events-none opacity-40' : ''
+      }`, className)}
+    >
+      <div className="flex items-center gap-1.5">
+        <Brain className="size-3 text-[var(--text-muted)]" />
+        <span className="text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]">
+          Thinking
+        </span>
+      </div>
+      <div className="relative flex rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)] p-0.5">
+        <motion.div
+          className="absolute inset-y-0.5 rounded-md shadow-sm ring-1 ring-inset ring-white/5"
+          initial={false}
+          animate={{
+            x: `${activeIndex * 100}%`,
+            width: `${100 / levels.length}%`,
+          }}
+          transition={{ type: 'spring', stiffness: 500, damping: 38 }}
+          style={{
+            background: isOff
+              ? 'var(--bg-elevated)'
+              : isMax
+                ? 'linear-gradient(135deg, #f59e0b40, #ef444440)'
+                : 'linear-gradient(135deg, #6366f140, #8b5cf640)',
+          }}
+        />
+        {levels.map((level) => {
+          const isActive = current === level && !disabled;
+          const textClass = isActive
+            ? level === 'max'
+              ? 'text-status-warning'
+              : level === 'off'
+                ? 'text-[var(--text-primary)]'
+                : 'text-[var(--banner-primary)]'
+            : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]';
+          return (
+            <button
+              type="button"
+              key={level}
+              onClick={() => onSelect(level)}
+              className={`relative z-10 flex flex-1 items-center justify-center whitespace-nowrap rounded-md py-1.5 text-sm font-medium leading-none transition-colors duration-150 ${textClass}`}
+            >
+              {COMPACT_LABELS[level]}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/accordion.tsx

@@ -33,7 +33,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-base font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className
         )}
         {...props}
@@ -53,7 +53,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base"
       {...props}
     >
       <div className={cn("pt-0 pb-4", className)}>{children}</div>