arkaos 3.70.6 → 3.70.8

package/VERSION

@@ -1 +1 @@
-3.70.6
+3.70.8

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

@@ -89,7 +89,7 @@ function formatCost(cost: number | null): string {
             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: { original: DeptRow }) => navigateTo(`/departments/${row.original.department}`)"
+          @select="(_e: Event, row: { original: DeptRow }) => row?.original && navigateTo(`/departments/${row.original.department}`)"
         >
           <template #department-cell="{ row }">
             <span class="font-semibold capitalize">{{ row.original.department }}</span>

package/dashboard/app/pages/personas/[id].vue

@@ -308,10 +308,48 @@ function markedHtml(src: string): string {
 }
 
 // PR90a v3.31.0 — download persona as Markdown.
-const downloadingMd = ref(false)
+// v3.70.8 — instead of triggering a download, open a fullscreen
+// dialog with raw markdown + live preview + Edit Bio + Download.
+import { marked } from 'marked'
+
+const mdOpen = ref(false)
+const mdLoading = ref(false)
+const mdRaw = ref('')
+const mdMode = ref<'view' | 'edit'>('view')
+const mdBioDraft = ref('')
+const mdSaving = ref(false)
+
+async function openMdViewer() {
+  if (!detail.value) return
+  mdOpen.value = true
+  mdMode.value = 'view'
+  mdBioDraft.value = detail.value.bio_md || ''
+  if (mdRaw.value) return
+  mdLoading.value = true
+  try {
+    const text = await $fetch<string>(
+      `${apiBase}/api/personas/${personaId}/markdown`,
+      { responseType: 'text' },
+    )
+    mdRaw.value = typeof text === 'string' ? text : String(text ?? '')
+  } catch (err) {
+    toast.add({
+      title: 'Markdown fetch failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+    mdOpen.value = false
+  } finally {
+    mdLoading.value = false
+  }
+}
+
+function closeMdViewer() {
+  mdOpen.value = false
+}
+
 async function downloadMarkdown() {
   if (!detail.value) return
-  downloadingMd.value = true
   try {
     const blob = await $fetch<Blob>(
       `${apiBase}/api/personas/${personaId}/markdown`,
@@ -337,11 +375,60 @@ async function downloadMarkdown() {
       description: err instanceof Error ? err.message : 'unknown error',
       color: 'error',
     })
+  }
+}
+
+async function copyMd() {
+  if (!mdRaw.value) return
+  try {
+    await navigator.clipboard.writeText(mdRaw.value)
+    toast.add({ title: 'Copied to clipboard', color: 'success', icon: 'i-lucide-check' })
+  } catch {
+    toast.add({ title: 'Copy failed', color: 'error' })
+  }
+}
+
+const mdPreviewHtml = computed<string>(() => {
+  const source = mdMode.value === 'edit' ? mdBioDraft.value : mdRaw.value
+  if (!source) return ''
+  try {
+    return marked.parse(source, { breaks: true, gfm: true }) as string
+  } catch {
+    return ''
+  }
+})
+
+async function saveBio() {
+  if (!detail.value) return
+  mdSaving.value = true
+  try {
+    await $fetch(`${apiBase}/api/personas/${personaId}`, {
+      method: 'PUT',
+      body: { bio_md: mdBioDraft.value },
+    })
+    toast.add({ title: 'Bio updated', color: 'success', icon: 'i-lucide-check' })
+    mdRaw.value = '' // force refetch on next open so the export reflects the new bio
+    mdMode.value = 'view'
+    await refresh()
+    // Re-pull the exported MD now that the bio changed.
+    const text = await $fetch<string>(
+      `${apiBase}/api/personas/${personaId}/markdown`,
+      { responseType: 'text' },
+    )
+    mdRaw.value = typeof text === 'string' ? text : String(text ?? '')
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
   } finally {
-    downloadingMd.value = false
+    mdSaving.value = false
   }
 }
 
+const downloadingMd = ref(false) // kept for the old button binding
+
 // PR85a v3.11.0 — Clone to Agent dialog.
 const cloneOpen = ref(false)
 function onCloned(agentId: string) {
@@ -689,11 +776,10 @@ const vocabOptions = [
                     />
                     <UButton
                       label="MD"
-                      icon="i-lucide-download"
+                      icon="i-lucide-file-text"
                       variant="ghost"
                       size="sm"
-                      :loading="downloadingMd"
-                      @click="downloadMarkdown"
+                      @click="openMdViewer"
                     />
                     <UButton label="Edit" icon="i-lucide-pencil" size="sm" @click="startEdit" />
                     <UButton
@@ -1265,5 +1351,196 @@ const vocabOptions = [
         </div>
       </DashboardState>
     </template>
+
+    <!-- v3.70.8 — Markdown viewer/editor (fullscreen) -->
+    <UModal
+      v-model:open="mdOpen"
+      :ui="{
+        overlay: 'bg-default/80 backdrop-blur-sm',
+        content: 'sm:max-w-[95vw] w-[95vw] h-[92vh] sm:rounded-xl ring-0 shadow-2xl',
+      }"
+    >
+      <template #content>
+        <div class="flex flex-col h-full bg-default rounded-xl overflow-hidden">
+          <div class="flex items-center gap-3 px-4 py-3 border-b border-default/60 shrink-0">
+            <UIcon name="i-lucide-file-text" class="size-4 text-muted shrink-0" />
+            <span class="text-sm font-semibold">{{ detail?.name || personaId }}.md</span>
+            <UBadge
+              :label="mdMode === 'edit' ? 'editing bio' : 'preview'"
+              :color="mdMode === 'edit' ? 'warning' : 'neutral'"
+              variant="subtle"
+              size="xs"
+              class="ml-1"
+            />
+            <span class="ml-auto flex items-center gap-1">
+              <UButton
+                v-if="mdMode === 'view'"
+                size="sm"
+                variant="ghost"
+                icon="i-lucide-clipboard"
+                @click="copyMd"
+              >
+                Copy
+              </UButton>
+              <UButton
+                v-if="mdMode === 'view'"
+                size="sm"
+                variant="ghost"
+                icon="i-lucide-download"
+                @click="downloadMarkdown"
+              >
+                Download
+              </UButton>
+              <UButton
+                v-if="mdMode === 'view'"
+                size="sm"
+                variant="soft"
+                icon="i-lucide-pencil"
+                @click="mdMode = 'edit'"
+              >
+                Edit bio
+              </UButton>
+              <UButton
+                v-else
+                size="sm"
+                variant="ghost"
+                @click="() => { mdMode = 'view'; mdBioDraft = detail?.bio_md || '' }"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                v-if="mdMode === 'edit'"
+                size="sm"
+                color="primary"
+                icon="i-lucide-check"
+                :loading="mdSaving"
+                @click="saveBio"
+              >
+                Save bio
+              </UButton>
+              <UButton
+                size="sm"
+                variant="ghost"
+                icon="i-lucide-x"
+                aria-label="Close"
+                @click="closeMdViewer"
+              />
+            </span>
+          </div>
+
+          <div
+            v-if="mdLoading"
+            class="flex-1 grid place-items-center text-sm text-muted"
+          >
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-loader-2" class="size-4 animate-spin" />
+              Loading markdown…
+            </div>
+          </div>
+
+          <div v-else class="flex-1 grid grid-cols-2 min-h-0">
+            <!-- Source side: read-only in view mode, textarea in edit mode -->
+            <div class="border-r border-default/60 flex flex-col min-h-0">
+              <div class="px-3 py-1.5 border-b border-default/60 text-[11px] uppercase tracking-wide text-muted shrink-0">
+                {{ mdMode === 'edit' ? 'Bio (editable, supports Markdown)' : 'Source' }}
+              </div>
+              <textarea
+                v-if="mdMode === 'edit'"
+                v-model="mdBioDraft"
+                class="md-editor flex-1 w-full p-4 bg-transparent text-default font-mono text-sm leading-relaxed resize-none focus:outline-none"
+                spellcheck="false"
+                placeholder="Write the persona bio here…"
+              />
+              <pre
+                v-else
+                class="flex-1 min-h-0 overflow-auto p-4 font-mono text-sm leading-relaxed text-default whitespace-pre-wrap"
+              >{{ mdRaw }}</pre>
+            </div>
+
+            <!-- Preview side -->
+            <div class="flex flex-col min-h-0">
+              <div class="px-3 py-1.5 border-b border-default/60 text-[11px] uppercase tracking-wide text-muted shrink-0">
+                Preview
+              </div>
+              <div
+                class="md-preview flex-1 min-h-0 overflow-auto p-6 prose prose-sm prose-invert max-w-none"
+                v-html="mdPreviewHtml"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </UModal>
   </UDashboardPanel>
 </template>
+
+<style scoped>
+.md-editor:focus,
+.md-editor:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.md-preview :deep(h1),
+.md-preview :deep(h2),
+.md-preview :deep(h3) {
+  font-weight: 600;
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  color: rgb(var(--ui-text));
+}
+.md-preview :deep(h1) { font-size: 1.5rem; }
+.md-preview :deep(h2) { font-size: 1.25rem; }
+.md-preview :deep(h3) { font-size: 1.05rem; }
+.md-preview :deep(p) { margin: 0.5em 0; line-height: 1.6; }
+.md-preview :deep(ul),
+.md-preview :deep(ol) { padding-left: 1.25rem; margin: 0.5em 0; }
+.md-preview :deep(li) { margin: 0.2em 0; }
+.md-preview :deep(code) {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  background-color: rgb(var(--ui-bg-elevated) / 0.6);
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  font-size: 0.875em;
+}
+.md-preview :deep(pre) {
+  background-color: rgb(var(--ui-bg-elevated) / 0.4);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+.md-preview :deep(pre code) {
+  background: transparent;
+  padding: 0;
+}
+.md-preview :deep(blockquote) {
+  border-left: 3px solid rgb(var(--ui-primary) / 0.5);
+  padding-left: 0.75rem;
+  margin: 0.75em 0;
+  color: rgb(var(--ui-text-muted));
+}
+.md-preview :deep(a) {
+  color: rgb(var(--ui-primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.md-preview :deep(table) {
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  font-size: 0.875em;
+}
+.md-preview :deep(th),
+.md-preview :deep(td) {
+  border: 1px solid rgb(var(--ui-border));
+  padding: 0.4em 0.7em;
+}
+.md-preview :deep(th) {
+  background-color: rgb(var(--ui-bg-elevated) / 0.4);
+  font-weight: 600;
+}
+.md-preview :deep(hr) {
+  border: none;
+  border-top: 1px solid rgb(var(--ui-border));
+  margin: 1.25em 0;
+}
+</style>

package/dashboard/app/pages/personas/compare.vue

@@ -1,16 +1,51 @@
 <script setup lang="ts">
 // PR96c v3.57.0 — Compare two personas side-by-side.
+// v3.70.8 — picker UI when query params are missing (was blank before).
 //
-// Driven by `?a=p1&b=p2`. Mirrors the agents/compare layout but
-// adapts to the persona schema (flat mental_models, no department).
+// Driven by `?a=p1&b=p2`. The page renders pickers when either id is
+// missing so the operator can land on /personas/compare directly.
 
 const route = useRoute()
+const router = useRouter()
 const { fetchApi } = useApi()
 
-const ids = computed<string[]>(() => {
-  const raw = [route.query.a, route.query.b]
-  return raw.map((v) => String(v ?? '').trim()).filter(Boolean).slice(0, 2)
-})
+interface PersonaSummary {
+  id: string
+  name: string
+  title?: string
+}
+
+const { data: listData, status: listStatus } = fetchApi<{ personas: PersonaSummary[] }>(
+  '/api/personas',
+)
+const personaList = computed(() => listData.value?.personas ?? [])
+const loadingList = computed(() => listStatus.value === 'pending')
+
+const personaOptions = computed(() =>
+  personaList.value.map((p) => ({
+    label: p.name + (p.title ? ` — ${p.title}` : ''),
+    value: p.id,
+  })),
+)
+
+const leftId = computed(() => String(route.query.a ?? '').trim())
+const rightId = computed(() => String(route.query.b ?? '').trim())
+
+function setLeft(id: string) {
+  router.replace({ query: { ...route.query, a: id || undefined } })
+}
+function setRight(id: string) {
+  router.replace({ query: { ...route.query, b: id || undefined } })
+}
+function swapSides() {
+  router.replace({
+    query: { ...route.query, a: rightId.value || undefined, b: leftId.value || undefined },
+  })
+}
+
+const ids = computed<string[]>(() =>
+  [leftId.value, rightId.value].filter(Boolean).slice(0, 2),
+)
 
 interface PersonaDetail {
   id: string
@@ -46,11 +81,11 @@ const { data: b, status: bStatus } = fetchApi<PersonaDetail>(
 
 const loading = computed(() => aStatus.value === 'pending' || bStatus.value === 'pending')
 const errorMsg = computed(() => {
-  if (ids.value.length < 2) return 'Pass two persona ids via ?a=p1&b=p2'
   if (a.value?.error) return `Left: ${a.value.error}`
   if (b.value?.error) return `Right: ${b.value.error}`
   return null
 })
+const bothSelected = computed(() => leftId.value && rightId.value)
 
 function diffClass(left: unknown, right: unknown): string {
   return left !== right ? 'bg-yellow-500/10 border-yellow-500/30' : ''
@@ -78,13 +113,95 @@ const bigFiveKeys = ['openness', 'conscientiousness', 'extraversion', 'agreeable
     </template>
 
     <template #body>
-      <div v-if="errorMsg" class="p-6 text-center text-sm text-error">
-        {{ errorMsg }}
-      </div>
-      <div v-else-if="loading" class="p-6 text-center text-sm text-muted">
-        <UIcon name="i-lucide-loader-2" class="size-4 animate-spin inline" /> Loading…
-      </div>
-      <div v-else-if="a && b" class="space-y-4 max-w-6xl">
+      <div class="p-4 space-y-4">
+        <!-- Empty state: no personas at all -->
+        <div
+          v-if="!loadingList && personaList.length === 0"
+          class="rounded-xl border border-default p-12 text-center"
+        >
+          <UIcon name="i-lucide-users" class="size-10 mx-auto mb-3 text-muted opacity-50" />
+          <p class="text-default font-medium">No personas to compare yet.</p>
+          <p class="text-sm text-muted mt-1">
+            Create at least two personas before using the compare view.
+          </p>
+          <UButton to="/personas" class="mt-4" icon="i-lucide-arrow-left">
+            Back to personas
+          </UButton>
+        </div>
+
+        <!-- Empty state: only 1 persona -->
+        <div
+          v-else-if="!loadingList && personaList.length < 2"
+          class="rounded-xl border border-default p-12 text-center"
+        >
+          <UIcon name="i-lucide-users" class="size-10 mx-auto mb-3 text-muted opacity-50" />
+          <p class="text-default font-medium">You need at least 2 personas.</p>
+          <p class="text-sm text-muted mt-1">
+            Currently {{ personaList.length }} persona in the system.
+          </p>
+          <UButton to="/personas/new" class="mt-4" icon="i-lucide-plus">
+            Create another persona
+          </UButton>
+        </div>
+
+        <!-- Pickers (always visible when we have 2+ personas) -->
+        <div v-else class="space-y-4">
+          <div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end">
+            <div>
+              <label class="text-xs text-muted uppercase tracking-wide mb-1 block">Left</label>
+              <USelectMenu
+                :model-value="leftId"
+                :items="personaOptions"
+                placeholder="Pick a persona…"
+                value-key="value"
+                class="w-full"
+                @update:model-value="(v: any) => setLeft(typeof v === 'string' ? v : (v?.value ?? ''))"
+              />
+            </div>
+            <UButton
+              icon="i-lucide-arrow-left-right"
+              variant="ghost"
+              size="sm"
+              class="mb-0.5"
+              :disabled="!bothSelected"
+              title="Swap sides"
+              @click="swapSides"
+            />
+            <div>
+              <label class="text-xs text-muted uppercase tracking-wide mb-1 block">Right</label>
+              <USelectMenu
+                :model-value="rightId"
+                :items="personaOptions"
+                placeholder="Pick a persona…"
+                value-key="value"
+                class="w-full"
+                @update:model-value="(v: any) => setRight(typeof v === 'string' ? v : (v?.value ?? ''))"
+              />
+            </div>
+          </div>
+
+          <!-- Hint when not both selected -->
+          <div
+            v-if="!bothSelected"
+            class="rounded-xl border border-default border-dashed p-10 text-center text-sm text-muted"
+          >
+            <UIcon name="i-lucide-columns-2" class="size-7 mx-auto mb-2 opacity-50" />
+            Pick two personas above to see the side-by-side diff.
+          </div>
+
+          <!-- Error from detail fetch -->
+          <div v-else-if="errorMsg" class="p-4 text-sm text-error border border-error/30 rounded-lg">
+            {{ errorMsg }}
+          </div>
+
+          <!-- Loading detail -->
+          <div v-else-if="loading" class="p-6 text-center text-sm text-muted">
+            <UIcon name="i-lucide-loader-2" class="size-4 animate-spin inline mr-2" />
+            Loading personas…
+          </div>
+
+          <!-- Comparison content -->
+          <div v-else-if="a && b" class="space-y-4 max-w-6xl">
         <section class="grid grid-cols-2 gap-3">
           <NuxtLink :to="`/personas/${a.id}`" class="rounded-lg border border-default p-4 hover:border-primary/40">
             <p class="text-xs text-muted uppercase tracking-wide">Left</p>
@@ -207,6 +324,8 @@ const bigFiveKeys = ['openness', 'conscientiousness', 'extraversion', 'agreeable
         <p class="text-xs text-muted pt-4 italic">
           Yellow tint = different. Red removed, green added.
         </p>
+          </div>
+        </div>
       </div>
     </template>
   </UDashboardPanel>

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

@@ -133,7 +133,8 @@ const columns: TableColumn<Persona>[] = [
   { id: 'actions',             header: '' },
 ]
 
-function goToPersona(id: string) {
+function goToPersona(id: string | undefined | null) {
+  if (!id) return
   navigateTo(`/personas/${id}`)
 }
 
@@ -617,7 +618,7 @@ async function undoTrashIds(ids: string[]) {
             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: { original: Persona }) => goToPersona(row.original.id)"
+          @select="(_e: Event, row: { original: Persona }) => goToPersona(row?.original?.id)"
         >
           <template #select-header>
             <UCheckbox

package/dashboard/app/pages/workflows.vue

@@ -241,7 +241,7 @@ const columns: TableColumn<Workflow>[] = [
               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: { original: Workflow }) => { selected = row.original; sidePanelTab = 'flow'; runs = []; editingYaml = false; loadRuns(row.original.id) }"
+            @select="(_e: Event, row: { original: Workflow }) => { if (!row?.original) return; selected = row.original; sidePanelTab = 'flow'; runs = []; editingYaml = false; loadRuns(row.original.id) }"
           >
             <template #name-cell="{ row }">
               <div class="min-w-0">

package/package.json

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

package/pyproject.toml

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

package/dashboard/app/pages/personas.vue

@@ -1,719 +0,0 @@
-<script setup lang="ts">
-import type { Persona } from '~/types'
-
-const { fetchApi, apiBase } = useApi()
-const toast = useToast()
-
-// --- Fetch personas (no await — non-blocking) ---
-const { data, status, error, refresh } = fetchApi<{ personas: Persona[]; total: number }>('/api/personas')
-
-const personas = computed(() => data.value?.personas ?? [])
-
-// PR74 v2.92.0 — detail/edit drawer state
-const detailOpen = ref(false)
-const detailPersonaId = ref<string | null>(null)
-
-// PR77 v2.95.0 — reverse-usage (which agents link to each persona).
-const { data: usageData } = fetchApi<{
-  by_persona: Record<string, { agent_count: number, agent_ids: string[] }>
-}>('/api/personas/usage')
-
-function personaAgentCount(personaId: string): number {
-  return usageData.value?.by_persona?.[personaId]?.agent_count ?? 0
-}
-
-function mbtiGradient(mbti: string | undefined): string {
-  if (!mbti) return 'bg-gradient-to-br from-muted/20 to-muted/5'
-  const code = mbti.toUpperCase()
-  if (['INTJ', 'INTP', 'ENTJ', 'ENTP'].includes(code))
-    return 'bg-gradient-to-br from-blue-500/25 to-indigo-600/10'
-  if (['INFJ', 'INFP', 'ENFJ', 'ENFP'].includes(code))
-    return 'bg-gradient-to-br from-emerald-500/25 to-teal-600/10'
-  if (['ISTJ', 'ISFJ', 'ESTJ', 'ESFJ'].includes(code))
-    return 'bg-gradient-to-br from-amber-500/25 to-orange-600/10'
-  if (['ISTP', 'ISFP', 'ESTP', 'ESFP'].includes(code))
-    return 'bg-gradient-to-br from-rose-500/25 to-pink-600/10'
-  return 'bg-gradient-to-br from-primary/20 to-primary/5'
-}
-
-function personaInitials(name: string): string {
-  if (!name) return '·'
-  const parts = name.trim().split(/\s+/)
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
-}
-
-function openDetail(persona: Persona) {
-  detailPersonaId.value = persona.id
-  detailOpen.value = true
-}
-
-async function onDetailSaved() {
-  await refresh()
-}
-
-async function onDetailDeleted(_id: string) {
-  await refresh()
-}
-
-// --- 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() {
-  return {
-    name: '',
-    title: '',
-    source: '',
-    tagline: '',
-    mbti: '',
-    disc_primary: '',
-    disc_secondary: '',
-    enneagram_type: '',
-    enneagram_wing: '',
-    big_five_o: 50,
-    big_five_c: 50,
-    big_five_e: 50,
-    big_five_a: 50,
-    big_five_n: 50,
-    mental_models: '',
-    expertise_domains: '',
-    frameworks: '',
-    communication_tone: '',
-  }
-}
-
-const form = ref(defaultForm())
-const creating = ref(false)
-
-// --- Options ---
-const mbtiTypes = [
-  'INTJ', 'INTP', 'ENTJ', 'ENTP',
-  'INFJ', 'INFP', 'ENFJ', 'ENFP',
-  'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
-  'ISTP', 'ISFP', 'ESTP', 'ESFP',
-].map(t => ({ label: t, value: t }))
-
-const discTypes = [
-  { label: 'D — Dominance', value: 'D' },
-  { label: 'I — Influence', value: 'I' },
-  { label: 'S — Steadiness', value: 'S' },
-  { label: 'C — Conscientiousness', value: 'C' },
-]
-
-const enneagramTypes = Array.from({ length: 9 }, (_, i) => ({
-  label: `Type ${i + 1}`,
-  value: String(i + 1),
-}))
-
-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 Leads', value: '1' },
-  { label: 'Tier 2 — Specialists', value: '2' },
-  { label: 'Tier 3 — Support', value: '3' },
-]
-
-// --- Create persona ---
-async function createPersona() {
-  if (!form.value.name.trim()) return
-
-  creating.value = true
-  try {
-    await $fetch(`${apiBase}/api/personas`, {
-      method: 'POST',
-      body: {
-        name: form.value.name,
-        title: form.value.title,
-        source: form.value.source,
-        tagline: form.value.tagline,
-        mbti: form.value.mbti,
-        disc: {
-          primary: form.value.disc_primary,
-          secondary: form.value.disc_secondary,
-        },
-        enneagram: {
-          type: form.value.enneagram_type ? Number(form.value.enneagram_type) : null,
-          wing: form.value.enneagram_wing ? Number(form.value.enneagram_wing) : null,
-        },
-        big_five: {
-          openness: form.value.big_five_o,
-          conscientiousness: form.value.big_five_c,
-          extraversion: form.value.big_five_e,
-          agreeableness: form.value.big_five_a,
-          neuroticism: form.value.big_five_n,
-        },
-        mental_models: form.value.mental_models
-          ? form.value.mental_models.split(',').map(s => s.trim()).filter(Boolean)
-          : [],
-        expertise_domains: form.value.expertise_domains
-          ? form.value.expertise_domains.split(',').map(s => s.trim()).filter(Boolean)
-          : [],
-        frameworks: form.value.frameworks
-          ? form.value.frameworks.split(',').map(s => s.trim()).filter(Boolean)
-          : [],
-        communication: {
-          tone: form.value.communication_tone,
-        },
-      },
-    })
-
-    toast.add({ title: 'Persona created', description: `${form.value.name} has been added.`, color: 'success' })
-    form.value = defaultForm()
-    showForm.value = false
-    await refresh()
-  } catch {
-    toast.add({ title: 'Error', description: 'Failed to create persona.', color: 'error' })
-  } finally {
-    creating.value = false
-  }
-}
-
-// --- Delete persona ---
-const deleting = ref<string | null>(null)
-
-async function deletePersona(persona: Persona) {
-  deleting.value = persona.id
-  try {
-    await $fetch(`${apiBase}/api/personas/${persona.id}`, { method: 'DELETE' })
-    toast.add({ title: 'Persona deleted', description: `${persona.name} has been removed.`, color: 'success' })
-    await refresh()
-  } catch {
-    toast.add({ title: 'Error', description: 'Failed to delete persona.', color: 'error' })
-  } finally {
-    deleting.value = null
-  }
-}
-
-// --- Clone to agent (inline expansion, no modal) ---
-const cloneExpandedId = ref<string | null>(null)
-const cloneDepartment = ref('')
-const cloneTier = ref('')
-const cloning = ref(false)
-
-function toggleClone(persona: Persona) {
-  if (cloneExpandedId.value === persona.id) {
-    cloneExpandedId.value = null
-  } else {
-    cloneExpandedId.value = persona.id
-    cloneDepartment.value = ''
-    cloneTier.value = ''
-  }
-}
-
-async function cloneToAgent(persona: Persona) {
-  if (!cloneDepartment.value || !cloneTier.value) return
-
-  cloning.value = true
-  try {
-    await $fetch(`${apiBase}/api/personas/${persona.id}/clone`, {
-      method: 'POST',
-      body: {
-        department: cloneDepartment.value,
-        tier: Number(cloneTier.value),
-      },
-    })
-    toast.add({
-      title: 'Agent created',
-      description: `${persona.name} cloned to ${cloneDepartment.value} department.`,
-      color: 'success',
-    })
-    cloneExpandedId.value = null
-    await refresh()
-  } catch {
-    toast.add({ title: 'Error', description: 'Failed to clone persona to agent.', color: 'error' })
-  } finally {
-    cloning.value = false
-  }
-}
-
-// --- DNA badge colors ---
-function mbtiColor(mbti: string): string {
-  if (!mbti) return 'neutral'
-  const analysts = ['INTJ', 'INTP', 'ENTJ', 'ENTP']
-  const diplomats = ['INFJ', 'INFP', 'ENFJ', 'ENFP']
-  const sentinels = ['ISTJ', 'ISFJ', 'ESTJ', 'ESFJ']
-  if (analysts.includes(mbti)) return 'primary'
-  if (diplomats.includes(mbti)) return 'success'
-  if (sentinels.includes(mbti)) return 'warning'
-  return 'error'
-}
-
-function discColor(disc: string): string {
-  const colors: Record<string, string> = { D: 'error', I: 'warning', S: 'success', C: 'primary' }
-  return colors[disc] ?? 'neutral'
-}
-</script>
-
-<template>
-  <UDashboardPanel id="personas">
-    <template #header>
-      <UDashboardNavbar title="Personas">
-        <template #leading>
-          <UDashboardSidebarCollapse />
-        </template>
-
-        <template #trailing>
-          <UBadge v-if="data?.total" :label="data.total" variant="subtle" />
-        </template>
-
-        <template #right>
-          <UButton
-            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="cancelCreation"
-          />
-        </template>
-      </UDashboardNavbar>
-    </template>
-
-    <template #body>
-      <div class="overflow-y-auto h-[calc(100vh-4rem)]">
-      <!-- Loading -->
-      <div v-if="status === 'pending'" class="flex items-center justify-center py-12" aria-label="Loading personas">
-        <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 personas.</p>
-        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
-      </div>
-
-      <!-- Content -->
-      <template v-else>
-        <!-- 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 -->
-            <fieldset>
-              <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-4">Identity</legend>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <UFormField label="Name" required>
-                  <UInput
-                    v-model="form.name"
-                    placeholder="e.g. Alex Hormozi"
-                    aria-label="Persona name"
-                    class="w-full"
-                    required
-                  />
-                </UFormField>
-                <UFormField label="Title">
-                  <UInput
-                    v-model="form.title"
-                    placeholder="e.g. Business Strategy"
-                    aria-label="Persona title"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Source">
-                  <UInput
-                    v-model="form.source"
-                    placeholder="e.g. Alex Hormozi"
-                    aria-label="Persona source"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Tagline">
-                  <UInput
-                    v-model="form.tagline"
-                    placeholder="e.g. The Natural Commander"
-                    aria-label="Persona tagline"
-                    class="w-full"
-                  />
-                </UFormField>
-              </div>
-            </fieldset>
-
-            <!-- Behavioral DNA -->
-            <fieldset>
-              <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-4">Behavioral DNA</legend>
-              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-                <UFormField label="MBTI">
-                  <USelect
-                    v-model="form.mbti"
-                    :items="mbtiTypes"
-                    placeholder="Select MBTI"
-                    aria-label="MBTI type"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="DISC Primary">
-                  <USelect
-                    v-model="form.disc_primary"
-                    :items="discTypes"
-                    placeholder="Primary"
-                    aria-label="DISC primary type"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="DISC Secondary">
-                  <USelect
-                    v-model="form.disc_secondary"
-                    :items="discTypes"
-                    placeholder="Secondary"
-                    aria-label="DISC secondary type"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Enneagram Type">
-                  <USelect
-                    v-model="form.enneagram_type"
-                    :items="enneagramTypes"
-                    placeholder="Type"
-                    aria-label="Enneagram type"
-                    class="w-full"
-                  />
-                </UFormField>
-              </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-                <UFormField label="Enneagram Wing (1-9)">
-                  <UInput
-                    v-model="form.enneagram_wing"
-                    type="number"
-                    :min="1"
-                    :max="9"
-                    placeholder="e.g. 4"
-                    aria-label="Enneagram wing"
-                    class="w-full"
-                  />
-                </UFormField>
-              </div>
-            </fieldset>
-
-            <!-- Big Five -->
-            <fieldset>
-              <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-4">Big Five / OCEAN (0-100)</legend>
-              <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-                <UFormField label="Openness">
-                  <UInput
-                    v-model.number="form.big_five_o"
-                    type="number"
-                    :min="0"
-                    :max="100"
-                    aria-label="Openness score"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Conscientiousness">
-                  <UInput
-                    v-model.number="form.big_five_c"
-                    type="number"
-                    :min="0"
-                    :max="100"
-                    aria-label="Conscientiousness score"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Extraversion">
-                  <UInput
-                    v-model.number="form.big_five_e"
-                    type="number"
-                    :min="0"
-                    :max="100"
-                    aria-label="Extraversion score"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Agreeableness">
-                  <UInput
-                    v-model.number="form.big_five_a"
-                    type="number"
-                    :min="0"
-                    :max="100"
-                    aria-label="Agreeableness score"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Neuroticism">
-                  <UInput
-                    v-model.number="form.big_five_n"
-                    type="number"
-                    :min="0"
-                    :max="100"
-                    aria-label="Neuroticism score"
-                    class="w-full"
-                  />
-                </UFormField>
-              </div>
-            </fieldset>
-
-            <!-- Knowledge & Communication -->
-            <fieldset>
-              <legend class="text-xs font-bold uppercase tracking-widest text-muted mb-4">Knowledge & Communication</legend>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <UFormField label="Mental Models" hint="Comma-separated">
-                  <UInput
-                    v-model="form.mental_models"
-                    placeholder="e.g. Grand Slam Offer, Value Equation"
-                    aria-label="Mental models, comma-separated"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Expertise Domains" hint="Comma-separated">
-                  <UInput
-                    v-model="form.expertise_domains"
-                    placeholder="e.g. business strategy, offer creation"
-                    aria-label="Expertise domains, comma-separated"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Frameworks" hint="Comma-separated">
-                  <UInput
-                    v-model="form.frameworks"
-                    placeholder="e.g. $100M Offers, Value Equation"
-                    aria-label="Frameworks, comma-separated"
-                    class="w-full"
-                  />
-                </UFormField>
-                <UFormField label="Communication Tone">
-                  <UInput
-                    v-model="form.communication_tone"
-                    placeholder="e.g. direct, high-energy"
-                    aria-label="Communication tone"
-                    class="w-full"
-                  />
-                </UFormField>
-              </div>
-            </fieldset>
-
-            <!-- Submit -->
-            <UButton
-              type="submit"
-              label="Create Persona"
-              icon="i-lucide-sparkles"
-              size="lg"
-              block
-              :loading="creating"
-              :disabled="!form.name.trim()"
-            />
-          </form>
-        </UCard>
-
-        <!-- Empty state -->
-        <div v-if="!personas.length && !showForm" class="flex flex-col items-center justify-center gap-6 py-20">
-          <div class="rounded-full bg-muted/10 p-6">
-            <UIcon name="i-lucide-users" class="size-12 text-muted" />
-          </div>
-          <div class="text-center space-y-2">
-            <h3 class="text-base font-semibold">No personas yet</h3>
-            <p class="text-sm text-muted max-w-sm">
-              Personas define the behavioral DNA for your AI agents. Create one to get started.
-            </p>
-          </div>
-          <UButton
-            label="Create your first persona"
-            icon="i-lucide-plus"
-            size="lg"
-            @click="showForm = true"
-          />
-        </div>
-
-        <!-- PR74 v2.92.0 — detail/edit drawer -->
-        <PersonaDetailDrawer
-          v-model="detailOpen"
-          :persona-id="detailPersonaId"
-          @saved="onDetailSaved"
-          @deleted="onDetailDeleted"
-        />
-
-        <!-- Personas Grid -->
-        <div v-if="personas.length" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <div
-            v-for="persona in personas"
-            :key="persona.id"
-            class="group flex flex-col rounded-2xl border border-default overflow-hidden cursor-pointer hover:border-primary/40 hover:shadow-lg transition-all"
-            role="button"
-            tabindex="0"
-            @click="openDetail(persona)"
-            @keydown.enter="openDetail(persona)"
-          >
-            <!-- Gradient header with avatar -->
-            <div
-              class="p-4 flex items-center gap-3"
-              :class="mbtiGradient(persona.mbti)"
-            >
-              <div class="shrink-0 size-12 rounded-xl bg-default/80 border border-default flex items-center justify-center shadow-sm backdrop-blur-sm">
-                <span class="text-sm font-bold tracking-tight text-highlighted">
-                  {{ personaInitials(persona.name) }}
-                </span>
-              </div>
-              <div class="flex-1 min-w-0">
-                <h3 class="text-base font-bold truncate text-highlighted">{{ persona.name }}</h3>
-                <p v-if="persona.title" class="text-xs text-muted truncate mt-0.5">{{ persona.title }}</p>
-              </div>
-              <UBadge
-                v-if="personaAgentCount(persona.id) > 0"
-                :label="`${personaAgentCount(persona.id)} agents`"
-                variant="subtle"
-                color="primary"
-                size="xs"
-                class="shrink-0"
-              />
-            </div>
-
-            <!-- Body -->
-            <div class="flex flex-col gap-3 flex-1 p-4">
-              <p v-if="persona.tagline" class="text-sm text-muted italic leading-relaxed line-clamp-2">
-                "{{ persona.tagline }}"
-              </p>
-
-              <!-- DNA Badges -->
-              <div class="flex flex-wrap gap-1.5">
-                <UBadge
-                  v-if="persona.mbti"
-                  :label="persona.mbti"
-                  :color="mbtiColor(persona.mbti) as any"
-                  variant="subtle"
-                  size="xs"
-                />
-                <UBadge
-                  v-if="persona.disc?.primary"
-                  :label="`DISC: ${persona.disc.primary}${persona.disc.secondary ? '/' + persona.disc.secondary : ''}`"
-                  :color="discColor(persona.disc.primary) as any"
-                  variant="subtle"
-                  size="xs"
-                />
-                <UBadge
-                  v-if="persona.enneagram?.type"
-                  :label="`E${persona.enneagram.type}${persona.enneagram.wing ? 'w' + persona.enneagram.wing : ''}`"
-                  variant="outline"
-                  size="xs"
-                />
-              </div>
-
-              <!-- Expertise domains -->
-              <div v-if="persona.expertise_domains?.length" class="flex flex-wrap gap-1">
-                <UBadge
-                  v-for="domain in persona.expertise_domains.slice(0, 3)"
-                  :key="domain"
-                  :label="domain"
-                  variant="outline"
-                  size="xs"
-                  color="neutral"
-                />
-                <UBadge
-                  v-if="persona.expertise_domains.length > 3"
-                  :label="`+${persona.expertise_domains.length - 3}`"
-                  variant="outline"
-                  size="xs"
-                  color="neutral"
-                />
-              </div>
-
-              <!-- Actions -->
-              <div class="pt-3 mt-auto border-t border-default space-y-3" @click.stop>
-                <div class="flex gap-2">
-                  <UButton
-                    label="Clone to Agent"
-                    icon="i-lucide-copy"
-                    size="sm"
-                    variant="solid"
-                    class="flex-1"
-                    @click.stop="toggleClone(persona)"
-                  />
-                  <UButton
-                    icon="i-lucide-trash-2"
-                    size="sm"
-                    variant="ghost"
-                    color="error"
-                    :loading="deleting === persona.id"
-                    aria-label="Delete persona"
-                    @click.stop="deletePersona(persona)"
-                  />
-                </div>
-
-                <!-- Inline clone expansion -->
-                <div v-if="cloneExpandedId === persona.id" class="space-y-3 pt-2">
-                  <UFormField label="Department" required>
-                    <USelect
-                      v-model="cloneDepartment"
-                      :items="departmentOptions"
-                      placeholder="Select department"
-                      aria-label="Target department"
-                      class="w-full"
-                    />
-                  </UFormField>
-                  <UFormField label="Tier" required>
-                    <USelect
-                      v-model="cloneTier"
-                      :items="tierOptions"
-                      placeholder="Select tier"
-                      aria-label="Agent tier"
-                      class="w-full"
-                    />
-                  </UFormField>
-                  <UButton
-                    label="Confirm Clone"
-                    icon="i-lucide-check"
-                    size="sm"
-                    block
-                    :loading="cloning"
-                    :disabled="!cloneDepartment || !cloneTier"
-                    @click="cloneToAgent(persona)"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-      </div>
-    </template>
-  </UDashboardPanel>
-</template>