{{ label }}
+ {{ value }}
+ {{ hint }}
+
+
+
+ {{ title }}
+
+
+
+
+ Backend {{ healthLabel }}
+
+ User {{ user.displayName }}
+
+
+ Theme / System
+
+ Theme {{ themeLabel }}
+ System {{ systemLabel }}
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/common/StatCard.vue b/frontend/src/components/common/StatCard.vue
new file mode 100644
index 0000000..f7618a2
--- /dev/null
+++ b/frontend/src/components/common/StatCard.vue
@@ -0,0 +1,36 @@
+
+
+
+ {{ eyebrow }}
+ {{ title }}
+{{ description }}
+Grouped config
+
+
+ {{ group.name }}
+
+
+
+
+
+
+
+
+
+
+ {{ item.validationMessage }}
+ Path suggestions
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recent tasks
+
+
+
+ {{ task.name }}
+
+ {{ task.processedFiles }} / {{ task.totalFiles }} files
+ Processing chart
+Chart total {{ chartTotal }}
+
+ Quick entries
+
+ {{ entry.title }}
+ {{ entry.actionLabel }}
+
+ {{ entry.value }}
+ {{ entry.hint }}
+
+
+
+ {{ record.failType || record.reason }}
+
+
+ Edit metadata
+
+ Pagination
+Page {{ page }} / {{ totalPages }}
+
+
+
+
+
+ Batch summary
+{{ batchSummary }}
+Audio preview
+ +No audio preview available
+Cover
+No cover available
+ +Lyrics
+{{ form.lyrics }}
+ No lyrics loaded
+Metadata form
+
+
+
+
+
+
+
+
+ {{ validationError }}
+ +
+
+
+
+
+
+
+
+ {{ task.name }}
+
+ {{ getTaskProgressPercent(task) }}%
+
+
+
+
+
+
+
+
+
+
+
+
+ Source{{ detail.sourceType || 'Unknown' }}
+ Success{{ detail.successFiles ?? 0 }}
+ Failed{{ detail.failedFiles ?? 0 }}
+ Updated{{ detail.updatedAt || '-' }}
+ {{ detail.summary || 'No detail summary available.' }}
+
+
+
+
+ Select a task to inspect detail.
+
+
+
+
+
+
+ {{ item.name }}
+ {{ item.status }}
+
+
+
+
+
+
+
+ Drop files here
+
+
+ simple-uploader queue stays aligned with chunk upload and merge handoff.
+
+
+
+ {{ item.filename }}
+
+ {{ item.status }}
+ {{ item.sourcePath }}
+ Manual create task required
+ {{ item.progress }}%
+ Upload handoff
+Create task from source path
+If merge returns no source path, keep the upload merged and allow manual task creation.
+
+
+
+
+
+ {{ statusMessage }}
+
+
+
+
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..f1a0315
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './styles/element-dark.css'
+import './styles/index.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus)
+app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 0000000..398124d
--- /dev/null
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { appRoutes } from './routes'
+
+const router = createRouter({
+ history: createWebHistory('/app/'),
+ routes: appRoutes
+})
+
+export default router
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
new file mode 100644
index 0000000..25528bc
--- /dev/null
+++ b/frontend/src/router/routes.ts
@@ -0,0 +1,75 @@
+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '../layouts/AppLayout.vue'
+import DashboardView from '../views/DashboardView.vue'
+import TaskManagementView from '../views/TaskManagementView.vue'
+import FileUploadView from '../views/FileUploadView.vue'
+import FailFileView from '../views/FailFileView.vue'
+import MetadataEditorView from '../views/MetadataEditorView.vue'
+import SystemConfigView from '../views/SystemConfigView.vue'
+
+export interface AppRouteMeta {
+ title: string
+ section: string
+ navLabel?: string
+ showInSidebar?: boolean
+}
+
+export interface AppRouteRecord extends Omit
+
+
+
+ Dashboard content
' },
+ meta: { title: 'Dashboard', section: 'Overview', navLabel: 'Dashboard', showInSidebar: true }
+ },
+ {
+ path: 'tasks',
+ component: { template: 'Task content
' },
+ meta: { title: 'Tasks', section: 'Operations', navLabel: 'Tasks', showInSidebar: true }
+ },
+ {
+ path: 'upload',
+ component: { template: 'Upload content
' },
+ meta: { title: 'Upload', section: 'Operations', navLabel: 'Upload', showInSidebar: true }
+ },
+ {
+ path: 'fail-files',
+ component: { template: 'Fail file content
' },
+ meta: { title: 'Fail Files', section: 'Operations', navLabel: 'Fail Files', showInSidebar: true }
+ },
+ {
+ path: 'system-config',
+ component: { template: 'System config content
' },
+ meta: { title: 'System Config', section: 'Settings', navLabel: 'System Config', showInSidebar: true }
+ }
+ ]
+ }
+ ]
+ })
+
+ await router.push('/tasks')
+ await router.isReady()
+
+ const appStore = useAppStore()
+ const userStore = useUserStore()
+ appStore.setBackendHealth('healthy')
+ userStore.profile.name = 'Shell User'
+
+ render(App, {
+ global: {
+ plugins: [pinia, router]
+ }
+ })
+
+ expect(screen.getAllByText('Music Ops')).toHaveLength(1)
+ expect(screen.getByLabelText('Breadcrumb')).toHaveTextContent('Tasks')
+ expect(screen.getByRole('heading', { name: 'Tasks' })).toBeInTheDocument()
+ expect(screen.getByText('Backend Healthy')).toBeInTheDocument()
+ expect(screen.getByText('User Shell User')).toBeInTheDocument()
+ expect(screen.getByText('Task content')).toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/tests/request.spec.ts b/frontend/src/tests/request.spec.ts
new file mode 100644
index 0000000..0b35071
--- /dev/null
+++ b/frontend/src/tests/request.spec.ts
@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { AxiosHeaders } from 'axios'
+import { createPinia, setActivePinia } from 'pinia'
+import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { useAppStore } from '../stores/app'
+import { useUserStore } from '../stores/user'
+import {
+ applyRequestDefaults,
+ buildResponseTransformer,
+ createRequestClient,
+ normalizeRequestPath,
+ normalizeRequestError,
+ unwrapApiResponse
+} from '../api/request'
+import type { ApiResponse } from '../types/api'
+
+function createRequestConfig(overrides: Partial