From 712b50553fd79a0355f8a5a64c996e949e6975d8 Mon Sep 17 00:00:00 2001
From: Jedrzej Kosinski <kosinkadink1@gmail.com>
Date: Thu, 26 Mar 2026 03:30:36 -0700
Subject: [PATCH] feat: add model browser and downloads drawer

- Add Model Browser tab to ModelsView with folder sidebar, searchable
  file list (name, size, date), and show-in-folder action
- Add global Downloads Drawer accessible from sidebar, replacing the
  inline DownloadsPanel in ModelsView
- Backend: add getModelFolders/getModelFiles IPC handlers that scan
  shared model directories
- Add ModelFileInfo type, preload bindings, and i18n keys

Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d29a1-effe-7670-be7c-424140001724
---
 locales/en.json                              |  13 +-
 src/main/lib/ipc.ts                          |  18 +-
 src/main/lib/models.ts                       |  51 ++++
 src/preload/index.ts                         |   2 +
 src/renderer/src/App.vue                     |  20 +-
 src/renderer/src/assets/main.css             |   3 +-
 src/renderer/src/components/ModelBrowser.vue | 281 +++++++++++++++++++
 src/renderer/src/types/ipc.ts                |   1 +
 src/renderer/src/views/DownloadsView.vue     | 245 ++++++++++++++++
 src/renderer/src/views/ModelsView.vue        |  85 ++++--
 src/types/ipc.ts                             |   9 +
 11 files changed, 691 insertions(+), 37 deletions(-)
 create mode 100644 src/renderer/src/components/ModelBrowser.vue
 create mode 100644 src/renderer/src/views/DownloadsView.vue

diff --git a/locales/en.json b/locales/en.json
index 420b1c88..a0c5fa1f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -45,7 +45,7 @@
   },
 
   "downloads": {
-    "title": "Model Downloads",
+    "title": "Downloads",
     "empty": "No downloads in progress.",
     "pause": "Pause",
     "resume": "Resume",
@@ -58,7 +58,8 @@
     "completed": "Complete",
     "cancelled": "Cancelled",
     "error": "Failed",
-    "sizeProgress": "{received} / {total}"
+    "sizeProgress": "{received} / {total}",
+    "clearCompleted": "Clear Completed"
   },
 
   "media": {
@@ -76,7 +77,13 @@
     "removeDir": "Remove",
     "primary": "primary",
     "default": "default",
-    "makePrimary": "Make Primary"
+    "makePrimary": "Make Primary",
+    "browse": "Browse Models",
+    "directoriesTab": "Directories",
+    "folderTypes": "Folder Types",
+    "searchPlaceholder": "Search model files…",
+    "noFiles": "No model files found",
+    "openFolder": "Show in Folder"
   },
 
   "common": {
diff --git a/src/main/lib/ipc.ts b/src/main/lib/ipc.ts
index f79fcdee..8e604b11 100644
--- a/src/main/lib/ipc.ts
+++ b/src/main/lib/ipc.ts
@@ -36,7 +36,7 @@ import { formatTime } from './util'
 import { getActiveDownloads } from './comfyDownloadManager'
 import * as releaseCache from './release-cache'
 import * as i18n from './i18n'
-import { syncCustomModelFolders, discoverExtraModelFolders } from './models'
+import { syncCustomModelFolders, discoverExtraModelFolders, listModelFolders, listModelFiles } from './models'
 import { copyDirWithProgress } from './copy'
 import { fetchJSON } from './fetch'
 import { fetchLatestRelease } from './comfyui-releases'
@@ -1522,6 +1522,22 @@ export function register(callbacks: RegisterCallbacks = {}): void {
     }
   })
 
+  ipcMain.handle('get-model-folders', () => {
+    const s = settings.getAll()
+    const modelsDirs = s.modelsDirs as string[] | undefined
+    if (!modelsDirs || modelsDirs.length === 0) return []
+    return listModelFolders(modelsDirs)
+  })
+
+  ipcMain.handle('get-model-files', async (_event, folder: string) => {
+    const s = settings.getAll()
+    const modelsDirs = s.modelsDirs as string[] | undefined
+    if (!modelsDirs || modelsDirs.length === 0) return []
+    const validFolders = listModelFolders(modelsDirs)
+    if (!validFolders.includes(folder)) return []
+    return listModelFiles(modelsDirs, folder)
+  })
+
   ipcMain.handle('get-media-sections', () => {
     const s = settings.getAll()
     return [
diff --git a/src/main/lib/models.ts b/src/main/lib/models.ts
index 381a7a25..15801722 100644
--- a/src/main/lib/models.ts
+++ b/src/main/lib/models.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import fs from 'fs'
 import { dataDir } from './paths'
 import { writeFileSafe } from './safe-file'
+import type { ModelFileInfo } from '../../types/ipc'
 
 // Canonical ComfyUI model folder types from folder_paths.py.
 // When ComfyUI adds `all_model_folders` support in extra_model_paths.yaml,
@@ -216,3 +217,53 @@ export function syncCustomModelFolders(
 
   return { newFolders, config }
 }
+
+/**
+ * Returns the deduplicated, sorted list of model folder names present across
+ * all shared model directories. Includes both canonical and extra folders.
+ */
+export function listModelFolders(modelsDirs: string[]): string[] {
+  const seen = new Set<string>()
+  for (const dir of modelsDirs) {
+    for (const name of allFoldersIn(dir)) {
+      if (name.startsWith('.')) continue
+      seen.add(name)
+    }
+  }
+  return [...seen].sort()
+}
+
+/**
+ * Lists model files in a given folder name across all shared model directories.
+ * Returns deduplicated entries sorted by name. Uses async IO to avoid blocking
+ * the main thread on large model libraries.
+ */
+export async function listModelFiles(modelsDirs: string[], folder: string): Promise<ModelFileInfo[]> {
+  const seen = new Map<string, ModelFileInfo>()
+  for (const dir of modelsDirs) {
+    const folderPath = path.join(dir, folder)
+    let entries: fs.Dirent[]
+    try {
+      entries = await fs.promises.readdir(folderPath, { withFileTypes: true })
+    } catch {
+      continue
+    }
+    for (const entry of entries) {
+      if (!entry.isFile()) continue
+      if (seen.has(entry.name)) continue
+      const entryPath = path.join(folderPath, entry.name)
+      try {
+        const stat = await fs.promises.stat(entryPath)
+        seen.set(entry.name, {
+          name: entry.name,
+          fullPath: entryPath,
+          sizeBytes: stat.size,
+          modifiedAt: stat.mtimeMs,
+        })
+      } catch {
+        // skip files we can't stat
+      }
+    }
+  }
+  return [...seen.values()].sort((a, b) => a.name.localeCompare(b.name))
+}
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 491e557b..c0bfa034 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -85,6 +85,8 @@ const api: ElectronApi = {
   // Settings
   getSettingsSections: () => ipcRenderer.invoke('get-settings-sections'),
   getModelsSections: () => ipcRenderer.invoke('get-models-sections'),
+  getModelFolders: () => ipcRenderer.invoke('get-model-folders'),
+  getModelFiles: (folder) => ipcRenderer.invoke('get-model-files', folder),
   getUniqueName: (baseName: string) => ipcRenderer.invoke('get-unique-name', baseName),
   getMediaSections: () => ipcRenderer.invoke('get-media-sections'),
   setSetting: (key, value) => ipcRenderer.invoke('set-setting', key, value),
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index b53df5e1..5a4a77f6 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -28,9 +28,10 @@ import NewInstallModal from './views/NewInstallModal.vue'
 import QuickInstallModal from './views/QuickInstallModal.vue'
 import TrackModal from './views/TrackModal.vue'
 import LoadSnapshotModal from './views/LoadSnapshotModal.vue'
+import DownloadsView from './views/DownloadsView.vue'
 
 // Lucide icons
-import { LayoutDashboard, Box, Play, FolderOpen, Image, Settings, MessageSquarePlus } from 'lucide-vue-next'
+import { LayoutDashboard, Box, Play, FolderOpen, Image, Settings, MessageSquarePlus, Download } from 'lucide-vue-next'
 import { buildSupportUrl } from './lib/supportUrl'
 
 const { t, setLocaleMessage, locale } = useI18n()
@@ -43,7 +44,7 @@ const launcherPrefs = useLauncherPrefs()
 useTheme()
 
 // --- View state ---
-type TabView = 'dashboard' | 'list' | 'running' | 'models' | 'media' | 'settings'
+type TabView = 'dashboard' | 'list' | 'running' | 'models' | 'media' | 'downloads' | 'settings'
 const activeView = ref<TabView>('dashboard')
 const appVersion = ref('')
 
@@ -76,6 +77,7 @@ const sidebarItems = computed(() => [
   { key: 'running' as const, icon: Play, labelKey: 'sidebar.running' },
   { key: 'models' as const, icon: FolderOpen, labelKey: 'models.title' },
   { key: 'media' as const, icon: Image, labelKey: 'media.title' },
+  { key: 'downloads' as const, icon: Download, labelKey: 'downloads.title' },
   { key: 'settings' as const, icon: Settings, labelKey: 'settings.title' },
 ])
 
@@ -272,12 +274,16 @@ onMounted(async () => {
     <nav class="sidebar">
       <div class="sidebar-brand">Desktop 2.0</div>
       <div class="sidebar-nav">
-        <button
+        <div
           v-for="item in sidebarItems"
           :key="item.key"
           class="sidebar-item"
           :class="{ active: activeView === item.key }"
+          role="button"
+          tabindex="0"
           @click="switchView(item.key)"
+          @keydown.enter="switchView(item.key)"
+          @keydown.space.prevent="switchView(item.key)"
         >
           <component :is="item.icon" :size="18" />
           <span>{{ $t(item.labelKey) }}</span>
@@ -291,13 +297,13 @@ onMounted(async () => {
               class="sidebar-count"
             >{{ sessionStore.runningTabCount }}</span>
           </template>
-          <template v-if="item.key === 'models'">
+          <template v-if="item.key === 'downloads'">
             <span
               v-if="downloadStore.activeDownloads.length > 0"
               class="sidebar-count"
             >{{ downloadStore.activeDownloads.length }}</span>
           </template>
-        </button>
+        </div>
       </div>
       <button class="sidebar-item sidebar-feedback" @click="openFeedback">
         <MessageSquarePlus :size="18" />
@@ -349,6 +355,10 @@ onMounted(async () => {
         ref="mediaRef"
       />
 
+      <DownloadsView
+        v-show="activeView === 'downloads'"
+      />
+
       <SettingsView
         v-show="activeView === 'settings'"
         ref="settingsRef"
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 84769bed..0a03f089 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -161,6 +161,7 @@
  * ================================================================ */
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
+:root { --sidebar-width: 200px; }
 
 ::-webkit-scrollbar { width: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
@@ -181,7 +182,7 @@ body {
 .app-layout { display: flex; height: 100vh; }
 
 .sidebar {
-  width: 200px;
+  width: var(--sidebar-width);
   flex-shrink: 0;
   background: var(--surface);
   border-right: 1px solid var(--border);
diff --git a/src/renderer/src/components/ModelBrowser.vue b/src/renderer/src/components/ModelBrowser.vue
new file mode 100644
index 00000000..f9c8007d
--- /dev/null
+++ b/src/renderer/src/components/ModelBrowser.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Search, FolderOpen, File, ExternalLink } from 'lucide-vue-next'
+import { useDownloadStore } from '../stores/downloadStore'
+import type { ModelFileInfo } from '../types/ipc'
+
+const { t } = useI18n()
+const downloadStore = useDownloadStore()
+
+const folders = ref<string[]>([])
+const selectedFolder = ref('')
+const files = ref<ModelFileInfo[]>([])
+const searchQuery = ref('')
+const loading = ref(false)
+
+const filteredFiles = computed(() => {
+  if (!searchQuery.value) return files.value
+  const q = searchQuery.value.toLowerCase()
+  return files.value.filter((f) => f.name.toLowerCase().includes(q))
+})
+
+function fmtSize(bytes: number): string {
+  if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB'
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB'
+  return (bytes / 1073741824).toFixed(2) + ' GB'
+}
+
+function fmtDate(ms: number): string {
+  return new Date(ms).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+async function loadFolders(): Promise<void> {
+  folders.value = await window.api.getModelFolders()
+  if (folders.value.length > 0 && !selectedFolder.value) {
+    selectedFolder.value = folders.value[0]!
+  }
+}
+
+async function loadFiles(): Promise<void> {
+  if (!selectedFolder.value) return
+  loading.value = true
+  try {
+    files.value = await window.api.getModelFiles(selectedFolder.value)
+  } catch {
+    files.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function refresh(): Promise<void> {
+  await loadFolders()
+  await loadFiles()
+}
+
+function showInFolder(file: ModelFileInfo): void {
+  window.api.showDownloadInFolder(file.fullPath)
+}
+
+watch(selectedFolder, () => loadFiles())
+
+const completedCount = computed(() =>
+  downloadStore.finishedDownloads.filter((d) => d.status === 'completed').length
+)
+watch(completedCount, (now, prev) => {
+  if (now > prev) loadFiles()
+})
+
+onMounted(() => refresh())
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="model-browser">
+    <div class="model-browser-sidebar">
+      <div class="model-browser-sidebar-title">{{ t('models.folderTypes') }}</div>
+      <button
+        v-for="folder in folders"
+        :key="folder"
+        class="model-browser-folder-item"
+        :class="{ active: selectedFolder === folder }"
+        @click="selectedFolder = folder"
+      >
+        <FolderOpen :size="14" style="flex-shrink: 0" />
+        <span>{{ folder }}</span>
+      </button>
+    </div>
+    <div class="model-browser-main">
+      <div class="model-browser-search">
+        <Search :size="16" class="model-browser-search-icon" />
+        <input
+          v-model="searchQuery"
+          type="text"
+          :placeholder="t('models.searchPlaceholder')"
+          class="model-browser-search-input"
+        />
+      </div>
+      <div class="model-browser-list">
+        <div v-if="loading" class="model-browser-empty">{{ t('common.loading') }}</div>
+        <div v-else-if="filteredFiles.length === 0" class="model-browser-empty">
+          {{ t('models.noFiles') }}
+        </div>
+        <div
+          v-for="file in filteredFiles"
+          :key="file.name"
+          class="model-file-card"
+        >
+          <div class="model-file-info">
+            <File :size="14" style="flex-shrink: 0; opacity: 0.5" />
+            <div class="model-file-details">
+              <div class="model-file-name" :title="file.name">{{ file.name }}</div>
+              <div class="model-file-meta">
+                {{ fmtSize(file.sizeBytes) }} · {{ fmtDate(file.modifiedAt) }}
+              </div>
+            </div>
+          </div>
+          <button
+            class="model-file-action"
+            :title="t('models.openFolder')"
+            @click="showInFolder(file)"
+          >
+            <ExternalLink :size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.model-browser {
+  display: flex;
+  height: 100%;
+  min-height: 300px;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg);
+}
+.model-browser-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 12px 0;
+  overflow-y: auto;
+}
+.model-browser-sidebar-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 14px 8px;
+}
+.model-browser-folder-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.model-browser-folder-item:hover {
+  background: var(--border);
+  color: var(--text);
+}
+.model-browser-folder-item.active {
+  background: var(--border);
+  color: var(--text);
+  font-weight: 600;
+}
+.model-browser-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.model-browser-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.model-browser-search-icon {
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+.model-browser-search-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-size: 14px;
+}
+.model-browser-search-input::placeholder {
+  color: var(--text-faint);
+}
+.model-browser-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.model-browser-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+.model-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: 6px;
+  gap: 8px;
+}
+.model-file-card:hover {
+  background: var(--surface);
+}
+.model-file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+.model-file-details {
+  min-width: 0;
+  flex: 1;
+}
+.model-file-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.model-file-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.model-file-action {
+  flex-shrink: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-faint);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+.model-file-action:hover {
+  color: var(--text);
+  border-color: var(--border);
+  background: none;
+}
+</style>
diff --git a/src/renderer/src/types/ipc.ts b/src/renderer/src/types/ipc.ts
index 8227028b..c4d5777f 100644
--- a/src/renderer/src/types/ipc.ts
+++ b/src/renderer/src/types/ipc.ts
@@ -29,6 +29,7 @@ export type {
   ModelsResult,
   ModelsSection,
   ModelsField,
+  ModelFileInfo,
   ProbeResult,
   ProgressData,
   ProgressStep,
diff --git a/src/renderer/src/views/DownloadsView.vue b/src/renderer/src/views/DownloadsView.vue
new file mode 100644
index 00000000..264eeff1
--- /dev/null
+++ b/src/renderer/src/views/DownloadsView.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useDownloadStore } from '../stores/downloadStore'
+import type { ModelDownloadProgress } from '../types/ipc'
+
+const { t } = useI18n()
+const downloadStore = useDownloadStore()
+
+function fmtBytes(b: number): string {
+  if (!b || b <= 0) return ''
+  if (b < 1048576) return (b / 1024).toFixed(0) + ' KB'
+  if (b < 1073741824) return (b / 1048576).toFixed(1) + ' MB'
+  return (b / 1073741824).toFixed(2) + ' GB'
+}
+
+function fmtSpeed(bytesPerSec: number): string {
+  if (bytesPerSec < 1048576) return (bytesPerSec / 1024).toFixed(0) + ' KB/s'
+  return (bytesPerSec / 1048576).toFixed(1) + ' MB/s'
+}
+
+function fmtEta(seconds: number): string {
+  if (seconds < 60) return `${Math.ceil(seconds)}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.ceil(seconds % 60)}s`
+  const h = Math.floor(seconds / 3600)
+  const m = Math.ceil((seconds % 3600) / 60)
+  return `${h}h ${m}m`
+}
+
+function statusLabel(d: ModelDownloadProgress): string {
+  const pct = Math.round(d.progress * 100)
+  switch (d.status) {
+    case 'pending':
+      return t('downloads.pending')
+    case 'downloading': {
+      const parts: string[] = []
+      if (d.totalBytes && d.totalBytes > 0 && d.receivedBytes != null) {
+        parts.push(`${fmtBytes(d.receivedBytes)} / ${fmtBytes(d.totalBytes)}`)
+      }
+      parts.push(`${pct}%`)
+      if (d.speedBytesPerSec && d.speedBytesPerSec > 0) {
+        parts.push(fmtSpeed(d.speedBytesPerSec))
+      }
+      if (d.etaSeconds != null && d.etaSeconds > 0 && isFinite(d.etaSeconds)) {
+        parts.push(fmtEta(d.etaSeconds))
+      }
+      return parts.join(' · ')
+    }
+    case 'paused': {
+      const parts: string[] = [t('downloads.paused', { percent: pct })]
+      if (d.totalBytes && d.totalBytes > 0 && d.receivedBytes != null) {
+        parts.push(`${fmtBytes(d.receivedBytes)} / ${fmtBytes(d.totalBytes)}`)
+      }
+      return parts.join(' · ')
+    }
+    case 'completed':
+      return t('downloads.completed')
+    case 'error':
+      return d.error || t('downloads.error')
+    case 'cancelled':
+      return t('downloads.cancelled')
+    default:
+      return ''
+  }
+}
+
+function statusClass(d: ModelDownloadProgress): string {
+  switch (d.status) {
+    case 'downloading':
+    case 'pending':
+      return 'status-running'
+    case 'paused':
+      return 'status-update'
+    case 'completed':
+      return ''
+    case 'error':
+      return 'status-danger'
+    default:
+      return ''
+  }
+}
+
+function barClass(d: ModelDownloadProgress): string {
+  switch (d.status) {
+    case 'paused':
+      return 'paused'
+    case 'error':
+      return 'error'
+    case 'completed':
+      return 'success'
+    default:
+      return ''
+  }
+}
+
+function fileLabel(d: ModelDownloadProgress): string {
+  const dir = d.directory || ''
+  return dir ? `${dir} / ${d.filename}` : d.filename
+}
+
+async function pause(url: string): Promise<void> {
+  await window.api.pauseModelDownload(url)
+}
+
+async function resume(url: string): Promise<void> {
+  await window.api.resumeModelDownload(url)
+}
+
+async function cancel(url: string): Promise<void> {
+  await window.api.cancelModelDownload(url)
+}
+
+async function showInFolder(savePath: string): Promise<void> {
+  await window.api.showDownloadInFolder(savePath)
+}
+
+function dismiss(url: string): void {
+  downloadStore.dismiss(url)
+}
+
+function clearCompleted(): void {
+  for (const d of downloadStore.finishedDownloads) {
+    if (d.status === 'completed') downloadStore.dismiss(d.url)
+  }
+}
+</script>
+
+<template>
+  <div class="view active">
+    <div class="toolbar">
+      <div class="breadcrumb">
+        <span class="breadcrumb-current">{{ t('downloads.title') }}</span>
+      </div>
+      <button
+        v-if="downloadStore.finishedDownloads.some((d) => d.status === 'completed')"
+        @click="clearCompleted"
+      >
+        {{ t('downloads.clearCompleted') }}
+      </button>
+    </div>
+
+    <div class="view-scroll">
+      <template v-if="downloadStore.hasDownloads">
+        <div class="instance-list">
+          <!-- Active downloads -->
+          <div
+            v-for="d in downloadStore.activeDownloads"
+            :key="d.url"
+            class="instance-card dl-card"
+          >
+            <div class="instance-info">
+              <div class="instance-name dl-filename" :title="d.filename">
+                {{ fileLabel(d) }}
+              </div>
+              <div class="instance-meta">
+                <span :class="statusClass(d)">{{ statusLabel(d) }}</span>
+              </div>
+              <div class="card-progress">
+                <div class="card-progress-track">
+                  <div
+                    class="card-progress-fill"
+                    :class="[barClass(d), { indeterminate: d.status === 'pending' }]"
+                    :style="d.status !== 'pending' ? { width: Math.round(d.progress * 100) + '%' } : { width: '100%' }"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="instance-actions">
+              <button
+                v-if="d.status === 'downloading'"
+                @click="pause(d.url)"
+              >
+                {{ t('downloads.pause') }}
+              </button>
+              <button
+                v-if="d.status === 'paused'"
+                class="primary"
+                @click="resume(d.url)"
+              >
+                {{ t('downloads.resume') }}
+              </button>
+              <button
+                v-if="d.status !== 'completed'"
+                class="danger-solid"
+                @click="cancel(d.url)"
+              >
+                {{ t('downloads.cancel') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Finished downloads -->
+          <div
+            v-for="d in downloadStore.finishedDownloads"
+            :key="d.url"
+            class="instance-card dl-card"
+          >
+            <div class="instance-info">
+              <div class="instance-name dl-filename" :title="d.filename">
+                {{ fileLabel(d) }}
+              </div>
+              <div class="instance-meta">
+                <span :class="statusClass(d)">{{ statusLabel(d) }}</span>
+              </div>
+            </div>
+            <div class="instance-actions">
+              <button
+                v-if="d.status === 'completed' && d.savePath"
+                @click="showInFolder(d.savePath)"
+              >
+                {{ t('downloads.view') }}
+              </button>
+              <button @click="dismiss(d.url)">
+                {{ t('downloads.dismiss') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="empty-state">
+        {{ t('downloads.empty') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dl-filename {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dl-card .card-progress {
+  margin-top: 6px;
+}
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+</style>
diff --git a/src/renderer/src/views/ModelsView.vue b/src/renderer/src/views/ModelsView.vue
index f5567218..fd06a127 100644
--- a/src/renderer/src/views/ModelsView.vue
+++ b/src/renderer/src/views/ModelsView.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import DirCard from '../components/DirCard.vue'
-import DownloadsPanel from '../components/DownloadsPanel.vue'
+import ModelBrowser from '../components/ModelBrowser.vue'
 import type { ModelsSection } from '../types/ipc'
 
+const { t } = useI18n()
+
+type ModelsTab = 'directories' | 'browse'
+const activeTab = ref<ModelsTab>('directories')
 const systemDefault = ref('')
 const sections = ref<ModelsSection[]>([])
+const modelBrowserRef = ref<InstanceType<typeof ModelBrowser> | null>(null)
 
 function normalizePath(p: string): string {
   return (p || '').replace(/[\\/]+$/, '').toLowerCase()
@@ -15,6 +21,7 @@ async function loadModels(): Promise<void> {
   const result = await window.api.getModelsSections()
   systemDefault.value = result.systemDefault
   sections.value = result.sections
+  if (activeTab.value === 'browse') modelBrowserRef.value?.refresh()
 }
 
 function isDefault(path: string): boolean {
@@ -57,6 +64,11 @@ async function handleAdd(field: ModelsSection['fields'][number]): Promise<void>
   }
 }
 
+function switchTab(tab: ModelsTab): void {
+  activeTab.value = tab
+  if (tab === 'browse') modelBrowserRef.value?.refresh()
+}
+
 onMounted(() => loadModels())
 
 defineExpose({ loadModels })
@@ -71,36 +83,55 @@ defineExpose({ loadModels })
     </div>
 
     <div class="view-scroll">
-      <div
-        v-for="(section, sIdx) in sections"
-        :key="sIdx"
-        class="settings-section"
-      >
-        <div v-if="section.title" class="detail-section-title">{{ section.title }}</div>
-
-        <div class="detail-fields">
-          <div v-for="field in section.fields" :key="field.id" class="field">
-            <label>{{ field.label }}</label>
-
-            <div class="dir-card-list">
-              <DirCard
-                v-for="(path, index) in field.value"
-                :key="index"
-                :path="path"
-                :is-primary="index === 0"
-                :is-default="isDefault(path)"
-                @open="handleOpen(path)"
-                @browse="handleBrowse(field, index)"
-                @remove="handleRemove(field, index)"
-                @make-primary="handleMakePrimary(field, index)"
-              />
-              <button @click="handleAdd(field)">{{ $t('models.addDir') }}</button>
+      <div class="detail-tabs">
+        <button
+          class="detail-tab"
+          :class="{ active: activeTab === 'directories' }"
+          @click="switchTab('directories')"
+        >
+          {{ t('models.directoriesTab') }}
+        </button>
+        <button
+          class="detail-tab"
+          :class="{ active: activeTab === 'browse' }"
+          @click="switchTab('browse')"
+        >
+          {{ t('models.browse') }}
+        </button>
+      </div>
+
+      <template v-if="activeTab === 'directories'">
+        <div
+          v-for="(section, sIdx) in sections"
+          :key="sIdx"
+          class="settings-section"
+        >
+          <div v-if="section.title" class="detail-section-title">{{ section.title }}</div>
+
+          <div class="detail-fields">
+            <div v-for="field in section.fields" :key="field.id" class="field">
+              <label>{{ field.label }}</label>
+
+              <div class="dir-card-list">
+                <DirCard
+                  v-for="(path, index) in field.value"
+                  :key="index"
+                  :path="path"
+                  :is-primary="index === 0"
+                  :is-default="isDefault(path)"
+                  @open="handleOpen(path)"
+                  @browse="handleBrowse(field, index)"
+                  @remove="handleRemove(field, index)"
+                  @make-primary="handleMakePrimary(field, index)"
+                />
+                <button @click="handleAdd(field)">{{ $t('models.addDir') }}</button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
 
-      <DownloadsPanel />
+      <ModelBrowser v-else ref="modelBrowserRef" />
     </div>
   </div>
 </template>
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 3f2c8c16..ba81e5fb 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -265,6 +265,13 @@ export interface ModelsField {
   tooltip?: string
 }
 
+export interface ModelFileInfo {
+  name: string
+  fullPath: string
+  sizeBytes: number
+  modifiedAt: number
+}
+
 // --- Probe types ---
 export interface ProbeResult {
   sourceLabel: string
@@ -565,6 +572,8 @@ export interface ElectronApi {
   // Settings
   getSettingsSections(): Promise<SettingsSection[]>
   getModelsSections(): Promise<ModelsResult>
+  getModelFolders(): Promise<string[]>
+  getModelFiles(folder: string): Promise<ModelFileInfo[]>
   getMediaSections(): Promise<SettingsSection[]>
   getUniqueName(baseName: string): Promise<string>
   setSetting(key: string, value: unknown): Promise<void>