feat: Display AI reasoning/thinking blocks in chat interface (#152)

* feat: Add reasoning/thinking blocks display in chat interface * feat: add multi-provider options support and replace custom reasoning UI with AI Elements * resolve conflicting reasoning configs and correct provider-specific reasoning parameters * try to solve conflict * fix: simplify reasoning display and remove unnecessary dependencies - Remove Streamdown dependency (~5MB) - reasoning is plain text only - Fix Bedrock providerOptions merging for Claude reasoning configs - Remove unsupported DeepSeek reasoning configuration - Clean up unused environment variables (REASONING_BUDGET_TOKENS, REASONING_EFFORT, DEEPSEEK_REASONING_*) - Remove dead commented code from route.ts Reasoning blocks contain plain thinking text and don't need markdown/diagram/code rendering. * feat: comprehensive reasoning support improvements Major improvements: - Auto-enable reasoning display for all supported models - Fix provider-specific reasoning configurations - Remove unnecessary Streamdown dependency (~5MB) - Clean up debug logging Provider changes: - OpenAI: Auto-enable reasoningSummary for o1/o3/gpt-5 models - Google: Auto-enable includeThoughts for Gemini 2.5/3 models - Bedrock: Restrict reasoningConfig to only Claude/Nova (fixes MiniMax error) - Ollama: Add thinking support for qwen3-like models Other improvements: - Remove ENABLE_REASONING toggle (always enabled) - Fix Bedrock providerOptions merging for Claude - Simplify reasoning component (plain text rendering) - Clean up unused environment variables * fix: critical bugs and documentation gaps in reasoning support Critical fixes: - Fix Bedrock shallow merge bug (deep merge preserves anthropicBeta + reasoningConfig) - Add parseInt validation with parseIntSafe helper (prevents NaN errors) - Validate all numeric env vars with min/max ranges Documentation improvements: - Add BEDROCK_REASONING_BUDGET_TOKENS and BEDROCK_REASONING_EFFORT to env.example - Add OLLAMA_ENABLE_THINKING to env.example - Update JSDoc with accurate env var list and ranges Code cleanup: - Remove debug console.log statements from route.ts - Refactor duplicate providerOptions assignments --------- Co-authored-by: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com> Co-authored-by: Dayuan Jiang <jdy.toh@gmail.com>
2026-01-02 14:22:28 +08:00 · 2025-12-10 20:54:43 +05:30
parent d2ba133eaf
commit a047a6ff97
10 changed files with 959 additions and 61 deletions
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -208,13 +208,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
    const isFirstMessage = messages.length === 1
    const isEmptyDiagram = !xml || xml.trim() === "" || isMinimalDiagram(xml)

-    // DEBUG: Log cache check conditions
-    console.log("[Cache DEBUG] messages.length:", messages.length)
-    console.log("[Cache DEBUG] isFirstMessage:", isFirstMessage)
-    console.log("[Cache DEBUG] xml length:", xml?.length || 0)
-    console.log("[Cache DEBUG] xml preview:", xml?.substring(0, 200))
-    console.log("[Cache DEBUG] isEmptyDiagram:", isEmptyDiagram)
-
    if (isFirstMessage && isEmptyDiagram) {
        const lastMessage = messages[0]
        const textPart = lastMessage.parts?.find((p: any) => p.type === "text")
@@ -358,7 +351,7 @@ ${lastMessageText}
        model,
        stopWhen: stepCountIs(5),
        messages: allMessages,
-        ...(providerOptions && { providerOptions }),
+        ...(providerOptions && { providerOptions }), // This now includes all reasoning configs
        ...(headers && { headers }),
        // Langfuse telemetry config (returns undefined if not configured)
        ...(getTelemetryConfig({ sessionId: validSessionId, userId }) && {
@@ -394,13 +387,6 @@ ${lastMessageText}
            return null
        },
        onFinish: ({ text, usage }) => {
-            // Log token usage
-            if (usage) {
-                const cachedTokens = (usage as any).cachedInputTokens ?? 0
-                console.log(
-                    `[Token Usage] input: ${usage.inputTokens ?? 0}, cached: ${cachedTokens}, output: ${usage.outputTokens ?? 0}, total: ${(usage.inputTokens ?? 0) + cachedTokens + (usage.outputTokens ?? 0)}`,
-                )
-            }
            // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
            setTraceOutput(text, {
                promptTokens: usage?.inputTokens,
@@ -488,6 +474,7 @@ IMPORTANT: Keep edits concise:
    })

    return result.toUIMessageStreamResponse({
+        sendReasoning: true,
        messageMetadata: ({ part }) => {
            if (part.type === "finish") {
                const usage = (part as any).totalUsage
--- a/components/ai-elements/reasoning.tsx
+++ b/components/ai-elements/reasoning.tsx
@@ -0,0 +1,186 @@
+"use client"
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state"
+import { BrainIcon, ChevronDownIcon } from "lucide-react"
+import type { ComponentProps, ReactNode } from "react"
+import { createContext, memo, useContext, useEffect, useState } from "react"
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { cn } from "@/lib/utils"
+import { Shimmer } from "./shimmer"
+
+type ReasoningContextValue = {
+    isStreaming: boolean
+    isOpen: boolean
+    setIsOpen: (open: boolean) => void
+    duration: number | undefined
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null)
+
+export const useReasoning = () => {
+    const context = useContext(ReasoningContext)
+    if (!context) {
+        throw new Error("Reasoning components must be used within Reasoning")
+    }
+    return context
+}
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean
+    open?: boolean
+    defaultOpen?: boolean
+    onOpenChange?: (open: boolean) => void
+    duration?: number
+}
+
+const AUTO_CLOSE_DELAY = 1000
+const MS_IN_S = 1000
+
+export const Reasoning = memo(
+    ({
+        className,
+        isStreaming = false,
+        open,
+        defaultOpen = true,
+        onOpenChange,
+        duration: durationProp,
+        children,
+        ...props
+    }: ReasoningProps) => {
+        const [isOpen, setIsOpen] = useControllableState({
+            prop: open,
+            defaultProp: defaultOpen,
+            onChange: onOpenChange,
+        })
+        const [duration, setDuration] = useControllableState({
+            prop: durationProp,
+            defaultProp: undefined,
+        })
+
+        const [hasAutoClosed, setHasAutoClosed] = useState(false)
+        const [startTime, setStartTime] = useState<number | null>(null)
+
+        // Track duration when streaming starts and ends
+        useEffect(() => {
+            if (isStreaming) {
+                if (startTime === null) {
+                    setStartTime(Date.now())
+                }
+            } else if (startTime !== null) {
+                setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
+                setStartTime(null)
+            }
+        }, [isStreaming, startTime, setDuration])
+
+        // Auto-open when streaming starts, auto-close when streaming ends (once only)
+        useEffect(() => {
+            if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+                // Add a small delay before closing to allow user to see the content
+                const timer = setTimeout(() => {
+                    setIsOpen(false)
+                    setHasAutoClosed(true)
+                }, AUTO_CLOSE_DELAY)
+
+                return () => clearTimeout(timer)
+            }
+        }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed])
+
+        const handleOpenChange = (newOpen: boolean) => {
+            setIsOpen(newOpen)
+        }
+
+        return (
+            <ReasoningContext.Provider
+                value={{ isStreaming, isOpen, setIsOpen, duration }}
+            >
+                <Collapsible
+                    className={cn("not-prose mb-4", className)}
+                    onOpenChange={handleOpenChange}
+                    open={isOpen}
+                    {...props}
+                >
+                    {children}
+                </Collapsible>
+            </ReasoningContext.Provider>
+        )
+    },
+)
+
+export type ReasoningTriggerProps = ComponentProps<
+    typeof CollapsibleTrigger
+> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
+}
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+    if (isStreaming || duration === 0) {
+        return <Shimmer duration={1}>Thinking...</Shimmer>
+    }
+    if (duration === undefined) {
+        return <p>Thought for a few seconds</p>
+    }
+    return <p>Thought for {duration} seconds</p>
+}
+
+export const ReasoningTrigger = memo(
+    ({
+        className,
+        children,
+        getThinkingMessage = defaultGetThinkingMessage,
+        ...props
+    }: ReasoningTriggerProps) => {
+        const { isStreaming, isOpen, duration } = useReasoning()
+
+        return (
+            <CollapsibleTrigger
+                className={cn(
+                    "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+                    className,
+                )}
+                {...props}
+            >
+                {children ?? (
+                    <>
+                        <BrainIcon className="size-4" />
+                        {getThinkingMessage(isStreaming, duration)}
+                        <ChevronDownIcon
+                            className={cn(
+                                "size-4 transition-transform",
+                                isOpen ? "rotate-180" : "rotate-0",
+                            )}
+                        />
+                    </>
+                )}
+            </CollapsibleTrigger>
+        )
+    },
+)
+
+export type ReasoningContentProps = ComponentProps<
+    typeof CollapsibleContent
+> & {
+    children: string
+}
+
+export const ReasoningContent = memo(
+    ({ className, children, ...props }: ReasoningContentProps) => (
+        <CollapsibleContent
+            className={cn(
+                "mt-4 text-sm",
+                "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+                className,
+            )}
+            {...props}
+        >
+            <div className="whitespace-pre-wrap">{children}</div>
+        </CollapsibleContent>
+    ),
+)
+
+Reasoning.displayName = "Reasoning"
+ReasoningTrigger.displayName = "ReasoningTrigger"
+ReasoningContent.displayName = "ReasoningContent"
--- a/components/ai-elements/shimmer.tsx
+++ b/components/ai-elements/shimmer.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { motion } from "motion/react"
+import {
+    type CSSProperties,
+    type ElementType,
+    type JSX,
+    memo,
+    useMemo,
+} from "react"
+import { cn } from "@/lib/utils"
+
+export type TextShimmerProps = {
+    children: string
+    as?: ElementType
+    className?: string
+    duration?: number
+    spread?: number
+}
+
+const ShimmerComponent = ({
+    children,
+    as: Component = "p",
+    className,
+    duration = 2,
+    spread = 2,
+}: TextShimmerProps) => {
+    const MotionComponent = motion.create(
+        Component as keyof JSX.IntrinsicElements,
+    )
+
+    const dynamicSpread = useMemo(
+        () => (children?.length ?? 0) * spread,
+        [children, spread],
+    )
+
+    return (
+        <MotionComponent
+            animate={{ backgroundPosition: "0% center" }}
+            className={cn(
+                "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+                "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+                className,
+            )}
+            initial={{ backgroundPosition: "100% center" }}
+            style={
+                {
+                    "--spread": `${dynamicSpread}px`,
+                    backgroundImage:
+                        "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+                } as CSSProperties
+            }
+            transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration,
+                ease: "linear",
+            }}
+        >
+            {children}
+        </MotionComponent>
+    )
+}
+
+export const Shimmer = memo(ShimmerComponent)
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -21,6 +21,11 @@ import {
 import Image from "next/image"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ReactMarkdown from "react-markdown"
+import {
+    Reasoning,
+    ReasoningContent,
+    ReasoningTrigger,
+} from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import {
    convertToLegalXml,
@@ -167,6 +172,7 @@ interface ChatMessageDisplayProps {
    sessionId?: string
    onRegenerate?: (messageIndex: number) => void
    onEditMessage?: (messageIndex: number, newText: string) => void
+    status?: "streaming" | "submitted" | "idle" | "error" | "ready"
 }

 export function ChatMessageDisplay({
@@ -176,6 +182,7 @@ export function ChatMessageDisplay({
    sessionId,
    onRegenerate,
    onEditMessage,
+    status = "idle",
 }: ChatMessageDisplayProps) {
    const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
    const messagesEndRef = useRef<HTMLDivElement>(null)
@@ -501,6 +508,52 @@ export function ChatMessageDisplay({
                                        </div>
                                    )}
                                <div className="max-w-[85%] min-w-0">
+                                    {/* Reasoning blocks - displayed first for assistant messages */}
+                                    {message.role === "assistant" &&
+                                        message.parts?.map(
+                                            (part, partIndex) => {
+                                                if (part.type === "reasoning") {
+                                                    const reasoningPart =
+                                                        part as {
+                                                            type: "reasoning"
+                                                            text: string
+                                                        }
+                                                    const isLastPart =
+                                                        partIndex ===
+                                                        (message.parts
+                                                            ?.length ?? 0) -
+                                                            1
+                                                    const isLastMessage =
+                                                        message.id ===
+                                                        messages[
+                                                            messages.length - 1
+                                                        ]?.id
+                                                    const isStreamingReasoning =
+                                                        status ===
+                                                            "streaming" &&
+                                                        isLastPart &&
+                                                        isLastMessage
+
+                                                    return (
+                                                        <Reasoning
+                                                            key={`${message.id}-reasoning-${partIndex}`}
+                                                            className="w-full"
+                                                            isStreaming={
+                                                                isStreamingReasoning
+                                                            }
+                                                        >
+                                                            <ReasoningTrigger />
+                                                            <ReasoningContent>
+                                                                {
+                                                                    reasoningPart.text
+                                                                }
+                                                            </ReasoningContent>
+                                                        </Reasoning>
+                                                    )
+                                                }
+                                                return null
+                                            },
+                                        )}
                                    {/* Edit mode for user messages */}
                                    {isEditing && message.role === "user" ? (
                                        <div className="flex flex-col gap-2">
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -1320,6 +1320,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                    setFiles={handleFileChange}
                    sessionId={sessionId}
                    onRegenerate={handleRegenerate}
+                    status={status}
                    onEditMessage={handleEditMessage}
                />
            </main>
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/env.example
+++ b/env.example
@@ -11,28 +11,45 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # AWS_REGION=us-east-1
 # AWS_ACCESS_KEY_ID=your-access-key-id
 # AWS_SECRET_ACCESS_KEY=your-secret-access-key
+# Note: Claude and Nova models support reasoning/extended thinking
+# BEDROCK_REASONING_BUDGET_TOKENS=12000  # Optional: Claude reasoning budget in tokens (1024-64000)
+# BEDROCK_REASONING_EFFORT=medium        # Optional: Nova reasoning effort (low/medium/high)

 # OpenAI Configuration
 # OPENAI_API_KEY=sk-...
 # OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
 # OPENAI_ORGANIZATION=org-...  # Optional
 # OPENAI_PROJECT=proj_...      # Optional
+# Note: o1/o3/gpt-5 models automatically enable reasoning summary (default: detailed)
+# OPENAI_REASONING_EFFORT=low   # Optional: Reasoning effort (minimal/low/medium/high) - for o1/o3/gpt-5
+# OPENAI_REASONING_SUMMARY=detailed  # Optional: Override reasoning summary (none/brief/detailed)

 # Anthropic (Direct) Configuration
 # ANTHROPIC_API_KEY=sk-ant-...
 # ANTHROPIC_BASE_URL=https://your-custom-anthropic/v1
+# ANTHROPIC_THINKING_TYPE=enabled            # Optional: Anthropic extended thinking (enabled)
+# ANTHROPIC_THINKING_BUDGET_TOKENS=12000     # Optional: Budget for extended thinking in tokens

 # Google Generative AI Configuration
 # GOOGLE_GENERATIVE_AI_API_KEY=...
 # GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta  # Optional: Custom endpoint
+# GOOGLE_CANDIDATE_COUNT=1                   # Optional: Number of candidates to generate
+# GOOGLE_TOP_K=40                            # Optional: Top K sampling parameter
+# GOOGLE_TOP_P=0.95                          # Optional: Nucleus sampling parameter
+# Note: Gemini 2.5/3 models automatically enable reasoning display (includeThoughts: true)
+# GOOGLE_THINKING_BUDGET=8192                # Optional: Gemini 2.5 thinking budget in tokens (for more/less thinking)
+# GOOGLE_THINKING_LEVEL=high                 # Optional: Gemini 3 thinking level (low/high)

 # Azure OpenAI Configuration
 # AZURE_RESOURCE_NAME=your-resource-name
 # AZURE_API_KEY=...
 # AZURE_BASE_URL=https://your-resource.openai.azure.com  # Optional: Custom endpoint (overrides resourceName)
+# AZURE_REASONING_EFFORT=low                 # Optional: Azure reasoning effort (low, medium, high)
+# AZURE_REASONING_SUMMARY=detailed

 # Ollama (Local) Configuration
 # OLLAMA_BASE_URL=http://localhost:11434/api  # Optional, defaults to localhost
+# OLLAMA_ENABLE_THINKING=true                 # Optional: Enable thinking for models that support it (e.g., qwen3)

 # OpenRouter Configuration
 # OPENROUTER_API_KEY=sk-or-v1-...
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -56,6 +56,295 @@ const ANTHROPIC_BETA_HEADERS = {
    "anthropic-beta": "fine-grained-tool-streaming-2025-05-14",
 }

+/**
+ * Safely parse integer from environment variable with validation
+ */
+function parseIntSafe(
+    value: string | undefined,
+    varName: string,
+    min?: number,
+    max?: number,
+): number | undefined {
+    if (!value) return undefined
+    const parsed = Number.parseInt(value, 10)
+    if (Number.isNaN(parsed)) {
+        throw new Error(`${varName} must be a valid integer, got: ${value}`)
+    }
+    if (min !== undefined && parsed < min) {
+        throw new Error(`${varName} must be >= ${min}, got: ${parsed}`)
+    }
+    if (max !== undefined && parsed > max) {
+        throw new Error(`${varName} must be <= ${max}, got: ${parsed}`)
+    }
+    return parsed
+}
+
+/**
+ * Build provider-specific options from environment variables
+ * Supports various AI SDK providers with their unique configuration options
+ *
+ * Environment variables:
+ * - OPENAI_REASONING_EFFORT: OpenAI reasoning effort level (minimal/low/medium/high) - for o1/o3/gpt-5
+ * - OPENAI_REASONING_SUMMARY: OpenAI reasoning summary (none/brief/detailed) - auto-enabled for o1/o3/gpt-5
+ * - ANTHROPIC_THINKING_BUDGET_TOKENS: Anthropic thinking budget in tokens (1024-64000)
+ * - ANTHROPIC_THINKING_TYPE: Anthropic thinking type (enabled)
+ * - GOOGLE_THINKING_BUDGET: Google Gemini 2.5 thinking budget in tokens (1024-100000)
+ * - GOOGLE_THINKING_LEVEL: Google Gemini 3 thinking level (low/high)
+ * - AZURE_REASONING_EFFORT: Azure/OpenAI reasoning effort (low/medium/high)
+ * - AZURE_REASONING_SUMMARY: Azure reasoning summary (none/brief/detailed)
+ * - BEDROCK_REASONING_BUDGET_TOKENS: Bedrock Claude reasoning budget in tokens (1024-64000)
+ * - BEDROCK_REASONING_EFFORT: Bedrock Nova reasoning effort (low/medium/high)
+ * - OLLAMA_ENABLE_THINKING: Enable Ollama thinking mode (set to "true")
+ */
+function buildProviderOptions(
+    provider: ProviderName,
+    modelId?: string,
+): Record<string, any> | undefined {
+    const options: Record<string, any> = {}
+
+    switch (provider) {
+        case "openai": {
+            const reasoningEffort = process.env.OPENAI_REASONING_EFFORT
+            const reasoningSummary = process.env.OPENAI_REASONING_SUMMARY
+
+            // OpenAI reasoning models (o1, o3, gpt-5) need reasoningSummary to return thoughts
+            if (
+                modelId &&
+                (modelId.includes("o1") ||
+                    modelId.includes("o3") ||
+                    modelId.includes("gpt-5"))
+            ) {
+                options.openai = {
+                    // Auto-enable reasoning summary for reasoning models (default: detailed)
+                    reasoningSummary:
+                        (reasoningSummary as "none" | "brief" | "detailed") ||
+                        "detailed",
+                }
+
+                // Optionally configure reasoning effort
+                if (reasoningEffort) {
+                    options.openai.reasoningEffort = reasoningEffort as
+                        | "minimal"
+                        | "low"
+                        | "medium"
+                        | "high"
+                }
+            } else if (reasoningEffort || reasoningSummary) {
+                // Non-reasoning models: only apply if explicitly configured
+                options.openai = {}
+                if (reasoningEffort) {
+                    options.openai.reasoningEffort = reasoningEffort as
+                        | "minimal"
+                        | "low"
+                        | "medium"
+                        | "high"
+                }
+                if (reasoningSummary) {
+                    options.openai.reasoningSummary = reasoningSummary as
+                        | "none"
+                        | "brief"
+                        | "detailed"
+                }
+            }
+            break
+        }
+
+        case "anthropic": {
+            const thinkingBudget = parseIntSafe(
+                process.env.ANTHROPIC_THINKING_BUDGET_TOKENS,
+                "ANTHROPIC_THINKING_BUDGET_TOKENS",
+                1024,
+                64000,
+            )
+            const thinkingType =
+                process.env.ANTHROPIC_THINKING_TYPE || "enabled"
+
+            if (thinkingBudget) {
+                options.anthropic = {
+                    thinking: {
+                        type: thinkingType,
+                        budgetTokens: thinkingBudget,
+                    },
+                }
+            }
+            break
+        }
+
+        case "google": {
+            const reasoningEffort = process.env.GOOGLE_REASONING_EFFORT
+            const thinkingBudgetVal = parseIntSafe(
+                process.env.GOOGLE_THINKING_BUDGET,
+                "GOOGLE_THINKING_BUDGET",
+                1024,
+                100000,
+            )
+            const thinkingLevel = process.env.GOOGLE_THINKING_LEVEL
+
+            // Google Gemini 2.5/3 models think by default, but need includeThoughts: true
+            // to return the reasoning in the response
+            if (
+                modelId &&
+                (modelId.includes("gemini-2") ||
+                    modelId.includes("gemini-3") ||
+                    modelId.includes("gemini2") ||
+                    modelId.includes("gemini3"))
+            ) {
+                const thinkingConfig: Record<string, any> = {
+                    includeThoughts: true,
+                }
+
+                // Optionally configure thinking budget or level
+                if (
+                    thinkingBudgetVal &&
+                    (modelId.includes("2.5") || modelId.includes("2-5"))
+                ) {
+                    thinkingConfig.thinkingBudget = thinkingBudgetVal
+                } else if (
+                    thinkingLevel &&
+                    (modelId.includes("gemini-3") ||
+                        modelId.includes("gemini3"))
+                ) {
+                    thinkingConfig.thinkingLevel = thinkingLevel as
+                        | "low"
+                        | "high"
+                }
+
+                options.google = { thinkingConfig }
+            } else if (reasoningEffort) {
+                options.google = {
+                    reasoningEffort: reasoningEffort as
+                        | "low"
+                        | "medium"
+                        | "high",
+                }
+            }
+
+            // Keep existing Google options
+            const options_obj: Record<string, any> = {}
+            const candidateCount = parseIntSafe(
+                process.env.GOOGLE_CANDIDATE_COUNT,
+                "GOOGLE_CANDIDATE_COUNT",
+                1,
+                8,
+            )
+            if (candidateCount) {
+                options_obj.candidateCount = candidateCount
+            }
+            const topK = parseIntSafe(
+                process.env.GOOGLE_TOP_K,
+                "GOOGLE_TOP_K",
+                1,
+                100,
+            )
+            if (topK) {
+                options_obj.topK = topK
+            }
+            if (process.env.GOOGLE_TOP_P) {
+                const topP = Number.parseFloat(process.env.GOOGLE_TOP_P)
+                if (Number.isNaN(topP) || topP < 0 || topP > 1) {
+                    throw new Error(
+                        `GOOGLE_TOP_P must be a number between 0 and 1, got: ${process.env.GOOGLE_TOP_P}`,
+                    )
+                }
+                options_obj.topP = topP
+            }
+
+            if (Object.keys(options_obj).length > 0) {
+                options.google = { ...options.google, ...options_obj }
+            }
+            break
+        }
+
+        case "azure": {
+            const reasoningEffort = process.env.AZURE_REASONING_EFFORT
+            const reasoningSummary = process.env.AZURE_REASONING_SUMMARY
+
+            if (reasoningEffort || reasoningSummary) {
+                options.azure = {}
+                if (reasoningEffort) {
+                    options.azure.reasoningEffort = reasoningEffort as
+                        | "low"
+                        | "medium"
+                        | "high"
+                }
+                if (reasoningSummary) {
+                    options.azure.reasoningSummary = reasoningSummary as
+                        | "none"
+                        | "brief"
+                        | "detailed"
+                }
+            }
+            break
+        }
+
+        case "bedrock": {
+            const budgetTokens = parseIntSafe(
+                process.env.BEDROCK_REASONING_BUDGET_TOKENS,
+                "BEDROCK_REASONING_BUDGET_TOKENS",
+                1024,
+                64000,
+            )
+            const reasoningEffort = process.env.BEDROCK_REASONING_EFFORT
+
+            // Bedrock reasoning ONLY for Claude and Nova models
+            // Other models (MiniMax, etc.) don't support reasoningConfig
+            if (
+                modelId &&
+                (budgetTokens || reasoningEffort) &&
+                (modelId.includes("claude") ||
+                    modelId.includes("anthropic") ||
+                    modelId.includes("nova") ||
+                    modelId.includes("amazon"))
+            ) {
+                const reasoningConfig: Record<string, any> = { type: "enabled" }
+
+                // Claude models: use budgetTokens (1024-64000)
+                if (
+                    budgetTokens &&
+                    (modelId.includes("claude") ||
+                        modelId.includes("anthropic"))
+                ) {
+                    reasoningConfig.budgetTokens = budgetTokens
+                }
+                // Nova models: use maxReasoningEffort (low/medium/high)
+                else if (
+                    reasoningEffort &&
+                    (modelId.includes("nova") || modelId.includes("amazon"))
+                ) {
+                    reasoningConfig.maxReasoningEffort = reasoningEffort as
+                        | "low"
+                        | "medium"
+                        | "high"
+                }
+
+                options.bedrock = { reasoningConfig }
+            }
+            break
+        }
+
+        case "ollama": {
+            const enableThinking = process.env.OLLAMA_ENABLE_THINKING
+            // Ollama supports reasoning with think: true for models like qwen3
+            if (enableThinking === "true") {
+                options.ollama = { think: true }
+            }
+            break
+        }
+
+        case "deepseek":
+        case "openrouter":
+        case "siliconflow": {
+            // These providers don't have reasoning configs in AI SDK yet
+            break
+        }
+
+        default:
+            break
+    }
+
+    return Object.keys(options).length > 0 ? options : undefined
+}
+
 // Map of provider to required environment variable
 const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
    bedrock: null, // AWS SDK auto-uses IAM role on AWS, or env vars locally
@@ -205,6 +494,9 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
    let providerOptions: any
    let headers: Record<string, string> | undefined

+    // Build provider-specific options from environment variables
+    const customProviderOptions = buildProviderOptions(provider, modelId)
+
    switch (provider) {
        case "bedrock": {
            // Use credential provider chain for IAM role support (Lambda, EC2, etc.)
@@ -216,7 +508,15 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            model = bedrockProvider(modelId)
            // Add Anthropic beta options if using Claude models via Bedrock
            if (modelId.includes("anthropic.claude")) {
-                providerOptions = BEDROCK_ANTHROPIC_BETA
+                // Deep merge to preserve both anthropicBeta and reasoningConfig
+                providerOptions = {
+                    bedrock: {
+                        ...BEDROCK_ANTHROPIC_BETA.bedrock,
+                        ...(customProviderOptions?.bedrock || {}),
+                    },
+                }
+            } else if (customProviderOptions) {
+                providerOptions = customProviderOptions
            }
            break
        }
@@ -342,6 +642,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            )
    }

+    // Apply provider-specific options for all providers except bedrock (which has special handling)
+    if (customProviderOptions && provider !== "bedrock" && !providerOptions) {
+        providerOptions = customProviderOptions
+    }
+
    return { model, providerOptions, headers, modelId }
 }

--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
                "@openrouter/ai-sdk-provider": "^1.2.3",
                "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
                "@opentelemetry/sdk-trace-node": "^2.2.0",
+                "@radix-ui/react-collapsible": "^1.1.12",
                "@radix-ui/react-dialog": "^1.1.6",
                "@radix-ui/react-label": "^2.1.8",
                "@radix-ui/react-scroll-area": "^1.2.3",
@@ -31,6 +32,7 @@
                "@radix-ui/react-slot": "^1.1.2",
                "@radix-ui/react-switch": "^1.2.6",
                "@radix-ui/react-tooltip": "^1.1.8",
+                "@radix-ui/react-use-controllable-state": "^1.2.2",
                "@vercel/analytics": "^1.5.0",
                "@xmldom/xmldom": "^0.9.8",
                "ai": "^5.0.89",
@@ -40,6 +42,7 @@
                "js-tiktoken": "^1.0.21",
                "jsdom": "^26.0.0",
                "lucide-react": "^0.483.0",
+                "motion": "^12.23.25",
                "next": "^16.0.7",
                "ollama-ai-provider-v2": "^1.5.4",
                "pako": "^2.1.0",
@@ -3026,6 +3029,170 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-collapsible": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+            "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-id": "1.1.1",
+                "@radix-ui/react-presence": "1.1.5",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+            "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+            "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+            "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-collection": {
            "version": "1.1.7",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -3189,6 +3356,24 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+            "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-direction": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -3822,25 +4007,6 @@
                }
            }
        },
-        "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-effect-event": "0.0.2",
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
        "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-escape-keydown": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
@@ -4063,25 +4229,6 @@
                }
            }
        },
-        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-            "license": "MIT",
-            "dependencies": {
-                "@radix-ui/react-use-effect-event": "0.0.2",
-                "@radix-ui/react-use-layout-effect": "1.1.1"
-            },
-            "peerDependencies": {
-                "@types/react": "*",
-                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-            },
-            "peerDependenciesMeta": {
-                "@types/react": {
-                    "optional": true
-                }
-            }
-        },
        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
            "version": "1.1.1",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -4149,6 +4296,24 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+            "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-callback-ref": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-use-callback-ref": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -4165,12 +4330,13 @@
            }
        },
        "node_modules/@radix-ui/react-use-controllable-state": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
-            "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
            "license": "MIT",
            "dependencies": {
-                "@radix-ui/react-use-callback-ref": "1.1.0"
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
            },
            "peerDependencies": {
                "@types/react": "*",
@@ -4182,6 +4348,21 @@
                }
            }
        },
+        "node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/@radix-ui/react-use-effect-event": {
            "version": "0.0.2",
            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
@@ -7850,6 +8031,33 @@
                "node": ">= 6"
            }
        },
+        "node_modules/framer-motion": {
+            "version": "12.23.25",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.25.tgz",
+            "integrity": "sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-dom": "^12.23.23",
+                "motion-utils": "^12.23.6",
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/function-bind": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -10357,6 +10565,47 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
+        "node_modules/motion": {
+            "version": "12.23.25",
+            "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.25.tgz",
+            "integrity": "sha512-Fk5Y1kcgxYiTYOUjmwfXQAP7tP+iGqw/on1UID9WEL/6KpzxPr9jY2169OsjgZvXJdpraKXy0orkjaCVIl5fgQ==",
+            "license": "MIT",
+            "dependencies": {
+                "framer-motion": "^12.23.25",
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/motion-dom": {
+            "version": "12.23.23",
+            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+            "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-utils": "^12.23.6"
+            }
+        },
+        "node_modules/motion-utils": {
+            "version": "12.23.6",
+            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+            "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+            "license": "MIT"
+        },
        "node_modules/ms": {
            "version": "2.1.3",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -12047,9 +12296,9 @@
            "license": "MIT"
        },
        "node_modules/tailwind-merge": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.1.0.tgz",
-            "integrity": "sha512-aV27Oj8B7U/tAOMhJsSGdWqelfmudnGMdXIlMnk1JfsjwSjts6o8HyfN7SFH3EztzH4YH8kk6GbLTHzITJO39Q==",
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+            "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
            "license": "MIT",
            "funding": {
                "type": "github",
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
        "@openrouter/ai-sdk-provider": "^1.2.3",
        "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
        "@opentelemetry/sdk-trace-node": "^2.2.0",
+        "@radix-ui/react-collapsible": "^1.1.12",
        "@radix-ui/react-dialog": "^1.1.6",
        "@radix-ui/react-label": "^2.1.8",
        "@radix-ui/react-scroll-area": "^1.2.3",
@@ -35,6 +36,7 @@
        "@radix-ui/react-slot": "^1.1.2",
        "@radix-ui/react-switch": "^1.2.6",
        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-use-controllable-state": "^1.2.2",
        "@vercel/analytics": "^1.5.0",
        "@xmldom/xmldom": "^0.9.8",
        "ai": "^5.0.89",
@@ -44,6 +46,7 @@
        "js-tiktoken": "^1.0.21",
        "jsdom": "^26.0.0",
        "lucide-react": "^0.483.0",
+        "motion": "^12.23.25",
        "next": "^16.0.7",
        "ollama-ai-provider-v2": "^1.5.4",
        "pako": "^2.1.0",