fix: open agent model picker above chat attachment controls

scripts/test-agent-model-selection.cjs

@@ -9,7 +9,7 @@ function compile(path, overrides = {}) {
   const exports = {}
   const source = fs.readFileSync(require.resolve(path), 'utf8')
   vm.runInNewContext(ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, jsx: ts.JsxEmit.ReactJSX } }).outputText,
-    { exports, require: name => overrides[name] ?? require(name) })
+    { exports, document: { body: {} }, require: name => overrides[name] ?? require(name) })
   return exports
 }
 const models = compile('../src/renderer/src/features/workspace/agentModels.ts')
@@ -37,24 +37,60 @@ function elements(root, predicate) {
   if (!React.isValidElement(root)) return []
   return [...(predicate(root) ? [root] : []), ...React.Children.toArray(root.props.children).flatMap(child => elements(child, predicate))]
 }
-const { AgentModelSelector } = compile('../src/renderer/src/components/AgentModelSelector.tsx', {
+function selectorHarness(props) {
-  '../i18n': { t: value => value }, '../features/workspace/agentModels': models,
+  const state = [], refs = []
-})
+  let stateIndex = 0, refIndex = 0
+  const { AgentModelSelector } = compile('../src/renderer/src/components/AgentModelSelector.tsx', {
+    '../i18n': { t: value => value }, '../features/workspace/agentModels': models,
+    'react-dom': { createPortal: child => child },
+    react: { ...React, useId: () => 'model-menu', useEffect() {}, useLayoutEffect() {},
+      useState(initial) { const index = stateIndex++; if (!(index in state)) state[index] = initial; return [state[index], value => { state[index] = typeof value === 'function' ? value(state[index]) : value }] },
+      useRef(initial) { return refs[refIndex++] ?? (refs[refIndex - 1] = { current: initial }) }
+    }
+  })
+  return { render(patch = {}) { stateIndex = 0; refIndex = 0; return AgentModelSelector({ ...props, ...patch }) } }
+}
 
 for (const dark of [true, false]) test(`model control lists only allowed providers and follows the theme (${dark})`, () => {
   let selected
-  const tree = AgentModelSelector({ models: options, provider: 'QWEN', dark, disabled: false, onChange: value => { selected = value } })
+  const h = selectorHarness({ models: options, provider: 'QWEN', dark, disabled: false, onChange: value => { selected = value } })
-  const select = elements(tree, node => node.type === 'select')[0]
+  const tree = h.render()
-  assert.equal(select.props.value, 'QWEN')
+  const trigger = elements(tree, node => node.type === 'button')[0]
-  assert.equal(select.props.style.colorScheme, dark ? 'dark' : 'light')
+  assert.equal(trigger.props['aria-haspopup'], 'menu')
-  assert.deepEqual(elements(select, node => node.type === 'option').map(node => node.props.value), ['OPENAI', 'QWEN'])
+  assert.equal(trigger.props['aria-expanded'], false)
-  select.props.onChange({ target: { value: 'OPENAI' } })
+  assert.equal(trigger.props.title, 'Qwen · qwen3.8-flash')
+  assert.equal(elements(tree, node => node.props.role === 'menu').length, 0)
+  assert.equal(elements(tree, node => node.type === 'select').length, 0)
+  trigger.props.onClick()
+  const menu = elements(h.render(), node => node.props.role === 'menu')[0]
+  assert.match(menu.props.className, dark ? /bg-\[#252526\]/ : /bg-white/)
+  assert.match(menu.props.className, /fixed/)
+  const items = elements(menu, node => node.props.role === 'menuitemradio')
+  assert.deepEqual(items.map(node => node.props.title), ['OpenAI · gpt-6.1-sol', 'Qwen · qwen3.8-flash'])
+  assert.deepEqual(items.map(node => node.props['aria-checked']), [false, true])
+  assert.ok(items.every(node => elements(node, item => item.type === 'span' && item.props.className.includes('truncate')).length === 1))
+  items[0].props.onClick()
   assert.equal(selected, 'OPENAI')
-  assert.match(select.props.className, /truncate/)
+  assert.equal(elements(h.render(), node => node.props.role === 'menu').length, 0)
-  assert.ok(elements(AgentModelSelector({ models: options, provider: 'QWEN', dark, disabled: true, onChange() {} }), node => node.type === 'select')[0].props.disabled)
+  assert.ok(elements(h.render({ disabled: true }), node => node.type === 'button')[0].props.disabled)
-  const empty = elements(AgentModelSelector({ models: [], provider: null, dark, disabled: false, onChange() {} }), node => node.type === 'select')[0]
+  const empty = elements(h.render({ models: [], provider: null }), node => node.type === 'button')[0]
   assert.ok(empty.props.disabled)
-  assert.equal(elements(empty, node => node.type === 'option')[0].props.children, '사용 가능한 모델 없음')
+  assert.equal(empty.props.title, '사용 가능한 모델 없음')
+})
+
+test('model menu opens from arrow keys and closes when a request blocks the selector', () => {
+  const h = selectorHarness({ models: options, provider: 'QWEN', dark: true, disabled: false, onChange() {} })
+  const trigger = elements(h.render(), node => node.type === 'button')[0]
+  trigger.props.onKeyDown({ key: 'ArrowUp', preventDefault() {} })
+  assert.equal(elements(h.render(), node => node.props.role === 'menu').length, 1)
+  assert.equal(elements(h.render({ disabled: true }), node => node.props.role === 'menu').length, 0)
+})
+
+test('input footer places the model action before the attachment and clear controls', () => {
+  const source = fs.readFileSync(require.resolve('../src/renderer/src/components/ChatWidgets.tsx'), 'utf8')
+  const row = source.slice(source.indexOf('{(attachmentsEnabled || onClearConversation || footerAction)'))
+  assert.ok(row.indexOf('{footerAction}') < row.indexOf('title={t(\'파일 첨부\')}'))
+  assert.ok(row.indexOf('{footerAction}') < row.indexOf('title={t(\'대화내역 삭제\')}'))
 })
 
 test('A-Copilot has a single managed label', () => {

src/renderer/src/components/AgentModelSelector.tsx

@@ -1,4 +1,6 @@
-import { Bot, ChevronDown } from 'lucide-react'
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Bot, Check } from 'lucide-react'
 import { t } from '../i18n'
 import { agentModelLabel, type AgentModelOption } from '../features/workspace/agentModels'
 
@@ -10,23 +12,108 @@ export function AgentModelSelector({ models, provider, disabled, dark, onChange
   onChange: (provider: string) => void
 }): React.JSX.Element {
   const selected = models.find(model => model.provider === provider)
+  const blocked = disabled || models.length === 0
+  const [open, setOpen] = useState(false)
+  const [position, setPosition] = useState({ left: 8, bottom: 8, width: 280, maxHeight: 320 })
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+  const visible = open && !blocked
+  const close = (restoreFocus = false): void => {
+    setOpen(false)
+    if (restoreFocus) buttonRef.current?.focus({ preventScroll: true })
+  }
+
+  useEffect(() => {
+    if (blocked) setOpen(false)
+  }, [blocked])
+
+  useLayoutEffect(() => {
+    if (!visible || !buttonRef.current) return
+    const bounds = buttonRef.current.getBoundingClientRect()
+    const width = Math.min(320, window.innerWidth - 16)
+    setPosition({
+      left: Math.max(8, Math.min(bounds.left, window.innerWidth - width - 8)),
+      bottom: window.innerHeight - bounds.top + 6,
+      width,
+      maxHeight: Math.max(0, Math.min(320, bounds.top - 14))
+    })
+    const items = menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
+    const index = Math.max(0, models.findIndex(model => model.provider === provider))
+    items?.[index]?.focus({ preventScroll: true })
+  }, [visible, models, provider])
+
+  useEffect(() => {
+    if (!visible) return
+    const outside = (event: Event): void => {
+      const target = event.target as Node
+      if (!menuRef.current?.contains(target) && !buttonRef.current?.contains(target)) setOpen(false)
+    }
+    const dismiss = (): void => setOpen(false)
+    window.addEventListener('pointerdown', outside, true)
+    window.addEventListener('contextmenu', outside)
+    window.addEventListener('scroll', outside, true)
+    window.addEventListener('resize', dismiss)
+    window.addEventListener('blur', dismiss)
+    return () => {
+      window.removeEventListener('pointerdown', outside, true)
+      window.removeEventListener('contextmenu', outside)
+      window.removeEventListener('scroll', outside, true)
+      window.removeEventListener('resize', dismiss)
+      window.removeEventListener('blur', dismiss)
+    }
+  }, [visible])
+
   return (
-    <div className="relative ml-auto min-w-0 max-w-[280px] flex-1">
+    <>
-      <Bot size={13} className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2" aria-hidden="true" />
+      <button
-      <select
+        ref={buttonRef}
+        type="button"
         aria-label={t('에이전트 모델 선택')}
+        aria-haspopup="menu"
+        aria-expanded={visible}
+        aria-controls={visible ? menuId : undefined}
         title={selected ? agentModelLabel(selected) : t('사용 가능한 모델 없음')}
-        value={provider ?? ''}
+        disabled={blocked}
-        disabled={disabled || models.length === 0}
+        onClick={() => setOpen(current => !current)}
-        onChange={event => onChange(event.target.value)}
+        onKeyDown={event => {
-        style={{ colorScheme: dark ? 'dark' : 'light' }}
+          if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { event.preventDefault(); setOpen(true) }
-        className={['h-7 w-full min-w-0 cursor-pointer appearance-none truncate rounded border py-0 pl-7 pr-7 text-[11px] outline-none transition focus-visible:border-[#8b5cf6] disabled:cursor-default disabled:opacity-45',
+          else if (event.key === 'Escape') close()
-          dark ? 'border-white/10 bg-[#282828] text-white/75 hover:bg-[#303030]' : 'border-[#d8dee9] bg-[#f8f9fc] text-[#475569] hover:bg-[#eef0f5]'].join(' ')}
+        }}
+        className={['grid size-7 shrink-0 cursor-pointer place-items-center rounded outline-none transition focus-visible:ring-1 focus-visible:ring-[#8b5cf6] disabled:cursor-default disabled:opacity-35',
+          dark ? 'text-white/60 hover:bg-white/10 hover:text-white/90' : 'text-[#64748b] hover:bg-[#eef1f7] hover:text-[#111520]',
+          visible ? dark ? 'bg-white/10 text-white/90' : 'bg-[#eef1f7] text-[#111520]' : ''].join(' ')}
       >
-        {!models.length && <option value="">{t('사용 가능한 모델 없음')}</option>}
+        <Bot size={15} aria-hidden="true" />
-        {models.map(model => <option key={model.provider} value={model.provider}>{agentModelLabel(model)}</option>)}
+      </button>
-      </select>
+      {visible && createPortal(
-      <ChevronDown size={12} className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2" aria-hidden="true" />
+        <div ref={menuRef} id={menuId} role="menu" aria-label={t('에이전트 모델 선택')}
-    </div>
+          className={['fixed z-[160] overflow-y-auto overscroll-contain rounded-md border py-1 text-[12px] font-medium shadow-[0_14px_32px_rgba(0,0,0,0.32)]',
+            dark ? 'border-white/10 bg-[#252526] text-white/80' : 'border-[#d8dee9] bg-white text-[#374151]'].join(' ')}
+          style={position}
+          onContextMenu={event => { event.preventDefault(); event.stopPropagation() }}
+          onKeyDown={event => {
+            if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(true); return }
+            if (event.key === 'Tab') { close(true); return }
+            if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return
+            event.preventDefault()
+            const items = Array.from(menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]') ?? [])
+            const current = items.indexOf(document.activeElement as HTMLButtonElement)
+            const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1
+              : (current + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length
+            items[next]?.focus()
+          }}
+        >
+          {models.map(model => <button key={model.provider} type="button" role="menuitemradio" aria-checked={model.provider === provider}
+            title={agentModelLabel(model)} tabIndex={-1}
+            onClick={() => { if (!blocked) { onChange(model.provider); close(true) } }}
+            className={['flex h-8 w-full cursor-pointer items-center gap-2 px-3 text-left outline-none transition',
+              dark ? 'hover:bg-[#37373d] hover:text-white focus:bg-[#37373d] focus:text-white' : 'hover:bg-[#eef1f7] hover:text-[#111520] focus:bg-[#eef1f7] focus:text-[#111520]'].join(' ')}>
+            <Check size={13} className={['shrink-0', model.provider === provider ? '' : 'opacity-0'].join(' ')} aria-hidden="true" />
+            <span className="min-w-0 truncate">{agentModelLabel(model)}</span>
+          </button>)}
+        </div>, document.body
+      )}
+    </>
   )
 }

src/renderer/src/components/ChatWidgets.tsx

@@ -460,6 +460,7 @@ export const QaInputBox = memo(function QaInputBox({
       {attachmentError && <p role="alert" className="break-words pt-2 text-[11px] text-[#ef4444]">{t(attachmentError)}</p>}
       {(attachmentsEnabled || onClearConversation || footerAction) && (
         <div className={['flex h-9 min-w-0 items-center gap-1 pt-1', dark ? 'text-white/50' : 'text-[#64748b]'].join(' ')}>
+          {footerAction}
           {attachmentsEnabled && (
             <>
               <input ref={fileInputRef} type="file" multiple accept={[CHAT_ATTACHMENT_ACCEPT, ...(imagesEnabled ? [CHAT_IMAGE_ACCEPT] : [])].join(',')} className="hidden" aria-label={t('파일 첨부')} onChange={(event) => {
@@ -473,7 +474,6 @@ export const QaInputBox = memo(function QaInputBox({
           {onClearConversation && (
             <button type="button" title={t('대화내역 삭제')} aria-label={t('대화내역 삭제')} disabled={clearDisabled || busy || readingAttachments} onClick={onClearConversation} className="grid size-7 cursor-pointer place-items-center rounded transition hover:bg-white/10 hover:text-[#ef4444] disabled:cursor-default disabled:opacity-35"><Trash2 size={15} /></button>
           )}
-          {footerAction}
         </div>
       )}
     </div>