arkaos 2.83.0 → 2.85.0

package/VERSION

@@ -1 +1 @@
-2.83.0
+2.85.0

package/dashboard/app/pages/commands.vue

@@ -1,76 +1,194 @@
 <script setup lang="ts">
+// PR68 v2.85.0 — Commands page: ▶ Copy + ★ Favorites.
+//
+// The previous Commands page was a read-only catalogue (135 rows,
+// search, filter, expand for keywords). Daniel Ek's audit question
+// landed: "what is the job-to-be-done here vs the CLI?" The answer:
+// fast lookup → copy to clipboard → paste back into Claude Code.
+// PR68 makes that flow one-click + adds operator-curated favorites
+// stored locally so the top-of-list is the operator's actual
+// muscle-memory commands.
+
 import type { TableColumn } from '@nuxt/ui'
 import type { Command } from '~/types'
 
 const { fetchApi } = useApi()
+const toast = useToast()
 
-const { data, status, error, refresh } = await fetchApi<{ commands: Command[], total: number }>('/api/commands')
+const {
+  data,
+  status,
+  error,
+  refresh,
+} = await fetchApi<{ commands: Command[], total: number }>('/api/commands')
 
-const commands = computed(() => data.value?.commands ?? [])
+// ─── Favorites (persisted in localStorage) ───────────────────────────────
+
+const FAVORITES_KEY = 'arkaos_command_favorites'
+const favorites = ref<Set<string>>(new Set())
+
+function loadFavorites() {
+  if (typeof window === 'undefined') return
+  try {
+    const raw = window.localStorage.getItem(FAVORITES_KEY)
+    if (!raw) return
+    const parsed = JSON.parse(raw)
+    if (Array.isArray(parsed)) {
+      favorites.value = new Set(parsed.filter((v): v is string => typeof v === 'string'))
+    }
+  } catch { /* corrupt JSON — ignore, start fresh */ }
+}
+
+function persistFavorites() {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(
+      FAVORITES_KEY,
+      JSON.stringify(Array.from(favorites.value)),
+    )
+  } catch { /* quota / disabled storage — silent */ }
+}
+
+function toggleFavorite(commandId: string) {
+  if (favorites.value.has(commandId)) {
+    favorites.value.delete(commandId)
+  } else {
+    favorites.value.add(commandId)
+  }
+  persistFavorites()
+}
+
+onMounted(() => {
+  loadFavorites()
+})
+
+// ─── Filters + view ─────────────────────────────────────────────────────
 
 const search = ref('')
 const departmentFilter = ref('all')
+const view = ref<'all' | 'favorites'>('all')
 const page = ref(1)
 const pageSize = 20
 const expandedRow = ref<string | null>(null)
 
+const commands = computed(() => data.value?.commands ?? [])
+
 const departments = computed(() => {
-  const depts = new Set(commands.value.map(c => c.department))
+  const depts = new Set(commands.value.map((c) => c.department))
   return [
     { label: 'All Departments', value: 'all' },
-    ...Array.from(depts).sort().map(d => ({ label: d, value: d }))
+    ...Array.from(depts).sort().map((d) => ({ label: d, value: d })),
   ]
 })
 
-const filteredCommands = computed(() => {
-  let result = commands.value
-  const query = search.value.toLowerCase()
+const baseList = computed<Command[]>(() => {
+  if (view.value === 'favorites') {
+    return commands.value.filter((c) => favorites.value.has(c.id))
+  }
+  return commands.value
+})
 
+const filteredCommands = computed<Command[]>(() => {
+  let result = baseList.value
+  const query = search.value.toLowerCase().trim()
   if (query) {
-    result = result.filter(cmd =>
+    result = result.filter((cmd) =>
       cmd.command.toLowerCase().includes(query)
-      || cmd.description.toLowerCase().includes(query)
+      || cmd.description.toLowerCase().includes(query),
     )
   }
-
   if (departmentFilter.value !== 'all') {
-    result = result.filter(cmd => cmd.department === departmentFilter.value)
+    result = result.filter((cmd) => cmd.department === departmentFilter.value)
+  }
+  // Favorites pinned on top in the "all" view; the favorites-only
+  // view doesn't need re-sorting.
+  if (view.value === 'all') {
+    result = [...result].sort((a, b) => {
+      const aFav = favorites.value.has(a.id) ? 0 : 1
+      const bFav = favorites.value.has(b.id) ? 0 : 1
+      return aFav - bFav
+    })
   }
-
   return result
 })
 
 const totalFiltered = computed(() => filteredCommands.value.length)
 
-const paginatedCommands = computed(() => {
-  const start = (page.value - 1) * pageSize
-  return filteredCommands.value.slice(start, start + pageSize)
-})
+const paginatedCommands = computed(() =>
+  filteredCommands.value.slice(
+    (page.value - 1) * pageSize,
+    page.value * pageSize,
+  ),
+)
 
-const totalPages = computed(() => Math.max(1, Math.ceil(totalFiltered.value / pageSize)))
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(totalFiltered.value / pageSize)),
+)
 
-watch([search, departmentFilter], () => {
+watch([search, departmentFilter, view], () => {
   page.value = 1
 })
 
+// ─── Copy command to clipboard ──────────────────────────────────────────
+
+const copied = ref<string | null>(null)
+let copyTimer: ReturnType<typeof setTimeout> | null = null
+
+async function copyCommand(cmd: Command) {
+  if (typeof navigator === 'undefined' || !navigator.clipboard) {
+    toast.add({
+      title: 'Clipboard unavailable',
+      description: 'Your browser blocked navigator.clipboard.',
+      color: 'warning',
+    })
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(cmd.command)
+    copied.value = cmd.id
+    if (copyTimer) clearTimeout(copyTimer)
+    copyTimer = setTimeout(() => {
+      copied.value = null
+      copyTimer = null
+    }, 1500)
+    toast.add({
+      title: 'Copied',
+      description: cmd.command,
+      color: 'success',
+    })
+  } catch (err) {
+    toast.add({
+      title: 'Copy failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+  }
+}
+
+onBeforeUnmount(() => {
+  if (copyTimer) clearTimeout(copyTimer)
+})
+
+// ─── Expansion + table ──────────────────────────────────────────────────
+
 function toggleExpand(commandId: string) {
   expandedRow.value = expandedRow.value === commandId ? null : commandId
 }
 
 const columns: TableColumn<Command>[] = [
-  {
-    accessorKey: 'command',
-    header: 'Command'
-  },
-  {
-    accessorKey: 'department',
-    header: 'Department'
-  },
-  {
-    accessorKey: 'description',
-    header: 'Description'
-  }
+  { accessorKey: 'star',        header: '' },
+  { accessorKey: 'command',     header: 'Command' },
+  { accessorKey: 'department',  header: 'Department' },
+  { accessorKey: 'description', header: 'Description' },
+  { accessorKey: 'actions',     header: '' },
+]
+
+const viewTabs = [
+  { label: 'All', value: 'all' as const },
+  { label: 'Favorites', value: 'favorites' as const },
 ]
+
+const favoritesCount = computed(() => favorites.value.size)
 </script>
 
 <template>
@@ -81,33 +199,43 @@ const columns: TableColumn<Command>[] = [
           <UDashboardSidebarCollapse />
         </template>
         <template #trailing>
-          <UBadge v-if="data?.total" :label="data.total" variant="subtle" />
+          <UBadge
+            v-if="data?.total"
+            :label="`${data.total} total`"
+            variant="subtle"
+            size="xs"
+          />
+          <UBadge
+            v-if="favoritesCount"
+            :label="`★ ${favoritesCount}`"
+            variant="subtle"
+            color="warning"
+            size="xs"
+            class="ml-2"
+          />
         </template>
       </UDashboardNavbar>
     </template>
 
     <template #body>
-      <!-- Loading -->
-      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
-        <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
-      </div>
-
-      <!-- Error -->
-      <div v-else-if="error" class="flex flex-col items-center justify-center gap-4 py-12" role="alert">
-        <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
-        <p class="text-sm text-muted">Failed to load commands.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Empty -->
-      <div v-else-if="!commands.length" class="flex flex-col items-center justify-center gap-4 py-12">
-        <UIcon name="i-lucide-terminal" class="size-12 text-muted" />
-        <p class="text-sm text-muted">No commands found.</p>
-      </div>
-
-      <!-- Content -->
-      <template v-else>
+      <DashboardState
+        :status="status"
+        :error="error"
+        :empty="!commands.length"
+        empty-title="No commands found"
+        empty-icon="i-lucide-terminal"
+        loading-label="Loading commands"
+        :on-retry="() => refresh()"
+      >
+        <!-- View tabs + filters -->
         <div class="flex flex-wrap items-center gap-3 mb-4">
+          <UTabs
+            :items="viewTabs"
+            :model-value="view"
+            class="shrink-0"
+            @update:model-value="view = $event as 'all' | 'favorites'"
+          />
+
           <UInput
             v-model="search"
             class="max-w-sm"
@@ -130,51 +258,98 @@ const columns: TableColumn<Command>[] = [
           </span>
         </div>
 
-        <UTable
-          :data="paginatedCommands"
-          :columns="columns"
-          :loading="status === 'pending'"
-          class="shrink-0"
-          :ui="{
-            base: 'table-fixed border-separate border-spacing-0',
-            thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-            tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:cursor-pointer [&>tr]:hover:bg-elevated/50 [&>tr]:transition-colors',
-            th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-            td: 'border-b border-default'
-          }"
-          @select="(row: Command) => toggleExpand(row.id)"
+        <!-- Favorites empty state -->
+        <div
+          v-if="view === 'favorites' && favoritesCount === 0"
+          class="flex flex-col items-center justify-center gap-3 py-16 rounded-lg border border-default"
         >
-          <template #command-cell="{ row }">
-            <code class="font-mono text-sm text-primary">{{ row.original.command }}</code>
-          </template>
-          <template #department-cell="{ row }">
-            <UBadge :label="row.original.department" variant="subtle" size="sm" />
-          </template>
-          <template #expanded="{ row }">
-            <div v-if="expandedRow === row.original.id && row.original.keywords?.length" class="px-4 py-3 bg-elevated/30">
-              <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-2">Keywords</p>
-              <div class="flex flex-wrap gap-1.5">
-                <UBadge
-                  v-for="kw in row.original.keywords"
-                  :key="kw"
-                  :label="kw"
-                  variant="outline"
-                  size="xs"
-                />
-              </div>
-            </div>
-          </template>
-        </UTable>
-
-        <div v-if="totalPages > 1" class="flex items-center justify-center mt-6">
-          <UPagination
-            :page="page"
-            :total="totalFiltered"
-            :items-per-page="pageSize"
-            @update:page="(val) => page = val"
-          />
+          <UIcon name="i-lucide-star" class="size-12 text-muted" />
+          <p class="text-sm text-muted">No favorites yet.</p>
+          <p class="text-xs text-muted text-center max-w-sm">
+            Click the ★ next to any command to pin it here for one-click access.
+          </p>
         </div>
-      </template>
+
+        <!-- Table -->
+        <template v-else>
+          <UTable
+            :data="paginatedCommands"
+            :columns="columns"
+            :loading="status === 'pending'"
+            class="shrink-0"
+            :ui="{
+              base: 'table-fixed border-separate border-spacing-0',
+              thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+              tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:hover:bg-elevated/50 [&>tr]:transition-colors',
+              th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+              td: 'border-b border-default',
+            }"
+          >
+            <template #star-cell="{ row }">
+              <UButton
+                :icon="favorites.has(row.original.id) ? 'i-lucide-star' : 'i-lucide-star'"
+                :color="favorites.has(row.original.id) ? 'warning' : 'neutral'"
+                variant="ghost"
+                size="xs"
+                :aria-label="favorites.has(row.original.id) ? 'Unfavorite' : 'Favorite'"
+                :class="favorites.has(row.original.id) ? '' : 'opacity-30 hover:opacity-100'"
+                @click.stop="toggleFavorite(row.original.id)"
+              />
+            </template>
+            <template #command-cell="{ row }">
+              <button
+                type="button"
+                class="text-left w-full"
+                @click="toggleExpand(row.original.id)"
+              >
+                <code class="font-mono text-sm text-primary">{{ row.original.command }}</code>
+              </button>
+            </template>
+            <template #department-cell="{ row }">
+              <UBadge :label="row.original.department" variant="subtle" size="sm" />
+            </template>
+            <template #description-cell="{ row }">
+              <span class="text-sm text-muted">{{ row.original.description }}</span>
+            </template>
+            <template #actions-cell="{ row }">
+              <UButton
+                :icon="copied === row.original.id ? 'i-lucide-check' : 'i-lucide-copy'"
+                :color="copied === row.original.id ? 'success' : 'neutral'"
+                variant="ghost"
+                size="xs"
+                aria-label="Copy command to clipboard"
+                @click.stop="copyCommand(row.original)"
+              />
+            </template>
+            <template #expanded="{ row }">
+              <div
+                v-if="expandedRow === row.original.id && row.original.keywords?.length"
+                class="px-4 py-3 bg-elevated/30"
+              >
+                <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-2">Keywords</p>
+                <div class="flex flex-wrap gap-1.5">
+                  <UBadge
+                    v-for="kw in row.original.keywords"
+                    :key="kw"
+                    :label="kw"
+                    variant="outline"
+                    size="xs"
+                  />
+                </div>
+              </div>
+            </template>
+          </UTable>
+
+          <div v-if="totalPages > 1" class="flex items-center justify-center mt-6">
+            <UPagination
+              :page="page"
+              :total="totalFiltered"
+              :items-per-page="pageSize"
+              @update:page="(val) => page = val"
+            />
+          </div>
+        </template>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/dashboard/app/pages/tasks.vue

@@ -1,85 +1,227 @@
 <script setup lang="ts">
+// PR67 v2.84.0 — Tasks page rewritten against /api/jobs.
+//
+// The legacy /api/tasks endpoint returns the deprecated TaskManager
+// data, which has no live updates and no cancel. The SQLite job queue
+// (/api/jobs) is the real workhorse — knowledge ingest fans out into
+// jobs, WebSocket broadcasts every progress event, DELETE /api/jobs/{id}
+// cancels queued work. This page now consumes the real thing.
+//
+// What changed vs the previous tasks.vue:
+//   - Polls /api/jobs (jobs are the new tasks)
+//   - Subscribes to /ws/tasks for live progress + status flips
+//   - Cancel button on queued/processing rows
+//   - Empty state suggests a real command (Knowledge → ingest) instead
+//     of the dead-link "npx arkaos index" hint
+//   - DashboardState (PR64) wraps loading/error/empty consistently
+
 import type { TableColumn } from '@nuxt/ui'
-import type { Task, TaskSummary } from '~/types'
+import type { Job, JobSummary } from '~/types'
+
+const { fetchApi, apiBase } = useApi()
+const toast = useToast()
+
+const {
+  data,
+  status,
+  error,
+  refresh,
+} = await fetchApi<{ jobs: Job[], summary: JobSummary }>('/api/jobs?limit=200')
 
-const { fetchApi } = useApi()
+const jobs = ref<Job[]>(data.value?.jobs ?? [])
+const summary = ref<JobSummary>(data.value?.summary ?? {
+  total: 0, queued: 0, processing: 0, completed: 0, failed: 0,
+})
 
-const { data, status, error, refresh } = await fetchApi<{ tasks: Task[], summary: TaskSummary }>('/api/tasks')
+watch(data, (d) => {
+  if (!d) return
+  jobs.value = d.jobs ?? []
+  summary.value = d.summary ?? {
+    total: 0, queued: 0, processing: 0, completed: 0, failed: 0,
+  }
+})
 
-const tasks = computed(() => data.value?.tasks ?? [])
-const summary = computed(() => data.value?.summary ?? { total: 0, active: 0, queued: 0, completed: 0 })
+// ─── Filter tabs ─────────────────────────────────────────────────────────
 
-const activeTab = ref('all')
+const activeTab = ref<'all' | 'active' | 'queued' | 'completed' | 'failed'>('all')
 
 const tabItems = [
-  { label: 'All', value: 'all' },
-  { label: 'Active', value: 'active' },
-  { label: 'Queued', value: 'queued' },
-  { label: 'Completed', value: 'completed' },
-  { label: 'Failed', value: 'failed' }
+  { label: 'All', value: 'all' as const },
+  { label: 'Active', value: 'active' as const },
+  { label: 'Queued', value: 'queued' as const },
+  { label: 'Completed', value: 'completed' as const },
+  { label: 'Failed', value: 'failed' as const },
 ]
 
-const filteredTasks = computed(() => {
-  if (activeTab.value === 'all') return tasks.value
-  return tasks.value.filter(t => {
-    if (activeTab.value === 'active') return t.status === 'processing' || t.status === 'active'
-    return t.status === activeTab.value
-  })
+const ACTIVE_STATUSES: Job['status'][] = [
+  'processing', 'downloading', 'transcribing', 'embedding',
+]
+
+const filteredJobs = computed<Job[]>(() => {
+  if (activeTab.value === 'all') return jobs.value
+  if (activeTab.value === 'active') {
+    return jobs.value.filter((j) => ACTIVE_STATUSES.includes(j.status))
+  }
+  return jobs.value.filter((j) => j.status === activeTab.value)
+})
+
+const CANCELLABLE: Job['status'][] = ['queued', 'processing']
+function isCancellable(job: Job): boolean {
+  return CANCELLABLE.includes(job.status)
+}
+
+// ─── WebSocket — live updates ────────────────────────────────────────────
+
+let ws: WebSocket | null = null
+const wsConnected = ref(false)
+
+function connectWebSocket() {
+  if (ws && ws.readyState === WebSocket.OPEN) return
+  const wsUrl = apiBase.replace('http://', 'ws://').replace('https://', 'wss://') + '/ws/tasks'
+  ws = new WebSocket(wsUrl)
+  ws.onopen = () => { wsConnected.value = true }
+  ws.onclose = () => { wsConnected.value = false }
+  ws.onerror = () => { wsConnected.value = false }
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data) as {
+        type: string
+        job_id?: string
+        progress?: number
+        message?: string
+        status?: Job['status']
+        error?: string
+        chunks_created?: number
+      }
+      if (!msg.job_id) return
+      const idx = jobs.value.findIndex((j) => j.id === msg.job_id)
+      if (idx === -1) {
+        // We don't have the row yet (new job spawned mid-session).
+        // Refetch the list so it shows up.
+        refresh()
+        return
+      }
+      const current = jobs.value[idx]
+      if (!current) return
+      const next: Job = { ...current }
+      if (msg.type === 'job_progress') {
+        if (typeof msg.progress === 'number') next.progress = msg.progress
+        if (typeof msg.message === 'string') next.message = msg.message
+        if (msg.status) next.status = msg.status
+      } else if (msg.type === 'job_complete') {
+        next.status = 'completed'
+        next.progress = 100
+        if (typeof msg.chunks_created === 'number') next.chunks_created = msg.chunks_created
+      } else if (msg.type === 'job_failed') {
+        next.status = 'failed'
+        if (typeof msg.error === 'string') next.error = msg.error
+      } else if (msg.type === 'job_cancelled') {
+        next.status = 'cancelled'
+      }
+      jobs.value.splice(idx, 1, next)
+    } catch {
+      /* ignore malformed messages */
+    }
+  }
+}
+
+function disconnectWebSocket() {
+  if (!ws) return
+  try { ws.close() } catch { /* already closed */ }
+  ws = null
+  wsConnected.value = false
+}
+
+onMounted(() => {
+  connectWebSocket()
+})
+
+onBeforeUnmount(() => {
+  disconnectWebSocket()
 })
 
-type StatusColorType = 'success' | 'error' | 'primary' | 'warning' | 'neutral'
+// ─── Cancel ──────────────────────────────────────────────────────────────
+
+const cancelling = ref<Set<string>>(new Set())
 
-function statusColor(taskStatus: string): StatusColorType {
-  const colors: Record<string, StatusColorType> = {
-    completed: 'success',
-    processing: 'primary',
-    active: 'primary',
-    queued: 'neutral',
-    failed: 'error',
-    cancelled: 'warning'
+async function cancelJob(job: Job) {
+  if (!isCancellable(job)) return
+  cancelling.value.add(job.id)
+  try {
+    const res = await $fetch<{ cancelled?: boolean, error?: string }>(
+      `${apiBase}/api/jobs/${job.id}`,
+      { method: 'DELETE' },
+    )
+    if (res.cancelled) {
+      // WS will broadcast 'job_cancelled' — handler will flip the row.
+      // Refresh as a safety net in case the WS message races.
+      await refresh()
+      toast.add({
+        title: 'Job cancelled',
+        description: job.source || job.id,
+        color: 'success',
+      })
+    } else {
+      toast.add({
+        title: 'Cancel rejected',
+        description: res.error || 'Only queued jobs can be cancelled.',
+        color: 'warning',
+      })
+    }
+  } catch (err) {
+    toast.add({
+      title: 'Cancel failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+  } finally {
+    cancelling.value.delete(job.id)
   }
-  return colors[taskStatus] ?? 'neutral'
+}
+
+// ─── Render helpers ──────────────────────────────────────────────────────
+
+type StatusColor = 'success' | 'error' | 'primary' | 'warning' | 'neutral'
+
+const STATUS_COLOR: Record<Job['status'], StatusColor> = {
+  queued: 'neutral',
+  processing: 'primary',
+  downloading: 'primary',
+  transcribing: 'primary',
+  embedding: 'primary',
+  completed: 'success',
+  failed: 'error',
+  cancelled: 'warning',
+}
+
+function statusColor(s: Job['status']): StatusColor {
+  return STATUS_COLOR[s] ?? 'neutral'
 }
 
 function formatDate(dateStr: string) {
   if (!dateStr) return '-'
   try {
     return new Intl.DateTimeFormat('en-US', {
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
+      month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit',
     }).format(new Date(dateStr))
   } catch {
     return dateStr
   }
 }
 
-const columns: TableColumn<Task>[] = [
-  {
-    accessorKey: 'agent',
-    header: 'Type'
-  },
-  {
-    accessorKey: 'title',
-    header: 'Title'
-  },
-  {
-    accessorKey: 'department',
-    header: 'Department'
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status'
-  },
-  {
-    accessorKey: 'progress',
-    header: 'Progress'
-  },
-  {
-    accessorKey: 'created_at',
-    header: 'Created'
-  }
+function truncate(value: string, max = 60): string {
+  if (!value) return ''
+  return value.length > max ? value.slice(0, max - 1) + '…' : value
+}
+
+const columns: TableColumn<Job>[] = [
+  { accessorKey: 'type',       header: 'Type' },
+  { accessorKey: 'source',     header: 'Source' },
+  { accessorKey: 'status',     header: 'Status' },
+  { accessorKey: 'progress',   header: 'Progress' },
+  { accessorKey: 'created_at', header: 'Created' },
+  { accessorKey: 'actions',    header: '' },
 ]
 </script>
 
@@ -90,6 +232,24 @@ const columns: TableColumn<Task>[] = [
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
+        <template #trailing>
+          <UBadge
+            :label="wsConnected ? 'Live' : 'Offline'"
+            :color="wsConnected ? 'success' : 'neutral'"
+            variant="subtle"
+            size="xs"
+            :icon="wsConnected ? 'i-lucide-radio-tower' : 'i-lucide-radio'"
+          />
+        </template>
+        <template #right>
+          <UButton
+            label="Refresh"
+            variant="ghost"
+            icon="i-lucide-refresh-cw"
+            size="sm"
+            @click="refresh()"
+          />
+        </template>
       </UDashboardNavbar>
     </template>
 
@@ -97,17 +257,17 @@ const columns: TableColumn<Task>[] = [
       <DashboardState
         :status="status"
         :error="error"
-        loading-label="Loading tasks"
+        loading-label="Loading jobs"
         :on-retry="() => refresh()"
       >
-        <!-- Summary Cards -->
-        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <!-- Summary cards -->
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
           <div class="rounded-lg border border-default p-4 text-center">
             <p class="text-2xl font-semibold text-highlighted">{{ summary.total }}</p>
             <p class="text-xs text-muted">Total</p>
           </div>
           <div class="rounded-lg border border-default p-4 text-center">
-            <p class="text-2xl font-semibold text-primary">{{ summary.active }}</p>
+            <p class="text-2xl font-semibold text-primary">{{ summary.processing ?? 0 }}</p>
             <p class="text-xs text-muted">Active</p>
           </div>
           <div class="rounded-lg border border-default p-4 text-center">
@@ -118,77 +278,116 @@ const columns: TableColumn<Task>[] = [
             <p class="text-2xl font-semibold text-green-500">{{ summary.completed }}</p>
             <p class="text-xs text-muted">Completed</p>
           </div>
+          <div class="rounded-lg border border-default p-4 text-center">
+            <p class="text-2xl font-semibold text-red-500">{{ summary.failed }}</p>
+            <p class="text-xs text-muted">Failed</p>
+          </div>
         </div>
 
-        <!-- Status Filter Tabs -->
+        <!-- Filter tabs -->
         <div class="mt-6">
           <UTabs
             :items="tabItems"
             :model-value="activeTab"
-            @update:model-value="activeTab = $event as string"
+            @update:model-value="activeTab = $event as 'all' | 'active' | 'queued' | 'completed' | 'failed'"
           />
         </div>
 
-        <!-- Empty State -->
-        <div v-if="!tasks.length" class="mt-6 flex flex-col items-center justify-center gap-4 py-16">
-          <UIcon name="i-lucide-list-checks" class="size-16 text-muted" />
-          <h3 class="text-lg font-semibold text-highlighted">No tasks yet</h3>
-          <p class="text-sm text-muted text-center max-w-md">
-            Tasks are created when you run ArkaOS workflows. Start by indexing your project or running a command.
-          </p>
-          <div class="mt-2 rounded-lg border border-default bg-elevated/50 px-4 py-3">
-            <p class="text-xs text-muted mb-1">Try running:</p>
-            <code class="font-mono text-sm text-primary">npx arkaos index</code>
-          </div>
-        </div>
+        <!-- Global empty (no jobs at all) -->
+        <DashboardState
+          :status="status"
+          :empty="!jobs.length"
+          empty-title="No jobs yet"
+          empty-icon="i-lucide-list-checks"
+        >
+          <template #empty>
+            <UIcon name="i-lucide-list-checks" class="size-16 text-muted" />
+            <h3 class="text-lg font-semibold text-highlighted">No jobs yet</h3>
+            <p class="text-sm text-muted text-center max-w-md">
+              Jobs are created when you ingest content. Head to the Knowledge tab and paste a URL or upload a file — each one runs as a job here in real time.
+            </p>
+            <UButton
+              to="/knowledge"
+              label="Open Knowledge"
+              icon="i-lucide-brain"
+              size="md"
+              class="mt-2"
+            />
+          </template>
 
-        <!-- Filtered Empty -->
-        <div v-else-if="!filteredTasks.length" class="mt-6 flex flex-col items-center justify-center gap-4 py-12">
-          <UIcon name="i-lucide-filter-x" class="size-12 text-muted" />
-          <p class="text-sm text-muted">No {{ activeTab }} tasks found.</p>
-        </div>
-
-        <!-- Task Table -->
-        <div v-else class="mt-4">
-          <UTable
-            :data="filteredTasks"
-            :columns="columns"
-            :loading="status === 'pending'"
-            class="shrink-0"
-            :ui="{
-              base: 'table-fixed border-separate border-spacing-0',
-              thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
-              tbody: '[&>tr]:last:[&>td]:border-b-0',
-              th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-              td: 'border-b border-default'
-            }"
+          <!-- Filtered empty (jobs exist but not in this tab) -->
+          <div
+            v-if="!filteredJobs.length"
+            class="mt-6 flex flex-col items-center justify-center gap-4 py-12"
           >
-            <template #agent-cell="{ row }">
-              <UBadge :label="row.original.agent" variant="subtle" color="primary" size="sm" />
-            </template>
-            <template #department-cell="{ row }">
-              <span class="text-sm text-muted">{{ row.original.department }}</span>
-            </template>
-            <template #status-cell="{ row }">
-              <UBadge
-                :label="row.original.status"
-                :color="statusColor(row.original.status)"
-                variant="subtle"
-                size="sm"
-                class="capitalize"
-              />
-            </template>
-            <template #progress-cell="{ row }">
-              <div class="flex items-center gap-2 min-w-24">
-                <UProgress :value="row.original.progress" :max="100" size="xs" class="flex-1" />
-                <span class="text-xs text-muted font-mono w-8 text-right">{{ row.original.progress }}%</span>
-              </div>
-            </template>
-            <template #created_at-cell="{ row }">
-              <span class="text-xs text-muted">{{ formatDate(row.original.created_at) }}</span>
-            </template>
-          </UTable>
-        </div>
+            <UIcon name="i-lucide-filter-x" class="size-12 text-muted" />
+            <p class="text-sm text-muted">No {{ activeTab }} jobs found.</p>
+          </div>
+
+          <!-- Job table -->
+          <div v-else class="mt-4">
+            <UTable
+              :data="filteredJobs"
+              :columns="columns"
+              :loading="status === 'pending'"
+              class="shrink-0"
+              :ui="{
+                base: 'table-fixed border-separate border-spacing-0',
+                thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+                tbody: '[&>tr]:last:[&>td]:border-b-0',
+                th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
+                td: 'border-b border-default',
+              }"
+            >
+              <template #type-cell="{ row }">
+                <UBadge :label="row.original.type || 'unknown'" variant="subtle" color="primary" size="sm" />
+              </template>
+              <template #source-cell="{ row }">
+                <span class="text-sm font-mono" :title="row.original.source">
+                  {{ truncate(row.original.source, 50) }}
+                </span>
+                <p v-if="row.original.message" class="text-xs text-muted mt-0.5">
+                  {{ truncate(row.original.message, 60) }}
+                </p>
+                <p v-if="row.original.error" class="text-xs text-red-400 mt-0.5">
+                  {{ truncate(row.original.error, 80) }}
+                </p>
+              </template>
+              <template #status-cell="{ row }">
+                <UBadge
+                  :label="row.original.status"
+                  :color="statusColor(row.original.status)"
+                  variant="subtle"
+                  size="sm"
+                  class="capitalize"
+                />
+              </template>
+              <template #progress-cell="{ row }">
+                <div class="flex items-center gap-2 min-w-24">
+                  <UProgress :value="row.original.progress" :max="100" size="xs" class="flex-1" />
+                  <span class="text-xs text-muted font-mono w-8 text-right">
+                    {{ row.original.progress }}%
+                  </span>
+                </div>
+              </template>
+              <template #created_at-cell="{ row }">
+                <span class="text-xs text-muted">{{ formatDate(row.original.created_at) }}</span>
+              </template>
+              <template #actions-cell="{ row }">
+                <UButton
+                  v-if="isCancellable(row.original)"
+                  icon="i-lucide-x"
+                  variant="ghost"
+                  color="error"
+                  size="xs"
+                  :loading="cancelling.has(row.original.id)"
+                  aria-label="Cancel job"
+                  @click="cancelJob(row.original)"
+                />
+              </template>
+            </UTable>
+          </div>
+        </DashboardState>
       </DashboardState>
     </template>
   </UDashboardPanel>

package/dashboard/app/types/index.d.ts

@@ -95,6 +95,35 @@ export interface TaskSummary {
   completed: number
 }
 
+// PR67 v2.84.0 — Jobs shape from /api/jobs (SQLite job queue).
+// Mirrors core/jobs/manager.Job dataclass.
+export interface Job {
+  id: string
+  type: string
+  source: string
+  title: string
+  status:
+    | 'queued' | 'processing' | 'downloading' | 'transcribing'
+    | 'embedding' | 'completed' | 'failed' | 'cancelled'
+  progress: number
+  message: string
+  chunks_created: number
+  media_path: string
+  error: string
+  created_at: string
+  started_at: string
+  completed_at: string
+}
+
+export interface JobSummary {
+  total: number
+  queued: number
+  processing: number
+  completed: number
+  failed: number
+  cancelled?: number
+}
+
 export interface KnowledgeStats {
   total_chunks: number
   total_files: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "2.83.0",
+  "version": "2.85.0",
   "description": "The Operating System for AI Agent Teams",
   "type": "module",
   "bin": {

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "arkaos-core"
-version = "2.83.0"
+version = "2.85.0"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}