arkaos 2.2.2 → 2.3.1

package/dashboard/app/pages/settings.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+const { fetchApi, apiBase } = useApi()
+
+const { data, status, error, refresh } = fetchApi<any>('/api/keys')
+
+const keys = computed(() => data.value?.keys ?? [])
+
+const newKey = ref('')
+const newValue = ref('')
+const saving = ref(false)
+const deletingKey = ref<string | null>(null)
+
+async function saveKey() {
+  if (!newKey.value || !newValue.value) return
+  saving.value = true
+  try {
+    await $fetch(`${apiBase}/api/keys`, {
+      method: 'POST',
+      body: { key: newKey.value, value: newValue.value },
+    })
+    newKey.value = ''
+    newValue.value = ''
+    await refresh()
+  } catch {}
+  saving.value = false
+}
+
+async function deleteKey(keyName: string) {
+  deletingKey.value = keyName
+  try {
+    await $fetch(`${apiBase}/api/keys/${keyName}`, { method: 'DELETE' })
+    await refresh()
+  } catch {}
+  deletingKey.value = null
+}
+
+const keyOptions = [
+  { label: 'OPENAI_API_KEY', value: 'OPENAI_API_KEY' },
+  { label: 'FAL_API_KEY', value: 'FAL_API_KEY' },
+  { label: 'GOOGLE_API_KEY', value: 'GOOGLE_API_KEY' },
+  { label: 'Custom...', value: 'custom' },
+]
+
+const isCustom = computed(() => newKey.value === 'custom')
+const customKeyName = ref('')
+const effectiveKeyName = computed(() => isCustom.value ? customKeyName.value : newKey.value)
+</script>
+
+<template>
+  <UDashboardPanel id="settings">
+    <template #header>
+      <UDashboardNavbar title="Settings">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="space-y-8">
+        <!-- API Keys Section -->
+        <div>
+          <h2 class="text-lg font-semibold mb-1">API Keys</h2>
+          <p class="text-sm text-muted mb-6">Configure API keys for external services. Keys are stored locally at ~/.arkaos/keys.json.</p>
+
+          <!-- Add Key Form -->
+          <UCard class="mb-6">
+            <div class="space-y-4">
+              <p class="text-xs font-semibold text-muted uppercase tracking-wider">Add API Key</p>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
+                <div>
+                  <label class="text-xs text-muted mb-1 block">Provider</label>
+                  <USelect v-model="newKey" :items="keyOptions" class="w-full" placeholder="Select key..." />
+                </div>
+                <div v-if="isCustom">
+                  <label class="text-xs text-muted mb-1 block">Key Name</label>
+                  <UInput v-model="customKeyName" class="w-full" placeholder="MY_CUSTOM_KEY" />
+                </div>
+                <div :class="isCustom ? '' : 'md:col-span-1'">
+                  <label class="text-xs text-muted mb-1 block">Value</label>
+                  <UInput v-model="newValue" type="password" class="w-full" placeholder="sk-..." />
+                </div>
+                <div>
+                  <UButton
+                    label="Save Key"
+                    icon="i-lucide-key"
+                    :loading="saving"
+                    :disabled="!effectiveKeyName || !newValue"
+                    @click="() => { newKey = effectiveKeyName; saveKey() }"
+                    block
+                  />
+                </div>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Keys List -->
+          <div v-if="status === 'pending'" class="flex items-center justify-center py-8">
+            <UIcon name="i-lucide-loader-2" class="size-6 animate-spin text-muted" />
+          </div>
+
+          <div v-else class="space-y-2">
+            <div
+              v-for="k in keys"
+              :key="k.key"
+              class="flex items-center gap-4 p-3 rounded-lg border border-default"
+            >
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="text-sm font-mono font-medium">{{ k.key }}</span>
+                  <UBadge :label="k.provider" variant="subtle" size="xs" />
+                  <UBadge
+                    v-if="k.configured"
+                    label="Configured"
+                    color="success"
+                    variant="subtle"
+                    size="xs"
+                  />
+                  <UBadge
+                    v-else
+                    label="Not Set"
+                    color="neutral"
+                    variant="outline"
+                    size="xs"
+                  />
+                </div>
+                <p v-if="k.used_for" class="text-xs text-muted mt-0.5">{{ k.used_for }}</p>
+                <p v-if="k.masked_value && k.configured" class="text-xs font-mono text-muted/60 mt-0.5">{{ k.masked_value }}</p>
+              </div>
+              <UButton
+                v-if="k.configured && k.masked_value !== '(from environment)'"
+                icon="i-lucide-trash-2"
+                variant="ghost"
+                color="error"
+                size="xs"
+                :loading="deletingKey === k.key"
+                @click="deleteKey(k.key)"
+                aria-label="Delete key"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>

package/dashboard/app/pages/tasks.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+import type { Task, TaskSummary } from '~/types'
+
+const { fetchApi } = useApi()
+
+const { data, status, error, refresh } = await fetchApi<{ tasks: Task[], summary: TaskSummary }>('/api/tasks')
+
+const tasks = computed(() => data.value?.tasks ?? [])
+const summary = computed(() => data.value?.summary ?? { total: 0, active: 0, queued: 0, completed: 0 })
+
+const activeTab = ref('all')
+
+const tabItems = [
+  { label: 'All', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Queued', value: 'queued' },
+  { label: 'Completed', value: 'completed' },
+  { label: 'Failed', value: 'failed' }
+]
+
+const filteredTasks = computed(() => {
+  if (activeTab.value === 'all') return tasks.value
+  return tasks.value.filter(t => {
+    if (activeTab.value === 'active') return t.status === 'processing' || t.status === 'active'
+    return t.status === activeTab.value
+  })
+})
+
+type StatusColorType = 'success' | 'error' | 'primary' | 'warning' | 'neutral'
+
+function statusColor(taskStatus: string): StatusColorType {
+  const colors: Record<string, StatusColorType> = {
+    completed: 'success',
+    processing: 'primary',
+    active: 'primary',
+    queued: 'neutral',
+    failed: 'error',
+    cancelled: 'warning'
+  }
+  return colors[taskStatus] ?? 'neutral'
+}
+
+function formatDate(dateStr: string) {
+  if (!dateStr) return '-'
+  try {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format(new Date(dateStr))
+  } catch {
+    return dateStr
+  }
+}
+
+const columns: TableColumn<Task>[] = [
+  {
+    accessorKey: 'agent',
+    header: 'Type'
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title'
+  },
+  {
+    accessorKey: 'department',
+    header: 'Department'
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status'
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Progress'
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created'
+  }
+]
+</script>
+
+<template>
+  <UDashboardPanel id="tasks">
+    <template #header>
+      <UDashboardNavbar title="Tasks">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </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 tasks.</p>
+        <UButton label="Retry" variant="outline" color="primary" icon="i-lucide-refresh-cw" @click="refresh()" />
+      </div>
+
+      <!-- Content -->
+      <template v-else>
+        <!-- Summary Cards -->
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
+          <div class="rounded-lg border border-default p-4 text-center">
+            <p class="text-2xl font-semibold text-highlighted">{{ summary.total }}</p>
+            <p class="text-xs text-muted">Total</p>
+          </div>
+          <div class="rounded-lg border border-default p-4 text-center">
+            <p class="text-2xl font-semibold text-primary">{{ summary.active }}</p>
+            <p class="text-xs text-muted">Active</p>
+          </div>
+          <div class="rounded-lg border border-default p-4 text-center">
+            <p class="text-2xl font-semibold text-yellow-500">{{ summary.queued }}</p>
+            <p class="text-xs text-muted">Queued</p>
+          </div>
+          <div class="rounded-lg border border-default p-4 text-center">
+            <p class="text-2xl font-semibold text-green-500">{{ summary.completed }}</p>
+            <p class="text-xs text-muted">Completed</p>
+          </div>
+        </div>
+
+        <!-- Status Filter Tabs -->
+        <div class="mt-6">
+          <UTabs
+            :items="tabItems"
+            :model-value="activeTab"
+            @update:model-value="activeTab = $event as string"
+          />
+        </div>
+
+        <!-- Empty State -->
+        <div v-if="!tasks.length" class="mt-6 flex flex-col items-center justify-center gap-4 py-16">
+          <UIcon name="i-lucide-list-checks" class="size-16 text-muted" />
+          <h3 class="text-lg font-semibold text-highlighted">No tasks yet</h3>
+          <p class="text-sm text-muted text-center max-w-md">
+            Tasks are created when you run ArkaOS workflows. Start by indexing your project or running a command.
+          </p>
+          <div class="mt-2 rounded-lg border border-default bg-elevated/50 px-4 py-3">
+            <p class="text-xs text-muted mb-1">Try running:</p>
+            <code class="font-mono text-sm text-primary">npx arkaos index</code>
+          </div>
+        </div>
+
+        <!-- Filtered Empty -->
+        <div v-else-if="!filteredTasks.length" class="mt-6 flex flex-col items-center justify-center gap-4 py-12">
+          <UIcon name="i-lucide-filter-x" class="size-12 text-muted" />
+          <p class="text-sm text-muted">No {{ activeTab }} tasks found.</p>
+        </div>
+
+        <!-- Task Table -->
+        <div v-else class="mt-4">
+          <UTable
+            :data="filteredTasks"
+            :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',
+              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 #agent-cell="{ row }">
+              <UBadge :label="row.original.agent" variant="subtle" color="primary" size="sm" />
+            </template>
+            <template #department-cell="{ row }">
+              <span class="text-sm text-muted">{{ row.original.department }}</span>
+            </template>
+            <template #status-cell="{ row }">
+              <UBadge
+                :label="row.original.status"
+                :color="statusColor(row.original.status)"
+                variant="subtle"
+                size="sm"
+                class="capitalize"
+              />
+            </template>
+            <template #progress-cell="{ row }">
+              <div class="flex items-center gap-2 min-w-24">
+                <UProgress :value="row.original.progress" :max="100" size="xs" class="flex-1" />
+                <span class="text-xs text-muted font-mono w-8 text-right">{{ row.original.progress }}%</span>
+              </div>
+            </template>
+            <template #created_at-cell="{ row }">
+              <span class="text-xs text-muted">{{ formatDate(row.original.created_at) }}</span>
+            </template>
+          </UTable>
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+</template>

package/dashboard/app/types/index.d.ts

@@ -0,0 +1,181 @@
+export interface OverviewData {
+  agents: number
+  skills: number
+  departments: number
+  tests: number
+  commands: number
+  workflows: number
+  version: string
+  budget: {
+    allocated: number
+    used: number
+    percent_used: number
+    is_unlimited: boolean
+  }
+  tasks: {
+    total: number
+    active: number
+    queued: number
+  }
+  knowledge: {
+    total_chunks: number
+    total_files: number
+  }
+}
+
+export interface Agent {
+  id: string
+  name: string
+  role: string
+  department: string
+  tier: number
+  disc: {
+    primary: string
+    secondary?: string
+    description?: string
+  }
+  enneagram: {
+    type: string
+    wing?: string
+    label?: string
+  }
+  big_five: {
+    O: number
+    C: number
+    E: number
+    A: number
+    N: number
+  }
+  mbti: string
+  expertise_domains: string[]
+  frameworks: string[]
+  authority?: {
+    veto?: boolean
+    approve_budget?: boolean
+    approve_architecture?: boolean
+    orchestrate?: boolean
+    block_release?: boolean
+    delegates_to?: string[]
+    escalates_to?: string[]
+  }
+}
+
+export interface Command {
+  id: string
+  command: string
+  department: string
+  description: string
+  keywords?: string[]
+}
+
+export interface BudgetTier {
+  tier: number
+  allocated: number
+  used: number
+  remaining: number
+  percent_used: number
+  status: string
+  is_unlimited: boolean
+}
+
+export interface Task {
+  id: string
+  title: string
+  status: string
+  agent: string
+  department: string
+  progress: number
+  created_at: string
+}
+
+export interface TaskSummary {
+  total: number
+  active: number
+  queued: number
+  completed: number
+}
+
+export interface KnowledgeStats {
+  total_chunks: number
+  total_files: number
+  vss_available?: boolean
+  areas?: {
+    name: string
+    chunks: number
+    files: number
+  }[]
+}
+
+export interface KnowledgeSearchResult {
+  id?: string
+  text?: string
+  content?: string
+  heading?: string
+  source?: string
+  area?: string
+  score: number
+}
+
+export interface IngestRequest {
+  source: string
+  type: 'youtube' | 'web' | 'pdf' | 'audio' | 'markdown'
+}
+
+export interface IngestResponse {
+  task_id: string
+  source_type: string
+  status: string
+}
+
+export interface IngestTask {
+  id: string
+  title: string
+  status: 'queued' | 'processing' | 'completed' | 'failed'
+  progress_percent: number
+  progress_message: string
+  output_data?: {
+    chunks_created?: number
+    [key: string]: unknown
+  }
+  error?: string
+  source_type?: string
+  created_at?: string
+}
+
+export interface HealthCheck {
+  name: string
+  passed: boolean
+  fix: string
+}
+
+export interface Persona {
+  id: string
+  name: string
+  title: string
+  tagline: string
+  source: string
+  mbti: string
+  disc: {
+    primary: string
+    secondary: string
+  }
+  enneagram: {
+    type: number
+    wing: number
+  }
+  big_five: {
+    openness: number
+    conscientiousness: number
+    extraversion: number
+    agreeableness: number
+    neuroticism: number
+  }
+  mental_models: string[]
+  expertise_domains: string[]
+  frameworks: string[]
+  communication: {
+    tone: string
+    vocabulary_level: string
+  }
+  cloned_to_agents: string[]
+}

package/dashboard/app/utils/index.ts

@@ -0,0 +1,7 @@
+export function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function randomFrom<T>(array: T[]): T {
+  return array[Math.floor(Math.random() * array.length)]!
+}

package/dashboard/nuxt.config.ts

@@ -0,0 +1,39 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/ui',
+    '@vueuse/nuxt'
+  ],
+
+  ssr: false,
+
+  devtools: {
+    enabled: true
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  runtimeConfig: {
+    public: {
+      apiBase: 'http://localhost:3334'
+    }
+  },
+
+  routeRules: {
+    '/api/**': {
+      cors: true
+    }
+  },
+
+  compatibilityDate: '2024-07-11',
+
+  eslint: {
+    config: {
+      stylistic: {
+        commaDangle: 'never',
+        braceStyle: '1tbs'
+      }
+    }
+  }
+})

package/dashboard/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "nuxt-ui-template-dashboard",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.100",
+    "@iconify-json/simple-icons": "^1.2.75",
+    "@internationalized/date": "^3.12.0",
+    "@nuxt/ui": "^4.6.0",
+    "@tanstack/table-core": "^8.21.3",
+    "@unovis/ts": "^1.6.4",
+    "@unovis/vue": "^1.6.4",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/nuxt": "^14.2.1",
+    "date-fns": "^4.1.0",
+    "nuxt": "^4.4.2",
+    "scule": "^1.3.0",
+    "tailwindcss": "^4.2.2",
+    "vue": "^3.5.31",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^1.15.2",
+    "eslint": "^10.1.0",
+    "typescript": "^6.0.2",
+    "vue-tsc": "^3.2.6"
+  },
+  "packageManager": "pnpm@10.33.0"
+}

package/dashboard/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+ignoredBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - maplibre-gl
+  - unrs-resolver
+  - vue-demi

package/dashboard/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ]
+}