WP-10: OS and package inventory

Debian inspector (dpkg-query, apt-get -s upgrade, snap list, os-release,
reboot-required) behind a CommandRunner port with tested parsers, fake
inspector for dev, persisted inventory snapshot, package_refresh job,
/api/system/inventory, Updates page with OS card, summary and filterable
package table.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/components/PackageTable.test.ts

@@ -25,7 +25,7 @@ describe('PackageTable', () => {
     expect(rows(w)).toHaveLength(1)
     await w.find('input[name=search]').setValue('')
     await w.find('input[name=upgradable]').setValue(true)
-    expect(rows(w).map((r) => r.split(' ')[0])).toEqual(['openssl', 'curl'])
+    expect(w.findAll('tbody tr').map((r) => r.find('td').text())).toEqual(['openssl', 'curl'])
   })
 
   it('filters by source', async () => {

frontend/src/components/PackageTable.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Package } from '../api/types'
+
+const props = defineProps<{ packages: Package[] }>()
+const search = ref('')
+const upgradableOnly = ref(false)
+const source = ref<'all' | 'apt' | 'snap'>('all')
+
+const filtered = computed(() =>
+  props.packages.filter(
+    (p) =>
+      (!upgradableOnly.value || p.candidate) &&
+      (source.value === 'all' || p.source === source.value) &&
+      p.name.toLowerCase().includes(search.value.trim().toLowerCase()),
+  ),
+)
+</script>
+
+<template>
+  <div class="flex flex-wrap items-end gap-4">
+    <div>
+      <label for="pkg-search" class="block text-sm font-medium">Search</label>
+      <input
+        id="pkg-search"
+        v-model="search"
+        name="search"
+        placeholder="package name"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      />
+    </div>
+    <div>
+      <label for="pkg-source" class="block text-sm font-medium">Source</label>
+      <select
+        id="pkg-source"
+        v-model="source"
+        name="source"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="all">All</option>
+        <option value="apt">apt</option>
+        <option value="snap">snap</option>
+      </select>
+    </div>
+    <label class="flex items-center gap-2 pb-2 text-sm">
+      <input v-model="upgradableOnly" name="upgradable" type="checkbox" />
+      Upgradable only
+    </label>
+    <span class="pb-2 text-sm text-gray-500">{{ filtered.length }} of {{ packages.length }}</span>
+  </div>
+
+  <table class="mt-4 w-full text-left text-sm">
+    <thead class="border-b border-gray-200 text-gray-500">
+      <tr>
+        <th class="py-2">Package</th>
+        <th>Source</th>
+        <th>Installed</th>
+        <th>Available</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="p in filtered"
+        :key="`${p.source}:${p.name}`"
+        class="border-b border-gray-100"
+        :class="p.candidate ? 'bg-amber-50' : ''"
+      >
+        <td class="py-1.5 font-mono">{{ p.name }}</td>
+        <td>{{ p.source }}</td>
+        <td class="font-mono text-gray-600">{{ p.installed }}</td>
+        <td class="font-mono">{{ p.candidate ?? '' }}</td>
+        <td>
+          <span
+            v-if="p.is_security"
+            class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800"
+            >security</span
+          >
+        </td>
+      </tr>
+      <tr v-if="filtered.length === 0">
+        <td colspan="5" class="py-6 text-center text-gray-500">No packages match.</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

frontend/src/pages/UpdatesPage.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { api, ApiError } from '../api/client'
+import type { InventoryResponse, JobRun } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useToastStore } from '../stores/toast'
+import PackageTable from '../components/PackageTable.vue'
+
+const auth = useAuthStore()
+const toast = useToastStore()
+const inv = ref<InventoryResponse | null>(null)
+const refreshing = ref(false)
+let timer: ReturnType<typeof setInterval> | undefined
+
+async function load() {
+  inv.value = await api.get<InventoryResponse>('/api/system/inventory')
+}
+
+onMounted(() => {
+  load().catch((e) => toast.error(e instanceof ApiError ? e.message : 'Request failed'))
+})
+onUnmounted(() => clearInterval(timer))
+
+async function refresh() {
+  refreshing.value = true
+  try {
+    const run = await api.post<JobRun>('/api/jobs/run', { kind: 'package_refresh' })
+    timer = setInterval(async () => {
+      const r = await api.get<JobRun>(`/api/jobs/${run.id}`)
+      if (r.status !== 'running') {
+        clearInterval(timer)
+        refreshing.value = false
+        if (r.status === 'success') {
+          toast.success('Inventory refreshed')
+          await load()
+        } else {
+          toast.error('Refresh failed, see Jobs for the log')
+        }
+      }
+    }, 1000)
+  } catch (e) {
+    refreshing.value = false
+    toast.error(e instanceof ApiError ? e.message : 'Request failed')
+  }
+}
+
+const uptime = (s: number) => {
+  const d = Math.floor(s / 86400)
+  const h = Math.floor((s % 86400) / 3600)
+  return `${d}d ${h}h`
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-semibold">Updates</h1>
+    <button
+      v-if="auth.isAdmin"
+      :disabled="refreshing"
+      class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+      @click="refresh"
+    >
+      {{ refreshing ? 'Refreshing…' : 'Refresh inventory' }}
+    </button>
+  </div>
+
+  <div v-if="inv && inv.os" class="mt-6 grid gap-4 md:grid-cols-4">
+    <div class="rounded-lg border border-gray-200 bg-white p-4 md:col-span-2">
+      <div class="text-xs uppercase text-gray-500">Operating system</div>
+      <div data-testid="os-name" class="mt-1 text-lg font-medium">{{ inv.os.name }}</div>
+      <div class="mt-1 text-sm text-gray-600">
+        {{ inv.os.hostname }} · kernel {{ inv.os.kernel }} · up {{ uptime(inv.os.uptime_secs) }}
+      </div>
+      <div
+        v-if="inv.os.reboot_required"
+        class="mt-2 inline-block rounded-md bg-amber-100 px-2 py-1 text-xs font-medium text-amber-800"
+      >
+        Reboot required
+      </div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Upgradable</div>
+      <div data-testid="summary-upgradable" class="mt-1 text-2xl font-semibold">
+        {{ inv.summary.upgradable }}
+      </div>
+      <div class="text-sm text-gray-600">of {{ inv.summary.total }} packages</div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Security updates</div>
+      <div class="mt-1 text-2xl font-semibold" :class="inv.summary.security ? 'text-red-700' : ''">
+        {{ inv.summary.security }}
+      </div>
+      <div class="text-sm text-gray-600">
+        last refresh {{ inv.refreshed_at ? new Date(inv.refreshed_at).toLocaleString() : '–' }}
+      </div>
+    </div>
+  </div>
+  <p v-else-if="inv" class="mt-6 text-gray-600">
+    No inventory yet. Run a refresh to query the host.
+  </p>
+
+  <div v-if="inv && inv.packages.length" class="mt-8">
+    <PackageTable :packages="inv.packages" />
+  </div>
+</template>

frontend/src/router.ts

@@ -8,6 +8,7 @@ import UsersPage from './pages/UsersPage.vue'
 import PlaceholderPage from './pages/PlaceholderPage.vue'
 import SettingsPage from './pages/SettingsPage.vue'
 import JobsPage from './pages/JobsPage.vue'
+import UpdatesPage from './pages/UpdatesPage.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -18,7 +19,7 @@ export const router = createRouter({
       component: AppShell,
       children: [
         { path: '', name: 'dashboard', component: DashboardPage },
-        { path: 'updates', component: PlaceholderPage, props: { title: 'Updates' } },
+        { path: 'updates', component: UpdatesPage },
         {
           path: 'vulnerabilities',
           component: PlaceholderPage,