arkaos 2.92.0 → 2.94.0

package/VERSION

@@ -1 +1 @@
-2.92.0
+2.94.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/ConfirmDialog.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// PR75 v2.93.0 — canonical confirm dialog (Nuxt UI v4 pattern).
+//
+// Replaces native window.confirm() calls. Driven by useConfirmDialog()
+// composable, which itself uses useOverlay() to mount this component
+// imperatively. Emits a boolean on close: true = confirm,
+// false = cancel.
+//
+// Per the Nuxt UI v4 docs (https://ui.nuxt.com/docs/composables/use-overlay).
+
+interface ConfirmDialogProps {
+  title?: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /**
+   * Display variant for the confirm button. Use 'error' for destructive
+   * actions (delete, etc.) so the dialog visually warns the operator.
+   */
+  variant?: 'default' | 'danger'
+}
+
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+  title: 'Confirm action',
+  description: '',
+  confirmLabel: 'Confirm',
+  cancelLabel: 'Cancel',
+  variant: 'default',
+})
+
+const emits = defineEmits<{
+  close: [value: boolean]
+}>()
+
+const confirmColor = computed(() =>
+  props.variant === 'danger' ? 'error' : 'primary',
+)
+</script>
+
+<template>
+  <UModal
+    :title="title"
+    :description="description"
+    :dismissible="false"
+    :ui="{ footer: 'justify-end' }"
+  >
+    <template #footer>
+      <UButton
+        :label="cancelLabel"
+        color="neutral"
+        variant="outline"
+        @click="emits('close', false)"
+      />
+      <UButton
+        :label="confirmLabel"
+        :color="confirmColor"
+        @click="emits('close', true)"
+      />
+    </template>
+  </UModal>
+</template>

package/dashboard/app/components/PersonaDetailDrawer.vue

@@ -25,6 +25,7 @@ const emit = defineEmits<{
 
 const { apiBase } = useApi()
 const toast = useToast()
+const confirmDialog = useConfirmDialog()
 
 const detail = ref<DetailResponse | null>(null)
 const editing = ref(false)
@@ -117,12 +118,14 @@ async function saveEdit() {
 
 async function deletePersona() {
   if (!props.personaId) return
-  if (typeof window === 'undefined') return
-  const ok = window.confirm(
-    `Delete persona "${detail.value?.name}"?\n\n`
-    + 'This removes it from the JSON store. The Obsidian file (if any) '
-    + 'is left in place — delete manually from Obsidian if you want it gone.',
-  )
+  const ok = await confirmDialog({
+    title: `Delete persona "${detail.value?.name ?? 'Unknown'}"?`,
+    description:
+      'Removes it from the JSON store. The Obsidian file (if any) is '
+      + 'left in place — delete manually from Obsidian if you want it gone.',
+    confirmLabel: 'Delete persona',
+    variant: 'danger',
+  })
   if (!ok) return
   deleting.value = true
   try {
@@ -147,12 +150,16 @@ async function deletePersona() {
   }
 }
 
-function closeDrawer() {
+async function closeDrawer() {
   if (editing.value && !saving.value) {
-    if (typeof window !== 'undefined'
-        && !window.confirm('Discard unsaved edits?')) {
-      return
-    }
+    const ok = await confirmDialog({
+      title: 'Discard unsaved edits?',
+      description: 'Any changes you made will be lost.',
+      confirmLabel: 'Discard',
+      cancelLabel: 'Keep editing',
+      variant: 'danger',
+    })
+    if (!ok) return
   }
   cancelEdit()
   emit('update:modelValue', false)

package/dashboard/app/composables/useConfirmDialog.ts

@@ -0,0 +1,38 @@
+// PR75 v2.93.0 — confirm-dialog composable.
+//
+// Async wrapper around the canonical Nuxt UI v4 useOverlay pattern.
+// Replaces every window.confirm() call across the dashboard.
+//
+// Usage:
+//   const confirm = useConfirmDialog()
+//   const ok = await confirm({
+//     title: 'Delete persona',
+//     description: 'This removes the persona from the JSON store.',
+//     confirmLabel: 'Delete',
+//     variant: 'danger',
+//   })
+//   if (ok) { ... }
+
+import { ConfirmDialog } from '#components'
+
+export interface ConfirmDialogOptions {
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'default' | 'danger'
+}
+
+export const useConfirmDialog = () => {
+  const overlay = useOverlay()
+
+  return async (options: ConfirmDialogOptions): Promise<boolean> => {
+    const modal = overlay.create(ConfirmDialog, {
+      destroyOnClose: true,
+      props: options,
+    })
+
+    const result = await modal.open()
+    return result === true
+  }
+}

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/knowledge.vue

@@ -336,14 +336,18 @@ const vectorSearchActive = computed(() =>
 
 const deletingSource = ref<string | null>(null)
 
+const confirmDialog = useConfirmDialog()
+
 async function askDeleteSource(source: string) {
   if (!source) return
-  if (typeof window === 'undefined') return
-  const ok = window.confirm(
-    `Delete every indexed chunk from this source?\n\n${source}\n\n`
-    + 'This removes the source from search results but does not delete the original file. '
-    + 'You can re-ingest the source later if needed.',
-  )
+  const ok = await confirmDialog({
+    title: 'Delete every indexed chunk from this source?',
+    description:
+      `${source}\n\nRemoves the source from search results but does NOT `
+      + 'delete the original file. You can re-ingest later if needed.',
+    confirmLabel: 'Delete chunks',
+    variant: 'danger',
+  })
   if (!ok) return
   await deleteSource(source)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "2.92.0",
+  "version": "2.94.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.92.0"
+version = "2.94.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()