fix: update section titles and improve layout in channel components

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

+import { ChevronDown, Settings } from 'lucide-react'
 /*
 /*
 Copyright (C) 2023-2026 QuantumNous
 Copyright (C) 2023-2026 QuantumNous
 
 
@@ -17,19 +18,20 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import type { ReactNode } from 'react'
 import type { ReactNode } from 'react'
-import { ChevronDown, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
+
 import {
 import {
   Collapsible,
   Collapsible,
   CollapsibleContent,
   CollapsibleContent,
   CollapsibleTrigger,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
 } from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
 
 
 type ChannelAdvancedSectionProps = {
 type ChannelAdvancedSectionProps = {
   children: ReactNode
   children: ReactNode
   open: boolean
   open: boolean
   onOpenChange: (open: boolean) => void
   onOpenChange: (open: boolean) => void
+  summary?: ReactNode
 }
 }
 
 
 export function ChannelAdvancedSection(props: ChannelAdvancedSectionProps) {
 export function ChannelAdvancedSection(props: ChannelAdvancedSectionProps) {
@@ -55,9 +57,10 @@ export function ChannelAdvancedSection(props: ChannelAdvancedSectionProps) {
               {t('Advanced Settings')}
               {t('Advanced Settings')}
             </div>
             </div>
             <div className='text-muted-foreground text-xs'>
             <div className='text-muted-foreground text-xs'>
-              {t(
-                'Request overrides, routing behavior, and upstream model automation'
-              )}
+              {props.summary ??
+                t(
+                  'Request overrides, routing behavior, and upstream model automation'
+                )}
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>

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

@@ -17,8 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import type { ReactNode } from 'react'
 import type { ReactNode } from 'react'
-import { Link2 } from 'lucide-react'
+import { KeyRound } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
+
 import {
 import {
   SideDrawerSection,
   SideDrawerSection,
   SideDrawerSectionHeader,
   SideDrawerSectionHeader,
@@ -34,11 +35,9 @@ export function ChannelApiAccessSection(props: ChannelApiAccessSectionProps) {
   return (
   return (
     <SideDrawerSection>
     <SideDrawerSection>
       <SideDrawerSectionHeader
       <SideDrawerSectionHeader
-        title={t('API Access')}
-        description={t(
-          'Endpoint, provider-specific settings, and credentials.'
-        )}
-        icon={<Link2 className='h-4 w-4' aria-hidden='true' />}
+        title={t('Credentials')}
+        description={t('Authentication')}
+        icon={<KeyRound className='h-4 w-4' aria-hidden='true' />}
       />
       />
       {props.children}
       {props.children}
     </SideDrawerSection>
     </SideDrawerSection>

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

@@ -28,7 +28,7 @@ export function ChannelAuthSection(props: ChannelAuthSectionProps) {
   const { t } = useTranslation()
   const { t } = useTranslation()
 
 
   return (
   return (
-    <div className='border-border/60 flex flex-col gap-4 border-t pt-4'>
+    <div className='border-border/60 flex flex-col gap-3 border-t pt-4'>
       <div className='flex items-center gap-2'>
       <div className='flex items-center gap-2'>
         <KeyRound
         <KeyRound
           className='text-muted-foreground h-3.5 w-3.5'
           className='text-muted-foreground h-3.5 w-3.5'