♻️ refactor(channels): rebuild channel create/edit drawer with modular sections…

♻️ refactor(channels): rebuild channel create/edit drawer with modular sections and improved form UX

Restructure the default-theme channel create/edit experience to align with
classic frontend behavior, modern form UX patterns, and the project's Base UI
design system.

Channel editor architecture:
- Split the monolithic channel mutate drawer into focused section components
  (basic, API access, auth, models, advanced) with shared drawer layout
  primitives
- Extract submission, toast handling, and react-query cache invalidation into
  `useChannelMutateForm`
- Add a dedicated loading skeleton for channel detail fetch during edit mode
- Remove the top-level configuration summary block per UX feedback

Form validation and data handling:
- Strengthen `channel-form` Zod schema with JSON, model mapping, status code
  mapping, Codex credential, and Vertex AI key refinements
- Move type-specific conditional validation into `superRefine`
- Normalize base URL formatting and tighten model mapping value validation

Model mapping editor:
- Add Visual/JSON tabbed editing with inline JSON and duplicate-key feedback
- Improve accessibility for icon-only actions and add model suggestion datalists

MultiSelect component:
- Replace the custom cmdk-based implementation with Base UI Combobox chips
- Align focus, border, ring, disabled, and invalid states with standard Input
  styling via `ComboboxChips`
- Preserve existing API (`options`, `selected`, `onChange`, `allowCreate`,
  `createLabel`) for all current callers
- Support inline custom value creation, comma/newline batch input, searchable
  options, portal-based dropdown positioning, and chip removal

Models & groups UX:
- Integrate manual custom model entry directly into the model MultiSelect
- Remove the separate manual model input/button block
- Keep selected-model count and existing model-mapping guardrail behavior

i18n:
- Add and sync translation keys for new editor sections, validation messages,
  model mapping UI, and MultiSelect empty/create labels across en, zh, fr, ja,
  ru, and vi
- Remove obsolete keys tied to the deprecated summary and manual model entry UI

Affected areas:
- `web/default/src/features/channels/components/drawers/`
- `web/default/src/features/channels/hooks/use-channel-mutate-form.ts`
- `web/default/src/features/channels/lib/channel-form.ts`
- `web/default/src/features/channels/lib/model-mapping-validation.ts`
- `web/default/src/features/channels/components/model-mapping-editor.tsx`
- `web/default/src/components/multi-select.tsx`
- `web/default/src/i18n/locales/*.json`

web/default/src/features/channels/components/drawers/sections/channel-advanced-section.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ReactNode } from 'react'
+import { ChevronDown, Settings } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+
+type ChannelAdvancedSectionProps = {
+  children: ReactNode
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ChannelAdvancedSection(props: ChannelAdvancedSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <Collapsible open={props.open} onOpenChange={props.onOpenChange}>
+      <CollapsibleTrigger
+        render={
+          <button
+            type='button'
+            className='hover:bg-muted/40 border-border/60 flex w-full items-center justify-between rounded-lg border px-3 py-3 text-left transition-colors'
+            aria-expanded={props.open}
+          />
+        }
+      >
+        <div className='flex items-start gap-3'>
+          <span className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md'>
+            <Settings className='h-4 w-4' aria-hidden='true' />
+          </span>
+          <div className='flex flex-col gap-0.5'>
+            <div className='text-[13px] font-semibold'>
+              {t('Advanced Settings')}
+            </div>
+            <div className='text-muted-foreground text-xs'>
+              {t(
+                'Request overrides, routing behavior, and upstream model automation'
+              )}
+            </div>
+          </div>
+        </div>
+        <ChevronDown
+          className={cn(
+            'text-muted-foreground h-4 w-4 shrink-0 transition-transform',
+            props.open && 'rotate-180'
+          )}
+          aria-hidden='true'
+        />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent className='mt-5 flex flex-col gap-5'>
+        {props.children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

web/default/src/features/channels/components/drawers/sections/channel-api-access-section.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ReactNode } from 'react'
+import { Link2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  SideDrawerSection,
+  SideDrawerSectionHeader,
+} from '@/components/drawer-layout'
+
+type ChannelApiAccessSectionProps = {
+  children: ReactNode
+}
+
+export function ChannelApiAccessSection(props: ChannelApiAccessSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <SideDrawerSection>
+      <SideDrawerSectionHeader
+        title={t('API Access')}
+        description={t(
+          'Endpoint, provider-specific settings, and credentials.'
+        )}
+        icon={<Link2 className='h-4 w-4' aria-hidden='true' />}
+      />
+      {props.children}
+    </SideDrawerSection>
+  )
+}

web/default/src/features/channels/components/drawers/sections/channel-auth-section.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ReactNode } from 'react'
+import { KeyRound } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+type ChannelAuthSectionProps = {
+  children: ReactNode
+}
+
+export function ChannelAuthSection(props: ChannelAuthSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className='border-border/60 flex flex-col gap-4 border-t pt-4'>
+      <div className='flex items-center gap-2'>
+        <KeyRound
+          className='text-muted-foreground h-3.5 w-3.5'
+          aria-hidden='true'
+        />
+        <h4 className='text-muted-foreground text-xs font-medium tracking-wide uppercase'>
+          {t('Authentication')}
+        </h4>
+      </div>
+      {props.children}
+    </div>
+  )
+}

web/default/src/features/channels/components/drawers/sections/channel-basic-section.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ReactNode } from 'react'
+import { Server } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  SideDrawerSection,
+  SideDrawerSectionHeader,
+} from '@/components/drawer-layout'
+
+type ChannelBasicSectionProps = {
+  children: ReactNode
+}
+
+export function ChannelBasicSection(props: ChannelBasicSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <SideDrawerSection>
+      <SideDrawerSectionHeader
+        title={t('Basic Information')}
+        description={t('Name, provider type, and availability.')}
+        icon={<Server className='h-4 w-4' aria-hidden='true' />}
+      />
+      {props.children}
+    </SideDrawerSection>
+  )
+}

web/default/src/features/channels/components/drawers/sections/channel-editor-loading-state.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { useTranslation } from 'react-i18next'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export function ChannelEditorLoadingState() {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className='border-border/60 flex flex-col gap-4 rounded-lg border p-4'
+      aria-live='polite'
+    >
+      <div>
+        <p className='text-sm font-medium'>{t('Loading channel details')}</p>
+        <p className='text-muted-foreground mt-1 text-xs'>
+          {t('Please wait before editing to avoid overwriting saved values.')}
+        </p>
+      </div>
+      <div className='grid gap-4 sm:grid-cols-2'>
+        <Skeleton className='h-10 w-full' />
+        <Skeleton className='h-10 w-full' />
+      </div>
+      <Skeleton className='h-24 w-full' />
+      <Skeleton className='h-32 w-full' />
+    </div>
+  )
+}

web/default/src/features/channels/components/drawers/sections/channel-models-section.tsx

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ReactNode } from 'react'
+import { Boxes } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  SideDrawerSection,
+  SideDrawerSectionHeader,
+} from '@/components/drawer-layout'
+
+type ChannelModelsSectionProps = {
+  children: ReactNode
+}
+
+export function ChannelModelsSection(props: ChannelModelsSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <SideDrawerSection>
+      <SideDrawerSectionHeader
+        title={t('Models & Groups')}
+        description={t('Published models, groups, and model remapping rules.')}
+        icon={<Boxes className='h-4 w-4' aria-hidden='true' />}
+      />
+      {props.children}
+    </SideDrawerSection>
+  )
+}

web/default/src/features/channels/components/drawers/sections/index.ts

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+export * from './channel-advanced-section'
+export * from './channel-api-access-section'
+export * from './channel-auth-section'
+export * from './channel-basic-section'
+export * from './channel-editor-loading-state'
+export * from './channel-models-section'

web/default/src/features/channels/hooks/use-channel-mutate-form.ts

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { createChannel, updateChannel } from '../api'
+import { ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
+import {
+  transformFormDataToCreatePayload,
+  transformFormDataToUpdatePayload,
+  type ChannelFormValues,
+} from '../lib'
+import type { Channel } from '../types'
+
+type UseChannelMutateFormParams = {
+  currentRow?: Channel | null
+  isEditing: boolean
+  isMultiKeyChannel: boolean
+  onSuccess: () => void
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function getErrorMessage(error: unknown): string | undefined {
+  if (error instanceof Error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  if (!isRecord(error)) return undefined
+
+  const response = error.response
+  if (isRecord(response)) {
+    const data = response.data
+    if (isRecord(data)) {
+      const message = data.message
+      if (typeof message === 'string') return message
+    }
+  }
+
+  const message = error.message
+  if (typeof message === 'string') return message
+  return undefined
+}
+
+export function useChannelMutateForm(props: UseChannelMutateFormParams) {
+  const { t } = useTranslation()
+
+  return useMutation({
+    mutationFn: async (data: ChannelFormValues): Promise<string> => {
+      if (props.isEditing && props.currentRow) {
+        const payload = transformFormDataToUpdatePayload(
+          data,
+          props.currentRow.id
+        )
+        const payloadWithKeyMode =
+          props.isMultiKeyChannel && data.key_mode
+            ? {
+                ...payload,
+                key_mode: data.key_mode,
+              }
+            : payload
+
+        const response = await updateChannel(
+          props.currentRow.id,
+          payloadWithKeyMode
+        )
+        if (!response.success) {
+          throw new Error(response.message || t(ERROR_MESSAGES.UPDATE_FAILED))
+        }
+        return SUCCESS_MESSAGES.UPDATED
+      }
+
+      const payload = transformFormDataToCreatePayload(data)
+      const response = await createChannel(payload)
+      if (!response.success) {
+        throw new Error(response.message || t(ERROR_MESSAGES.CREATE_FAILED))
+      }
+      return SUCCESS_MESSAGES.CREATED
+    },
+    onSuccess: (messageKey) => {
+      toast.success(t(messageKey))
+      props.onSuccess()
+    },
+    onError: (error: unknown) => {
+      toast.error(getErrorMessage(error) || t(ERROR_MESSAGES.CREATE_FAILED))
+    },
+  })
+}

web/default/src/features/channels/lib/model-mapping-validation.ts

@@ -179,6 +179,12 @@ export function validateModelMappingJson(modelMapping: string): {
         error: 'Model mapping must be a valid JSON object',
       }
     }
+    if (Object.values(parsed).some((value) => typeof value !== 'string')) {
+      return {
+        valid: false,
+        error: 'Model mapping values must be strings',
+      }
+    }
     return { valid: true }
   } catch {
     return {