arkaos 2.78.0 → 2.80.0

package/VERSION

@@ -1 +1 @@
-2.78.0
+2.80.0

package/dashboard/app/components/DashboardState.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+// PR64 v2.80.0 — shared loading / error / empty wrapper.
+//
+// Every page in dashboard/app/pages/ used to duplicate the same triple:
+//
+//   <div v-if="status === 'pending'"><spinner/></div>
+//   <div v-else-if="error"><alert + Retry/></div>
+//   <template v-else>... content ...</template>
+//
+// Five copies of that pattern with subtle drift (different icon sizes,
+// different empty-state shapes, inconsistent ARIA roles, some with
+// retry buttons missing). PR64 extracts it into one component so the
+// rest of the dashboard work (PR63 Settings, PR65 Budget, PR66 Index
+// rebuild, etc.) inherits a consistent shell.
+//
+// Slots:
+//   default — the success/content block (only rendered on 'success')
+//   empty   — optional override for the empty state (defaults to
+//             generic "no data" with the empty-* props below)
+//   loading — optional override for the spinner (rarely needed)
+//   error   — optional override for the error state (rarely needed)
+//
+// The component never owns the data — pages still call useFetch /
+// fetchApi and pass `status` + `error` + an `empty` boolean in.
+
+import type { AsyncDataRequestStatus } from 'nuxt/app'
+
+interface Props {
+  /** useFetch/useAsyncData status. 'pending' shows spinner. */
+  status: AsyncDataRequestStatus
+  /** Error from useFetch — present means render the error block. */
+  error?: Error | null
+  /** True when the request succeeded but returned no rows.
+   *  Pages compute this from their data shape (e.g. `!list.length`). */
+  empty?: boolean
+  /** Heading for the default empty state. */
+  emptyTitle?: string
+  /** Helper text for the default empty state. */
+  emptyDescription?: string
+  /** Icon for the default empty state. Defaults to inbox. */
+  emptyIcon?: string
+  /** Optional retry handler — when provided, the error block shows a button. */
+  onRetry?: () => void | Promise<void>
+  /** Optional ARIA label for the loading region. */
+  loadingLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  error: null,
+  empty: false,
+  emptyTitle: 'No data',
+  emptyDescription: '',
+  emptyIcon: 'i-lucide-inbox',
+  loadingLabel: 'Loading',
+})
+</script>
+
+<template>
+  <!-- Loading -->
+  <div
+    v-if="status === 'pending'"
+    class="flex items-center justify-center py-12"
+    :aria-label="loadingLabel"
+    role="status"
+  >
+    <slot name="loading">
+      <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
+    </slot>
+  </div>
+
+  <!-- Error -->
+  <div
+    v-else-if="error"
+    class="flex flex-col items-center justify-center gap-4 py-12"
+    role="alert"
+  >
+    <slot name="error" :error="error">
+      <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
+      <p class="text-sm text-muted">
+        {{ error.message || 'Failed to load data.' }}
+      </p>
+      <UButton
+        v-if="onRetry"
+        label="Retry"
+        variant="outline"
+        color="primary"
+        icon="i-lucide-refresh-cw"
+        @click="onRetry"
+      />
+    </slot>
+  </div>
+
+  <!-- Empty -->
+  <div
+    v-else-if="empty"
+    class="flex flex-col items-center justify-center gap-4 py-16"
+  >
+    <slot name="empty">
+      <UIcon :name="emptyIcon" class="size-16 text-muted" />
+      <h3 class="text-lg font-semibold text-highlighted">{{ emptyTitle }}</h3>
+      <p
+        v-if="emptyDescription"
+        class="text-sm text-muted text-center max-w-md"
+      >
+        {{ emptyDescription }}
+      </p>
+    </slot>
+  </div>
+
+  <!-- Content -->
+  <slot v-else />
+</template>

package/dashboard/app/components/PersonaWizard.vue

@@ -0,0 +1,504 @@
+<script setup lang="ts">
+import type { Persona } from '~/types'
+
+// PR62 v2.79.0 — 4-step AI-powered persona wizard.
+// Replaces the original "fill a 30-field form" UX with:
+//   1. Sources  → operator pastes URLs / picks files, optionally types a name
+//   2. Ingest   → existing /api/knowledge/ingest-bulk fans the URLs out into
+//                 background jobs and shows progress via WebSocket
+//   3. Build    → /api/personas/build (PR57) reads the indexed chunks and
+//                 returns a draft Persona; operator reviews + edits
+//   4. Save     → POST /api/personas (manual create path), optional
+//                 clone-to-agent at the end
+//
+// The wizard NEVER auto-saves — every transition is operator-confirmed.
+
+const { apiBase } = useApi()
+const toast = useToast()
+
+const emit = defineEmits<{
+  (e: 'completed', persona: Persona): void
+  (e: 'cancelled'): void
+}>()
+
+type Step = 1 | 2 | 3 | 4
+const step = ref<Step>(1)
+
+// ─── Step 1 state ────────────────────────────────────────────────────────
+const name = ref('')
+const sourceLabel = ref('')
+const sources = ref('')
+const skipIngest = ref(false)
+const sourceLineCount = computed(() =>
+  sources.value
+    .split('\n')
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0)
+    .length,
+)
+
+// ─── Step 2 state ────────────────────────────────────────────────────────
+const ingestJobs = ref<Array<{
+  source: string
+  job_id?: string
+  status: 'queued' | 'processing' | 'completed' | 'failed'
+  progress: number
+  error?: string
+}>>([])
+let ws: WebSocket | null = null
+const allIngestComplete = computed(() =>
+  ingestJobs.value.length > 0
+  && ingestJobs.value.every((j) => j.status === 'completed' || j.status === 'failed'),
+)
+const ingestCompletedCount = computed(() =>
+  ingestJobs.value.filter((j) => j.status === 'completed').length,
+)
+
+// ─── Step 3 state ────────────────────────────────────────────────────────
+const draft = ref<Persona | null>(null)
+const building = ref(false)
+const buildError = ref<string | null>(null)
+const chunksUsed = ref<number | null>(null)
+
+// ─── Step 4 state ────────────────────────────────────────────────────────
+const saving = ref(false)
+const saveAndClone = ref(false)
+const cloneDept = ref('strategy')
+const cloneTier = ref<'1' | '2' | '3'>('2')
+
+const departmentOptions = [
+  'dev', 'marketing', 'brand', 'finance', 'strategy', 'ecom', 'kb', 'ops',
+  'pm', 'saas', 'landing', 'content', 'community', 'sales', 'leadership', 'org',
+].map((d) => ({ label: d, value: d }))
+
+const tierOptions = [
+  { label: 'Tier 1 — Squad Lead', value: '1' },
+  { label: 'Tier 2 — Specialist', value: '2' },
+  { label: 'Tier 3 — Support', value: '3' },
+]
+
+// ─── Step 1 → 2 transition ───────────────────────────────────────────────
+
+
+async function startIngest() {
+  if (skipIngest.value) {
+    // Jump straight to step 3 — operator says content is already indexed.
+    step.value = 3
+    await runBuild()
+    return
+  }
+  const cleaned = sources.value
+    .split('\n')
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0)
+  if (cleaned.length === 0 || !name.value.trim()) return
+  step.value = 2
+  ingestJobs.value = cleaned.map((source) => ({
+    source,
+    status: 'queued',
+    progress: 0,
+  }))
+  try {
+    const res = await $fetch<{ jobs: Array<{ source: string, job_id?: string, error?: string }>, count: number }>(
+      `${apiBase}/api/knowledge/ingest-bulk`,
+      { method: 'POST', body: { sources: cleaned } },
+    )
+    res.jobs.forEach((j) => {
+      const row = ingestJobs.value.find((r) => r.source === j.source)
+      if (!row) return
+      if (j.error) {
+        row.status = 'failed'
+        row.error = j.error
+      } else if (j.job_id) {
+        row.job_id = j.job_id
+        row.status = 'processing'
+      }
+    })
+    connectWebSocket()
+  } catch (err) {
+    toast.add({
+      title: 'Ingest failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+    step.value = 1
+  }
+}
+
+
+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.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data)
+      const row = ingestJobs.value.find((j) => j.job_id === data.job_id)
+      if (!row) return
+      if (data.type === 'job_progress') {
+        row.progress = data.progress
+        row.status = 'processing'
+      } else if (data.type === 'job_complete') {
+        row.status = 'completed'
+        row.progress = 100
+      } else if (data.type === 'job_failed') {
+        row.status = 'failed'
+        row.error = data.error
+      }
+    } catch { /* ignore malformed messages */ }
+  }
+}
+
+
+function disconnectWebSocket() {
+  if (ws) {
+    try { ws.close() } catch { /* already closed */ }
+    ws = null
+  }
+}
+
+
+onBeforeUnmount(() => {
+  disconnectWebSocket()
+})
+
+
+// ─── Step 3: build the persona draft ────────────────────────────────────
+
+
+async function runBuild() {
+  building.value = true
+  buildError.value = null
+  draft.value = null
+  try {
+    const res = await $fetch<{ persona: Persona, chunks_used: number, provider_name: string }>(
+      `${apiBase}/api/personas/build`,
+      {
+        method: 'POST',
+        body: {
+          name: name.value.trim(),
+          source_label: sourceLabel.value.trim() || name.value.trim(),
+        },
+      },
+    )
+    if ('error' in res && typeof (res as any).error === 'string') {
+      throw new Error((res as any).error)
+    }
+    draft.value = res.persona
+    chunksUsed.value = res.chunks_used
+    step.value = 4
+  } catch (err) {
+    buildError.value = err instanceof Error ? err.message : 'unknown error'
+  } finally {
+    building.value = false
+  }
+}
+
+
+// ─── Step 4: save + optional clone ──────────────────────────────────────
+
+
+async function savePersona() {
+  if (!draft.value) return
+  saving.value = true
+  try {
+    const created = await $fetch<Persona>(`${apiBase}/api/personas`, {
+      method: 'POST',
+      body: draft.value,
+    })
+    if (saveAndClone.value && cloneDept.value && cloneTier.value) {
+      await $fetch(`${apiBase}/api/personas/${created.id}/clone`, {
+        method: 'POST',
+        body: { department: cloneDept.value, tier: Number(cloneTier.value) },
+      })
+    }
+    toast.add({
+      title: saveAndClone.value ? 'Persona saved + agent cloned' : 'Persona saved',
+      description: `${created.name} is now in your board.`,
+      color: 'success',
+    })
+    emit('completed', created)
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+
+// ─── Auto-advance when ingest completes ─────────────────────────────────
+
+
+watch(allIngestComplete, async (done) => {
+  if (done && step.value === 2 && ingestCompletedCount.value > 0) {
+    step.value = 3
+    await runBuild()
+  }
+})
+
+
+function cancel() {
+  disconnectWebSocket()
+  emit('cancelled')
+}
+
+
+function backToStep1() {
+  disconnectWebSocket()
+  step.value = 1
+  ingestJobs.value = []
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-semibold">AI Persona Builder</h3>
+          <p class="text-sm text-muted mt-1">
+            Step {{ step }} of 4 — {{ {
+              1: 'Sources',
+              2: 'Indexing',
+              3: 'Generating DNA',
+              4: 'Review & save',
+            }[step] }}
+          </p>
+        </div>
+        <UButton
+          label="Cancel"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          @click="cancel"
+        />
+      </div>
+    </template>
+
+    <!-- Progress indicator -->
+    <div class="flex items-center gap-2 mb-6">
+      <div
+        v-for="s in [1, 2, 3, 4] as Step[]"
+        :key="s"
+        class="flex-1 h-1 rounded-full"
+        :class="s <= step ? 'bg-primary' : 'bg-muted/30'"
+      />
+    </div>
+
+    <!-- Step 1: Sources -->
+    <div v-if="step === 1" class="space-y-4">
+      <UFormField label="Person name" required>
+        <UInput
+          v-model="name"
+          placeholder="e.g. Alex Hormozi"
+          size="lg"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField label="Source label (optional)" help="How this person should appear in the persona's source field. Defaults to the name above.">
+        <UInput
+          v-model="sourceLabel"
+          placeholder="e.g. Alex Hormozi — $100M Offers / $100M Leads"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField
+        label="Sources (one URL per line)"
+        help="YouTube videos, articles, PDFs, blog posts about this person. The builder will search the indexed chunks and synthesise their behavioural DNA. Up to 50 sources per batch."
+      >
+        <UTextarea
+          v-model="sources"
+          :rows="6"
+          placeholder="https://www.youtube.com/watch?v=...&#10;https://example.com/article&#10;https://example.com/paper.pdf"
+          class="w-full font-mono text-sm"
+          :disabled="skipIngest"
+        />
+      </UFormField>
+
+      <div class="flex items-center justify-between text-xs text-muted">
+        <span>{{ sourceLineCount }} source{{ sourceLineCount === 1 ? '' : 's' }} detected</span>
+        <UCheckbox
+          v-model="skipIngest"
+          label="Skip ingest — content for this person is already in the knowledge base"
+        />
+      </div>
+
+      <div class="flex justify-end gap-2 pt-4">
+        <UButton
+          :label="skipIngest ? 'Generate from existing knowledge' : `Index ${sourceLineCount} source${sourceLineCount === 1 ? '' : 's'} & build`"
+          icon="i-lucide-arrow-right"
+          :disabled="!name.trim() || (!skipIngest && sourceLineCount === 0) || sourceLineCount > 50"
+          size="md"
+          @click="startIngest"
+        />
+      </div>
+      <p v-if="sourceLineCount > 50" class="text-xs text-red-400">
+        Over the 50-source cap. Trim the list before continuing.
+      </p>
+    </div>
+
+    <!-- Step 2: Ingest progress -->
+    <div v-else-if="step === 2" class="space-y-4">
+      <p class="text-sm text-muted">
+        Indexing {{ ingestJobs.length }} source{{ ingestJobs.length === 1 ? '' : 's' }} into the knowledge base.
+        This auto-advances when complete.
+      </p>
+      <div class="space-y-2">
+        <div
+          v-for="(job, idx) in ingestJobs"
+          :key="idx"
+          class="rounded-lg border border-default p-3"
+        >
+          <div class="flex items-center gap-3">
+            <UIcon
+              :name="{
+                queued: 'i-lucide-clock',
+                processing: 'i-lucide-loader-2 animate-spin',
+                completed: 'i-lucide-check-circle',
+                failed: 'i-lucide-x-circle',
+              }[job.status]"
+              :class="{
+                queued: 'text-muted',
+                processing: 'text-primary',
+                completed: 'text-green-500',
+                failed: 'text-red-500',
+              }[job.status]"
+              class="size-4 shrink-0"
+            />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-mono truncate">{{ job.source }}</p>
+              <UProgress
+                v-if="job.status === 'processing' || job.status === 'queued'"
+                :value="job.progress"
+                :max="100"
+                size="xs"
+                class="mt-1"
+              />
+              <p v-if="job.error" class="text-xs text-red-400 mt-1">{{ job.error }}</p>
+            </div>
+            <span class="text-xs text-muted">{{ job.progress }}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 3: Building -->
+    <div v-else-if="step === 3" class="space-y-4">
+      <div v-if="building" class="flex flex-col items-center gap-4 py-12">
+        <UIcon name="i-lucide-loader-2" class="size-12 animate-spin text-primary" />
+        <p class="text-sm text-muted">
+          Reading indexed chunks about <strong>{{ name }}</strong>…
+        </p>
+        <p class="text-xs text-muted">
+          The builder searches the vector store, joins the top chunks, and asks the configured LLM to extract a behavioural-DNA persona.
+        </p>
+      </div>
+      <div v-else-if="buildError" class="rounded-lg border border-red-500/20 bg-red-500/5 p-4">
+        <div class="flex items-start gap-3">
+          <UIcon name="i-lucide-alert-circle" class="size-5 text-red-500 mt-0.5 shrink-0" />
+          <div class="flex-1">
+            <p class="text-sm font-medium text-red-400">Build failed</p>
+            <p class="text-xs text-muted mt-1">{{ buildError }}</p>
+          </div>
+        </div>
+        <div class="flex gap-2 mt-3">
+          <UButton label="Retry" variant="outline" size="sm" @click="runBuild" />
+          <UButton label="Back to sources" variant="ghost" size="sm" @click="backToStep1" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 4: Review & save -->
+    <div v-else-if="step === 4 && draft" class="space-y-4">
+      <div class="rounded-lg border border-green-500/20 bg-green-500/5 p-3">
+        <p class="text-sm text-green-400">
+          <UIcon name="i-lucide-sparkles" class="size-4 inline" />
+          Built from <strong>{{ chunksUsed }}</strong> knowledge chunk{{ chunksUsed === 1 ? '' : 's' }}. Edit any field below before saving.
+        </p>
+      </div>
+
+      <fieldset class="space-y-3">
+        <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-2">Identity</legend>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <UFormField label="Name">
+            <UInput v-model="draft.name" class="w-full" />
+          </UFormField>
+          <UFormField label="Title">
+            <UInput v-model="draft.title" class="w-full" />
+          </UFormField>
+        </div>
+        <UFormField label="Tagline">
+          <UInput v-model="draft.tagline" class="w-full" />
+        </UFormField>
+      </fieldset>
+
+      <fieldset class="space-y-3">
+        <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-2">Behavioural DNA</legend>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <UFormField label="MBTI">
+            <UInput v-model="draft.mbti" class="w-full" />
+          </UFormField>
+          <UFormField label="DISC primary">
+            <UInput v-model="draft.disc.primary" class="w-full" />
+          </UFormField>
+          <UFormField label="Enneagram type">
+            <UInput v-model.number="draft.enneagram.type" type="number" :min="1" :max="9" class="w-full" />
+          </UFormField>
+          <UFormField label="Enneagram wing">
+            <UInput v-model.number="draft.enneagram.wing" type="number" :min="1" :max="9" class="w-full" />
+          </UFormField>
+        </div>
+      </fieldset>
+
+      <fieldset class="space-y-3">
+        <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-2">Knowledge</legend>
+        <UFormField label="Mental models" help="comma-separated">
+          <UInput
+            :model-value="draft.mental_models.join(', ')"
+            @update:model-value="(v: string) => draft && (draft.mental_models = v.split(',').map(s => s.trim()).filter(Boolean))"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Expertise domains" help="comma-separated">
+          <UInput
+            :model-value="draft.expertise_domains.join(', ')"
+            @update:model-value="(v: string) => draft && (draft.expertise_domains = v.split(',').map(s => s.trim()).filter(Boolean))"
+            class="w-full"
+          />
+        </UFormField>
+      </fieldset>
+
+      <fieldset class="space-y-3">
+        <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-2">Save options</legend>
+        <UCheckbox
+          v-model="saveAndClone"
+          label="Also clone to an agent immediately"
+        />
+        <div v-if="saveAndClone" class="grid grid-cols-2 gap-3 pl-6">
+          <UFormField label="Department">
+            <USelect v-model="cloneDept" :items="departmentOptions" class="w-full" />
+          </UFormField>
+          <UFormField label="Tier">
+            <USelect v-model="cloneTier" :items="tierOptions" class="w-full" />
+          </UFormField>
+        </div>
+      </fieldset>
+
+      <div class="flex justify-end gap-2 pt-4">
+        <UButton label="Back" variant="ghost" @click="backToStep1" />
+        <UButton
+          :label="saveAndClone ? 'Save & clone' : 'Save persona'"
+          icon="i-lucide-check"
+          :loading="saving"
+          @click="savePersona"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/dashboard/app/pages/agents/index.vue

@@ -127,26 +127,15 @@ function goToAgent(id: string) {
     </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 agents.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Empty -->
-      <div v-else-if="!agents.length" class="flex flex-col items-center justify-center gap-4 py-12">
-        <UIcon name="i-lucide-users" class="size-12 text-muted" />
-        <p class="text-sm text-muted">No agents found.</p>
-      </div>
-
-      <!-- Content -->
-      <template v-else>
+      <DashboardState
+        :status="status"
+        :error="error"
+        :empty="!agents.length"
+        empty-title="No agents found"
+        empty-icon="i-lucide-users"
+        loading-label="Loading agents"
+        :on-retry="() => refresh()"
+      >
         <div class="flex flex-wrap items-center gap-3 mb-4">
           <UInput
             v-model="search"
@@ -219,7 +208,7 @@ function goToAgent(id: string) {
             @update:page="(val) => page = val"
           />
         </div>
-      </template>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/dashboard/app/pages/budget.vue

@@ -37,17 +37,13 @@ const tierLabels: Record<number, string> = {
     </template>
 
     <template #body>
-      <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>
-
-      <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 budget data.</p>
-        <UButton label="Retry" variant="outline" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <div v-else class="space-y-6">
+      <DashboardState
+        :status="status"
+        :error="error"
+        loading-label="Loading budget"
+        :on-retry="() => refresh()"
+      >
+      <div class="space-y-6">
         <!-- Monthly Summary -->
         <UCard>
           <div class="space-y-3">
@@ -127,6 +123,7 @@ const tierLabels: Record<number, string> = {
           </div>
         </div>
       </div>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/dashboard/app/pages/health.vue

@@ -30,26 +30,15 @@ const allPassed = computed(() => passed.value === total.value && total.value > 0
     </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 health checks.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Empty -->
-      <div v-else-if="!checks.length" class="flex flex-col items-center justify-center gap-4 py-12">
-        <UIcon name="i-lucide-heart-pulse" class="size-12 text-muted" />
-        <p class="text-sm text-muted">No health checks available.</p>
-      </div>
-
-      <!-- Content -->
-      <template v-else>
+      <DashboardState
+        :status="status"
+        :error="error"
+        :empty="!checks.length"
+        empty-title="No health checks available"
+        empty-icon="i-lucide-heart-pulse"
+        loading-label="Loading health checks"
+        :on-retry="() => refresh()"
+      >
         <!-- Overall Status -->
         <div
           class="mb-6 rounded-lg border p-6 text-center"
@@ -92,7 +81,7 @@ const allPassed = computed(() => passed.value === total.value && total.value > 0
             />
           </div>
         </div>
-      </template>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/dashboard/app/pages/index.vue

@@ -39,20 +39,12 @@ function formatCurrency(value: number): string {
     </template>
 
     <template #body>
-      <!-- Loading State -->
-      <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 State -->
-      <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 overview data.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Content -->
-      <template v-else>
+      <DashboardState
+        :status="status"
+        :error="error"
+        loading-label="Loading overview"
+        :on-retry="() => refresh()"
+      >
         <!-- Stats Grid -->
         <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
           <div
@@ -120,7 +112,7 @@ function formatCurrency(value: number): string {
             </div>
           </div>
         </div>
-      </template>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/dashboard/app/pages/personas.vue

@@ -9,8 +9,30 @@ const { data, status, error, refresh } = fetchApi<{ personas: Persona[]; total:
 
 const personas = computed(() => data.value?.personas ?? [])
 
-// --- Form visibility ---
-const showForm = ref(false)
+// --- Creation mode ---
+// PR62 v2.79.0 — three modes: list (default), wizard (AI builder), manual.
+// The wizard is the new primary path; manual stays as fallback for
+// operators who want to type every DNA field by hand.
+type CreateMode = 'list' | 'wizard' | 'manual'
+const createMode = ref<CreateMode>('list')
+const showForm = computed(() => createMode.value === 'manual')
+
+function startWizard() {
+  createMode.value = 'wizard'
+}
+
+function startManual() {
+  createMode.value = 'manual'
+}
+
+function cancelCreation() {
+  createMode.value = 'list'
+}
+
+async function onWizardComplete() {
+  createMode.value = 'list'
+  await refresh()
+}
 
 // --- Form state ---
 function defaultForm() {
@@ -216,11 +238,29 @@ function discColor(disc: string): string {
 
         <template #right>
           <UButton
-            :label="showForm ? 'Cancel' : 'New Persona'"
-            :icon="showForm ? 'i-lucide-x' : 'i-lucide-plus'"
-            :variant="showForm ? 'ghost' : 'solid'"
+            v-if="createMode === 'list'"
+            label="AI Builder"
+            icon="i-lucide-sparkles"
+            color="primary"
+            size="sm"
+            @click="startWizard"
+          />
+          <UButton
+            v-if="createMode === 'list'"
+            label="Manual"
+            icon="i-lucide-plus"
+            variant="outline"
+            size="sm"
+            class="ml-2"
+            @click="startManual"
+          />
+          <UButton
+            v-else
+            label="Back to list"
+            icon="i-lucide-arrow-left"
+            variant="ghost"
             size="sm"
-            @click="showForm = !showForm"
+            @click="cancelCreation"
           />
         </template>
       </UDashboardNavbar>
@@ -242,7 +282,15 @@ function discColor(disc: string): string {
 
       <!-- Content -->
       <template v-else>
-        <!-- Create Persona Form -->
+        <!-- PR62: AI Persona Wizard -->
+        <PersonaWizard
+          v-if="createMode === 'wizard'"
+          class="mb-8"
+          @completed="onWizardComplete"
+          @cancelled="cancelCreation"
+        />
+
+        <!-- Manual create form (legacy / fallback) -->
         <UCard v-if="showForm" class="mb-8">
           <form @submit.prevent="createPersona" class="space-y-8 p-2">
             <!-- Identity -->

package/dashboard/app/pages/tasks.vue

@@ -94,20 +94,12 @@ const columns: TableColumn<Task>[] = [
     </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 tasks.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Content -->
-      <template v-else>
+      <DashboardState
+        :status="status"
+        :error="error"
+        loading-label="Loading tasks"
+        :on-retry="() => refresh()"
+      >
         <!-- Summary Cards -->
         <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
           <div class="rounded-lg border border-default p-4 text-center">
@@ -197,7 +189,7 @@ const columns: TableColumn<Task>[] = [
             </template>
           </UTable>
         </div>
-      </template>
+      </DashboardState>
     </template>
   </UDashboardPanel>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "2.78.0",
+  "version": "2.80.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.78.0"
+version = "2.80.0"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}