arkaos 2.3.0 → 2.3.2

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

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+import type { Agent } from '~/types'
+
+const { fetchApi } = useApi()
+
+const { data, status, error, refresh } = await fetchApi<{ agents: Agent[], total: number }>('/api/agents')
+
+const agents = computed(() => data.value?.agents ?? [])
+
+const search = ref('')
+const departmentFilter = ref('all')
+const tierFilter = ref('all')
+const page = ref(1)
+const pageSize = 15
+
+const departments = computed(() => {
+  const depts = new Set(agents.value.map(a => a.department))
+  return [
+    { label: 'All Departments', value: 'all' },
+    ...Array.from(depts).sort().map(d => ({ label: d, value: d }))
+  ]
+})
+
+const tierOptions = [
+  { label: 'All Tiers', value: 'all' },
+  { label: 'Tier 0 — C-Suite', value: '0' },
+  { label: 'Tier 1 — Squad Leads', value: '1' },
+  { label: 'Tier 2 — Specialists', value: '2' },
+  { label: 'Tier 3 — Support', value: '3' }
+]
+
+const filteredAgents = computed(() => {
+  let result = agents.value
+  const query = search.value.toLowerCase()
+
+  if (query) {
+    result = result.filter(agent =>
+      agent.name.toLowerCase().includes(query)
+      || agent.role.toLowerCase().includes(query)
+      || agent.department.toLowerCase().includes(query)
+    )
+  }
+
+  if (departmentFilter.value !== 'all') {
+    result = result.filter(agent => agent.department === departmentFilter.value)
+  }
+
+  if (tierFilter.value !== 'all') {
+    result = result.filter(agent => String(agent.tier) === tierFilter.value)
+  }
+
+  return result
+})
+
+const totalFiltered = computed(() => filteredAgents.value.length)
+
+const paginatedAgents = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredAgents.value.slice(start, start + pageSize)
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(totalFiltered.value / pageSize)))
+
+watch([search, departmentFilter, tierFilter], () => {
+  page.value = 1
+})
+
+const tierColor = (tier: number) => {
+  const colors: Record<number, string> = {
+    0: 'error',
+    1: 'warning',
+    2: 'primary',
+    3: 'neutral'
+  }
+  return (colors[tier] ?? 'neutral') as 'error' | 'warning' | 'primary' | 'neutral'
+}
+
+const columns: TableColumn<Agent>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role'
+  },
+  {
+    accessorKey: 'department',
+    header: 'Department'
+  },
+  {
+    accessorKey: 'tier',
+    header: 'Tier'
+  },
+  {
+    accessorFn: (row: Agent) => row.disc?.primary ?? '-',
+    id: 'disc',
+    header: 'DISC'
+  },
+  {
+    accessorKey: 'mbti',
+    header: 'MBTI'
+  },
+  {
+    id: 'actions',
+    header: ''
+  }
+]
+
+function goToAgent(id: string) {
+  navigateTo(`/agents/${id}`)
+}
+</script>
+
+<template>
+  <UDashboardPanel id="agents">
+    <template #header>
+      <UDashboardNavbar title="Agents">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+        <template #trailing>
+          <UBadge v-if="data?.total" :label="data.total" variant="subtle" />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <!-- Loading -->
+      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+        <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="flex flex-col items-center justify-center gap-4 py-12" role="alert">
+        <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
+        <p class="text-sm text-muted">Failed to load agents.</p>
+        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
+      </div>
+
+      <!-- Empty -->
+      <div v-else-if="!agents.length" class="flex flex-col items-center justify-center gap-4 py-12">
+        <UIcon name="i-lucide-users" class="size-12 text-muted" />
+        <p class="text-sm text-muted">No agents found.</p>
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <div class="flex flex-wrap items-center gap-3 mb-4">
+          <UInput
+            v-model="search"
+            class="max-w-sm"
+            icon="i-lucide-search"
+            placeholder="Search agents..."
+            aria-label="Search agents by name, role, or department"
+          />
+
+          <USelect
+            v-model="departmentFilter"
+            :items="departments"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            placeholder="Department"
+            class="min-w-48"
+            aria-label="Filter by department"
+          />
+
+          <USelect
+            v-model="tierFilter"
+            :items="tierOptions"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            placeholder="Tier"
+            class="min-w-44"
+            aria-label="Filter by tier"
+          />
+
+          <span class="ml-auto text-xs text-muted">
+            {{ totalFiltered }} agent{{ totalFiltered !== 1 ? 's' : '' }}
+          </span>
+        </div>
+
+        <UTable
+          :data="paginatedAgents"
+          :columns="columns"
+          :loading="status === 'pending'"
+          class="shrink-0"
+          :ui="{
+            base: 'table-fixed border-separate border-spacing-0',
+            thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+            tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:cursor-pointer [&>tr]:hover:bg-elevated/50 [&>tr]:transition-colors',
+            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'
+          }"
+        >
+          <template #name-cell="{ row }">
+            <button class="text-left font-medium text-primary hover:underline" @click="goToAgent(row.original.id)">
+              {{ row.original.name }}
+            </button>
+          </template>
+          <template #department-cell="{ row }">
+            <UBadge :label="row.original.department" variant="subtle" size="sm" />
+          </template>
+          <template #tier-cell="{ row }">
+            <UBadge :label="`Tier ${row.original.tier}`" :color="tierColor(row.original.tier)" variant="subtle" size="sm" />
+          </template>
+          <template #mbti-cell="{ row }">
+            <span class="font-mono text-sm">{{ row.original.mbti || '-' }}</span>
+          </template>
+          <template #actions-cell="{ row }">
+            <UButton size="xs" variant="ghost" icon="i-lucide-arrow-right" @click="goToAgent(row.original.id)" />
+          </template>
+        </UTable>
+
+        <div v-if="totalPages > 1" class="flex items-center justify-center mt-6">
+          <UPagination
+            :page="page"
+            :total="totalFiltered"
+            :items-per-page="pageSize"
+            @update:page="(val) => page = val"
+          />
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+</template>

package/dashboard/app/pages/budget.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+const { fetchApi } = useApi()
+
+const { data, status, error, refresh } = fetchApi<any>('/api/budget')
+
+const summary = computed(() => data.value?.summary ?? { total_tokens: 0, total_ops: 0, active_departments: 0, estimated_cost_usd: 0 })
+const departments = computed(() => data.value?.departments ?? [])
+const tiers = computed(() => data.value?.tiers ?? [])
+
+const showLimits = ref(false)
+
+const tierLabels: Record<number, string> = {
+  0: 'C-Suite (Unlimited)',
+  1: 'Squad Leads',
+  2: 'Specialists',
+  3: 'Support'
+}
+</script>
+
+<template>
+  <UDashboardPanel id="budget">
+    <template #header>
+      <UDashboardNavbar title="Usage & Budget">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+        <template #right>
+          <UButton
+            label="Refresh"
+            variant="ghost"
+            icon="i-lucide-refresh-cw"
+            size="sm"
+            @click="refresh()"
+          />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+        <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
+      </div>
+
+      <div v-else-if="error" class="flex flex-col items-center justify-center gap-4 py-12" role="alert">
+        <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
+        <p class="text-sm text-muted">Failed to load budget data.</p>
+        <UButton label="Retry" variant="outline" icon="i-lucide-refresh-cw" @click="refresh()" />
+      </div>
+
+      <div v-else class="space-y-6">
+        <!-- Monthly Summary -->
+        <UCard>
+          <div class="space-y-3">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider">This Month's Usage</p>
+            <div class="flex flex-wrap items-baseline gap-6">
+              <div>
+                <span class="text-3xl font-bold">{{ summary.total_tokens.toLocaleString() }}</span>
+                <span class="text-sm text-muted ml-1">tokens</span>
+              </div>
+              <div>
+                <span class="text-xl font-semibold">{{ summary.total_ops }}</span>
+                <span class="text-sm text-muted ml-1">operations</span>
+              </div>
+              <div>
+                <span class="text-xl font-semibold">{{ summary.active_departments }}</span>
+                <span class="text-sm text-muted ml-1">departments active</span>
+              </div>
+              <div v-if="summary.estimated_cost_usd > 0">
+                <span class="text-sm text-muted">Est. cost: ~${{ summary.estimated_cost_usd.toFixed(4) }}</span>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <!-- Department Breakdown -->
+        <div v-if="departments.length">
+          <h2 class="text-sm font-semibold text-muted uppercase tracking-wider mb-4">Usage by Department</h2>
+          <div class="space-y-3">
+            <div
+              v-for="dept in departments"
+              :key="dept.department"
+              class="flex items-center gap-4"
+            >
+              <span class="w-28 text-sm font-medium truncate">{{ dept.department }}</span>
+              <div class="flex-1 h-3 rounded-full bg-muted/20 overflow-hidden">
+                <div
+                  class="h-3 rounded-full bg-primary transition-none"
+                  :style="{ width: `${dept.percent}%` }"
+                />
+              </div>
+              <span class="w-24 text-right text-sm font-mono">{{ dept.tokens.toLocaleString() }}</span>
+              <span class="w-16 text-right text-xs text-muted">{{ dept.operations }} ops</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty state -->
+        <div v-else class="flex flex-col items-center justify-center gap-4 py-12">
+          <UIcon name="i-lucide-bar-chart-3" class="size-12 text-muted" />
+          <p class="text-sm text-muted">No usage data yet.</p>
+          <p class="text-xs text-muted">Token usage is tracked automatically when ArkaOS processes prompts and indexes knowledge.</p>
+        </div>
+
+        <!-- System Limits (collapsible) -->
+        <div class="pt-4 border-t border-default">
+          <button
+            class="flex items-center gap-2 text-xs text-muted hover:text-highlighted transition-colors"
+            @click="showLimits = !showLimits"
+          >
+            <UIcon :name="showLimits ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'" class="size-3" />
+            System Limits
+          </button>
+
+          <div v-if="showLimits" class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+            <div
+              v-for="tier in tiers"
+              :key="tier.tier"
+              class="rounded-lg border border-default p-3"
+            >
+              <p class="text-xs font-semibold">Tier {{ tier.tier }}</p>
+              <p class="text-xs text-muted">{{ tierLabels[tier.tier] ?? '' }}</p>
+              <p class="text-xs text-muted mt-1">
+                <template v-if="tier.is_unlimited">Unlimited</template>
+                <template v-else>{{ (tier.allocated ?? 0).toLocaleString() }} tokens/month</template>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>

package/dashboard/app/pages/commands.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+import type { Command } from '~/types'
+
+const { fetchApi } = useApi()
+
+const { data, status, error, refresh } = await fetchApi<{ commands: Command[], total: number }>('/api/commands')
+
+const commands = computed(() => data.value?.commands ?? [])
+
+const search = ref('')
+const departmentFilter = ref('all')
+const page = ref(1)
+const pageSize = 20
+const expandedRow = ref<string | null>(null)
+
+const departments = computed(() => {
+  const depts = new Set(commands.value.map(c => c.department))
+  return [
+    { label: 'All Departments', value: 'all' },
+    ...Array.from(depts).sort().map(d => ({ label: d, value: d }))
+  ]
+})
+
+const filteredCommands = computed(() => {
+  let result = commands.value
+  const query = search.value.toLowerCase()
+
+  if (query) {
+    result = result.filter(cmd =>
+      cmd.command.toLowerCase().includes(query)
+      || cmd.description.toLowerCase().includes(query)
+    )
+  }
+
+  if (departmentFilter.value !== 'all') {
+    result = result.filter(cmd => cmd.department === departmentFilter.value)
+  }
+
+  return result
+})
+
+const totalFiltered = computed(() => filteredCommands.value.length)
+
+const paginatedCommands = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredCommands.value.slice(start, start + pageSize)
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(totalFiltered.value / pageSize)))
+
+watch([search, departmentFilter], () => {
+  page.value = 1
+})
+
+function toggleExpand(commandId: string) {
+  expandedRow.value = expandedRow.value === commandId ? null : commandId
+}
+
+const columns: TableColumn<Command>[] = [
+  {
+    accessorKey: 'command',
+    header: 'Command'
+  },
+  {
+    accessorKey: 'department',
+    header: 'Department'
+  },
+  {
+    accessorKey: 'description',
+    header: 'Description'
+  }
+]
+</script>
+
+<template>
+  <UDashboardPanel id="commands">
+    <template #header>
+      <UDashboardNavbar title="Commands">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+        <template #trailing>
+          <UBadge v-if="data?.total" :label="data.total" variant="subtle" />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <!-- Loading -->
+      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+        <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="flex flex-col items-center justify-center gap-4 py-12" role="alert">
+        <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
+        <p class="text-sm text-muted">Failed to load commands.</p>
+        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
+      </div>
+
+      <!-- Empty -->
+      <div v-else-if="!commands.length" class="flex flex-col items-center justify-center gap-4 py-12">
+        <UIcon name="i-lucide-terminal" class="size-12 text-muted" />
+        <p class="text-sm text-muted">No commands found.</p>
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <div class="flex flex-wrap items-center gap-3 mb-4">
+          <UInput
+            v-model="search"
+            class="max-w-sm"
+            icon="i-lucide-search"
+            placeholder="Search commands..."
+            aria-label="Search commands by name or description"
+          />
+
+          <USelect
+            v-model="departmentFilter"
+            :items="departments"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            placeholder="Department"
+            class="min-w-48"
+            aria-label="Filter by department"
+          />
+
+          <span class="ml-auto text-xs text-muted">
+            {{ totalFiltered }} command{{ totalFiltered !== 1 ? 's' : '' }}
+          </span>
+        </div>
+
+        <UTable
+          :data="paginatedCommands"
+          :columns="columns"
+          :loading="status === 'pending'"
+          class="shrink-0"
+          :ui="{
+            base: 'table-fixed border-separate border-spacing-0',
+            thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
+            tbody: '[&>tr]:last:[&>td]:border-b-0 [&>tr]:cursor-pointer [&>tr]:hover:bg-elevated/50 [&>tr]:transition-colors',
+            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: Command) => toggleExpand(row.id)"
+        >
+          <template #command-cell="{ row }">
+            <code class="font-mono text-sm text-primary">{{ row.original.command }}</code>
+          </template>
+          <template #department-cell="{ row }">
+            <UBadge :label="row.original.department" variant="subtle" size="sm" />
+          </template>
+          <template #expanded="{ row }">
+            <div v-if="expandedRow === row.original.id && row.original.keywords?.length" class="px-4 py-3 bg-elevated/30">
+              <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-2">Keywords</p>
+              <div class="flex flex-wrap gap-1.5">
+                <UBadge
+                  v-for="kw in row.original.keywords"
+                  :key="kw"
+                  :label="kw"
+                  variant="outline"
+                  size="xs"
+                />
+              </div>
+            </div>
+          </template>
+        </UTable>
+
+        <div v-if="totalPages > 1" class="flex items-center justify-center mt-6">
+          <UPagination
+            :page="page"
+            :total="totalFiltered"
+            :items-per-page="pageSize"
+            @update:page="(val) => page = val"
+          />
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+</template>

package/dashboard/app/pages/health.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { HealthCheck } from '~/types'
+
+const { fetchApi } = useApi()
+
+const { data, status, error, refresh } = await fetchApi<{ checks: HealthCheck[], passed: number, total: number }>('/api/health')
+
+const checks = computed(() => data.value?.checks ?? [])
+const passed = computed(() => data.value?.passed ?? 0)
+const total = computed(() => data.value?.total ?? 0)
+const allPassed = computed(() => passed.value === total.value && total.value > 0)
+</script>
+
+<template>
+  <UDashboardPanel id="health">
+    <template #header>
+      <UDashboardNavbar title="Health Checks">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+        <template #trailing>
+          <UBadge
+            v-if="data"
+            :label="`${passed}/${total}`"
+            :color="allPassed ? 'success' : 'warning'"
+            variant="subtle"
+          />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <!-- Loading -->
+      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+        <UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-muted" />
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="flex flex-col items-center justify-center gap-4 py-12" role="alert">
+        <UIcon name="i-lucide-alert-triangle" class="size-12 text-red-500" />
+        <p class="text-sm text-muted">Failed to load health checks.</p>
+        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
+      </div>
+
+      <!-- Empty -->
+      <div v-else-if="!checks.length" class="flex flex-col items-center justify-center gap-4 py-12">
+        <UIcon name="i-lucide-heart-pulse" class="size-12 text-muted" />
+        <p class="text-sm text-muted">No health checks available.</p>
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <!-- Overall Status -->
+        <div
+          class="mb-6 rounded-lg border p-6 text-center"
+          :class="allPassed ? 'border-green-500/30 bg-green-500/5' : 'border-yellow-500/30 bg-yellow-500/5'"
+        >
+          <UIcon
+            :name="allPassed ? 'i-lucide-check-circle' : 'i-lucide-alert-circle'"
+            :class="allPassed ? 'text-green-500' : 'text-yellow-500'"
+            class="size-12"
+          />
+          <p class="mt-2 text-lg font-semibold text-highlighted">
+            {{ allPassed ? 'All Checks Passing' : `${total - passed} Check(s) Failing` }}
+          </p>
+          <p class="text-sm text-muted">{{ passed }} of {{ total }} checks passed</p>
+        </div>
+
+        <!-- Individual Checks -->
+        <div class="space-y-3">
+          <div
+            v-for="check in checks"
+            :key="check.name"
+            class="flex items-start gap-3 rounded-lg border border-default p-4"
+          >
+            <UIcon
+              :name="check.passed ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
+              :class="check.passed ? 'text-green-500' : 'text-red-500'"
+              class="mt-0.5 size-5 shrink-0"
+            />
+            <div class="flex-1">
+              <h4 class="font-medium text-highlighted">{{ check.name }}</h4>
+              <p v-if="!check.passed && check.fix" class="mt-1 text-sm text-muted">
+                Fix: {{ check.fix }}
+              </p>
+            </div>
+            <UBadge
+              :label="check.passed ? 'Pass' : 'Fail'"
+              :color="check.passed ? 'success' : 'error'"
+              variant="subtle"
+              size="sm"
+            />
+          </div>
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+</template>