feat: add model selector, skills/memory pages, and config management

- Add model selector in sidebar that discovers models from auth.json credential pool
- Add per-session model display (badge in chat header and session list)
- Add skills browser page and memory editor page
- Add BFF routes for skills, memory, and config model management
- Model switching updates config.yaml provider field to bypass env auto-detection
- Refactor Settings page, simplify ChatInput with file upload
- Add attachment upload support via BFF /upload endpoint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/chat/ChatInput.vue

@@ -9,13 +9,108 @@ const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement>()
 const fileInputRef = ref<HTMLInputElement>()
 const attachments = ref<Attachment[]>([])
+const isDragging = ref(false)
+const dragCounter = ref(0)
 
 const canSend = computed(() => inputText.value.trim() || attachments.value.length > 0)
 
+// --- Voice input (Web Speech API) ---
+// TODO: re-enable when needed — browser-native speech-to-text
+// const hasSpeechRecognition = ref(false)
+// let recognition: SpeechRecognition | null = null
+// let finalTranscript = ''
+// let prefixText = ''
+// onMounted(() => {
+//   const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
+//   if (!SR) return
+//   recognition = new SR()
+//   recognition.continuous = false
+//   recognition.interimResults = true
+//   recognition.lang = 'en-US'
+//   hasSpeechRecognition.value = true
+//   recognition.onresult = (event: SpeechRecognitionEvent) => { ... }
+//   recognition.onend = () => { ... }
+//   recognition.onerror = (event: SpeechRecognitionErrorEvent) => { ... }
+// })
+// onUnmounted(() => { if (recognition && isRecording.value) recognition.stop() })
+
+// --- File attachment helpers ---
+
+function addFile(file: File) {
+  if (attachments.value.find(a => a.name === file.name)) return
+  const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+  const url = URL.createObjectURL(file)
+  attachments.value.push({
+    id,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    url,
+    file,
+  })
+}
+
 function handleAttachClick() {
   fileInputRef.value?.click()
 }
 
+function handleFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (!input.files) return
+  for (const file of input.files) addFile(file)
+  input.value = ''
+}
+
+// --- Paste image ---
+
+function handlePaste(e: ClipboardEvent) {
+  const items = Array.from(e.clipboardData?.items || [])
+  const imageItems = items.filter(i => i.type.startsWith('image/'))
+  if (!imageItems.length) return
+  e.preventDefault()
+  for (const item of imageItems) {
+    const blob = item.getAsFile()
+    if (!blob) continue
+    const ext = item.type.split('/')[1] || 'png'
+    const file = new File([blob], `pasted-${Date.now()}.${ext}`, { type: item.type })
+    addFile(file)
+  }
+}
+
+// --- Drag and drop ---
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+}
+
+function handleDragEnter(e: DragEvent) {
+  e.preventDefault()
+  if (e.dataTransfer?.types.includes('Files')) {
+    dragCounter.value++
+    isDragging.value = true
+  }
+}
+
+function handleDragLeave() {
+  dragCounter.value--
+  if (dragCounter.value <= 0) {
+    dragCounter.value = 0
+    isDragging.value = false
+  }
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  dragCounter.value = 0
+  isDragging.value = false
+  const files = Array.from(e.dataTransfer?.files || [])
+  if (!files.length) return
+  for (const file of files) addFile(file)
+  textareaRef.value?.focus()
+}
+
+// --- Send ---
+
 function handleSend() {
   const text = inputText.value.trim()
   if (!text && attachments.value.length === 0) return
@@ -24,7 +119,6 @@ function handleSend() {
   inputText.value = ''
   attachments.value = []
 
-  // Reset textarea height
   if (textareaRef.value) {
     textareaRef.value.style.height = 'auto'
   }
@@ -43,28 +137,6 @@ function handleInput(e: Event) {
   el.style.height = Math.min(el.scrollHeight, 100) + 'px'
 }
 
-function handleFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-  const files = input.files
-  if (!files) return
-
-  for (const file of files) {
-    const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
-    const url = URL.createObjectURL(file)
-    attachments.value.push({
-      id,
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      url,
-      file,
-    })
-  }
-
-  // Reset input so the same file can be re-selected
-  input.value = ''
-}
-
 function removeAttachment(id: string) {
   const idx = attachments.value.findIndex(a => a.id === id)
   if (idx !== -1) {
@@ -110,7 +182,14 @@ function isImage(type: string): boolean {
       </div>
     </div>
 
-    <div class="input-wrapper">
+    <div
+      class="input-wrapper"
+      :class="{ 'drag-over': isDragging }"
+      @dragover="handleDragOver"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
       <input
         ref="fileInputRef"
         type="file"
@@ -126,6 +205,7 @@ function isImage(type: string): boolean {
         rows="1"
         @keydown="handleKeydown"
         @input="handleInput"
+        @paste="handlePaste"
       ></textarea>
       <div class="input-actions">
         <NTooltip trigger="hover">
@@ -288,4 +368,11 @@ function isImage(type: string): boolean {
   flex-shrink: 0;
   align-items: center;
 }
+
+// Drag-over state
+.input-wrapper.drag-over {
+  border-color: #4a90d9;
+  border-style: dashed;
+  background-color: rgba(74, 144, 217, 0.04);
+}
 </style>

src/components/chat/ChatPanel.vue

@@ -20,6 +20,10 @@ const activeSessionLabel = computed(() =>
   chatStore.activeSession?.id || 'New Chat',
 )
 
+const sessionModelLabel = computed(() =>
+  chatStore.activeSession?.model || appStore.selectedModel || '',
+)
+
 function handleNewChat() {
   chatStore.newChat()
 }
@@ -58,7 +62,7 @@ function formatTime(ts: number) {
         </NButton>
       </div>
       <div v-if="showSessions" class="session-items">
-        <div v-if="chatStore.isLoadingSessions" class="session-loading">Loading...</div>
+        <div v-if="chatStore.isLoadingSessions && sortedSessions.length === 0" class="session-loading">Loading...</div>
         <div v-else-if="sortedSessions.length === 0" class="session-empty">No sessions</div>
         <button
           v-for="s in sortedSessions"
@@ -68,8 +72,11 @@ function formatTime(ts: number) {
           @click="chatStore.switchSession(s.id)"
         >
           <div class="session-item-content">
-            <span class="session-item-title">{{ s.id }}</span>
-            <span class="session-item-time">{{ formatTime(s.createdAt) }}</span>
+            <span class="session-item-title">{{ s.title }}</span>
+            <span class="session-item-meta">
+              <span v-if="s.model" class="session-item-model">{{ s.model }}</span>
+              <span class="session-item-time">{{ formatTime(s.createdAt) }}</span>
+            </span>
           </div>
           <NPopconfirm
             v-if="s.id !== chatStore.activeSessionId || sortedSessions.length > 1"
@@ -96,7 +103,9 @@ function formatTime(ts: number) {
             </template>
           </NButton>
           <span class="header-session-title">{{ activeSessionLabel }}</span>
-          <span class="model-badge">{{ appStore.selectedModel }}</span>
+        </div>
+        <div class="header-center">
+          <span v-if="sessionModelLabel" class="model-badge">{{ sessionModelLabel }}</span>
         </div>
         <div class="header-actions">
           <NTooltip trigger="hover">
@@ -224,12 +233,31 @@ function formatTime(ts: number) {
 }
 
 .session-item-time {
-  display: block;
   font-size: 11px;
   color: $text-muted;
+}
+
+.session-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   margin-top: 2px;
 }
 
+.session-item-model {
+  font-size: 10px;
+  color: $accent-primary;
+  background: rgba($accent-primary, 0.08);
+  padding: 0 5px;
+  border-radius: 3px;
+  line-height: 16px;
+  flex-shrink: 0;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .session-item-delete {
   flex-shrink: 0;
   opacity: 0;
@@ -269,6 +297,14 @@ function formatTime(ts: number) {
   align-items: center;
   gap: 8px;
   overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.header-center {
+  flex-shrink: 0;
+  max-width: 240px;
+  min-width: 140px;
 }
 
 .header-session-title {