@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3256.1.fe3dec2464

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.1-develop.3246.1.dbef9d7392",
+  "version": "0.6.1-develop.3256.1.fe3dec2464",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -140,12 +140,12 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.1-develop.3246.1.dbef9d7392",
+    "@open-mercato/shared": "0.6.1-develop.3256.1.fe3dec2464",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.1-develop.3246.1.dbef9d7392",
+    "@open-mercato/shared": "0.6.1-develop.3256.1.fe3dec2464",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/ai/AiAssistantLauncher.tsx

@@ -131,6 +131,7 @@ const DEFAULT_AGENTS_ENDPOINT = '/api/ai_assistant/ai/agents'
 const DEFAULT_HEALTH_ENDPOINT = '/api/ai_assistant/health'
 const AI_ASSISTANT_DOCS_URL = 'https://docs.openmercato.com/framework/ai-assistant/overview'
 const AI_ASSISTANT_SETTINGS_DOCS_URL = 'https://docs.openmercato.com/framework/ai-assistant/settings'
+export const AI_ASSISTANT_LAUNCHER_OPEN_EVENT = 'om:open-ai-assistant-launcher'
 
 function isMutationCapable(policy: string | null | undefined): boolean {
   return policy === 'confirm-required' || policy === 'destructive-confirm-required'
@@ -319,6 +320,13 @@ export function AiAssistantLauncher({
     setPickerOpen(true)
   }, [])
 
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    const listener = () => openPicker()
+    window.addEventListener(AI_ASSISTANT_LAUNCHER_OPEN_EVENT, listener)
+    return () => window.removeEventListener(AI_ASSISTANT_LAUNCHER_OPEN_EVENT, listener)
+  }, [openPicker])
+
   const handleSelectAgent = React.useCallback((agent: AiAssistantLauncherAgent) => {
     if (dock.state.assistant?.agent === agent.id) {
       dock.dock(dock.state.assistant)

package/src/ai/AiChat.tsx

@@ -26,7 +26,13 @@ import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
 import { Label } from '../primitives/label'
 import { Textarea } from '../primitives/textarea'
+import { apiCall } from '../backend/utils/apiCall'
 import { parseAiContentSegments } from './AiMessageContent'
+import {
+  ModelPicker,
+  type ModelPickerProvider,
+  type ModelPickerValue,
+} from './ModelPicker'
 import { RecordCard } from './records/RecordCard'
 import {
   defaultAiUiPartRegistry,
@@ -48,6 +54,113 @@ import { useAiShortcuts } from './useAiShortcuts'
 // browsers). Images larger than this still upload + send to the LLM as inline
 // base64 server-side; only the in-chat preview is dropped on reload.
 const PREVIEW_DATA_URL_MAX_BYTES = 2 * 1024 * 1024
+const COMPACT_FOOTER_MAX_WIDTH = 640
+
+const MODEL_PICKER_STORAGE_PREFIX = 'om-ai-model-picker:'
+
+function readModelPickerValue(agentId: string): ModelPickerValue | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const raw = window.localStorage.getItem(`${MODEL_PICKER_STORAGE_PREFIX}${agentId}`)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as unknown
+    if (
+      parsed &&
+      typeof parsed === 'object' &&
+      typeof (parsed as Record<string, unknown>).providerId === 'string' &&
+      typeof (parsed as Record<string, unknown>).modelId === 'string'
+    ) {
+      const value = parsed as ModelPickerValue
+      return { providerId: value.providerId, modelId: value.modelId }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
+function writeModelPickerValue(agentId: string, value: ModelPickerValue | null): void {
+  if (typeof window === 'undefined') return
+  try {
+    const key = `${MODEL_PICKER_STORAGE_PREFIX}${agentId}`
+    if (value === null) {
+      window.localStorage.removeItem(key)
+    } else {
+      window.localStorage.setItem(key, JSON.stringify({ providerId: value.providerId, modelId: value.modelId }))
+    }
+  } catch {
+    // Quota exceeded / privacy mode — silently ignore.
+  }
+}
+
+interface ModelsApiResponse {
+  agentId: string
+  allowRuntimeModelOverride: boolean
+  defaultProviderId: string | null
+  defaultModelId: string | null
+  defaultProviderName?: string | null
+  defaultModelName?: string | null
+  providers: ModelPickerProvider[]
+}
+
+function useAgentModels(agent: string): {
+  providers: ModelPickerProvider[]
+  allowRuntimeModelOverride: boolean
+  defaultLabel: string | null
+  loaded: boolean
+} {
+  const [providers, setProviders] = React.useState<ModelPickerProvider[]>([])
+  const [allowRuntimeModelOverride, setAllowRuntimeModelOverride] = React.useState(false)
+  const [defaultLabel, setDefaultLabel] = React.useState<string | null>(null)
+  const [loaded, setLoaded] = React.useState(false)
+
+  React.useEffect(() => {
+    const modelsUrl = `/api/ai_assistant/ai/agents/${encodeURIComponent(agent)}/models`
+    setLoaded(false)
+    setDefaultLabel(null)
+    void apiCall<ModelsApiResponse>(modelsUrl).then((result) => {
+      if (!result.ok || !result.result) {
+        setLoaded(true)
+        return
+      }
+      setAllowRuntimeModelOverride(result.result.allowRuntimeModelOverride)
+      setProviders(result.result.providers)
+      setDefaultLabel(
+        result.result.defaultProviderName && result.result.defaultModelName
+          ? `${result.result.defaultProviderName} / ${result.result.defaultModelName}`
+          : result.result.defaultProviderId && result.result.defaultModelId
+            ? `${result.result.defaultProviderId} / ${result.result.defaultModelId}`
+            : null,
+      )
+      setLoaded(true)
+    })
+  }, [agent])
+
+  return { providers, allowRuntimeModelOverride, defaultLabel, loaded }
+}
+
+function firstAvailableModelPickerValue(
+  providers: ModelPickerProvider[],
+): ModelPickerValue | null {
+  for (const provider of providers) {
+    const model = provider.models[0]
+    if (model) {
+      return { providerId: provider.id, modelId: model.id }
+    }
+  }
+  return null
+}
+
+function isModelPickerValueAvailable(
+  value: ModelPickerValue,
+  providers: ModelPickerProvider[],
+): boolean {
+  return providers.some(
+    (provider) =>
+      provider.id === value.providerId &&
+      provider.models.some((model) => model.id === value.modelId),
+  )
+}
 
 async function readFileAsDataUrl(file: File): Promise<string | undefined> {
   if (!file.type.startsWith('image/')) return undefined
@@ -158,6 +271,8 @@ export interface AiChatProps {
   welcomeTitle?: string
   /** Welcome description shown below the heading. */
   welcomeDescription?: string
+  /** Initial compact composer state used before the footer has been measured. */
+  defaultCompactFooter?: boolean
 }
 
 interface ServerEmittedUiPartRef {
@@ -718,6 +833,7 @@ export function AiChat({
   contextItems,
   welcomeTitle,
   welcomeDescription,
+  defaultCompactFooter = false,
 }: AiChatProps) {
   const t = useT()
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
@@ -740,6 +856,26 @@ export function AiChat({
   const [pendingFiles, setPendingFiles] = React.useState<PendingAttachment[]>([])
   const upload = useAiChatUpload()
   const isUploading = upload.busy
+  const footerRef = React.useRef<HTMLDivElement | null>(null)
+  const [isCompactFooter, setIsCompactFooter] = React.useState(defaultCompactFooter)
+
+  React.useEffect(() => {
+    const element = footerRef.current
+    if (!element || typeof ResizeObserver === 'undefined') return
+
+    const updateCompactState = (width: number) => {
+      setIsCompactFooter(width < COMPACT_FOOTER_MAX_WIDTH)
+    }
+
+    updateCompactState(element.getBoundingClientRect().width)
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      updateCompactState(entry.contentRect.width)
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
 
   const uploadedAttachmentIds = React.useMemo(
     () =>
@@ -754,6 +890,66 @@ export function AiChat({
     [attachmentIds, uploadedAttachmentIds],
   )
 
+  const {
+    providers: modelProviders,
+    allowRuntimeModelOverride,
+    defaultLabel: modelDefaultLabel,
+    loaded: modelProvidersLoaded,
+  } = useAgentModels(agent)
+
+  const [modelPickerValue, setModelPickerValue] = React.useState<ModelPickerValue | null>(() =>
+    readModelPickerValue(agent),
+  )
+
+  const effectiveModelPickerValue = React.useMemo(() => {
+    if (!modelProvidersLoaded || !allowRuntimeModelOverride || modelProviders.length === 0) {
+      return null
+    }
+    if (modelPickerValue && isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
+      return modelPickerValue
+    }
+    return firstAvailableModelPickerValue(modelProviders)
+  }, [
+    allowRuntimeModelOverride,
+    modelPickerValue,
+    modelProviders,
+    modelProvidersLoaded,
+  ])
+
+  React.useEffect(() => {
+    setModelPickerValue(readModelPickerValue(agent))
+  }, [agent])
+
+  React.useEffect(() => {
+    if (!modelProvidersLoaded) return
+    if (!allowRuntimeModelOverride || modelProviders.length === 0) {
+      if (modelPickerValue !== null) {
+        setModelPickerValue(null)
+        writeModelPickerValue(agent, null)
+      }
+      return
+    }
+    if (modelPickerValue && !isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
+      const fallback = firstAvailableModelPickerValue(modelProviders)
+      setModelPickerValue(fallback)
+      writeModelPickerValue(agent, fallback)
+    }
+  }, [
+    agent,
+    allowRuntimeModelOverride,
+    modelPickerValue,
+    modelProviders,
+    modelProvidersLoaded,
+  ])
+
+  const handleModelPickerChange = React.useCallback(
+    (value: ModelPickerValue | null) => {
+      setModelPickerValue(value)
+      writeModelPickerValue(agent, value)
+    },
+    [agent],
+  )
+
   const chat = useAiChat({
     agent,
     apiPath,
@@ -763,6 +959,8 @@ export function AiChat({
     initialMessages,
     onError,
     conversationId,
+    providerOverride: effectiveModelPickerValue?.providerId ?? null,
+    modelOverride: effectiveModelPickerValue?.modelId ?? null,
   })
 
   const isStreaming = chat.status === 'streaming'
@@ -1065,15 +1263,15 @@ export function AiChat({
   return (
     <section
       className={cn(
-        'flex h-full min-h-[320px] flex-col gap-3 rounded-lg border border-border bg-background p-3',
+        'flex h-full min-h-[320px] min-w-0 flex-col gap-3 overflow-hidden rounded-lg border border-border bg-background p-3',
         className,
       )}
       aria-label={t('ai_assistant.chat.regionLabel', 'AI chat')}
       data-ai-chat-agent={agent}
       data-ai-chat-conversation-id={chat.conversationId}
     >
-      <div className="flex items-center justify-between gap-2 border-b border-border pb-2">
-        <div className="flex flex-1 items-center gap-2 text-xs text-muted-foreground">
+      <div className="flex min-w-0 items-center justify-between gap-2 border-b border-border pb-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground">
           {contextItems && contextItems.length > 0 ? (
             <ContextItemsPill items={contextItems} />
           ) : (
@@ -1100,7 +1298,7 @@ export function AiChat({
         role="log"
         aria-live="polite"
         aria-label={t('ai_assistant.chat.transcriptLabel', 'Chat transcript')}
-        className="flex-1 space-y-2 overflow-y-auto pr-1"
+        className="min-w-0 flex-1 space-y-2 overflow-y-auto overflow-x-hidden pr-1"
       >
         {chat.messages.length === 0 ? (
           <WelcomeState
@@ -1153,7 +1351,7 @@ export function AiChat({
       ) : null}
 
       <form
-        className="flex flex-col gap-2"
+        className="flex min-w-0 flex-col gap-2"
         onSubmit={(event) => {
           event.preventDefault()
           handleSubmit()
@@ -1203,7 +1401,7 @@ export function AiChat({
           onKeyDown={handleKeyDown}
           rows={3}
           aria-label={t('ai_assistant.chat.composerLabel', 'Message composer')}
-          className="resize-none"
+          className="min-w-0 resize-none"
         />
         <input
           ref={fileInputRef}
@@ -1214,8 +1412,13 @@ export function AiChat({
           onChange={handleFileSelect}
           data-ai-chat-file-input=""
         />
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
+        <div
+          ref={footerRef}
+          className="flex min-w-0 items-center justify-between gap-2"
+          data-ai-chat-footer=""
+          data-ai-chat-footer-compact={isCompactFooter ? 'true' : 'false'}
+        >
+          <div className="flex min-w-0 items-center gap-2">
             <IconButton
               type="button"
               variant="ghost"
@@ -1226,7 +1429,19 @@ export function AiChat({
             >
               <Paperclip className="size-4" aria-hidden />
             </IconButton>
-            <p className="text-xs text-muted-foreground">
+            {allowRuntimeModelOverride && modelProviders.length > 0 ? (
+              <ModelPicker
+                agentId={agent}
+                value={effectiveModelPickerValue}
+                onChange={handleModelPickerChange}
+                availableProviders={modelProviders}
+                disabled={isBusy}
+                compact={isCompactFooter}
+                defaultLabel={modelDefaultLabel}
+                className="shrink-0"
+              />
+            ) : null}
+            <p className={cn('text-xs text-muted-foreground', isCompactFooter && 'hidden')}>
               {hasUploadingFiles || isUploading
                 ? t(
                     'ai_assistant.chat.uploadingHint',
@@ -1238,7 +1453,7 @@ export function AiChat({
                   )}
             </p>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2">
             {isStreaming ? (
               <IconButton
                 type="button"
@@ -1269,9 +1484,12 @@ export function AiChat({
                   ? t('ai_assistant.chat.sendWaitingForUpload', 'Waiting for upload to finish…')
                   : undefined
               }
+              className={cn(isCompactFooter && 'w-8 px-0')}
             >
               <Send className="size-4" aria-hidden />
-              <span>{t('ai_assistant.chat.send', 'Send message')}</span>
+              {!isCompactFooter ? (
+                <span>{t('ai_assistant.chat.send', 'Send message')}</span>
+              ) : null}
             </Button>
           </div>
         </div>

package/src/ai/AiDock.tsx

@@ -381,7 +381,7 @@ function AiDockPanel({
         // primary surface (full-screen sheet) and a fixed side panel would
         // crowd the viewport.
         'hidden lg:flex',
-        'fixed top-0 right-0 z-overlay h-svh flex-col border-l bg-background shadow-lg',
+        'fixed top-0 right-0 z-overlay h-svh min-w-0 flex-col overflow-hidden border-l bg-background shadow-lg',
         collapsed ? 'w-12' : '',
       )}
       style={collapsed ? undefined : { width }}
@@ -478,7 +478,7 @@ function DockedChatBody({ assistant }: { assistant: AiDockedAssistant }) {
   return (
     <>
       <ChatPaneTabs agentId={assistant.agent} className="border-b" />
-      <div className="min-h-0 flex-1" data-ai-dock-chat-container="">
+      <div className="min-h-0 min-w-0 flex-1 overflow-hidden" data-ai-dock-chat-container="">
         {session ? (
           <React.Suspense fallback={null}>
             <LazyAiChat
@@ -491,6 +491,7 @@ function DockedChatBody({ assistant }: { assistant: AiDockedAssistant }) {
               conversationId={session.conversationId}
               pageContext={assistant.pageContext}
               className="h-full"
+              defaultCompactFooter
               placeholder={assistant.placeholder}
               suggestions={assistant.suggestions}
               contextItems={assistant.contextItems}

package/src/ai/ModelPicker.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDown, Cpu } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '../primitives/button'
+
+export interface ModelPickerProviderModel {
+  id: string
+  name: string
+  contextWindow?: number | null
+  tags?: string[]
+  isDefault: boolean
+}
+
+export interface ModelPickerProvider {
+  id: string
+  name: string
+  isDefault: boolean
+  models: ModelPickerProviderModel[]
+}
+
+export interface ModelPickerValue {
+  providerId: string
+  modelId: string
+  baseURL?: string | null
+}
+
+export interface ModelPickerProps {
+  agentId: string
+  value: ModelPickerValue | null
+  onChange: (value: ModelPickerValue | null) => void
+  availableProviders: ModelPickerProvider[]
+  disabled?: boolean
+  compact?: boolean
+  defaultLabel?: string | null
+  className?: string
+}
+
+/**
+ * Stateless dropdown for selecting a provider + model override in the chat UI.
+ *
+ * - Renders provider name + model id + "(default)" badge for the agent's resolved default.
+ * - Keyboard-accessible: trigger opens a floating list, arrow keys navigate, Enter selects,
+ *   Escape closes.
+ * - Does NOT expose a baseURL input (R6 mitigation: only provider+model selection from the
+ *   curated catalog is exposed to end users).
+ * - localStorage persistence keyed by agentId is handled by the consumer (AiChat / 4b.2).
+ * - When allowRuntimeModelOverride is false the consumer should not render this component
+ *   at all; this component itself does no gating.
+ */
+export function ModelPicker({
+  agentId,
+  value,
+  onChange,
+  availableProviders,
+  disabled,
+  compact = false,
+  defaultLabel,
+  className,
+}: ModelPickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const selectedLabel = React.useMemo(() => {
+    if (!value) {
+      return defaultLabel
+        ? t('ai_assistant.modelPicker.defaultWithModelLabel', 'Default: {{model}}').replace('{{model}}', defaultLabel)
+        : t('ai_assistant.modelPicker.defaultLabel', 'Model: Default')
+    }
+    const provider = availableProviders.find((p) => p.id === value.providerId)
+    const model = provider?.models.find((m) => m.id === value.modelId)
+    const modelLabel = model?.name ?? value.modelId
+    const providerLabel = provider?.name ?? value.providerId
+    return `${providerLabel} / ${modelLabel}`
+  }, [value, availableProviders, defaultLabel, t])
+
+  const handleToggle = React.useCallback(() => {
+    if (disabled) return
+    setOpen((prev) => !prev)
+  }, [disabled])
+
+  const handleSelect = React.useCallback(
+    (providerId: string, modelId: string) => {
+      onChange({ providerId, modelId })
+      setOpen(false)
+      triggerRef.current?.focus()
+    },
+    [onChange],
+  )
+
+  const handleClearDefault = React.useCallback(() => {
+    onChange(null)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }, [onChange])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  if (availableProviders.length === 0) return null
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)} data-ai-model-picker={agentId}>
+      <Button
+        ref={triggerRef}
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled}
+        onClick={handleToggle}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={t('ai_assistant.modelPicker.triggerAriaLabel', 'Select AI model')}
+        title={selectedLabel}
+        data-ai-model-picker-trigger
+        className={cn(
+          'font-normal',
+          compact ? 'w-8 gap-0 px-0' : 'gap-1.5 px-2.5',
+        )}
+      >
+        <Cpu className="size-3.5 shrink-0" aria-hidden />
+        {!compact ? (
+          <span className="max-w-36 truncate text-xs">{selectedLabel}</span>
+        ) : null}
+        <ChevronDown
+          className={cn(
+            'size-3 shrink-0 transition-transform',
+            compact && 'hidden',
+            open && 'rotate-180',
+          )}
+          aria-hidden
+        />
+      </Button>
+
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={t('ai_assistant.modelPicker.listAriaLabel', 'Available models')}
+          className={cn(
+            'absolute bottom-full left-0 z-50 mb-1 max-h-72 min-w-56 overflow-y-auto',
+            'rounded-md border border-border bg-popover shadow-md',
+          )}
+          data-ai-model-picker-dropdown
+        >
+          <div
+            role="option"
+            aria-selected={value === null}
+            tabIndex={0}
+            className={cn(
+              'cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground',
+              'flex items-center gap-2',
+              value === null && 'bg-accent/50',
+            )}
+            onClick={handleClearDefault}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                handleClearDefault()
+              }
+            }}
+            data-ai-model-picker-default-option
+          >
+            <span className="flex-1">
+              {defaultLabel
+                ? t('ai_assistant.modelPicker.useDefaultWithModel', 'Use agent default: {{model}}').replace('{{model}}', defaultLabel)
+                : t('ai_assistant.modelPicker.useDefault', 'Use agent default')}
+            </span>
+            {value === null ? (
+              <span className="rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary">
+                {t('ai_assistant.modelPicker.activeBadge', 'active')}
+              </span>
+            ) : null}
+          </div>
+          {availableProviders.map((provider) => (
+            <div key={provider.id} data-ai-model-picker-provider={provider.id}>
+              <div className="px-3 py-1.5 text-overline font-semibold uppercase tracking-wider text-muted-foreground">
+                {provider.name}
+              </div>
+              {provider.models.map((model) => {
+                const isSelected =
+                  value?.providerId === provider.id && value?.modelId === model.id
+                return (
+                  <div
+                    key={model.id}
+                    role="option"
+                    aria-selected={isSelected}
+                    tabIndex={0}
+                    className={cn(
+                      'cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground',
+                      'flex items-center gap-2 pl-5',
+                      isSelected && 'bg-accent/50',
+                    )}
+                    onClick={() => handleSelect(provider.id, model.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        handleSelect(provider.id, model.id)
+                      }
+                    }}
+                    data-ai-model-picker-model={`${provider.id}:${model.id}`}
+                  >
+                    <span className="flex-1 truncate">{model.name}</span>
+                    {model.isDefault ? (
+                      <span className="shrink-0 rounded bg-muted px-1 py-0.5 text-overline text-muted-foreground">
+                        {t('ai_assistant.modelPicker.defaultBadge', 'default')}
+                      </span>
+                    ) : null}
+                    {isSelected ? (
+                      <span className="shrink-0 rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary">
+                        {t('ai_assistant.modelPicker.activeBadge', 'active')}
+                      </span>
+                    ) : null}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ModelPicker