chore: merge executor worktree (10-08 admin views wiring)

frontend/src/views/CloudStorageView.vue

@@ -4,7 +4,7 @@
     <!-- Toolbar -->
     <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
       <div class="px-6 py-3 flex items-center gap-3">
-        <span class="text-sm font-medium text-gray-700">Cloud Storage</span>
+        <BreadcrumbBar :segments="[{ label: 'Cloud Storage' }]" :show-root="false" />
       </div>
     </div>
 
@@ -20,12 +20,18 @@
 
       <div v-if="loading" class="text-sm text-gray-400 py-8 text-center">Loading…</div>
 
-      <div v-else-if="connections.length === 0" class="text-center py-12 text-gray-400">
-        <p class="text-sm">No cloud storage connected.</p>
-        <router-link to="/settings" class="text-sm text-indigo-600 hover:underline mt-1 inline-block">
-          Add a connection in Settings
-        </router-link>
-      </div>
+      <EmptyState
+        v-else-if="connections.length === 0"
+        icon="cloud"
+        headline="No cloud storage connected"
+        subtext="Connect Google Drive, OneDrive, Nextcloud, or a WebDAV server in Settings."
+      >
+        <template #cta>
+          <router-link to="/settings" class="mt-3 inline-block text-sm text-indigo-600 hover:underline">
+            Go to Settings
+          </router-link>
+        </template>
+      </EmptyState>
 
       <div v-else class="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
         <div
@@ -63,6 +69,8 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
 import { providerColor, providerBg } from '../utils/formatters.js'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
+import EmptyState from '../components/ui/EmptyState.vue'
 
 const router = useRouter()
 const cloudStore = useCloudConnectionsStore()

frontend/src/views/SettingsView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="p-8 max-w-3xl mx-auto">
+    <BreadcrumbBar :segments="breadcrumbSegments" :show-root="false" class="mb-4" />
+
     <h2 class="text-2xl font-semibold text-gray-900 mb-1">Settings</h2>
     <p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>
 
@@ -84,12 +86,13 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
 import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
 import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'
 import SettingsAccountTab from '../components/settings/SettingsAccountTab.vue'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
 
 const router = useRouter()
 
@@ -101,6 +104,11 @@ const tabs = [
 ]
 
 const activeTab = ref('preferences')
+
+const breadcrumbSegments = computed(() => {
+  const tab = tabs.find(t => t.id === activeTab.value)
+  return [{ label: 'Settings' }, { label: tab?.label ?? activeTab.value }]
+})
 const oauthSuccessProvider = ref(null)
 const oauthError = ref(null)
 

frontend/src/views/SharedView.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="p-8 max-w-4xl mx-auto">
+    <BreadcrumbBar :segments="[{ label: 'Shared with me' }]" :show-root="false" class="mb-4" />
+
     <h2 class="text-2xl font-bold text-gray-900 mb-1">Shared with me</h2>
     <p class="text-gray-500 text-sm mb-6">Documents other users have shared with you.</p>
 
     <div v-if="loading" class="text-sm text-gray-400">Loading…</div>
 
     <!-- Empty state -->
-    <div v-else-if="sharedDocs.length === 0" class="text-center py-12 text-gray-400">
-      <p class="text-sm font-medium text-gray-500">No documents shared with you yet.</p>
-      <p class="text-xs mt-1">When someone shares a document with you, it will appear here.</p>
-    </div>
+    <EmptyState
+      v-else-if="sharedDocs.length === 0"
+      icon="inbox"
+      headline="Nothing shared with you yet"
+      subtext="When someone shares a document with you, it will appear here."
+    />
 
     <!-- Shared documents list -->
     <div v-else class="grid gap-3">
@@ -51,6 +55,8 @@
 import { ref, onMounted } from 'vue'
 import * as api from '../api/client.js'
 import { formatDate, formatSize } from '../utils/formatters.js'
+import BreadcrumbBar from '../components/ui/BreadcrumbBar.vue'
+import EmptyState from '../components/ui/EmptyState.vue'
 
 const sharedDocs = ref([])
 const loading = ref(false)

frontend/src/views/admin/AdminAiView.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'AI Config' }]" :show-root="false" class="mb-4" />
+
     <section class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6">
       <div class="px-6 py-4 border-b border-gray-200">
         <h2 class="text-sm font-semibold text-gray-900">System AI Providers (Global)</h2>
@@ -207,6 +209,7 @@ import { ref, reactive, onMounted } from 'vue'
 import * as api from '../../api/client.js'
 import { getAiConfig, saveAiConfig, testAiConnection } from '../../api/client.js'
 import SearchableModelSelect from '../../components/ui/SearchableModelSelect.vue'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 
 const _PROVIDER_DEFAULTS = {

frontend/src/views/admin/AdminAuditView.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'Audit Log' }]" :show-root="false" class="mb-4" />
+
     <div class="flex flex-wrap gap-3 mb-4 items-end">
       <div>
         <label class="block text-xs font-semibold text-gray-500 mb-1">From</label>
@@ -75,20 +77,9 @@
       <p v-if="exportError" class="text-xs text-red-600 self-center">{{ exportError }}</p>
     </div>
 
-    <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
-      <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
-        <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
-        Loading audit log…
-      </div>
-    </div>
+    <p v-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
 
-    <p v-else-if="fetchError" class="text-xs text-red-600 mt-1">{{ fetchError }}</p>
-
-    <div v-else-if="entries.length === 0" class="text-center py-12 text-gray-400 text-sm">
-      No audit log entries match the selected filters.
-    </div>
-
-    <div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden">
+    <div v-if="!fetchError" class="bg-white rounded-xl border border-gray-200 overflow-hidden">
       <table class="w-full text-sm border-collapse">
         <thead>
           <tr class="bg-gray-50 border-b border-gray-200">
@@ -100,33 +91,53 @@
           </tr>
         </thead>
         <tbody>
-          <tr
-            v-for="entry in entries"
-            :key="entry.id"
-            class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
-          >
-            <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ formatTimestamp(entry.created_at) }}</td>
-            <td class="px-4 py-3 text-sm text-gray-700">{{ entry.user_handle || entry.user_id || '—' }}</td>
-            <td class="px-4 py-3 text-sm text-gray-500">
-              <span v-if="entry.user_email">{{ entry.user_email }}</span>
-              <span v-else-if="entry.metadata_?.attempted_email_hash" class="text-amber-600 font-mono text-xs">hash:{{ entry.metadata_.attempted_email_hash }} <span class="text-xs not-italic">(attempted)</span></span>
-              <span v-else>—</span>
+          <template v-if="loading">
+            <tr v-for="n in 8" :key="`sk-${n}`" class="border-b border-gray-100">
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-32"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-20"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-36"></div></td>
+              <td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-16"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-24"></div></td>
+            </tr>
+          </template>
+          <tr v-else-if="entries.length === 0">
+            <td colspan="5" class="px-0 py-0">
+              <EmptyState icon="clipboardList" headline="No entries found" subtext="Try adjusting your filters or date range.">
+                <template #cta>
+                  <button @click="clearFilters" class="mt-3 text-sm text-indigo-600 hover:underline">Clear filters</button>
+                </template>
+              </EmptyState>
             </td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs px-2 py-1 rounded-full font-medium"
-                :class="actionTypeClass(entry.event_type)"
-              >
-                {{ entry.event_type }}
-              </span>
-            </td>
-            <td class="px-4 py-3 text-sm text-gray-700 font-mono text-xs">{{ entry.ip_address || '—' }}</td>
           </tr>
+          <template v-else>
+            <tr
+              v-for="entry in entries"
+              :key="entry.id"
+              class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+            >
+              <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ formatTimestamp(entry.created_at) }}</td>
+              <td class="px-4 py-3 text-sm text-gray-700">{{ entry.user_handle || entry.user_id || '—' }}</td>
+              <td class="px-4 py-3 text-sm text-gray-500">
+                <span v-if="entry.user_email">{{ entry.user_email }}</span>
+                <span v-else-if="entry.metadata_?.attempted_email_hash" class="text-amber-600 font-mono text-xs">hash:{{ entry.metadata_.attempted_email_hash }} <span class="text-xs not-italic">(attempted)</span></span>
+                <span v-else>—</span>
+              </td>
+              <td class="px-4 py-3">
+                <span
+                  class="text-xs px-2 py-1 rounded-full font-medium"
+                  :class="actionTypeClass(entry.event_type)"
+                >
+                  {{ entry.event_type }}
+                </span>
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-700 font-mono text-xs">{{ entry.ip_address || '—' }}</td>
+            </tr>
+          </template>
         </tbody>
       </table>
     </div>
 
-    <div v-if="!loading && entries.length > 0" class="flex items-center justify-between mt-4">
+    <div v-if="!loading && !fetchError && entries.length > 0" class="flex items-center justify-between mt-4">
       <button
         @click="prevPage"
         :disabled="page <= 1"
@@ -187,6 +198,8 @@
 <script setup>
 import { ref, reactive, onMounted, computed } from 'vue'
 import * as api from '../../api/client.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
+import EmptyState from '../../components/ui/EmptyState.vue'
 
 const entries = ref([])
 const total = ref(0)

frontend/src/views/admin/AdminOverviewView.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[]" :show-root="false" class="mb-4" />
+
     <h2 class="text-xl font-semibold text-gray-900 mb-6">Overview</h2>
 
     <div v-if="loading" class="text-gray-500">Loading overview…</div>
@@ -71,6 +73,7 @@
 import { ref, onMounted } from 'vue'
 import { getAdminOverview } from '../../api/admin.js'
 import { formatSize, formatDate } from '../../utils/formatters.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const loading = ref(false)
 const error = ref(null)

frontend/src/views/admin/AdminQuotasView.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'Quotas' }]" :show-root="false" class="mb-4" />
+
     <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
       <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
         <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
@@ -87,6 +89,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import * as api from '../../api/client.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const rows = ref([])
 const loading = ref(false)

frontend/src/views/admin/AdminUsersView.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <BreadcrumbBar :segments="[{ label: 'Users' }]" :show-root="false" class="mb-4" />
+
     <div v-if="showCreateForm" class="bg-white border border-gray-200 rounded-xl p-6 mb-4">
       <h3 class="text-sm font-semibold text-gray-900 mb-4">Create user</h3>
       <div class="space-y-3">
@@ -90,19 +92,7 @@
       </button>
     </div>
 
-    <div v-if="loading" class="bg-white rounded-xl border border-gray-200 p-8 text-center">
-      <div class="flex items-center justify-center gap-2 text-gray-400 text-sm">
-        <span class="animate-spin rounded-full border-2 border-current border-t-transparent w-4 h-4"></span>
-        Loading users…
-      </div>
-    </div>
-
-    <div v-else-if="users.length === 0" class="bg-white rounded-xl border border-gray-200 p-12 text-center">
-      <h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
-      <p class="text-sm text-gray-500">Create the first user account to get started.</p>
-    </div>
-
-    <div v-else class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
+    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden divide-y divide-gray-200">
       <table class="w-full">
         <thead>
           <tr class="bg-gray-50 text-left">
@@ -115,6 +105,23 @@
           </tr>
         </thead>
         <tbody class="divide-y divide-gray-200">
+          <template v-if="loading">
+            <tr v-for="n in 5" :key="`sk-${n}`" class="border-b border-gray-100">
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-36"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-20"></div></td>
+              <td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-12"></div></td>
+              <td class="px-4 py-3"><div class="h-4 bg-gray-100 rounded-full animate-pulse w-16"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-24"></div></td>
+              <td class="px-4 py-3"><div class="h-3 bg-gray-100 rounded animate-pulse w-28"></div></td>
+            </tr>
+          </template>
+          <tr v-else-if="users.length === 0">
+            <td colspan="6" class="px-8 py-12 text-center">
+              <h3 class="text-sm font-semibold text-gray-900 mb-1">No users yet</h3>
+              <p class="text-sm text-gray-500">Create the first user account to get started.</p>
+            </td>
+          </tr>
+          <template v-else>
           <tr
             v-for="user in users"
             :key="user.id"
@@ -252,6 +259,7 @@
               </div>
             </td>
           </tr>
+          </template>
         </tbody>
       </table>
     </div>
@@ -264,6 +272,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { formatDate } from '../../utils/formatters.js'
 import * as api from '../../api/client.js'
+import BreadcrumbBar from '../../components/ui/BreadcrumbBar.vue'
 
 const users = ref([])
 const loading = ref(false)

frontend/src/views/admin/__tests__/AdminAuditView.skeleton.test.js

@@ -1,12 +1,91 @@
-import { describe, it } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('../../../api/client.js', () => ({
+  adminListAuditLog: vi.fn().mockResolvedValue({ items: [], total: 0 }),
+  adminExportAuditLogCsv: vi.fn().mockResolvedValue({}),
+  adminListDailyExports: vi.fn().mockResolvedValue({ items: [] }),
+  adminDownloadDailyExport: vi.fn().mockResolvedValue({}),
+}))
+
+const stubs = {
+  BreadcrumbBar: true,
+  EmptyState: true,
+  AppIcon: true,
+}
+
+async function mountAudit(overrides = {}) {
+  const { default: AdminAuditView } = await import('../AdminAuditView.vue')
+  return mount(AdminAuditView, {
+    global: { stubs, plugins: [createPinia()] },
+    ...overrides,
+  })
+}
 
 describe('UX-04: AdminAuditView shows skeleton table rows during loading', () => {
-  it.todo('renders 5+ skeleton <tr> rows when loading=true')
-  it.todo('skeleton rows have 5 columns matching the real table header')
-  it.todo('animated spinner Loading audit log… text is removed')
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.resetModules()
+  })
+
+  it('renders 8 skeleton <tr> rows when loading=true', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
+    const wrapper = await mountAudit()
+    const tbody = wrapper.find('tbody')
+    expect(tbody.exists()).toBe(true)
+    const rows = tbody.findAll('tr')
+    expect(rows.length).toBeGreaterThanOrEqual(8)
+  })
+
+  it('skeleton rows have exactly 5 <td> cells matching column count', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountAudit()
+    const rows = wrapper.find('tbody').findAll('tr')
+    rows.forEach(row => {
+      expect(row.findAll('td').length).toBe(5)
+    })
+  })
+
+  it('Loading audit log text is absent when loading=true', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountAudit()
+    expect(wrapper.text()).not.toContain('Loading audit log')
+  })
 })
 
 describe('UX-01 (audit empty): EmptyState renders when entries is empty after load', () => {
-  it.todo('EmptyState icon=clipboardList headline="No entries found" appears when entries.length===0 and not loading')
-  it.todo('clear-filters button rendered in #cta slot')
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.resetModules()
+  })
+
+  it('renders <EmptyState icon="clipboardList" headline="No entries found"> when entries empty and not loading', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
+    const wrapper = await mountAudit()
+    await new Promise(r => setTimeout(r, 50))
+    await wrapper.vm.$nextTick()
+    const emptyState = wrapper.findComponent({ name: 'EmptyState' })
+    expect(emptyState.exists()).toBe(true)
+    expect(emptyState.attributes('icon') ?? emptyState.props('icon')).toBe('clipboardList')
+    const headline = emptyState.attributes('headline') ?? emptyState.props('headline')
+    expect(headline).toBe('No entries found')
+  })
+
+  it('EmptyState includes a Clear filters CTA button', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
+    // Mount with EmptyState NOT stubbed so slot content renders
+    const { default: AdminAuditView } = await import('../AdminAuditView.vue')
+    const wrapper = mount(AdminAuditView, {
+      global: { stubs: { BreadcrumbBar: true, AppIcon: true }, plugins: [createPinia()] },
+    })
+    await new Promise(r => setTimeout(r, 50))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('Clear filters')
+  })
 })

frontend/src/views/admin/__tests__/AdminUsersView.skeleton.test.js

@@ -1,7 +1,60 @@
-import { describe, it } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('../../../api/client.js', () => ({
+  adminListUsers: vi.fn().mockResolvedValue({ items: [] }),
+  adminCreateUser: vi.fn().mockResolvedValue({}),
+  adminDeactivateUser: vi.fn().mockResolvedValue({}),
+  adminReactivateUser: vi.fn().mockResolvedValue({}),
+  adminDeleteUser: vi.fn().mockResolvedValue({}),
+  adminResetUserPassword: vi.fn().mockResolvedValue({}),
+}))
+
+const stubs = {
+  BreadcrumbBar: true,
+  EmptyState: true,
+  AppIcon: true,
+}
+
+async function mountUsers(overrides = {}) {
+  const { default: AdminUsersView } = await import('../AdminUsersView.vue')
+  return mount(AdminUsersView, {
+    global: { stubs, plugins: [createPinia()] },
+    ...overrides,
+  })
+}
 
 describe('UX-04: AdminUsersView shows skeleton table rows during loading', () => {
-  it.todo('renders 5+ skeleton <tr> rows when loading=true')
-  it.todo('skeleton rows have 6 columns matching the real table header')
-  it.todo('animated spinner Loading users… text is removed')
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.resetModules()
+  })
+
+  it('renders 5 skeleton <tr> rows when loading=true', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
+    const wrapper = await mountUsers()
+    const tbody = wrapper.find('tbody')
+    expect(tbody.exists()).toBe(true)
+    const rows = tbody.findAll('tr')
+    expect(rows.length).toBeGreaterThanOrEqual(5)
+  })
+
+  it('skeleton rows have exactly 6 <td> cells', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountUsers()
+    const rows = wrapper.find('tbody').findAll('tr')
+    rows.forEach(row => {
+      expect(row.findAll('td').length).toBe(6)
+    })
+  })
+
+  it('Loading users text is absent when loading=true', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountUsers()
+    expect(wrapper.text()).not.toContain('Loading users')
+  })
 })