arkaos 2.93.0 → 2.95.0

package/VERSION

@@ -1 +1 @@
-2.93.0
+2.95.0

package/dashboard/app/components/AgentEditDrawer.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+// PR76 v2.94.0 — Agent edit drawer.
+//
+// Opens from the agent detail hero. Lets non-technical operators
+// edit the safe-to-mutate fields without touching YAML directly:
+//
+//   - Identity (name, role, tier)
+//   - Mental models (primary + secondary lists)
+//   - Frameworks list
+//   - Expertise domains + depth + years
+//   - Communication (tone, vocab level, preferred format, avoid)
+//   - Linked personas (multi-select from /api/personas)
+//
+// Save → PUT /api/agents/{id} (atomic YAML write on the backend).
+// NEVER edits: id, department, behavioural DNA (DISC/Enneagram/MBTI/
+// Big-Five). Those are intentionally locked because changing them
+// silently invalidates the agent's identity model.
+
+import type { Persona } from '~/types'
+
+const props = defineProps<{
+  modelValue: boolean
+  agent: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'saved'): void
+}>()
+
+const { apiBase, fetchApi } = useApi()
+const toast = useToast()
+const confirmDialog = useConfirmDialog()
+
+// Persona list — for the linked_personas multi-select.
+const { data: personasData } = fetchApi<{ personas: Persona[] }>('/api/personas')
+const personaOptions = computed(() =>
+  (personasData.value?.personas ?? []).map((p) => ({
+    label: p.name + (p.title ? ` — ${p.title}` : ''),
+    value: p.id,
+  })),
+)
+
+interface AgentDraft {
+  name: string
+  role: string
+  tier: number
+  mental_models: { primary: string[]; secondary: string[] }
+  frameworks: string[]
+  expertise_domains: string[]
+  expertise_depth: string
+  expertise_years: number
+  communication: {
+    tone: string
+    vocabulary_level: string
+    preferred_format: string
+    language: string
+    avoid: string[]
+  }
+  linked_personas: string[]
+}
+
+const draft = ref<AgentDraft | null>(null)
+const saving = ref(false)
+const dirty = ref(false)
+
+watch(
+  () => [props.modelValue, props.agent] as const,
+  ([open, agent]) => {
+    if (open && agent) {
+      draft.value = {
+        name: agent.name ?? '',
+        role: agent.role ?? '',
+        tier: agent.tier ?? 2,
+        mental_models: {
+          primary: agent.mental_models?.primary ?? [],
+          secondary: agent.mental_models?.secondary ?? [],
+        },
+        frameworks: agent.frameworks ?? [],
+        expertise_domains: agent.expertise_domains ?? [],
+        expertise_depth: agent.expertise_depth ?? '',
+        expertise_years: agent.expertise_years ?? 0,
+        communication: {
+          tone: agent.communication?.tone ?? '',
+          vocabulary_level: agent.communication?.vocabulary_level ?? '',
+          preferred_format: agent.communication?.preferred_format ?? '',
+          language: agent.communication?.language ?? '',
+          avoid: agent.communication?.avoid ?? [],
+        },
+        linked_personas: agent.linked_personas ?? [],
+      }
+      dirty.value = false
+    } else if (!open) {
+      draft.value = null
+      dirty.value = false
+    }
+  },
+  { immediate: true },
+)
+
+function markDirty() {
+  dirty.value = true
+}
+
+function listToCsv(list: string[]): string {
+  return (list ?? []).join(', ')
+}
+
+function csvToList(value: string): string[] {
+  return value.split(',').map((s) => s.trim()).filter(Boolean)
+}
+
+async function save() {
+  if (!draft.value || !props.agent?.id) return
+  saving.value = true
+  try {
+    const payload = {
+      name: draft.value.name,
+      role: draft.value.role,
+      tier: draft.value.tier,
+      mental_models: draft.value.mental_models,
+      frameworks: draft.value.frameworks,
+      expertise_domains: draft.value.expertise_domains,
+      expertise: {
+        depth: draft.value.expertise_depth,
+        years_equivalent: draft.value.expertise_years,
+      },
+      communication: draft.value.communication,
+      linked_personas: draft.value.linked_personas,
+    }
+    const res = await $fetch<{
+      id: string
+      updated: boolean
+      yaml_path?: string
+      error?: string
+    }>(`${apiBase}/api/agents/${props.agent.id}`, {
+      method: 'PUT',
+      body: payload,
+    })
+    if (res.error) throw new Error(res.error)
+    toast.add({
+      title: 'Agent saved',
+      description: res.yaml_path
+        ? `Wrote ${res.yaml_path.split('/').slice(-3).join('/')}`
+        : 'YAML updated',
+      color: 'success',
+    })
+    dirty.value = false
+    emit('saved')
+    emit('update:modelValue', false)
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function tryClose() {
+  if (dirty.value && !saving.value) {
+    const ok = await confirmDialog({
+      title: 'Discard unsaved edits?',
+      description: 'Any changes you made to this agent will be lost.',
+      confirmLabel: 'Discard',
+      cancelLabel: 'Keep editing',
+      variant: 'danger',
+    })
+    if (!ok) return
+  }
+  emit('update:modelValue', false)
+}
+
+const tierOptions = [
+  { label: 'Tier 0 — C-Suite', value: 0 },
+  { label: 'Tier 1 — Squad Lead', value: 1 },
+  { label: 'Tier 2 — Specialist', value: 2 },
+  { label: 'Tier 3 — Support', value: 3 },
+]
+const depthOptions = [
+  { label: 'Intermediate', value: 'intermediate' },
+  { label: 'Advanced', value: 'advanced' },
+  { label: 'Expert', value: 'expert' },
+  { label: 'Master', value: 'master' },
+]
+const vocabOptions = [
+  { label: 'Lay (no jargon)', value: 'lay' },
+  { label: 'Specialist (industry terms)', value: 'specialist' },
+  { label: 'Expert (research-level)', value: 'expert' },
+]
+</script>
+
+<template>
+  <USlideover
+    :open="modelValue"
+    :ui="{ content: 'max-w-2xl w-full' }"
+    @update:open="(v) => v ? null : tryClose()"
+  >
+    <template #content>
+      <UCard
+        :ui="{
+          root: 'h-full flex flex-col rounded-none',
+          body: 'flex-1 overflow-y-auto',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-xl font-bold">Edit agent</h2>
+              <p class="text-sm text-muted mt-0.5">
+                {{ props.agent?.name }}
+                <span class="text-xs text-muted/60 ml-1">— {{ props.agent?.id }}</span>
+              </p>
+            </div>
+            <UButton
+              icon="i-lucide-x"
+              variant="ghost"
+              size="sm"
+              aria-label="Close"
+              @click="tryClose"
+            />
+          </div>
+        </template>
+
+        <div v-if="draft" class="space-y-6">
+          <p class="rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-xs text-muted">
+            <UIcon name="i-lucide-info" class="size-3.5 inline" />
+            Behavioural DNA (DISC, Enneagram, MBTI, Big Five) is locked here
+            on purpose — changing it silently invalidates the agent's
+            identity model. Edit it directly in the YAML file when truly
+            needed.
+          </p>
+
+          <section class="space-y-3">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">Identity</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <UFormField label="Name">
+                <UInput v-model="draft.name" class="w-full" @update:model-value="markDirty" />
+              </UFormField>
+              <UFormField label="Role">
+                <UInput v-model="draft.role" class="w-full" @update:model-value="markDirty" />
+              </UFormField>
+              <UFormField label="Tier">
+                <USelect
+                  v-model="draft.tier"
+                  :items="tierOptions"
+                  class="w-full"
+                  @update:model-value="markDirty"
+                />
+              </UFormField>
+            </div>
+          </section>
+
+          <section class="space-y-3">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">Mental models</h3>
+            <UFormField label="Primary" help="comma-separated">
+              <UInput
+                :model-value="listToCsv(draft.mental_models.primary)"
+                @update:model-value="(v: string) => { if (draft) { draft.mental_models.primary = csvToList(v); markDirty() } }"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField label="Secondary" help="comma-separated">
+              <UInput
+                :model-value="listToCsv(draft.mental_models.secondary)"
+                @update:model-value="(v: string) => { if (draft) { draft.mental_models.secondary = csvToList(v); markDirty() } }"
+                class="w-full"
+              />
+            </UFormField>
+          </section>
+
+          <section class="space-y-3">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">Expertise</h3>
+            <UFormField label="Domains" help="comma-separated">
+              <UInput
+                :model-value="listToCsv(draft.expertise_domains)"
+                @update:model-value="(v: string) => { if (draft) { draft.expertise_domains = csvToList(v); markDirty() } }"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField label="Frameworks" help="comma-separated">
+              <UInput
+                :model-value="listToCsv(draft.frameworks)"
+                @update:model-value="(v: string) => { if (draft) { draft.frameworks = csvToList(v); markDirty() } }"
+                class="w-full"
+              />
+            </UFormField>
+            <div class="grid grid-cols-2 gap-3">
+              <UFormField label="Depth">
+                <USelect
+                  v-model="draft.expertise_depth"
+                  :items="depthOptions"
+                  class="w-full"
+                  @update:model-value="markDirty"
+                />
+              </UFormField>
+              <UFormField label="Years (equivalent)">
+                <UInput
+                  v-model.number="draft.expertise_years"
+                  type="number"
+                  :min="0"
+                  :max="60"
+                  class="w-full"
+                  @update:model-value="markDirty"
+                />
+              </UFormField>
+            </div>
+          </section>
+
+          <section class="space-y-3">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">Communication</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <UFormField label="Tone">
+                <UInput v-model="draft.communication.tone" class="w-full" @update:model-value="markDirty" />
+              </UFormField>
+              <UFormField label="Vocabulary level">
+                <USelect
+                  v-model="draft.communication.vocabulary_level"
+                  :items="vocabOptions"
+                  class="w-full"
+                  @update:model-value="markDirty"
+                />
+              </UFormField>
+              <UFormField label="Preferred format">
+                <UInput v-model="draft.communication.preferred_format" class="w-full" @update:model-value="markDirty" />
+              </UFormField>
+              <UFormField label="Language">
+                <UInput v-model="draft.communication.language" placeholder="en, pt" class="w-full" @update:model-value="markDirty" />
+              </UFormField>
+            </div>
+            <UFormField label="Avoid (phrases)" help="comma-separated">
+              <UInput
+                :model-value="listToCsv(draft.communication.avoid)"
+                @update:model-value="(v: string) => { if (draft) { draft.communication.avoid = csvToList(v); markDirty() } }"
+                class="w-full"
+              />
+            </UFormField>
+          </section>
+
+          <section class="space-y-3">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">
+              Linked personas
+              <span class="ml-2 text-[10px] font-normal text-muted normal-case tracking-normal">
+                — agent draws from these persona profiles
+              </span>
+            </h3>
+            <USelectMenu
+              v-model="draft.linked_personas"
+              :items="personaOptions"
+              value-key="value"
+              multiple
+              placeholder="Select personas to link"
+              class="w-full"
+              @update:model-value="markDirty"
+            />
+            <p class="text-xs text-muted">
+              {{ draft.linked_personas.length }} linked.
+              Personas come from the Persona library (auto-synced with your
+              Obsidian vault).
+            </p>
+          </section>
+        </div>
+
+        <template #footer>
+          <div class="flex items-center justify-between gap-2">
+            <span v-if="dirty" class="text-xs text-yellow-400">
+              <UIcon name="i-lucide-circle-dot" class="size-3 inline" />
+              Unsaved changes
+            </span>
+            <span v-else class="text-xs text-muted">No changes</span>
+            <div class="flex gap-2">
+              <UButton label="Cancel" variant="ghost" :disabled="saving" @click="tryClose" />
+              <UButton
+                label="Save"
+                icon="i-lucide-check"
+                :loading="saving"
+                :disabled="!dirty"
+                @click="save"
+              />
+            </div>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </USlideover>
+</template>

package/dashboard/app/components/PersonaDetailDrawer.vue

@@ -192,6 +192,44 @@ const vocabOptions = [
   { label: 'Specialist (industry terms)', value: 'specialist' },
   { label: 'Expert (research-level)', value: 'expert' },
 ]
+
+// PR77 v2.95.0 — hero gradient by MBTI grouping + initials avatar
+// + reverse-usage stat (how many agents link this persona).
+
+const { fetchApi } = useApi()
+const { data: usageData } = fetchApi<{
+  by_persona: Record<string, { agent_count: number, agent_ids: string[] }>
+}>('/api/personas/usage')
+
+const linkedAgentCount = computed(() => {
+  if (!detail.value?.id) return 0
+  return usageData.value?.by_persona?.[detail.value.id]?.agent_count ?? 0
+})
+const linkedAgentIds = computed(() => {
+  if (!detail.value?.id) return []
+  return usageData.value?.by_persona?.[detail.value.id]?.agent_ids ?? []
+})
+
+function heroInitials(name: string | undefined): 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 mbtiGradientClass(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/30 to-indigo-600/10'
+  if (['INFJ', 'INFP', 'ENFJ', 'ENFP'].includes(code))
+    return 'bg-gradient-to-br from-emerald-500/30 to-teal-600/10'
+  if (['ISTJ', 'ISFJ', 'ESTJ', 'ESFJ'].includes(code))
+    return 'bg-gradient-to-br from-amber-500/30 to-orange-600/10'
+  if (['ISTP', 'ISFP', 'ESTP', 'ESFP'].includes(code))
+    return 'bg-gradient-to-br from-rose-500/30 to-pink-600/10'
+  return 'bg-gradient-to-br from-primary/20 to-primary/5'
+}
 </script>
 
 <template>
@@ -208,62 +246,90 @@ const vocabOptions = [
         }"
       >
         <template #header>
-          <div class="flex items-start justify-between gap-3">
-            <div class="min-w-0">
-              <h2 class="text-xl font-bold truncate">
-                {{ detail?.name ?? 'Persona' }}
-              </h2>
-              <div class="flex items-center gap-2 mt-1 flex-wrap">
-                <UBadge
-                  v-if="detail?._source_store === 'obsidian'"
-                  label="From Obsidian"
-                  icon="i-lucide-file-text"
-                  color="primary"
-                  variant="subtle"
-                  size="xs"
+          <div
+            class="-m-4 mb-0 p-5 rounded-t-lg"
+            :class="mbtiGradientClass(detail?.mbti)"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex items-start gap-4 min-w-0 flex-1">
+                <div class="shrink-0 size-14 rounded-xl bg-default/80 border border-default flex items-center justify-center shadow-md backdrop-blur-sm">
+                  <span class="text-lg font-bold tracking-tight text-highlighted">
+                    {{ heroInitials(detail?.name) }}
+                  </span>
+                </div>
+                <div class="min-w-0 flex-1">
+                  <h2 class="text-2xl font-bold truncate text-highlighted">
+                    {{ detail?.name ?? 'Persona' }}
+                  </h2>
+                  <p v-if="detail?.title" class="text-sm text-muted truncate mt-0.5">
+                    {{ detail.title }}
+                  </p>
+                  <div class="flex items-center gap-2 mt-2 flex-wrap">
+                    <UBadge
+                      v-if="detail?._source_store === 'obsidian'"
+                      label="From Obsidian"
+                      icon="i-lucide-file-text"
+                      color="primary"
+                      variant="subtle"
+                      size="xs"
+                    />
+                    <UBadge
+                      v-else-if="detail?._source_store === 'json'"
+                      label="JSON store"
+                      variant="outline"
+                      size="xs"
+                    />
+                    <UBadge
+                      v-if="detail?.mbti"
+                      :label="detail.mbti"
+                      variant="soft"
+                      size="xs"
+                    />
+                    <UBadge
+                      v-if="linkedAgentCount > 0"
+                      :label="`${linkedAgentCount} agent${linkedAgentCount === 1 ? '' : 's'}`"
+                      color="primary"
+                      variant="subtle"
+                      size="xs"
+                    />
+                  </div>
+                  <p
+                    v-if="detail?._obsidian_path"
+                    class="text-[10px] text-muted/70 font-mono truncate mt-2"
+                    :title="detail._obsidian_path"
+                  >
+                    {{ detail._obsidian_path.split('/').slice(-2).join('/') }}
+                  </p>
+                </div>
+              </div>
+              <div class="flex items-center gap-1 shrink-0">
+                <UButton
+                  v-if="!editing"
+                  icon="i-lucide-pencil"
+                  variant="ghost"
+                  size="sm"
+                  aria-label="Edit persona"
+                  @click="startEdit"
+                />
+                <UButton
+                  v-if="!editing"
+                  icon="i-lucide-trash-2"
+                  color="error"
+                  variant="ghost"
+                  size="sm"
+                  :loading="deleting"
+                  aria-label="Delete persona"
+                  @click="deletePersona"
                 />
-                <UBadge
-                  v-else-if="detail?._source_store === 'json'"
-                  label="JSON store"
-                  variant="outline"
-                  size="xs"
+                <UButton
+                  icon="i-lucide-x"
+                  variant="ghost"
+                  size="sm"
+                  aria-label="Close"
+                  @click="closeDrawer"
                 />
-                <span
-                  v-if="detail?._obsidian_path"
-                  class="text-xs text-muted font-mono truncate"
-                  :title="detail._obsidian_path"
-                >
-                  {{ detail._obsidian_path.split('/').slice(-2).join('/') }}
-                </span>
               </div>
             </div>
-            <div class="flex items-center gap-1 shrink-0">
-              <UButton
-                v-if="!editing"
-                icon="i-lucide-pencil"
-                variant="ghost"
-                size="sm"
-                aria-label="Edit persona"
-                @click="startEdit"
-              />
-              <UButton
-                v-if="!editing"
-                icon="i-lucide-trash-2"
-                color="error"
-                variant="ghost"
-                size="sm"
-                :loading="deleting"
-                aria-label="Delete persona"
-                @click="deletePersona"
-              />
-              <UButton
-                icon="i-lucide-x"
-                variant="ghost"
-                size="sm"
-                aria-label="Close"
-                @click="closeDrawer"
-              />
-            </div>
           </div>
         </template>
 
@@ -395,6 +461,24 @@ const vocabOptions = [
               <dd class="col-span-2">{{ detail.communication.vocabulary_level || '—' }}</dd>
             </dl>
           </section>
+
+          <!-- PR77 v2.95.0 — linked agents (reverse from /api/personas/usage) -->
+          <section v-if="linkedAgentCount > 0">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+              Linked to {{ linkedAgentCount }} agent{{ linkedAgentCount === 1 ? '' : 's' }}
+            </h3>
+            <div class="flex flex-wrap gap-1.5">
+              <NuxtLink
+                v-for="aid in linkedAgentIds"
+                :key="aid"
+                :to="`/agents/${aid}`"
+                class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-1 text-xs font-mono hover:border-primary/40 hover:text-primary transition-colors"
+              >
+                <UIcon name="i-lucide-arrow-right" class="size-3" />
+                {{ aid }}
+              </NuxtLink>
+            </div>
+          </section>
         </div>
 
         <div v-else-if="draft" class="space-y-5">

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

@@ -1,9 +1,42 @@
 <script setup lang="ts">
+// PR76 v2.94.0 — Agent detail modernization.
+// Fixes:
+//  - UTabs now has default-value so DNA opens on entry
+//  - Modern hero: department-tinted gradient + initials avatar + stats
+//  - Activity stats row pulled from PR69 /api/agents/activity
+//  - Edit toggle wired to AgentEditDrawer (PUT /api/agents/{id})
+
 const route = useRoute()
 const agentId = route.params.id as string
 
 const { fetchApi } = useApi()
-const { data: agent, status, error } = fetchApi<any>(`/api/agents/${agentId}`)
+const { data: agent, status, error, refresh } = fetchApi<any>(`/api/agents/${agentId}`)
+
+// Per-department activity (PR69 endpoint) for the stats row.
+interface ActivityRow {
+  call_count: number
+  total_cost_usd: number | null
+  total_tokens_in: number
+  total_tokens_out: number
+}
+const { data: activityData } = fetchApi<{
+  by_department: Record<string, ActivityRow>
+  period: string
+}>('/api/agents/activity?period=week')
+const deptActivity = computed<ActivityRow | null>(() =>
+  (activityData.value?.by_department?.[agent.value?.department ?? ''] ?? null),
+)
+
+// PR76 — edit drawer state
+const editOpen = ref(false)
+
+function openEditor() {
+  editOpen.value = true
+}
+
+async function onAgentSaved() {
+  await refresh()
+}
 
 // --- Labels & mappings ---
 
@@ -94,6 +127,55 @@ const tabs = [
   { label: 'Authority', value: 'authority', icon: 'i-lucide-shield' },
   { label: 'Expertise', value: 'expertise', icon: 'i-lucide-award' },
 ]
+
+// PR76 — hero helpers
+
+const initials = computed<string>(() => {
+  const name = agent.value?.name ?? ''
+  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()
+})
+
+// Per-department gradient hex pair (from + to). Picked once per dept
+// so the same dept always renders the same hero tint.
+const DEPT_GRADIENTS: Record<string, [string, string]> = {
+  brand:       ['from-fuchsia-500/30', 'to-purple-600/10'],
+  marketing:   ['from-pink-500/30',    'to-rose-600/10'],
+  dev:         ['from-blue-500/30',    'to-cyan-600/10'],
+  ecom:        ['from-amber-500/30',   'to-orange-600/10'],
+  finance:     ['from-emerald-500/30', 'to-green-600/10'],
+  strategy:    ['from-indigo-500/30',  'to-violet-600/10'],
+  kb:          ['from-teal-500/30',    'to-cyan-600/10'],
+  ops:         ['from-slate-500/30',   'to-gray-600/10'],
+  pm:          ['from-sky-500/30',     'to-blue-600/10'],
+  saas:        ['from-violet-500/30',  'to-indigo-600/10'],
+  landing:     ['from-orange-500/30',  'to-red-600/10'],
+  content:     ['from-rose-500/30',    'to-pink-600/10'],
+  community:   ['from-yellow-500/30',  'to-amber-600/10'],
+  sales:       ['from-red-500/30',     'to-orange-600/10'],
+  leadership:  ['from-purple-500/30',  'to-pink-600/10'],
+  org:         ['from-gray-500/30',    'to-slate-600/10'],
+}
+
+const heroGradientClasses = computed(() => {
+  const dept = agent.value?.department ?? ''
+  const [from, to] = DEPT_GRADIENTS[dept] ?? ['from-primary/20', 'to-primary/5']
+  return `bg-gradient-to-br ${from} ${to}`
+})
+
+function formatCost(value: number | null | undefined): string {
+  if (value === null || value === undefined) return 'n/a'
+  if (value === 0) return '$0'
+  if (value < 0.01) return `$${value.toFixed(4)}`
+  return `$${value.toFixed(2)}`
+}
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toString()
+}
 </script>
 
 <template>
@@ -136,37 +218,87 @@ const tabs = [
       </div>
 
       <!-- Content -->
-      <div v-else class="space-y-8 pb-12">
-        <!-- ===== HEADER SECTION ===== -->
-        <section class="space-y-3">
-          <h1 class="text-3xl font-bold tracking-tight">{{ agent.name }}</h1>
-          <p class="text-lg text-muted">{{ agent.role }}</p>
-
-          <div class="flex flex-wrap items-center gap-2">
-            <UBadge :label="agent.department" variant="subtle" />
-            <UBadge
-              :label="`Tier ${agent.tier} — ${tierLabel[agent.tier] ?? ''}`"
-              variant="subtle"
-              :color="(tierColor[agent.tier] ?? 'neutral') as any"
-            />
-            <UBadge
-              v-if="agent.expertise_depth"
-              :label="agent.expertise_depth"
-              variant="subtle"
-              :color="(depthColor[agent.expertise_depth] ?? 'neutral') as any"
-            />
-            <UBadge
-              v-if="agent.expertise_years"
-              :label="`${agent.expertise_years}y experience`"
-              variant="outline"
-            />
+      <div v-else class="space-y-6 pb-12">
+        <!-- ===== HERO ===== -->
+        <section
+          class="relative overflow-hidden rounded-2xl border border-default p-6 md:p-8"
+          :class="heroGradientClasses"
+        >
+          <div class="flex items-start gap-5">
+            <div class="shrink-0 size-20 rounded-2xl bg-default/80 border border-default flex items-center justify-center shadow-lg backdrop-blur-sm">
+              <span class="text-2xl font-bold tracking-tight text-highlighted">{{ initials }}</span>
+            </div>
+            <div class="flex-1 min-w-0 space-y-2">
+              <div class="flex items-start justify-between gap-3 flex-wrap">
+                <div class="min-w-0">
+                  <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-highlighted">
+                    {{ agent.name }}
+                  </h1>
+                  <p class="text-base md:text-lg text-muted mt-0.5">{{ agent.role }}</p>
+                </div>
+                <UButton
+                  label="Edit"
+                  icon="i-lucide-pencil"
+                  size="sm"
+                  @click="openEditor"
+                />
+              </div>
+              <div class="flex flex-wrap items-center gap-2 pt-1">
+                <UBadge :label="agent.department" variant="subtle" />
+                <UBadge
+                  :label="`Tier ${agent.tier} — ${tierLabel[agent.tier] ?? ''}`"
+                  variant="subtle"
+                  :color="(tierColor[agent.tier] ?? 'neutral') as any"
+                />
+                <UBadge
+                  v-if="agent.expertise_depth"
+                  :label="agent.expertise_depth"
+                  variant="subtle"
+                  :color="(depthColor[agent.expertise_depth] ?? 'neutral') as any"
+                />
+                <UBadge
+                  v-if="agent.expertise_years"
+                  :label="`${agent.expertise_years}y experience`"
+                  variant="outline"
+                />
+                <UBadge v-if="agent.mbti" :label="agent.mbti" variant="soft" size="xs" />
+              </div>
+              <p class="text-xs text-muted/60 font-mono select-all pt-2">{{ agent.id }}</p>
+            </div>
           </div>
+        </section>
 
-          <p class="text-xs text-muted/60 font-mono select-all">{{ agent.id }}</p>
+        <!-- ===== STATS ROW ===== -->
+        <section class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="rounded-xl border border-default p-4 bg-elevated/20">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">7d calls (dept)</p>
+            <p class="text-2xl font-bold">{{ deptActivity?.call_count ?? 0 }}</p>
+          </div>
+          <div class="rounded-xl border border-default p-4 bg-elevated/20">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">7d cost</p>
+            <p class="text-2xl font-bold">{{ formatCost(deptActivity?.total_cost_usd) }}</p>
+          </div>
+          <div class="rounded-xl border border-default p-4 bg-elevated/20">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">Tokens (in/out)</p>
+            <p class="text-lg font-semibold">
+              {{ formatTokens(deptActivity?.total_tokens_in ?? 0) }} /
+              {{ formatTokens(deptActivity?.total_tokens_out ?? 0) }}
+            </p>
+          </div>
+          <div class="rounded-xl border border-default p-4 bg-elevated/20">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">Linked personas</p>
+            <p class="text-2xl font-bold">{{ agent.linked_personas?.length ?? 0 }}</p>
+          </div>
         </section>
 
+        <AgentEditDrawer
+          v-model="editOpen"
+          :agent="agent"
+          @saved="onAgentSaved"
+        />
+
         <!-- ===== TABS ===== -->
-        <UTabs :items="tabs" class="w-full">
+        <UTabs :items="tabs" default-value="dna" class="w-full">
           <template #content="{ item }">
             <!-- ===== TAB: DNA ===== -->
             <div v-if="item.value === 'dna'" class="space-y-6 mt-6">

package/dashboard/app/pages/personas.vue

@@ -13,6 +13,36 @@ const personas = computed(() => data.value?.personas ?? [])
 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
@@ -544,27 +574,42 @@ function discColor(disc: string): string {
 
         <!-- Personas Grid -->
         <div v-if="personas.length" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <UCard
+          <div
             v-for="persona in personas"
             :key="persona.id"
-            class="group flex flex-col cursor-pointer hover:border-primary/40 transition-colors"
+            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)"
           >
-            <div class="flex flex-col gap-3 flex-1">
-              <!-- Header -->
-              <div>
-                <h3 class="text-base font-bold truncate">{{ persona.name }}</h3>
-                <p v-if="persona.title" class="text-sm text-muted truncate mt-0.5">{{ persona.title }}</p>
-                <p v-if="persona.source" class="text-xs text-muted/60 mt-1">
-                  Source: {{ persona.source }}
-                </p>
+            <!-- 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>
 
-              <!-- Tagline -->
-              <p v-if="persona.tagline" class="text-sm text-muted italic leading-relaxed">
+            <!-- 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>
 
@@ -665,7 +710,7 @@ function discColor(disc: string): string {
                 </div>
               </div>
             </div>
-          </UCard>
+          </div>
         </div>
       </template>
       </div>

package/departments/brand/agents/brand-director.yaml

@@ -4,19 +4,18 @@ role: Creative Director
 department: brand
 tier: 1
 model: sonnet
-
 behavioral_dna:
   disc:
     primary: S
     secondary: I
-    communication_style: "Thoughtful, visual, builds consensus before executing"
-    under_pressure: "Protects creative quality, refuses to rush aesthetics"
-    motivator: "Beautiful, meaningful brands that resonate emotionally"
+    communication_style: Thoughtful, visual, builds consensus before executing
+    under_pressure: Protects creative quality, refuses to rush aesthetics
+    motivator: Beautiful, meaningful brands that resonate emotionally
   enneagram:
     type: 4
     wing: 3
-    core_motivation: "Creating unique, authentic brand identities"
-    core_fear: "Producing generic, forgettable brand work"
+    core_motivation: Creating unique, authentic brand identities
+    core_fear: Producing generic, forgettable brand work
     subtype: social
   big_five:
     openness: 92
@@ -26,53 +25,52 @@ behavioral_dna:
     neuroticism: 35
   mbti:
     type: INFP
-
 mental_models:
   primary:
-    - "Primal Branding 7 Elements (Hanlon)"
-    - "Brand Identity Process (Wheeler)"
-    - "12 Archetypes (Jung)"
+  - Primal Branding 7 Elements (Hanlon)
+  - Brand Identity Process (Wheeler)
+  - 12 Archetypes (Jung)
   secondary:
-    - "StoryBrand SB7 (Miller)"
-    - "Positioning (Ries/Trout)"
-    - "Design Thinking (IDEO)"
-
+  - StoryBrand SB7 (Miller)
+  - Positioning (Ries/Trout)
+  - Design Thinking (IDEO)
 authority:
   orchestrate: true
   approve_quality: true
   delegates_to:
-    - visual-designer
-    - ux-designer
-    - brand-copywriter
-    - brand-strategist
+  - visual-designer
+  - ux-designer
+  - brand-copywriter
+  - brand-strategist
   escalates_to: coo-sofia
-
 expertise:
   domains:
-    - brand identity creation
-    - visual design direction
-    - UX/UI strategy
-    - design systems
-    - brand voice & tone
-    - creative direction
+  - brand identity creation
+  - visual design direction
+  - UX/UI strategy
+  - design systems
+  - brand voice & tone
+  - creative direction
   frameworks:
-    - Primal Branding (Hanlon)
-    - StoryBrand (Miller)
-    - Brand Archetypes (Jung)
-    - Wheeler Process
-    - Atomic Design (Frost)
-    - Nielsen Heuristics
-    - Dieter Rams 10 Principles
-    - Double Diamond
+  - Primal Branding (Hanlon)
+  - StoryBrand (Miller)
+  - Brand Archetypes (Jung)
+  - Wheeler Process
+  - Atomic Design (Frost)
+  - Nielsen Heuristics
+  - Dieter Rams 10 Principles
+  - Double Diamond
   depth: master
-  years_equivalent: 14
-
+  years_equivalent: 24
 communication:
   language: en
-  tone: "warm, visual, metaphor-rich"
+  tone: warm, visual, metaphor-rich
   vocabulary_level: advanced
-  preferred_format: "mood boards, visual references, brand decks"
+  preferred_format: mood boards, visual references, brand decks
   avoid:
-    - "design by committee"
-    - "trendy without substance"
-    - "skipping strategy for visuals"
+  - design by committee
+  - trendy without substance
+  - skipping strategy for visuals
+frameworks: []
+expertise_domains: []
+linked_personas: []

package/package.json

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

package/scripts/dashboard-api.py

@@ -258,12 +258,104 @@ def agent_detail(agent_id: str):
             expertise = raw.get("expertise", {})
             base["expertise_depth"] = expertise.get("depth", "")
             base["expertise_years"] = expertise.get("years_equivalent", 0)
+            base["frameworks"] = raw.get("frameworks", [])
+            base["expertise_domains"] = raw.get("expertise_domains", [])
+            # PR76 v2.94.0 — linked_personas: persona IDs the agent
+            # draws from. Empty when not yet edited.
+            base["linked_personas"] = raw.get("linked_personas", [])
+            base["_yaml_path"] = str(yaml_file)
         except Exception:
             pass
 
     return base
 
 
+@app.put("/api/agents/{agent_id}")
+def agent_update(agent_id: str, body: dict):
+    """PR76 v2.94.0 — edit an agent. Updates the YAML file with
+    editable fields from body. Preserves untouched fields.
+    """
+    if not isinstance(body, dict):
+        return {"error": "body must be an object"}
+    agents = _load_agents()
+    base = None
+    for a in agents:
+        if a.get("id") == agent_id:
+            base = dict(a)
+            break
+    if not base:
+        return {"error": "Agent not found"}
+    yaml_file = ARKAOS_ROOT / base.get("file", "")
+    if not yaml_file.exists():
+        return {"error": "Agent YAML file missing on disk"}
+    try:
+        import yaml as _yaml
+    except ImportError:
+        return {"error": "PyYAML unavailable"}
+    try:
+        raw = _yaml.safe_load(yaml_file.read_text(encoding="utf-8")) or {}
+    except Exception as exc:
+        return {"error": f"YAML parse failed: {exc}"}
+    if not isinstance(raw, dict):
+        return {"error": "agent YAML is not a mapping"}
+
+    for top_key in ("name", "role"):
+        if top_key in body and isinstance(body[top_key], str):
+            raw[top_key] = body[top_key]
+    if "tier" in body:
+        try:
+            raw["tier"] = int(body["tier"])
+        except (TypeError, ValueError):
+            pass
+    if "mental_models" in body and isinstance(body["mental_models"], dict):
+        mm = raw.setdefault("mental_models", {}) or {}
+        for sub in ("primary", "secondary"):
+            if sub in body["mental_models"]:
+                mm[sub] = _agent_str_list(body["mental_models"][sub])
+        raw["mental_models"] = mm
+    if "frameworks" in body:
+        raw["frameworks"] = _agent_str_list(body["frameworks"])
+    if "expertise_domains" in body:
+        raw["expertise_domains"] = _agent_str_list(body["expertise_domains"])
+    if "expertise" in body and isinstance(body["expertise"], dict):
+        expertise = raw.setdefault("expertise", {}) or {}
+        if "depth" in body["expertise"]:
+            expertise["depth"] = str(body["expertise"]["depth"])
+        if "years_equivalent" in body["expertise"]:
+            try:
+                expertise["years_equivalent"] = int(body["expertise"]["years_equivalent"])
+            except (TypeError, ValueError):
+                pass
+        raw["expertise"] = expertise
+    if "communication" in body and isinstance(body["communication"], dict):
+        comm = raw.setdefault("communication", {}) or {}
+        for key in ("tone", "vocabulary_level", "preferred_format", "language"):
+            if key in body["communication"]:
+                comm[key] = str(body["communication"][key])
+        if "avoid" in body["communication"]:
+            comm["avoid"] = _agent_str_list(body["communication"]["avoid"])
+        raw["communication"] = comm
+    if "linked_personas" in body:
+        raw["linked_personas"] = _agent_str_list(body["linked_personas"])
+
+    try:
+        tmp = yaml_file.with_suffix(yaml_file.suffix + ".tmp")
+        tmp.write_text(
+            _yaml.safe_dump(raw, sort_keys=False, allow_unicode=True, default_flow_style=False),
+            encoding="utf-8",
+        )
+        tmp.replace(yaml_file)
+    except OSError as exc:
+        return {"error": f"write failed: {exc}"}
+    return {"id": agent_id, "updated": True, "yaml_path": str(yaml_file)}
+
+
+def _agent_str_list(value) -> list[str]:
+    if not isinstance(value, list):
+        return []
+    return [str(item) for item in value if isinstance(item, (str, int, float))]
+
+
 @app.get("/api/commands")
 def commands(dept: Optional[str] = Query(None), q: Optional[str] = Query(None)):
     data = _load_commands()
@@ -783,6 +875,41 @@ def _obsidian_store_available() -> bool:
         return False
 
 
+@app.get("/api/personas/usage")
+def personas_usage():
+    """PR77 v2.95.0 — reverse lookup: how many agents link to each
+    persona. Reads every agent's YAML once, builds a
+    ``{persona_id: [agent_id, ...]}`` map.
+
+    The detail drawer + list cards use this to show "Linked to N
+    agents" so the operator sees which personas are actually wired.
+    """
+    import yaml as _yaml
+    agents = _load_agents()
+    usage: dict[str, list[str]] = {}
+    for agent in agents:
+        yaml_file = ARKAOS_ROOT / agent.get("file", "")
+        if not yaml_file.exists():
+            continue
+        try:
+            raw = _yaml.safe_load(yaml_file.read_text(encoding="utf-8")) or {}
+        except Exception:
+            continue
+        linked = raw.get("linked_personas") if isinstance(raw, dict) else None
+        if not isinstance(linked, list):
+            continue
+        for persona_id in linked:
+            if not isinstance(persona_id, str):
+                continue
+            usage.setdefault(persona_id, []).append(agent.get("id", ""))
+    return {
+        "by_persona": {
+            pid: {"agent_count": len(aids), "agent_ids": aids}
+            for pid, aids in usage.items()
+        },
+    }
+
+
 @app.get("/api/personas/{persona_id}")
 def persona_detail(persona_id: str):
     """PR74 v2.92.0 — detail endpoint now checks the Obsidian vault