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

package/src/modules/ai_assistant/backend/config/ai-assistant/allowlist/AiTenantAllowlistPageClient.tsx

@@ -0,0 +1,458 @@
+'use client'
+
+import * as React from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Loader2, Save, Shield, Trash2, Info, AlertCircle, ShieldCheck } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { apiCall, apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+
+type EnvAllowlistConfig = {
+  providers: string[] | null
+  modelsByProvider: Record<string, string[]>
+  hasRestrictions: boolean
+}
+
+type TenantAllowlist = {
+  allowedProviders: string[] | null
+  allowedModelsByProvider: Record<string, string[]>
+}
+
+type EffectiveAllowlist = {
+  providers: string[] | null
+  modelsByProvider: Record<string, string[]>
+  hasRestrictions: boolean
+  tenantOverridesActive: boolean
+}
+
+type ProviderEntry = {
+  id: string
+  name: string
+  defaultModel: string
+  envKey: string | null
+  configured: boolean
+  defaultModels: Array<{ id: string; name: string; contextWindow?: number; tags?: string[] }>
+}
+
+type SettingsResponse = {
+  availableProviders: ProviderEntry[]
+  allowlistProviders?: ProviderEntry[]
+  allowlist: EnvAllowlistConfig
+  tenantAllowlist: TenantAllowlist | null
+  effectiveAllowlist: EffectiveAllowlist
+}
+
+async function fetchSettings(): Promise<SettingsResponse> {
+  const { result, status } = await apiCallOrThrow<SettingsResponse>(
+    '/api/ai_assistant/settings',
+    { method: 'GET', credentials: 'include' },
+    { errorMessage: 'Failed to load AI settings' },
+  )
+  if (!result) throw new Error(`Failed to load settings (${status})`)
+  return result
+}
+
+type EditState = {
+  /** null = "no tenant restriction (inherit env)"; array = explicit tenant pick */
+  allowedProviders: string[] | null
+  allowedModelsByProvider: Record<string, string[]>
+}
+
+function snapshotToEditState(snapshot: TenantAllowlist | null): EditState {
+  return {
+    allowedProviders: snapshot?.allowedProviders ?? null,
+    allowedModelsByProvider: { ...(snapshot?.allowedModelsByProvider ?? {}) },
+  }
+}
+
+export function AiTenantAllowlistPageClient(): React.JSX.Element {
+  const t = useT()
+  const queryClient = useQueryClient()
+  const settingsQuery = useQuery({ queryKey: ['ai_assistant', 'settings'], queryFn: fetchSettings, staleTime: 0 })
+
+  const [editState, setEditState] = React.useState<EditState>({
+    allowedProviders: null,
+    allowedModelsByProvider: {},
+  })
+  const [dirty, setDirty] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+  const [clearing, setClearing] = React.useState(false)
+  const [feedback, setFeedback] = React.useState<{ kind: 'ok' | 'error'; text: string } | null>(null)
+  const { runMutation: runSaveAllowlistMutation } = useGuardedMutation({
+    contextId: 'ai-tenant-allowlist-save',
+  })
+  const { runMutation: runClearAllowlistMutation } = useGuardedMutation({
+    contextId: 'ai-tenant-allowlist-clear',
+  })
+
+  React.useEffect(() => {
+    if (settingsQuery.data) {
+      setEditState(snapshotToEditState(settingsQuery.data.tenantAllowlist))
+      setDirty(false)
+    }
+  }, [settingsQuery.data])
+
+  const pageHeader = (
+    <div className="space-y-1">
+      <h1 className="flex items-center gap-2 text-2xl font-bold">
+        <Shield className="size-6" />
+        {t('ai_assistant.allowlist.title', 'AI provider & model allowlist')}
+      </h1>
+      <p className="text-muted-foreground">
+        {t(
+          'ai_assistant.allowlist.subtitle',
+          'Limit which providers and models the runtime, settings, and chat picker may use for this tenant. The env allowlist is the outer constraint — tenant picks narrow it further.',
+        )}
+      </p>
+    </div>
+  )
+
+  if (settingsQuery.isLoading) {
+    return (
+      <div className="flex max-w-3xl flex-col gap-4">
+        {pageHeader}
+        <div className="flex w-fit items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm text-muted-foreground" role="status">
+          <Loader2 className="size-4 animate-spin" />
+          {t('ai_assistant.allowlist.loading', 'Loading allowlist…')}
+        </div>
+      </div>
+    )
+  }
+
+  if (settingsQuery.isError || !settingsQuery.data) {
+    return (
+      <div className="flex max-w-3xl flex-col gap-4">
+        {pageHeader}
+        <Alert variant="destructive">
+          <AlertCircle className="size-4" />
+          <AlertTitle>{t('ai_assistant.allowlist.loadError.title', 'Failed to load allowlist')}</AlertTitle>
+          <AlertDescription>
+            {settingsQuery.error instanceof Error
+              ? settingsQuery.error.message
+              : t('ai_assistant.allowlist.loadError.body', 'Try refreshing the page.')}
+          </AlertDescription>
+        </Alert>
+      </div>
+    )
+  }
+
+  const settings = settingsQuery.data
+  const envAllowedProviders = settings.allowlist.providers
+  const envModelsByProvider = settings.allowlist.modelsByProvider
+
+  // Provider universe to render: env-allowed providers (or all configured if env unset).
+  const editableProviders = settings.allowlistProviders ?? settings.availableProviders
+  const candidateProviders = editableProviders.filter((p) => {
+    if (envAllowedProviders === null) return true
+    return envAllowedProviders.some((id) => id.toLowerCase() === p.id.toLowerCase())
+  })
+
+  const tenantPickedProviders = editState.allowedProviders
+  const isProviderEnabled = (id: string): boolean => {
+    if (tenantPickedProviders === null) return true
+    return tenantPickedProviders.includes(id)
+  }
+
+  const toggleProvider = (id: string, next: boolean): void => {
+    setDirty(true)
+    setFeedback(null)
+    setEditState((prev) => {
+      const current = prev.allowedProviders
+      if (next) {
+        const list = current === null ? [id] : Array.from(new Set([...current, id]))
+        return { ...prev, allowedProviders: list }
+      }
+      const list = current === null
+        ? candidateProviders.map((p) => p.id).filter((pid) => pid !== id)
+        : current.filter((pid) => pid !== id)
+      return { ...prev, allowedProviders: list }
+    })
+  }
+
+  const isModelEnabled = (providerId: string, modelId: string): boolean => {
+    const list = editState.allowedModelsByProvider[providerId]
+    if (list === undefined) return true
+    return list.includes(modelId)
+  }
+
+  const toggleModel = (providerId: string, modelId: string, next: boolean): void => {
+    setDirty(true)
+    setFeedback(null)
+    const provider = candidateProviders.find((p) => p.id === providerId)
+    const allModelIds = provider?.defaultModels.map((m) => m.id) ?? []
+    setEditState((prev) => {
+      const current = prev.allowedModelsByProvider[providerId]
+      const allowedModelsByProvider = { ...prev.allowedModelsByProvider }
+      if (next) {
+        const list = current === undefined ? [modelId] : Array.from(new Set([...current, modelId]))
+        allowedModelsByProvider[providerId] = list
+      } else {
+        const baseline = current === undefined ? allModelIds : current
+        const list = baseline.filter((id) => id !== modelId)
+        allowedModelsByProvider[providerId] = list
+      }
+      return { ...prev, allowedModelsByProvider }
+    })
+  }
+
+  const resetTenantPicks = (): void => {
+    setDirty(true)
+    setFeedback(null)
+    setEditState({ allowedProviders: null, allowedModelsByProvider: {} })
+  }
+
+  const handleSave = async (): Promise<void> => {
+    setSaving(true)
+    setFeedback(null)
+    try {
+      await runSaveAllowlistMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall<{ error?: string; code?: string }>(
+            '/api/ai_assistant/settings/allowlist',
+            {
+              method: 'PUT',
+              credentials: 'include',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                allowedProviders: editState.allowedProviders,
+                allowedModelsByProvider: editState.allowedModelsByProvider,
+              }),
+            },
+          )
+          if (!ok) {
+            throw new Error(
+              result?.error ?? t('ai_assistant.allowlist.save.error', `Save failed (${status})`),
+            )
+          }
+        },
+        context: {},
+      })
+      const successText = t('ai_assistant.allowlist.save.success', 'Allowlist saved.')
+      setFeedback({ kind: 'ok', text: successText })
+      flash(successText, 'success')
+      setDirty(false)
+      await queryClient.invalidateQueries({ queryKey: ['ai_assistant', 'settings'] })
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setFeedback({ kind: 'error', text: message })
+      flash(message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleClear = async (): Promise<void> => {
+    setClearing(true)
+    setFeedback(null)
+    try {
+      await runClearAllowlistMutation({
+        operation: async () => {
+          const { ok, status, result } = await apiCall<{ error?: string; cleared?: boolean }>(
+            '/api/ai_assistant/settings/allowlist',
+            { method: 'DELETE', credentials: 'include' },
+          )
+          if (!ok) {
+            throw new Error(
+              result?.error ?? t('ai_assistant.allowlist.clear.error', `Clear failed (${status})`),
+            )
+          }
+        },
+        context: {},
+      })
+      const successText = t(
+        'ai_assistant.allowlist.clear.success',
+        'Tenant allowlist cleared. Env-only enforcement applies.',
+      )
+      setFeedback({ kind: 'ok', text: successText })
+      flash(successText, 'success')
+      setDirty(false)
+      await queryClient.invalidateQueries({ queryKey: ['ai_assistant', 'settings'] })
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setFeedback({ kind: 'error', text: message })
+      flash(message, 'error')
+    } finally {
+      setClearing(false)
+    }
+  }
+
+  const envBanner = envAllowedProviders === null && Object.keys(envModelsByProvider).length === 0
+    ? null
+    : (
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>{t('ai_assistant.allowlist.envBanner.title', 'Env allowlist is in effect')}</AlertTitle>
+        <AlertDescription className="space-y-1">
+          {envAllowedProviders ? (
+            <div>
+              {t('ai_assistant.allowlist.envBanner.providers', 'OM_AI_AVAILABLE_PROVIDERS')}: <code className="font-mono text-xs">{envAllowedProviders.join(', ')}</code>
+            </div>
+          ) : null}
+          {Object.keys(envModelsByProvider).map((pid) => (
+            <div key={pid}>
+              <code className="font-mono text-xs">OM_AI_AVAILABLE_MODELS_{pid.toUpperCase()}</code>: {envModelsByProvider[pid].join(', ')}
+            </div>
+          ))}
+          <p className="text-xs text-muted-foreground mt-1">
+            {t('ai_assistant.allowlist.envBanner.note', 'Tenant picks may not widen the env list — values outside it are hidden.')}
+          </p>
+        </AlertDescription>
+      </Alert>
+    )
+
+  return (
+    <div className="flex flex-col gap-6 max-w-3xl">
+      {pageHeader}
+
+      {envBanner}
+
+      {feedback ? (
+        <Alert variant={feedback.kind === 'error' ? 'destructive' : undefined}>
+          {feedback.kind === 'error' ? <AlertCircle className="h-4 w-4" /> : <Info className="h-4 w-4" />}
+          <AlertDescription>{feedback.text}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      <div className="rounded-lg border bg-card p-6 space-y-6">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <h2 className="text-lg font-semibold">{t('ai_assistant.allowlist.providers.title', 'Providers')}</h2>
+            <p className="text-sm text-muted-foreground">
+              {t(
+                'ai_assistant.allowlist.providers.help',
+                'Untick to forbid the runtime from using a provider for this tenant. Tick all to inherit the env allowlist.',
+              )}
+            </p>
+          </div>
+          <span
+            className={
+              settings.effectiveAllowlist.tenantOverridesActive
+                ? 'inline-flex size-8 items-center justify-center rounded-md text-status-success-icon'
+                : 'inline-flex size-8 items-center justify-center rounded-md text-status-warning-icon'
+            }
+            role="img"
+            aria-label={
+              settings.effectiveAllowlist.tenantOverridesActive
+                ? t('ai_assistant.allowlist.badge.active', 'Tenant rules active')
+                : t('ai_assistant.allowlist.badge.envOnly', 'Env-only')
+            }
+            title={
+              settings.effectiveAllowlist.tenantOverridesActive
+                ? t('ai_assistant.allowlist.badge.active', 'Tenant rules active')
+                : t('ai_assistant.allowlist.badge.envOnly', 'Env-only')
+            }
+          >
+            {settings.effectiveAllowlist.tenantOverridesActive ? (
+              <ShieldCheck className="size-5" aria-hidden />
+            ) : (
+              <Shield className="size-5" aria-hidden />
+            )}
+          </span>
+        </div>
+
+        {candidateProviders.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {t('ai_assistant.allowlist.providers.empty', 'No configured providers within the env allowlist.')}
+          </p>
+        ) : (
+          <div className="space-y-4">
+            {candidateProviders.map((provider) => {
+              const enabled = isProviderEnabled(provider.id)
+              const envModels = envModelsByProvider[provider.id]
+              const candidateModels = envModels
+                ? provider.defaultModels.filter((m) => envModels.includes(m.id))
+                : provider.defaultModels
+              return (
+                <div key={provider.id} className="rounded-md border p-4 space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        id={`provider-${provider.id}`}
+                        checked={enabled}
+                        onCheckedChange={(value) => toggleProvider(provider.id, value === true)}
+                      />
+                      <Label htmlFor={`provider-${provider.id}`} className="font-medium">
+                        {provider.name}
+                      </Label>
+                      {provider.configured ? (
+                        <Badge variant="outline" className="text-xs">
+                          {t('ai_assistant.allowlist.providers.configured', 'configured')}
+                        </Badge>
+                      ) : (
+                        <Badge variant="outline" className="text-xs text-muted-foreground">
+                          {t('ai_assistant.allowlist.providers.notConfigured', 'not configured')}
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+
+                  {enabled && candidateModels.length > 0 ? (
+                    <div className="ml-7 space-y-2">
+                      <div className="text-xs text-muted-foreground">
+                        {t('ai_assistant.allowlist.models.help', 'Tick the models tenants may pick. Empty = no model restriction (inherit env).')}
+                      </div>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                        {candidateModels.map((model) => {
+                          const checked = isModelEnabled(provider.id, model.id)
+                          return (
+                            <label
+                              key={`${provider.id}-${model.id}`}
+                              className="flex items-center gap-2 text-sm"
+                            >
+                              <Checkbox
+                                checked={checked}
+                                onCheckedChange={(value) => toggleModel(provider.id, model.id, value === true)}
+                              />
+                              <span className="font-mono text-xs">{model.id}</span>
+                              {model.id === provider.defaultModel ? (
+                                <Badge variant="outline" className="text-xs">
+                                  {t('ai_assistant.allowlist.models.default', 'default')}
+                                </Badge>
+                              ) : null}
+                            </label>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Button onClick={() => void handleSave()} disabled={!dirty || saving} className="gap-2">
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+          {t('ai_assistant.allowlist.actions.save', 'Save allowlist')}
+        </Button>
+        <Button
+          variant="outline"
+          onClick={resetTenantPicks}
+          disabled={saving || clearing}
+          className="gap-2"
+        >
+          {t('ai_assistant.allowlist.actions.reset', 'Reset to env defaults')}
+        </Button>
+        <Button
+          variant="ghost"
+          onClick={() => void handleClear()}
+          disabled={clearing || saving || !settings.tenantAllowlist}
+          className="gap-2"
+        >
+          {clearing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+          {t('ai_assistant.allowlist.actions.clearStored', 'Clear stored allowlist')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default AiTenantAllowlistPageClient

package/src/modules/ai_assistant/backend/config/ai-assistant/allowlist/page.meta.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const allowlistIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
+  React.createElement('path', { d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' }),
+  React.createElement('path', { d: 'm9 12 2 2 4-4' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['ai_assistant.settings.manage'],
+  pageTitle: 'AI Allowlist',
+  pageTitleKey: 'ai_assistant.allowlist.navTitle',
+  pageGroup: 'Module Configs',
+  pageGroupKey: 'settings.sections.moduleConfigs',
+  pageOrder: 432,
+  icon: allowlistIcon,
+  pageContext: 'settings' as const,
+  breadcrumb: [
+    { label: 'AI Allowlist', labelKey: 'ai_assistant.allowlist.navTitle' },
+  ],
+} as const

package/src/modules/ai_assistant/backend/config/ai-assistant/allowlist/page.tsx

@@ -0,0 +1,12 @@
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { AiTenantAllowlistPageClient } from './AiTenantAllowlistPageClient'
+
+export default async function AiAssistantAllowlistPage() {
+  return (
+    <Page>
+      <PageBody>
+        <AiTenantAllowlistPageClient />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/ai_assistant/backend/config/ai-assistant/legacy/page.tsx

@@ -5,7 +5,7 @@ export default async function AiAssistantLegacySettingsPage() {
   return (
     <Page>
       <PageBody>
-        <AiAssistantSettingsPageClient />
+        <AiAssistantSettingsPageClient launchMode="legacy" showVisibilityControl />
       </PageBody>
     </Page>
   )

package/src/modules/ai_assistant/backend/config/ai-assistant/playground/AiPlaygroundPageClient.tsx

@@ -110,7 +110,10 @@ function PlaygroundNoAgents() {
 function AgentDetails({ agent }: { agent: PlaygroundAgent }) {
   const t = useT()
   return (
-    <div className="rounded-md border border-border bg-muted/30 p-3 text-sm">
+    <div
+      className="rounded-md border border-border bg-muted/30 p-3 text-sm"
+      data-ai-playground-agent={agent.id}
+    >
       <div className="font-semibold">{agent.label}</div>
       <p className="mt-1 text-xs text-muted-foreground">{agent.description}</p>
       <dl className="mt-3 grid grid-cols-2 gap-2 text-xs">
@@ -175,6 +178,77 @@ function buildDebugPromptSections(agent: PlaygroundAgent): AiChatDebugPromptSect
   return sections
 }
 
+type AgentModelResolution = {
+  agentId: string
+  providerId: string
+  modelId: string
+  baseURL: string | null
+  source: string
+}
+
+type SettingsAgentResolutionResponse = {
+  agents: AgentModelResolution[]
+}
+
+async function fetchAgentResolutions(): Promise<SettingsAgentResolutionResponse> {
+  const result = await apiCall<SettingsAgentResolutionResponse>('/api/ai_assistant/settings')
+  if (!result.ok || !result.result) return { agents: [] }
+  return { agents: result.result.agents ?? [] }
+}
+
+function ModelResolutionPanel({ agentId }: { agentId: string }) {
+  const t = useT()
+  const { data } = useQuery({
+    queryKey: ['ai_assistant', 'settings', 'agents'],
+    queryFn: fetchAgentResolutions,
+    staleTime: 30000,
+  })
+
+  const resolution = data?.agents.find((agent) => agent.agentId === agentId)
+  if (!resolution) return null
+
+  return (
+    <dl
+      className="grid grid-cols-2 gap-x-4 gap-y-1 rounded-md border border-border bg-muted/30 p-3 text-xs sm:grid-cols-4"
+      data-ai-playground-model-resolution={agentId}
+      data-ai-playground-resolution-panel={agentId}
+    >
+      <div>
+        <dt className="font-medium text-muted-foreground">
+          {t('ai_assistant.playground.resolution.provider', 'Provider')}
+        </dt>
+        <dd className="font-mono" data-ai-playground-resolution-provider>
+          {resolution.providerId}
+        </dd>
+      </div>
+      <div>
+        <dt className="font-medium text-muted-foreground">
+          {t('ai_assistant.playground.resolution.model', 'Model')}
+        </dt>
+        <dd className="font-mono" data-ai-playground-resolution-model>
+          {resolution.modelId}
+        </dd>
+      </div>
+      <div>
+        <dt className="font-medium text-muted-foreground">
+          {t('ai_assistant.playground.resolution.baseUrl', 'Base URL')}
+        </dt>
+        <dd className="font-mono" data-ai-playground-resolution-base-url>
+          {resolution.baseURL ?? t('ai_assistant.playground.resolution.none', '—')}
+        </dd>
+      </div>
+      <div>
+        <dt className="font-medium text-muted-foreground">
+          {t('ai_assistant.playground.resolution.source', 'Source')}
+        </dt>
+        <dd className="font-mono" data-ai-playground-resolution-source>
+          {resolution.source}
+        </dd>
+      </div>
+    </dl>
+  )
+}
+
 type PlaygroundUiPartSeed = {
   componentId: string
   pendingActionId?: string
@@ -243,17 +317,19 @@ function ChatLane({ agent, debug }: { agent: PlaygroundAgent; debug: boolean })
   }
 
   return (
-    <AiChat
-      key={agent.id}
-      agent={agent.id}
-      pageContext={{ source: 'playground', pageId: 'ai_assistant.playground' }}
-      debug={debug}
-      registry={registry}
-      className="min-h-[360px]"
-      debugTools={debugTools}
-      debugPromptSections={debugPromptSections}
-      uiParts={uiParts}
-    />
+    <div data-ai-playground-chat={agent.id}>
+      <AiChat
+        key={agent.id}
+        agent={agent.id}
+        pageContext={{ source: 'playground', pageId: 'ai_assistant.playground' }}
+        debug={debug}
+        registry={registry}
+        className="min-h-96"
+        debugTools={debugTools}
+        debugPromptSections={debugPromptSections}
+        uiParts={uiParts}
+      />
+    </div>
   )
 }
 
@@ -574,6 +650,7 @@ export function AiPlaygroundPageClient() {
           </div>
         </div>
         {selectedAgent ? <AgentDetails agent={selectedAgent} /> : null}
+        {selectedAgent ? <ModelResolutionPanel agentId={selectedAgent.id} /> : null}
       </section>
 
       {selectedAgent ? (

package/src/modules/ai_assistant/backend/config/ai-assistant/settings/page.meta.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const settingsIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
+  React.createElement('circle', { cx: 12, cy: 12, r: 3 }),
+  React.createElement('path', { d: 'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['ai_assistant.settings.manage'],
+  pageTitle: 'AI Settings',
+  pageTitleKey: 'ai_assistant.config.nav.settings',
+  pageGroup: 'Module Configs',
+  pageGroupKey: 'settings.sections.moduleConfigs',
+  pageOrder: 430,
+  icon: settingsIcon,
+  pageContext: 'settings' as const,
+  breadcrumb: [
+    { label: 'AI Settings', labelKey: 'ai_assistant.config.nav.settings' },
+  ],
+} as const

package/src/modules/ai_assistant/backend/config/ai-assistant/settings/page.tsx

@@ -0,0 +1,18 @@
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { AiAssistantSettingsPageClient } from '../../../../components/AiAssistantSettingsPageClient'
+
+/**
+ * Canonical AI assistant settings route. Renders the Phase 4b override
+ * form + per-agent resolution table. Phase 1780-6 introduced the dedicated
+ * `/allowlist` page on top of this one; both routes share the same
+ * `ai_assistant.settings.manage` feature gate.
+ */
+export default async function AiAssistantSettingsPage() {
+  return (
+    <Page>
+      <PageBody>
+        <AiAssistantSettingsPageClient />
+      </PageBody>
+    </Page>
+  )
+}