arkaos 3.70.7 → 3.70.8

package/VERSION

@@ -1 +1 @@
-3.70.7
+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.7",
+  "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.7"
+version = "3.70.8"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}