refactor(settings): remove wrapper layers, dead props and unused dictionary keys

- components/model-selector.tsx uses Dialog, Command and Tooltip
  directly; delete components/ai-elements/model-selector.tsx and
  components/button-with-tooltip.tsx; one renderGroups for both lists;
  no "Server · " prefix round trip
- components/ui: drop CommandDialog, CommandShortcut and six unused
  shadcn exports
- model-config-dialog: no type-to-confirm on provider delete;
  provider-credentials-fields: drop footer and bedrockApiKey
- hooks/use-model-config.ts and lib/types/model-config.ts: remove the
  2025-12 single-provider migration, resetConfig, selectedModel and
  fields nothing reads
- components/chat/TemplateFormDialog.tsx replaces the create and edit
  dialogs; TemplatePanel drops the setInput fallback, the
  templatesChanged listener, dictionary fallbacks and formatLastUsed;
  lib/template-storage.ts drops getTemplate, clickCount and indexes
- reasoning.tsx becomes one component; shimmer uses a CSS keyframe
  (motion and @radix-ui/react-use-controllable-state removed)
- error-toast.tsx deleted in favour of toast.error; ValidationCard
  drops the idle status; dev-xml-simulator uses English literals
- admin: no enum setting type, shared types from lib/admin
  (AdminProviderInput stays exported for that), ENABLE_HISTORY_XML_REPLACE
  entry removed
- app/globals.css: drop check-pop, --ease-spring, --duration-normal
  and the shadow aliases
- dictionaries: 81 unused keys removed from all four languages

components/ai-elements/model-selector.tsx

@@ -1,238 +0,0 @@
-import { Cloud } from "lucide-react"
-import type { ComponentProps, ElementRef, ReactNode } from "react"
-import { useEffect, useRef, useState } from "react"
-import {
-    Command,
-    CommandDialog,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-    CommandShortcut,
-} from "@/components/ui/command"
-import {
-    Dialog,
-    DialogContent,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
-
-export type ModelSelectorProps = ComponentProps<typeof Dialog>
-
-export const ModelSelector = (props: ModelSelectorProps) => (
-    <Dialog {...props} />
-)
-
-export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>
-
-export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
-    <DialogTrigger {...props} />
-)
-
-export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
-    title?: ReactNode
-}
-
-export const ModelSelectorContent = ({
-    className,
-    children,
-    title = "Model Selector",
-    ...props
-}: ModelSelectorContentProps) => (
-    <DialogContent className={cn("p-0", className)} {...props}>
-        <DialogTitle className="sr-only">{title}</DialogTitle>
-        <Command className="**:data-[slot=command-input-wrapper]:h-auto">
-            {children}
-        </Command>
-    </DialogContent>
-)
-
-export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>
-
-export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
-    <CommandDialog {...props} />
-)
-
-export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>
-
-export const ModelSelectorInput = ({
-    className,
-    ...props
-}: ModelSelectorInputProps) => (
-    <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
-)
-
-export type ModelSelectorListProps = ComponentProps<typeof CommandList>
-
-export const ModelSelectorList = ({
-    className,
-    ...props
-}: ModelSelectorListProps) => {
-    const listRef = useRef<ElementRef<typeof CommandList>>(null)
-    const [showShadow, setShowShadow] = useState(false)
-
-    useEffect(() => {
-        const listElement = listRef.current
-        if (!listElement) return
-
-        const checkScroll = () => {
-            const { scrollTop, scrollHeight, clientHeight } = listElement
-            // Show shadow if there is more content below
-            // Using a small threshold to handle fractional pixel rendering
-            setShowShadow(
-                scrollHeight > Math.ceil(scrollTop + clientHeight) + 1,
-            )
-        }
-
-        // Initial check
-        checkScroll()
-
-        // Event listeners
-        listElement.addEventListener("scroll", checkScroll)
-        window.addEventListener("resize", checkScroll)
-
-        // Observe content changes (e.g. async loading of items)
-        const observer = new MutationObserver(checkScroll)
-        observer.observe(listElement, { childList: true, subtree: true })
-
-        return () => {
-            listElement.removeEventListener("scroll", checkScroll)
-            window.removeEventListener("resize", checkScroll)
-            observer.disconnect()
-        }
-    }, [])
-
-    return (
-        <div className="relative">
-            <CommandList
-                ref={listRef}
-                className={cn(
-                    // Hide scrollbar on all platforms
-                    "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-                    className,
-                )}
-                {...props}
-            />
-            {/* Bottom shadow indicator for scrollable content */}
-            <div
-                className={cn(
-                    "pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-muted/80 via-muted/40 to-transparent transition-opacity duration-200",
-                    showShadow ? "opacity-100" : "opacity-0",
-                )}
-            />
-        </div>
-    )
-}
-
-export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>
-
-export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
-    <CommandEmpty {...props} />
-)
-
-export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>
-
-export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
-    <CommandGroup {...props} />
-)
-
-export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>
-
-export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
-    <CommandItem {...props} />
-)
-
-export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>
-
-export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
-    <CommandShortcut {...props} />
-)
-
-export type ModelSelectorSeparatorProps = ComponentProps<
-    typeof CommandSeparator
->
-
-export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
-    <CommandSeparator {...props} />
-)
-
-export type ModelSelectorLogoProps = Omit<
-    ComponentProps<"img">,
-    "src" | "alt"
-> & {
-    provider: string
-}
-
-export const ModelSelectorLogo = ({
-    provider,
-    className,
-    ...props
-}: ModelSelectorLogoProps) => {
-    // Use Lucide icon for bedrock since models.dev doesn't have a good AWS icon
-    if (provider === "amazon-bedrock") {
-        return <Cloud className={cn("size-4", className)} />
-    }
-
-    return (
-        // biome-ignore lint/performance/noImgElement: External URL from models.dev
-        <img
-            {...props}
-            alt={`${provider} logo`}
-            className={cn("size-4 dark:invert", className)}
-            height={16}
-            src={`https://models.dev/logos/${provider}.svg`}
-            width={16}
-        />
-    )
-}
-
-export type ModelSelectorLogoGroupProps = ComponentProps<"div">
-
-export const ModelSelectorLogoGroup = ({
-    className,
-    ...props
-}: ModelSelectorLogoGroupProps) => (
-    <div
-        className={cn(
-            "-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
-            className,
-        )}
-        {...props}
-    />
-)
-
-export type ModelSelectorNameProps = ComponentProps<"span">
-
-export const ModelSelectorName = ({
-    className,
-    ...props
-}: ModelSelectorNameProps) => (
-    <span className={cn("flex-1 truncate text-left", className)} {...props} />
-)
-
-export type ModelSelectorSectionHeaderProps = {
-    icon: ReactNode
-    label: string
-    className?: string
-}
-
-export const ModelSelectorSectionHeader = ({
-    icon,
-    label,
-    className,
-}: ModelSelectorSectionHeaderProps) => (
-    <div
-        className={cn(
-            "flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted/40 rounded-sm mx-1 mt-1",
-            className,
-        )}
-    >
-        <span className="[&>svg]:size-3.5" aria-hidden="true">
-            {icon}
-        </span>
-        <span>{label}</span>
-    </div>
-)

components/ai-elements/reasoning.tsx

@@ -1,186 +1,83 @@
 "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 type { ReactNode } from "react"
+import { 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> & {
+export type ReasoningProps = {
+    className?: string
     isStreaming?: boolean
-    open?: boolean
+    /** Open while streaming, then folds once about a second after it ends */
     defaultOpen?: boolean
-    onOpenChange?: (open: boolean) => void
-    duration?: number
+    getThinkingMessage: (isStreaming: boolean, duration?: number) => ReactNode
+    children: string
 }
 
 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,
-        })
+export function Reasoning({
+    className,
+    isStreaming = false,
+    defaultOpen = true,
+    getThinkingMessage,
+    children,
+}: ReasoningProps) {
+    const [isOpen, setIsOpen] = useState(defaultOpen)
+    const [duration, setDuration] = useState<number>()
+    const [hasAutoClosed, setHasAutoClosed] = useState(false)
+    const [startTime, setStartTime] = useState<number | null>(null)
 
-        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)
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+        if (isStreaming) {
+            if (startTime === null) {
+                setStartTime(Date.now())
             }
-        }, [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)
+        } else if (startTime !== null) {
+            setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
+            setStartTime(null)
         }
+    }, [isStreaming, startTime])
 
-        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>
-        )
-    },
-)
+    // Auto-close once when streaming ends, after a short delay so the user
+    // sees the content
+    useEffect(() => {
+        if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+            const timer = setTimeout(() => {
+                setIsOpen(false)
+                setHasAutoClosed(true)
+            }, AUTO_CLOSE_DELAY)
 
-export type ReasoningTriggerProps = ComponentProps<
-    typeof CollapsibleTrigger
-> & {
-    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
-}
+            return () => clearTimeout(timer)
+        }
+    }, [isStreaming, isOpen, defaultOpen, hasAutoClosed])
 
-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}
+    return (
+        <Collapsible
+            className={cn("not-prose mb-4", className)}
+            onOpenChange={setIsOpen}
+            open={isOpen}
         >
-            <div className="whitespace-pre-wrap">{children}</div>
-        </CollapsibleContent>
-    ),
-)
-
-Reasoning.displayName = "Reasoning"
-ReasoningTrigger.displayName = "ReasoningTrigger"
-ReasoningContent.displayName = "ReasoningContent"
+            <CollapsibleTrigger className="flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
+                <BrainIcon className="size-4" />
+                {getThinkingMessage(isStreaming, duration)}
+                <ChevronDownIcon
+                    className={cn(
+                        "size-4 transition-transform",
+                        isOpen ? "rotate-180" : "rotate-0",
+                    )}
+                />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="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">
+                <div className="whitespace-pre-wrap">{children}</div>
+            </CollapsibleContent>
+        </Collapsible>
+    )
+}

components/ai-elements/shimmer.tsx

@@ -1,13 +1,6 @@
 "use client"
 
-import { motion } from "motion/react"
-import {
-    type CSSProperties,
-    type ElementType,
-    type JSX,
-    memo,
-    useMemo,
-} from "react"
+import { type CSSProperties, type ElementType, memo, useMemo } from "react"
 import { cn } from "@/lib/utils"
 
 export type TextShimmerProps = {
@@ -25,39 +18,29 @@ const ShimmerComponent = ({
     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" }}
+        <Component
             className={cn(
-                "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+                "animate-shimmer 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`,
+                    "--shimmer-duration": `${duration}s`,
                     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>
+        </Component>
     )
 }