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

package/src/modules/ai_assistant/components/AiAssistantSettingsPageClient.tsx

@@ -1,16 +1,20 @@
 'use client'
 
 import * as React from 'react'
-import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { Bot, Loader2, CheckCircle2, XCircle, ChevronDown, ChevronRight, Server, Wrench, Eye, EyeOff, Database, Link2, Settings, Key } from 'lucide-react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Bot, Loader2, CheckCircle2, XCircle, ChevronDown, ChevronRight, Server, Wrench, Eye, EyeOff, Database, Link2, Settings, Key, X } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { AI_ASSISTANT_LAUNCHER_OPEN_EVENT } from '@open-mercato/ui/ai/AiAssistantLauncher'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Switch } from '@open-mercato/ui/primitives/switch'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useAiAssistantVisibility } from '../../../frontend/hooks/useAiAssistantVisibility'
 import McpConfigDialog from './McpConfigDialog'
 import SessionKeyDialog from './SessionKeyDialog'
 
-// OpenCode health response type
 type OpenCodeHealthResponse = {
   status: 'ok' | 'error'
   opencode?: {
@@ -28,23 +32,48 @@ type OpenCodeHealthResponse = {
   message?: string
 }
 
-// Provider config type from settings API
 type ProviderConfig = {
   id: string
   name: string
   model: string
   defaultModel: string
-  envKey: string
+  envKey: string | null
   configured: boolean
+  defaultModels: Array<{ id: string; name: string }>
+}
+
+type TenantOverride = {
+  providerId: string | null
+  modelId: string | null
+  baseURL: string | null
+  agentId: string | null
+  updatedAt: string
 }
 
 type SettingsResponse = {
   provider: ProviderConfig
   availableProviders: ProviderConfig[]
   mcpKeyConfigured: boolean
+  resolvedDefault: {
+    providerId: string
+    modelId: string
+    baseURL: string | null
+    source: string
+  } | null
+  tenantOverride: TenantOverride | null
+  agents: AgentResolution[]
+}
+
+type AgentResolution = {
+  agentId: string
+  moduleId: string
+  allowRuntimeModelOverride: boolean
+  providerId: string
+  modelId: string
+  baseURL: string | null
+  source: string
 }
 
-// Tool info type
 type ToolInfo = {
   name: string
   description: string
@@ -52,37 +81,401 @@ type ToolInfo = {
   inputSchema: Record<string, unknown>
 }
 
-// API fetch functions
+type AiAssistantSettingsPageClientProps = {
+  launchMode?: 'selector' | 'legacy'
+  showVisibilityControl?: boolean
+}
+
+const LEGACY_AI_ASSISTANT_OPEN_EVENT = 'om:open-ai-chat'
+
 async function fetchHealth(): Promise<OpenCodeHealthResponse> {
-  const res = await fetch('/api/ai_assistant/health')
-  if (!res.ok) throw new Error('Failed to fetch health')
-  return res.json()
+  const result = await apiCall<OpenCodeHealthResponse>('/api/ai_assistant/health')
+  if (!result.ok || !result.result) throw new Error('Failed to fetch health')
+  return result.result
 }
 
 async function fetchSettings(): Promise<SettingsResponse> {
-  const res = await fetch('/api/ai_assistant/settings')
-  if (!res.ok) throw new Error('Failed to fetch settings')
-  return res.json()
+  const result = await apiCall<SettingsResponse>('/api/ai_assistant/settings')
+  if (!result.ok || !result.result) throw new Error('Failed to fetch settings')
+  return result.result
 }
 
 async function fetchTools(): Promise<{ tools: ToolInfo[] }> {
-  const res = await fetch('/api/ai_assistant/tools')
-  if (!res.ok) throw new Error('Failed to fetch tools')
-  return res.json()
+  const result = await apiCall<{ tools: ToolInfo[] }>('/api/ai_assistant/tools')
+  if (!result.ok || !result.result) throw new Error('Failed to fetch tools')
+  return result.result
 }
 
-function AiAssistantSettingsContent() {
-  const [toolsExpanded, setToolsExpanded] = useState(false)
-  const [mcpConfigOpen, setMcpConfigOpen] = useState(false)
-  const [sessionKeyOpen, setSessionKeyOpen] = useState(false)
+function GlobalOverrideForm({
+  availableProviders,
+  tenantOverride,
+  onSaved,
+}: {
+  availableProviders: ProviderConfig[]
+  tenantOverride: TenantOverride | null
+  onSaved: () => void
+}) {
+  const t = useT()
+  const [selectedProviderId, setSelectedProviderId] = React.useState<string>(
+    tenantOverride?.providerId ?? '',
+  )
+  const [selectedModelId, setSelectedModelId] = React.useState<string>(
+    tenantOverride?.modelId ?? '',
+  )
+
+  const selectedProvider = availableProviders.find((p) => p.id === selectedProviderId)
+
+  const { runMutation: runSaveMutation } = useGuardedMutation({ contextId: 'ai-settings-save-override' })
+  const { runMutation: runClearMutation } = useGuardedMutation({ contextId: 'ai-settings-clear-override' })
+  const [isSaving, setIsSaving] = React.useState(false)
+  const [isClearing, setIsClearing] = React.useState(false)
+
+  const handleSave = React.useCallback(async () => {
+    setIsSaving(true)
+    try {
+      await runSaveMutation({
+        operation: async () => {
+          const result = await apiCall('/api/ai_assistant/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              providerId: selectedProviderId || null,
+              modelId: selectedModelId || null,
+            }),
+          })
+          if (!result.ok) {
+            const err = (result.result as { error?: string } | null)?.error
+            throw new Error(err ?? t('ai_assistant.settings.saveError', 'Failed to save override.'))
+          }
+        },
+        context: {},
+      })
+      flash(t('ai_assistant.settings.saveSuccess', 'Default model override saved.'), 'success')
+      onSaved()
+    } finally {
+      setIsSaving(false)
+    }
+  }, [onSaved, runSaveMutation, selectedModelId, selectedProviderId, t])
+
+  const handleClear = React.useCallback(async () => {
+    setIsClearing(true)
+    try {
+      await runClearMutation({
+        operation: async () => {
+          const result = await apiCall('/api/ai_assistant/settings', {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({}),
+          })
+          if (!result.ok) {
+            const err = (result.result as { error?: string } | null)?.error
+            throw new Error(err ?? t('ai_assistant.settings.clearError', 'Failed to clear override.'))
+          }
+        },
+        context: {},
+      })
+      flash(t('ai_assistant.settings.clearSuccess', 'Default model override cleared.'), 'success')
+      setSelectedProviderId('')
+      setSelectedModelId('')
+      onSaved()
+    } finally {
+      setIsClearing(false)
+    }
+  }, [runClearMutation, onSaved, t])
+
+  const isBusy = isSaving || isClearing
+
+  const configuredProviders = availableProviders.filter((p) => p.configured)
+
+  return (
+    <div className="rounded-lg border bg-card p-6" data-ai-settings-override-form="">
+      <h2 className="mb-1 text-sm font-semibold">
+        {t('ai_assistant.settings.defaultOverrideTitle', 'Default model override')}
+      </h2>
+      <p className="mb-4 text-xs text-muted-foreground">
+        {t(
+          'ai_assistant.settings.defaultOverrideDescription',
+          'Set a tenant-wide default provider and model. Agents with a per-agent override or specific defaultModel will take precedence.',
+        )}
+      </p>
+      {tenantOverride && (tenantOverride.providerId || tenantOverride.modelId) ? (
+        <div className="mb-4 flex items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2 text-xs">
+          <span className="text-muted-foreground">
+            {t('ai_assistant.settings.currentOverride', 'Current override:')}
+          </span>
+          <span className="font-medium">
+            {tenantOverride.providerId ?? '—'} / {tenantOverride.modelId ?? '—'}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="ml-auto h-6 gap-1 text-xs"
+            disabled={isBusy}
+            onClick={handleClear}
+            data-ai-settings-clear-override=""
+          >
+            <X className="size-3" aria-hidden />
+            {t('ai_assistant.settings.clearOverride', 'Clear override')}
+          </Button>
+        </div>
+      ) : null}
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('ai_assistant.settings.providerLabel', 'Provider')}
+          </span>
+          <Select
+            value={selectedProviderId}
+            onValueChange={(val) => {
+              setSelectedProviderId(val)
+              setSelectedModelId('')
+            }}
+            disabled={isBusy}
+          >
+            <SelectTrigger
+              className="w-[180px]"
+              data-ai-settings-provider-select=""
+            >
+              <SelectValue placeholder={t('ai_assistant.settings.selectProvider', 'Select provider')} />
+            </SelectTrigger>
+            <SelectContent>
+              {configuredProviders.map((provider) => (
+                <SelectItem key={provider.id} value={provider.id}>
+                  {provider.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('ai_assistant.settings.modelLabel', 'Model')}
+          </span>
+          <Select
+            value={selectedModelId}
+            onValueChange={setSelectedModelId}
+            disabled={isBusy || !selectedProviderId}
+          >
+            <SelectTrigger
+              className="w-[220px]"
+              data-ai-settings-model-select=""
+            >
+              <SelectValue placeholder={t('ai_assistant.settings.selectModel', 'Select model')} />
+            </SelectTrigger>
+            <SelectContent>
+              {(selectedProvider?.defaultModels ?? []).map((model) => (
+                <SelectItem key={model.id} value={model.id}>
+                  {model.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          disabled={isBusy || !selectedProviderId || !selectedModelId}
+          onClick={handleSave}
+          data-ai-settings-save-override=""
+        >
+          {isSaving ? (
+            <Loader2 className="size-3.5 animate-spin" aria-hidden />
+          ) : null}
+          {t('ai_assistant.settings.saveOverride', 'Save override')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function PerAgentOverrideList({
+  agents,
+  onCleared,
+}: {
+  agents: AgentResolution[]
+  onCleared: () => void
+}) {
+  const t = useT()
+  const { runMutation: runClearAgentMutation } = useGuardedMutation({ contextId: 'ai-settings-clear-agent-override' })
+  const [clearingAgentId, setClearingAgentId] = React.useState<string | null>(null)
+
+  const handleClearAgentOverride = React.useCallback(
+    async (agentId: string) => {
+      setClearingAgentId(agentId)
+      try {
+        await runClearAgentMutation({
+          operation: async () => {
+            const result = await apiCall('/api/ai_assistant/settings', {
+              method: 'DELETE',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ agentId }),
+            })
+            if (!result.ok) {
+              const err = (result.result as { error?: string } | null)?.error
+              throw new Error(err ?? t('ai_assistant.settings.clearAgentError', 'Failed to clear agent override.'))
+            }
+          },
+          context: {},
+        })
+        flash(t('ai_assistant.settings.clearAgentSuccess', 'Agent override cleared.'), 'success')
+        onCleared()
+      } finally {
+        setClearingAgentId(null)
+      }
+    },
+    [runClearAgentMutation, onCleared, t],
+  )
+
+  if (agents.length === 0) return null
+
+  const overriddenAgents = agents.filter((agent) => agent.source !== 'env_default' && agent.source !== 'provider_default')
+
+  return (
+    <div className="rounded-lg border bg-card p-6" data-ai-settings-agent-overrides="">
+      <h2 className="mb-1 text-sm font-semibold">
+        {t('ai_assistant.settings.agentOverridesTitle', 'Per-agent model resolution')}
+      </h2>
+      <p className="mb-4 text-xs text-muted-foreground">
+        {t(
+          'ai_assistant.settings.agentOverridesDescription',
+          'Resolved model for each registered agent. Agents with a custom override show a Clear button.',
+        )}
+      </p>
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b border-border text-left text-muted-foreground">
+              <th className="pb-2 pr-4 font-medium">
+                {t('ai_assistant.settings.agentIdColumn', 'Agent')}
+              </th>
+              <th className="pb-2 pr-4 font-medium">
+                {t('ai_assistant.settings.providerColumn', 'Provider')}
+              </th>
+              <th className="pb-2 pr-4 font-medium">
+                {t('ai_assistant.settings.modelColumn', 'Model')}
+              </th>
+              <th className="pb-2 pr-4 font-medium">
+                {t('ai_assistant.settings.sourceColumn', 'Source')}
+              </th>
+              <th className="pb-2 font-medium" />
+            </tr>
+          </thead>
+          <tbody>
+            {agents.map((agent) => {
+              const hasOverride = overriddenAgents.some((a) => a.agentId === agent.agentId)
+              return (
+                <tr
+                  key={agent.agentId}
+                  className="border-b border-border/50 last:border-0"
+                  data-ai-settings-agent-row={agent.agentId}
+                >
+                  <td className="py-2 pr-4 font-mono">{agent.agentId}</td>
+                  <td className="py-2 pr-4">{agent.providerId}</td>
+                  <td className="py-2 pr-4">{agent.modelId}</td>
+                  <td className="py-2 pr-4 text-muted-foreground">{agent.source}</td>
+                  <td className="py-2">
+                    {hasOverride ? (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 gap-1 text-xs"
+                        disabled={clearingAgentId !== null}
+                        onClick={() => void handleClearAgentOverride(agent.agentId)}
+                        data-ai-settings-clear-agent-override={agent.agentId}
+                      >
+                        <X className="size-3" aria-hidden />
+                        {t('ai_assistant.settings.clearOverride', 'Clear override')}
+                      </Button>
+                    ) : null}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function AiAssistantLauncherCard({
+  launchMode,
+  showVisibilityControl,
+}: {
+  launchMode: 'selector' | 'legacy'
+  showVisibilityControl: boolean
+}) {
+  const t = useT()
   const { isEnabled, toggleEnabled, isLoaded } = useAiAssistantVisibility()
 
-  // Open AI Assistant by dispatching global event (triggers main layout's DockableChat)
   const openAiAssistant = () => {
-    window.dispatchEvent(new CustomEvent('om:open-ai-chat'))
+    const eventName = launchMode === 'legacy'
+      ? LEGACY_AI_ASSISTANT_OPEN_EVENT
+      : AI_ASSISTANT_LAUNCHER_OPEN_EVENT
+    window.dispatchEvent(new CustomEvent(eventName))
   }
 
-  // Health query - polls every 10 seconds
+  return (
+    <div className="rounded-lg border bg-card p-6">
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h2 className="flex items-center gap-2 text-lg font-semibold">
+            <Bot className="size-5" />
+            {t('ai_assistant.settings.visibilityTitle', 'AI Assistant')}
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            {showVisibilityControl
+              ? isEnabled
+                ? t('ai_assistant.settings.visibilityEnabled', 'Visible in header with Cmd+J shortcut enabled.')
+                : t('ai_assistant.settings.visibilityDisabled', 'Hidden from header. Enable to show the button and Cmd+J shortcut.')
+              : t('ai_assistant.settings.launchDescription', 'Open the AI assistant from this page.')}
+          </p>
+        </div>
+        <div className="flex items-center gap-4">
+          {showVisibilityControl ? (
+            <div className="flex items-center gap-3 rounded-md border bg-muted/30 px-4 py-2">
+              <span className="text-sm font-medium">
+                {t('ai_assistant.settings.visibilityToggleLabel', 'Visibility')}
+              </span>
+              {isEnabled ? (
+                <Eye className="size-4 text-muted-foreground" />
+              ) : (
+                <EyeOff className="size-4 text-muted-foreground" />
+              )}
+              <Switch
+                checked={isEnabled}
+                onCheckedChange={toggleEnabled}
+                disabled={!isLoaded}
+              />
+            </div>
+          ) : null}
+          <Button type="button" onClick={openAiAssistant} size="default" className="gap-2">
+            <Bot className="size-4" />
+            {launchMode === 'legacy'
+              ? t('ai_assistant.settings.openButton', 'Open AI Assistant')
+              : t('ai_assistant.settings.openSelectorButton', 'Open AI assistants')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AiAssistantSettingsContent({
+  launchMode,
+  showVisibilityControl,
+}: {
+  launchMode: 'selector' | 'legacy'
+  showVisibilityControl: boolean
+}) {
+  const t = useT()
+  const queryClient = useQueryClient()
+  const [toolsExpanded, setToolsExpanded] = React.useState(false)
+  const [mcpConfigOpen, setMcpConfigOpen] = React.useState(false)
+  const [sessionKeyOpen, setSessionKeyOpen] = React.useState(false)
+
   const healthQuery = useQuery({
     queryKey: ['ai-assistant', 'health'],
     queryFn: fetchHealth,
@@ -90,36 +483,37 @@ function AiAssistantSettingsContent() {
     staleTime: 5000,
   })
 
-  // Settings query - no polling needed (static config)
   const settingsQuery = useQuery({
     queryKey: ['ai-assistant', 'settings'],
     queryFn: fetchSettings,
     staleTime: 60000,
   })
 
-  // Tools query - no polling needed
   const toolsQuery = useQuery({
     queryKey: ['ai-assistant', 'tools'],
     queryFn: fetchTools,
     staleTime: 60000,
   })
 
+  const handleOverrideSaved = React.useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: ['ai-assistant', 'settings'] })
+  }, [queryClient])
+
   const isLoading = healthQuery.isLoading || settingsQuery.isLoading || toolsQuery.isLoading
 
   if (isLoading) {
     return (
-      <div className="flex items-center gap-2 text-muted-foreground py-8">
-        <Loader2 className="h-4 w-4 animate-spin" />
-        Loading settings...
+      <div className="flex items-center gap-2 py-8 text-muted-foreground">
+        <Loader2 className="size-4 animate-spin" />
+        {t('ai_assistant.settings.loading', 'Loading settings...')}
       </div>
     )
   }
 
   const health = healthQuery.data
   const settings = settingsQuery.data
-  const tools = toolsQuery.data?.tools || []
+  const tools = toolsQuery.data?.tools ?? []
 
-  // Group tools by module
   const toolsByModule = tools.reduce<Record<string, ToolInfo[]>>((acc, tool) => {
     const module = tool.module || 'other'
     if (!acc[module]) acc[module] = []
@@ -130,264 +524,266 @@ function AiAssistantSettingsContent() {
   const provider = settings?.provider
 
   return (
-    <div className="flex flex-col gap-6">
-      {/* Header */}
+    <div className="flex flex-col gap-6" data-ai-assistant-settings="">
       <div className="space-y-1">
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <Bot className="h-6 w-6" />
-          AI Assistant Settings
+        <h1 className="flex items-center gap-2 text-2xl font-bold">
+          <Bot className="size-6" />
+          {t('ai_assistant.settings.pageTitle', 'AI Assistant Settings')}
         </h1>
         <p className="text-muted-foreground">
-          Configure and monitor the AI assistant
+          {t('ai_assistant.settings.pageDescription', 'Configure and monitor the AI assistant')}
         </p>
       </div>
 
-      {/* AI Assistant Section - Visibility toggle + Test button */}
-      <div className="rounded-lg border bg-card p-6">
-        <div className="flex items-start justify-between">
-          <div className="space-y-1">
-            <h2 className="text-lg font-semibold flex items-center gap-2">
-              <Bot className="h-5 w-5" />
-              AI Assistant
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              {isEnabled
-                ? 'Visible in header with Cmd+J shortcut enabled.'
-                : 'Hidden from header. Enable to show the button and Cmd+J shortcut.'}
-            </p>
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-3 px-4 py-2 rounded-md border bg-muted/30">
-              <span className="text-sm font-medium">Visibility</span>
-              {isEnabled ? <Eye className="h-4 w-4 text-muted-foreground" /> : <EyeOff className="h-4 w-4 text-muted-foreground" />}
-              <Switch
-                checked={isEnabled}
-                onCheckedChange={toggleEnabled}
-                disabled={!isLoaded}
-              />
-            </div>
-            <Button onClick={openAiAssistant} size="default" className="gap-2">
-              <Bot className="h-4 w-4" />
-              Open AI Assistant
-            </Button>
-          </div>
-        </div>
-      </div>
+      <AiAssistantLauncherCard
+        launchMode={launchMode}
+        showVisibilityControl={showVisibilityControl}
+      />
+
+      {settings ? (
+        <GlobalOverrideForm
+          availableProviders={settings.availableProviders}
+          tenantOverride={settings.tenantOverride}
+          onSaved={handleOverrideSaved}
+        />
+      ) : null}
+
+      {settings?.agents && settings.agents.length > 0 ? (
+        <PerAgentOverrideList
+          agents={settings.agents}
+          onCleared={handleOverrideSaved}
+        />
+      ) : null}
 
-      {/* Connections Section */}
       <div className="rounded-lg border bg-card p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Link2 className="h-4 w-4" />
-            Connections
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="flex items-center gap-2 text-sm font-semibold">
+            <Link2 className="size-4" />
+            {t('ai_assistant.settings.connectionsTitle', 'Connections')}
           </h2>
-          {healthQuery.isFetching && !healthQuery.isLoading && (
-            <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-          )}
+          {healthQuery.isFetching && !healthQuery.isLoading ? (
+            <Loader2 className="size-3 animate-spin text-muted-foreground" />
+          ) : null}
         </div>
         <div className="grid gap-4 sm:grid-cols-3">
-          {/* OpenCode Server Status */}
-          <div className={`p-4 rounded-lg border-2 ${
-            health?.status === 'ok' && health.opencode?.healthy
-              ? 'border-status-success-border bg-status-success-bg'
-              : 'border-destructive/50 bg-destructive/5'
-          }`}>
+          <div
+            className={`rounded-lg border-2 p-4 ${
+              health?.status === 'ok' && health.opencode?.healthy
+                ? 'border-status-success-border bg-status-success-bg'
+                : 'border-destructive/50 bg-destructive/5'
+            }`}
+          >
             <div className="flex items-start justify-between">
-              <div className="flex-1 min-w-0">
+              <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <Server className="h-4 w-4 text-muted-foreground shrink-0" />
+                  <Server className="size-4 shrink-0 text-muted-foreground" />
                   <p className="text-sm font-medium">OpenCode</p>
                 </div>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="mt-1 text-xs text-muted-foreground">
                   {health?.status === 'ok' && health.opencode?.healthy ? (
                     <span className="flex items-center gap-1 text-status-success-text">
-                      <CheckCircle2 className="h-3 w-3" />
-                      Connected
+                      <CheckCircle2 className="size-3" />
+                      {t('ai_assistant.settings.connected', 'Connected')}
                     </span>
                   ) : (
                     <span className="flex items-center gap-1 text-destructive">
-                      <XCircle className="h-3 w-3" />
-                      {health?.message || 'Disconnected'}
+                      <XCircle className="size-3" />
+                      {health?.message ?? t('ai_assistant.settings.disconnected', 'Disconnected')}
                     </span>
                   )}
                 </p>
-                {health?.opencode?.version && (
-                  <p className="text-xs text-muted-foreground mt-1">
-                    v{health.opencode.version}
-                  </p>
-                )}
-                <p className="text-xs text-muted-foreground mt-1 truncate">
-                  {health?.url || 'Not configured'}
+                {health?.opencode?.version ? (
+                  <p className="mt-1 text-xs text-muted-foreground">v{health.opencode.version}</p>
+                ) : null}
+                <p className="mt-1 truncate text-xs text-muted-foreground">
+                  {health?.url ?? t('ai_assistant.settings.notConfigured', 'Not configured')}
                 </p>
               </div>
-              {health?.status === 'ok' && health.opencode?.healthy && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
-                  <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+              {health?.status === 'ok' && health.opencode?.healthy ? (
+                <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon">
+                  <svg className="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
 
-          {/* MCP Server Status */}
           {(() => {
-            const mcpConnected = health?.mcp && Object.values(health.mcp).some(s => s.status === 'connected')
-            const mcpConnecting = health?.mcp && Object.values(health.mcp).some(s => s.status === 'connecting')
-            const mcpError = health?.mcp && Object.values(health.mcp).find(s => s.error)?.error
-
+            const mcpConnected =
+              health?.mcp && Object.values(health.mcp).some((s) => s.status === 'connected')
+            const mcpConnecting =
+              health?.mcp && Object.values(health.mcp).some((s) => s.status === 'connecting')
+            const mcpError =
+              health?.mcp && Object.values(health.mcp).find((s) => s.error)?.error
             return (
-              <div className={`p-4 rounded-lg border-2 ${
-                mcpConnected
-                  ? 'border-status-success-border bg-status-success-bg'
-                  : mcpConnecting
-                    ? 'border-status-warning-border bg-status-warning-bg'
-                    : 'border-destructive/50 bg-destructive/5'
-              }`}>
+              <div
+                className={`rounded-lg border-2 p-4 ${
+                  mcpConnected
+                    ? 'border-status-success-border bg-status-success-bg'
+                    : mcpConnecting
+                      ? 'border-status-warning-border bg-status-warning-bg'
+                      : 'border-destructive/50 bg-destructive/5'
+                }`}
+              >
                 <div className="flex items-start justify-between">
-                  <div className="flex-1 min-w-0">
+                  <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <Wrench className="h-4 w-4 text-muted-foreground shrink-0" />
+                      <Wrench className="size-4 shrink-0 text-muted-foreground" />
                       <p className="text-sm font-medium">MCP Server</p>
                     </div>
-                    <p className="text-xs text-muted-foreground mt-1">
+                    <p className="mt-1 text-xs text-muted-foreground">
                       {mcpConnected ? (
                         <span className="flex items-center gap-1 text-status-success-text">
-                          <CheckCircle2 className="h-3 w-3" />
-                          Connected
+                          <CheckCircle2 className="size-3" />
+                          {t('ai_assistant.settings.connected', 'Connected')}
                         </span>
                       ) : mcpConnecting ? (
                         <span className="flex items-center gap-1 text-status-warning-text">
-                          <Loader2 className="h-3 w-3 animate-spin" />
-                          Connecting...
+                          <Loader2 className="size-3 animate-spin" />
+                          {t('ai_assistant.settings.connecting', 'Connecting...')}
                         </span>
                       ) : (
                         <span className="flex items-center gap-1 text-destructive">
-                          <XCircle className="h-3 w-3" />
-                          {mcpError || 'Disconnected'}
+                          <XCircle className="size-3" />
+                          {mcpError ?? t('ai_assistant.settings.disconnected', 'Disconnected')}
                         </span>
                       )}
                     </p>
-                    <p className="text-xs text-muted-foreground mt-1 truncate">
-                      {health?.mcpUrl || 'Not configured'}
+                    <p className="mt-1 truncate text-xs text-muted-foreground">
+                      {health?.mcpUrl ?? t('ai_assistant.settings.notConfigured', 'Not configured')}
                     </p>
                   </div>
-                  {mcpConnected && (
-                    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
-                      <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                  {mcpConnected ? (
+                    <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon">
+                      <svg className="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                       </svg>
                     </div>
-                  )}
+                  ) : null}
                 </div>
               </div>
             )
           })()}
 
-          {/* Meilisearch Status */}
-          <div className={`p-4 rounded-lg border-2 ${
-            health?.search?.available
-              ? 'border-status-success-border bg-status-success-bg'
-              : 'border-destructive/50 bg-destructive/5'
-          }`}>
+          <div
+            className={`rounded-lg border-2 p-4 ${
+              health?.search?.available
+                ? 'border-status-success-border bg-status-success-bg'
+                : 'border-destructive/50 bg-destructive/5'
+            }`}
+          >
             <div className="flex items-start justify-between">
-              <div className="flex-1 min-w-0">
+              <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <Database className="h-4 w-4 text-muted-foreground shrink-0" />
+                  <Database className="size-4 shrink-0 text-muted-foreground" />
                   <p className="text-sm font-medium">Meilisearch</p>
                 </div>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="mt-1 text-xs text-muted-foreground">
                   {health?.search?.available ? (
                     <span className="flex items-center gap-1 text-status-success-text">
-                      <CheckCircle2 className="h-3 w-3" />
-                      Connected
+                      <CheckCircle2 className="size-3" />
+                      {t('ai_assistant.settings.connected', 'Connected')}
                     </span>
                   ) : (
                     <span className="flex items-center gap-1 text-destructive">
-                      <XCircle className="h-3 w-3" />
-                      Not available
+                      <XCircle className="size-3" />
+                      {t('ai_assistant.settings.notAvailable', 'Not available')}
                     </span>
                   )}
                 </p>
-                <p className="text-xs text-muted-foreground mt-1 truncate">
-                  {health?.search?.url || 'Not configured'}
+                <p className="mt-1 truncate text-xs text-muted-foreground">
+                  {health?.search?.url ?? t('ai_assistant.settings.notConfigured', 'Not configured')}
                 </p>
               </div>
-              {health?.search?.available && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
-                  <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+              {health?.search?.available ? (
+                <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon">
+                  <svg className="size-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
         </div>
 
-        {/* MCP Authentication Status */}
-        <div className="mt-4 p-3 rounded-md bg-muted/30 border">
+        <div className="mt-4 rounded-md border bg-muted/30 p-3">
           <div className="flex items-center gap-2 text-sm">
-            <Key className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">MCP Authentication:</span>
+            <Key className="size-4 text-muted-foreground" />
+            <span className="font-medium">
+              {t('ai_assistant.settings.mcpAuthLabel', 'MCP Authentication:')}
+            </span>
             {settings?.mcpKeyConfigured ? (
-              <span className="flex items-center gap-1 text-status-success-text text-xs">
-                <CheckCircle2 className="h-3 w-3" />
-                MCP_SERVER_API_KEY configured
+              <span className="flex items-center gap-1 text-xs text-status-success-text">
+                <CheckCircle2 className="size-3" />
+                {t('ai_assistant.settings.mcpKeyConfigured', 'MCP_SERVER_API_KEY configured')}
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-status-warning-text text-xs">
-                <XCircle className="h-3 w-3" />
-                MCP_SERVER_API_KEY not set
+              <span className="flex items-center gap-1 text-xs text-status-warning-text">
+                <XCircle className="size-3" />
+                {t('ai_assistant.settings.mcpKeyMissing', 'MCP_SERVER_API_KEY not set')}
               </span>
             )}
           </div>
-          <p className="text-xs text-muted-foreground mt-1 ml-6">
-            Required for AI to access platform tools via MCP server.
+          <p className="ml-6 mt-1 text-xs text-muted-foreground">
+            {t(
+              'ai_assistant.settings.mcpAuthNote',
+              'Required for AI to access platform tools via MCP server.',
+            )}
           </p>
         </div>
 
-        {/* LLM Provider Status */}
-        <div className="mt-4 p-3 rounded-md bg-muted/30 border">
+        <div className="mt-4 rounded-md border bg-muted/30 p-3">
           <div className="flex items-center gap-2 text-sm">
-            <Server className="h-4 w-4 text-muted-foreground" />
-            <span className="font-medium">LLM Provider:</span>
-            <span className="font-medium">{provider?.name || 'Anthropic'}</span>
+            <Server className="size-4 text-muted-foreground" />
+            <span className="font-medium">
+              {t('ai_assistant.settings.llmProviderLabel', 'LLM Provider:')}
+            </span>
+            <span className="font-medium">{provider?.name ?? 'Anthropic'}</span>
             {provider?.configured ? (
-              <span className="flex items-center gap-1 text-status-success-text text-xs">
-                <CheckCircle2 className="h-3 w-3" />
-                {provider?.envKey} configured
+              <span className="flex items-center gap-1 text-xs text-status-success-text">
+                <CheckCircle2 className="size-3" />
+                {provider?.envKey
+                  ? t('ai_assistant.settings.envKeyConfigured', '{{key}} configured', { key: provider.envKey })
+                  : t('ai_assistant.settings.configured', 'Configured')}
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-status-warning-text text-xs">
-                <XCircle className="h-3 w-3" />
-                {provider?.envKey || 'ANTHROPIC_API_KEY'} not set
+              <span className="flex items-center gap-1 text-xs text-status-warning-text">
+                <XCircle className="size-3" />
+                {t('ai_assistant.settings.envKeyMissing', '{{key}} not set', { key: provider?.envKey ?? 'ANTHROPIC_API_KEY' })}
               </span>
             )}
           </div>
         </div>
 
-        <p className="text-xs text-muted-foreground mt-4">
-          Meilisearch is required for API endpoint discovery. Endpoints are indexed automatically when the MCP server starts.
+        <p className="mt-4 text-xs text-muted-foreground">
+          {t(
+            'ai_assistant.settings.meilisearchNote',
+            'Meilisearch is required for API endpoint discovery. Endpoints are indexed automatically when the MCP server starts.',
+          )}
         </p>
       </div>
 
-      {/* Developer Tools Section */}
       <div className="rounded-lg border bg-card p-6">
-        <h2 className="text-sm font-semibold mb-4 flex items-center gap-2">
-          <Settings className="h-4 w-4" />
-          Developer Tools
+        <h2 className="mb-4 flex items-center gap-2 text-sm font-semibold">
+          <Settings className="size-4" />
+          {t('ai_assistant.settings.developerToolsTitle', 'Developer Tools')}
         </h2>
         <div className="grid gap-4 sm:grid-cols-2">
-          {/* MCP Config Generator */}
-          <div className="p-4 rounded-lg border bg-muted/30">
+          <div className="rounded-lg border bg-muted/30 p-4">
             <div className="flex items-start gap-3">
-              <div className="p-2 rounded-md bg-primary/10">
-                <Settings className="h-5 w-5 text-primary" />
+              <div className="rounded-md bg-primary/10 p-2">
+                <Settings className="size-5 text-primary" />
               </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="text-sm font-medium">MCP Configuration</h3>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Generate config for Claude Code or other MCP clients.
+              <div className="min-w-0 flex-1">
+                <h3 className="text-sm font-medium">
+                  {t('ai_assistant.settings.mcpConfigTitle', 'MCP Configuration')}
+                </h3>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t(
+                    'ai_assistant.settings.mcpConfigDescription',
+                    'Generate config for Claude Code or other MCP clients.',
+                  )}
                 </p>
                 <Button
                   size="sm"
@@ -395,22 +791,26 @@ function AiAssistantSettingsContent() {
                   className="mt-3"
                   onClick={() => setMcpConfigOpen(true)}
                 >
-                  Generate MCP Config
+                  {t('ai_assistant.settings.generateMcpConfig', 'Generate MCP Config')}
                 </Button>
               </div>
             </div>
           </div>
 
-          {/* Session Key Generator */}
-          <div className="p-4 rounded-lg border bg-muted/30">
+          <div className="rounded-lg border bg-muted/30 p-4">
             <div className="flex items-start gap-3">
-              <div className="p-2 rounded-md bg-primary/10">
-                <Key className="h-5 w-5 text-primary" />
+              <div className="rounded-md bg-primary/10 p-2">
+                <Key className="size-5 text-primary" />
               </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="text-sm font-medium">Session API Key</h3>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Generate a temporary token for programmatic LLM access. Expires after 2 hours.
+              <div className="min-w-0 flex-1">
+                <h3 className="text-sm font-medium">
+                  {t('ai_assistant.settings.sessionKeyTitle', 'Session API Key')}
+                </h3>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t(
+                    'ai_assistant.settings.sessionKeyDescription',
+                    'Generate a temporary token for programmatic LLM access. Expires after 2 hours.',
+                  )}
                 </p>
                 <Button
                   size="sm"
@@ -418,7 +818,7 @@ function AiAssistantSettingsContent() {
                   className="mt-3"
                   onClick={() => setSessionKeyOpen(true)}
                 >
-                  Generate Session Key
+                  {t('ai_assistant.settings.generateSessionKey', 'Generate Session Key')}
                 </Button>
               </div>
             </div>
@@ -426,44 +826,44 @@ function AiAssistantSettingsContent() {
         </div>
       </div>
 
-      {/* Dialogs */}
       <McpConfigDialog
         open={mcpConfigOpen}
         onOpenChange={setMcpConfigOpen}
-        mcpUrl={health?.mcpUrl || 'http://localhost:3001'}
+        mcpUrl={health?.mcpUrl ?? 'http://localhost:3001'}
       />
       <SessionKeyDialog
         open={sessionKeyOpen}
         onOpenChange={setSessionKeyOpen}
       />
 
-      {/* MCP Tools Section */}
       <div className="rounded-lg border bg-card p-6">
         <button
-          onClick={() => setToolsExpanded(!toolsExpanded)}
-          className="w-full flex items-center justify-between text-left"
+          type="button"
+          onClick={() => setToolsExpanded((prev) => !prev)}
+          className="flex w-full items-center justify-between text-left"
         >
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Wrench className="h-4 w-4" />
-            MCP Tools ({tools.length} tools)
+          <h2 className="flex items-center gap-2 text-sm font-semibold">
+            <Wrench className="size-4" />
+            {t('ai_assistant.settings.mcpToolsTitle', 'MCP Tools')} ({tools.length}{' '}
+            {t('ai_assistant.settings.mcpToolsCount', 'tools')})
           </h2>
           {toolsExpanded ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            <ChevronDown className="size-4 text-muted-foreground" />
           ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            <ChevronRight className="size-4 text-muted-foreground" />
           )}
         </button>
 
-        {toolsExpanded && (
+        {toolsExpanded ? (
           <div className="mt-4 space-y-4">
             {Object.entries(toolsByModule).map(([module, moduleTools]) => (
               <div key={module} className="space-y-2">
-                <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                   {module}
                 </h3>
                 <div className="space-y-1">
                   {moduleTools.map((tool) => (
-                    <div key={tool.name} className="pl-2 border-l-2 border-muted py-1">
+                    <div key={tool.name} className="border-l-2 border-muted py-1 pl-2">
                       <p className="text-sm font-medium">{tool.name}</p>
                       <p className="text-xs text-muted-foreground">{tool.description}</p>
                     </div>
@@ -472,14 +872,22 @@ function AiAssistantSettingsContent() {
               </div>
             ))}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   )
 }
 
-export function AiAssistantSettingsPageClient() {
-  return <AiAssistantSettingsContent />
+export function AiAssistantSettingsPageClient({
+  launchMode = 'selector',
+  showVisibilityControl = false,
+}: AiAssistantSettingsPageClientProps) {
+  return (
+    <AiAssistantSettingsContent
+      launchMode={launchMode}
+      showVisibilityControl={showVisibilityControl}
+    />
+  )
 }
 
 export default AiAssistantSettingsPageClient