arkaos 4.13.1 → 4.13.2

package/dashboard/app/pages/index.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-// PR66 v2.83.0 — Command center.
-//
-// Replaces the 6-stat-card Overview that just counted things you
-// already knew (agents=62, skills=256, ...) with telemetry-driven
-// information the operator actually uses: greeting, today's cost,
-// per-project state, recent incidents, quick actions.
+// Mission Control (Pulse v2). Editorial sci-fi recomposition of the
+// command center: numbered sections, count-up telemetry, agent
+// constellation, live signal feed. Primary gate stays on
+// /api/overview/command-center; section fetches are non-blocking.
 
 interface ProjectRow {
   name: string
@@ -67,15 +65,39 @@ interface CommandCenterPayload {
   quick_actions: QuickAction[]
 }
 
+interface AgentRow {
+  id: string
+  name: string
+  department: string
+  tier: number
+}
+
+interface DeptRow {
+  department: string
+  agent_count: number
+  calls_30d: number
+  cost_usd_30d: number | null
+}
+
+interface TrendDay {
+  date: string
+  cost_usd: number
+}
+
 const { fetchApi } = useApi()
 
 const {
   data,
   status,
   error,
-  refresh,
+  refresh
 } = await fetchApi<CommandCenterPayload>('/api/overview/command-center')
 
+// Section fetches — lazy so a slow endpoint never blocks the hero.
+const { data: agentsData } = fetchApi<{ agents: AgentRow[] }>('/api/agents', { lazy: true })
+const { data: deptsData } = fetchApi<{ departments: DeptRow[] }>('/api/departments', { lazy: true })
+const { data: trendData } = fetchApi<{ days: TrendDay[] }>('/api/llm-costs/trend?days=30', { lazy: true })
+
 const greetingLabel = computed(() => {
   const name = data.value?.greeting?.name?.trim()
   const language = data.value?.greeting?.language ?? 'en'
@@ -85,16 +107,18 @@ const greetingLabel = computed(() => {
 
 const todayCost = computed(() => data.value?.today_cost)
 
-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)}`
-}
+const trendSeries = computed(() =>
+  (trendData.value?.days ?? []).map(d => ({ date: d.date, value: d.cost_usd ?? 0 }))
+)
+
+const constellationAgents = computed(() => agentsData.value?.agents ?? [])
+const constellationDepts = computed(() =>
+  (deptsData.value?.departments ?? []).map(d => ({ department: d.department, calls_30d: d.calls_30d }))
+)
 
 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`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
   return n.toString()
 }
 
@@ -108,13 +132,13 @@ function statusColor(status: string): 'success' | 'warning' | 'neutral' | 'error
   }
 }
 
-function commitFreshness(days: number | null): { color: string; label: string } {
+function commitFreshness(days: number | null): { color: string, label: string } {
   if (days === null) return { color: 'text-muted', label: 'no git' }
-  if (days === 0) return { color: 'text-green-500', label: 'today' }
-  if (days === 1) return { color: 'text-green-500', label: '1 day ago' }
+  if (days === 0) return { color: 'text-primary', label: 'today' }
+  if (days === 1) return { color: 'text-primary', label: '1 day ago' }
   if (days < 7) return { color: 'text-primary', label: `${days} days ago` }
-  if (days < 30) return { color: 'text-yellow-500', label: `${days} days ago` }
-  return { color: 'text-red-500', label: `${days} days ago` }
+  if (days < 30) return { color: 'text-warning', label: `${days} days ago` }
+  return { color: 'text-error', label: `${days} days ago` }
 }
 
 function formatIncidentTs(iso: string): string {
@@ -124,7 +148,7 @@ function formatIncidentTs(iso: string): string {
       month: 'short',
       day: 'numeric',
       hour: '2-digit',
-      minute: '2-digit',
+      minute: '2-digit'
     }).format(new Date(iso))
   } catch {
     return iso
@@ -146,7 +170,7 @@ function copyCommand(cmd: string) {
 <template>
   <UDashboardPanel id="overview">
     <template #header>
-      <UDashboardNavbar title="Command Center">
+      <UDashboardNavbar title="Mission Control">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -166,157 +190,135 @@ function copyCommand(cmd: string) {
       <DashboardState
         :status="status"
         :error="error"
-        loading-label="Loading command center"
+        loading-label="Loading mission control"
         :on-retry="() => refresh()"
       >
-        <div class="space-y-6">
-          <!-- Hero: greeting + today's cost -->
-          <UCard>
-            <div class="flex flex-col gap-2 md:flex-row md:items-baseline md:justify-between">
-              <div>
-                <h1 class="text-2xl font-bold">{{ greetingLabel }}.</h1>
-                <p class="text-sm text-muted mt-1">
-                  <template v-if="data?.greeting?.role && data?.greeting?.company">
-                    {{ data.greeting.role }} @ {{ data.greeting.company }}
-                  </template>
-                  <template v-else>
-                    Set your profile in Settings to personalise this view.
-                  </template>
-                </p>
-              </div>
-              <div v-if="todayCost" class="flex items-baseline gap-6 text-right">
-                <div>
-                  <p class="text-xs font-semibold text-muted uppercase tracking-wider">
-                    Today's cost
-                  </p>
-                  <p class="text-2xl font-bold">{{ formatCost(todayCost.total_usd) }}</p>
+        <div class="mx-auto w-full max-w-6xl space-y-12 py-2">
+          <!-- I. STATUS -->
+          <div class="space-y-6">
+            <ArkaPageHero
+              numeral="I"
+              label="mission control"
+              :title="greetingLabel"
+              :subtitle="data?.greeting?.role && data?.greeting?.company
+                ? `${data.greeting.role} @ ${data.greeting.company} — status of every agent, every memory, every signal.`
+                : 'Status of every agent, every memory, every signal.'"
+            >
+              <template #stats>
+                <div class="grid grid-cols-2 gap-3 pt-4 lg:grid-cols-4">
+                  <ArkaStatCard
+                    label="today’s cost"
+                    :value="todayCost?.total_usd ?? null"
+                    format="currency"
+                    :decimals="2"
+                    accent
+                  />
+                  <ArkaStatCard
+                    label="calls"
+                    :value="todayCost?.call_count ?? null"
+                  />
+                  <ArkaStatCard
+                    label="tokens in / out"
+                    :value="(todayCost?.tokens_in ?? 0) + (todayCost?.tokens_out ?? 0)"
+                    format="tokens"
+                    :hint="todayCost ? `${formatTokens(todayCost.tokens_in ?? 0)} in · ${formatTokens(todayCost.tokens_out ?? 0)} out` : ''"
+                  />
+                  <ArkaStatCard
+                    label="cache hit rate"
+                    :value="todayCost?.cache_hit_rate ?? null"
+                    format="percent"
+                  />
                 </div>
-                <div>
-                  <p class="text-xs font-semibold text-muted uppercase tracking-wider">
-                    Calls
-                  </p>
-                  <p class="text-2xl font-bold">{{ todayCost.call_count }}</p>
-                </div>
-                <div>
-                  <p class="text-xs font-semibold text-muted uppercase tracking-wider">
-                    Cache
-                  </p>
-                  <p class="text-2xl font-bold">
-                    {{ (todayCost.cache_hit_rate * 100).toFixed(0) }}%
-                  </p>
-                </div>
-              </div>
-            </div>
-          </UCard>
+              </template>
+            </ArkaPageHero>
 
-          <!-- PR91a v3.35.0 — Agent gap suggestions -->
-          <AgentSuggestionsCard class="mb-6" />
+            <div class="arka-pulse-line" aria-hidden="true" />
 
-          <!-- PR84d v3.10.0 — Top departments + Recent personas row -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-            <div>
-              <h2 class="text-sm font-semibold uppercase tracking-wider text-muted mb-3">
-                Top departments (30d)
-              </h2>
-              <DashboardState
-                :status="status"
-                :empty="!data?.top_departments_30d?.length"
-                empty-title="No telemetry yet"
-                empty-description="Department spend will appear once agents start running."
-                empty-icon="i-lucide-bar-chart"
-              >
-                <div class="space-y-2">
-                  <div
-                    v-for="(d, idx) in data?.top_departments_30d"
-                    :key="d.department"
-                    class="rounded-lg border border-default p-3 flex items-center gap-3"
-                  >
-                    <span class="text-xs font-mono font-semibold text-muted w-6">#{{ idx + 1 }}</span>
-                    <span class="flex-1 font-semibold capitalize">{{ d.department }}</span>
-                    <span class="text-xs font-mono text-muted">{{ d.calls }} calls</span>
-                    <span class="text-sm font-mono font-semibold">
-                      {{ d.cost_usd === null ? '—' : `$${d.cost_usd.toFixed(2)}` }}
-                    </span>
-                  </div>
-                </div>
-              </DashboardState>
-            </div>
+            <ArkaGlowCard v-if="trendSeries.length" :padded="false" class="px-2 pt-4 pb-1">
+              <div class="flex items-center justify-between px-3 pb-2">
+                <span class="arka-eyebrow">cumulative spend · 30d</span>
+                <span class="arka-data text-xs text-muted">
+                  ${{ trendSeries.reduce((s, d) => s + d.value, 0).toFixed(2) }} total
+                </span>
+              </div>
+              <ClientOnly>
+                <ArkaTrendChart :series="trendSeries" :height="150" />
+              </ClientOnly>
+            </ArkaGlowCard>
+          </div>
 
-            <div>
-              <h2 class="text-sm font-semibold uppercase tracking-wider text-muted mb-3">
-                Recent personas
-              </h2>
-              <DashboardState
-                :status="status"
-                :empty="!data?.recent_personas?.length"
-                empty-title="No personas yet"
-                empty-description="Create one from /personas → New Persona."
-                empty-icon="i-lucide-user-plus"
-              >
-                <div class="space-y-2">
-                  <NuxtLink
-                    v-for="p in data?.recent_personas"
-                    :key="p.id"
-                    :to="`/personas/${p.id}`"
-                    class="block rounded-lg border border-default p-3 hover:border-primary/40 transition-colors"
-                  >
-                    <div class="flex items-center justify-between gap-3">
-                      <div class="min-w-0">
-                        <p class="text-sm font-semibold truncate">{{ p.name }}</p>
-                        <p class="text-xs text-muted truncate">{{ p.title || '—' }}</p>
-                      </div>
-                      <div class="flex items-center gap-2 shrink-0">
-                        <UBadge
-                          v-if="p.mbti"
-                          :label="p.mbti"
-                          variant="subtle"
-                          size="xs"
-                        />
-                        <UBadge
-                          v-if="p.source_store === 'obsidian'"
-                          icon="i-lucide-file-text"
-                          label="Obsidian"
-                          color="primary"
-                          variant="soft"
-                          size="xs"
-                        />
-                      </div>
-                    </div>
-                  </NuxtLink>
+          <!-- II. AGENT CONSTELLATION -->
+          <ArkaSection numeral="II" label="agent constellation">
+            <template #actions>
+              <NuxtLink to="/agents" class="arka-data text-xs text-muted transition-colors hover:text-primary">
+                open agents →
+              </NuxtLink>
+            </template>
+            <ArkaGlowCard :padded="false">
+              <ClientOnly>
+                <ArkaConstellation
+                  v-if="constellationAgents.length"
+                  :agents="constellationAgents"
+                  :departments="constellationDepts"
+                  :height="380"
+                />
+                <div v-else class="flex h-64 items-center justify-center">
+                  <p class="arka-data text-xs text-muted">
+                    mapping the constellation…
+                  </p>
                 </div>
-              </DashboardState>
+              </ClientOnly>
+            </ArkaGlowCard>
+            <div v-if="data?.top_departments_30d?.length" class="flex flex-wrap gap-2">
+              <NuxtLink
+                v-for="(d, idx) in data.top_departments_30d"
+                :key="d.department"
+                :to="`/departments/${d.department}`"
+                class="flex items-center gap-2 rounded-full border border-default bg-elevated px-3 py-1.5 transition-colors hover:border-primary/40"
+              >
+                <span class="arka-data text-[10px] text-muted">#{{ idx + 1 }}</span>
+                <span class="text-xs font-medium capitalize">{{ d.department }}</span>
+                <span class="arka-data text-[10px] text-muted">{{ d.calls }} calls</span>
+                <span class="arka-data text-[10px]" :class="d.cost_usd === null ? 'text-muted' : 'text-primary'">
+                  {{ d.cost_usd === null ? '—' : `$${d.cost_usd.toFixed(2)}` }}
+                </span>
+              </NuxtLink>
             </div>
-          </div>
+          </ArkaSection>
 
-          <!-- Two columns: projects + incidents -->
-          <div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
-            <!-- Projects -->
-            <div>
-              <div class="flex items-baseline justify-between mb-3">
-                <h2 class="text-sm font-semibold uppercase tracking-wider text-muted">
-                  Projects
-                </h2>
-                <NuxtLink to="/settings" class="text-xs text-muted hover:text-primary">
-                  Configure dirs →
-                </NuxtLink>
-              </div>
-              <DashboardState
-                :status="status"
-                :empty="!data?.projects?.length"
-                empty-title="No projects discovered yet"
-                empty-description="Add your project directories in Settings → Projects."
-                empty-icon="i-lucide-folder-open"
-              >
-                <div class="space-y-2">
-                  <div
+          <!-- III. LIVE FEED -->
+          <ArkaSection numeral="III" label="live feed">
+            <template #actions>
+              <span class="flex items-center gap-2">
+                <span class="arka-live-dot" />
+                <span class="arka-data text-[10px] text-muted uppercase">live</span>
+              </span>
+            </template>
+            <ArkaLiveFeed />
+          </ArkaSection>
+
+          <!-- IV. PROJECTS & ACTIONS -->
+          <ArkaSection numeral="IV" label="projects & actions">
+            <AgentSuggestionsCard />
+            <div class="grid grid-cols-1 gap-6 lg:grid-cols-[2fr_1fr]">
+              <div class="space-y-2">
+                <DashboardState
+                  :status="status"
+                  :empty="!data?.projects?.length"
+                  empty-title="No projects discovered yet"
+                  empty-description="Add your project directories in Settings → Projects."
+                  empty-icon="i-lucide-folder-open"
+                >
+                  <ArkaGlowCard
                     v-for="p in data?.projects"
                     :key="p.name"
-                    class="rounded-lg border border-default p-3 hover:border-primary/40 transition-colors"
+                    interactive
+                    class="mb-2"
                   >
                     <div class="flex items-start justify-between gap-3">
                       <div class="min-w-0 flex-1">
-                        <div class="flex items-center gap-2 mb-1">
-                          <span class="text-sm font-semibold truncate">{{ p.name }}</span>
+                        <div class="mb-1 flex items-center gap-2">
+                          <span class="truncate text-sm font-semibold">{{ p.name }}</span>
                           <UBadge
                             v-if="p.status"
                             :label="p.status"
@@ -332,8 +334,10 @@ function copyCommand(cmd: string) {
                             size="xs"
                           />
                         </div>
-                        <p class="text-xs text-muted font-mono truncate">{{ p.path }}</p>
-                        <div class="flex items-center gap-2 mt-2 flex-wrap">
+                        <p class="arka-data truncate text-xs text-muted">
+                          {{ p.path }}
+                        </p>
+                        <div class="mt-2 flex flex-wrap items-center gap-2">
                           <UBadge
                             v-for="s in p.stack"
                             :key="s"
@@ -344,75 +348,126 @@ function copyCommand(cmd: string) {
                         </div>
                       </div>
                       <span
-                        class="text-xs font-mono shrink-0"
+                        class="arka-data shrink-0 text-xs"
                         :class="commitFreshness(p.last_commit_days).color"
                       >
                         {{ commitFreshness(p.last_commit_days).label }}
                       </span>
                     </div>
-                  </div>
-                </div>
-              </DashboardState>
-            </div>
+                  </ArkaGlowCard>
+                </DashboardState>
+              </div>
 
-            <!-- Incidents + Quick actions -->
-            <div class="space-y-6">
-              <div>
-                <h2 class="text-sm font-semibold uppercase tracking-wider text-muted mb-3">
-                  Recent incidents
-                </h2>
-                <DashboardState
-                  :status="status"
-                  :empty="!data?.recent_incidents?.length"
-                  empty-title="No incidents"
-                  empty-description="Bypass uses and flow blocks show up here."
-                  empty-icon="i-lucide-shield-check"
-                >
-                  <div class="space-y-2">
-                    <div
-                      v-for="(i, idx) in data?.recent_incidents"
-                      :key="idx"
-                      class="rounded-lg border border-default p-3"
+              <div class="space-y-6">
+                <div>
+                  <p class="arka-eyebrow mb-3">
+                    quick launch
+                  </p>
+                  <div class="space-y-1.5">
+                    <button
+                      v-for="a in data?.quick_actions"
+                      :key="a.command"
+                      type="button"
+                      class="arka-glow-card w-full p-3 text-left"
+                      data-interactive="true"
+                      @click="copyCommand(a.command)"
                     >
-                      <div class="flex items-center gap-2 mb-1">
-                        <UBadge
-                          :label="i.kind"
-                          :color="i.kind === 'bypass' ? 'warning' : 'error'"
-                          variant="subtle"
-                          size="xs"
-                        />
-                        <span class="text-xs text-muted">{{ formatIncidentTs(i.ts) }}</span>
+                      <div class="flex items-center gap-2">
+                        <code class="arka-data text-sm font-semibold text-primary">{{ a.command }}</code>
+                        <UIcon name="i-lucide-clipboard" class="ml-auto size-3 text-muted" />
                       </div>
-                      <p class="text-xs font-mono text-muted truncate" :title="i.reason">
-                        {{ i.tool }} — {{ i.reason }}
+                      <p class="mt-1 text-xs text-muted">
+                        {{ a.description }}
                       </p>
-                    </div>
+                    </button>
                   </div>
-                </DashboardState>
-              </div>
+                </div>
 
-              <div>
-                <h2 class="text-sm font-semibold uppercase tracking-wider text-muted mb-3">
-                  Quick actions
-                </h2>
-                <div class="space-y-1">
-                  <button
-                    v-for="a in data?.quick_actions"
-                    :key="a.command"
-                    type="button"
-                    class="w-full text-left p-3 rounded-lg border border-default hover:border-primary/40 hover:bg-elevated/30 transition-colors"
-                    @click="copyCommand(a.command)"
+                <div>
+                  <p class="arka-eyebrow mb-3">
+                    recent incidents
+                  </p>
+                  <DashboardState
+                    :status="status"
+                    :empty="!data?.recent_incidents?.length"
+                    empty-title="No incidents"
+                    empty-description="Bypass uses and flow blocks show up here."
+                    empty-icon="i-lucide-shield-check"
                   >
-                    <div class="flex items-center gap-2">
-                      <code class="text-sm font-mono font-semibold text-primary">{{ a.command }}</code>
-                      <UIcon name="i-lucide-clipboard" class="size-3 text-muted ml-auto" />
+                    <div class="space-y-1.5">
+                      <div
+                        v-for="(i, idx) in data?.recent_incidents"
+                        :key="idx"
+                        class="rounded-lg border border-default p-3"
+                      >
+                        <div class="mb-1 flex items-center gap-2">
+                          <UBadge
+                            :label="i.kind"
+                            :color="i.kind === 'bypass' ? 'warning' : 'error'"
+                            variant="subtle"
+                            size="xs"
+                          />
+                          <span class="arka-data text-xs text-muted">{{ formatIncidentTs(i.ts) }}</span>
+                        </div>
+                        <p class="arka-data truncate text-xs text-muted" :title="i.reason">
+                          {{ i.tool }} — {{ i.reason }}
+                        </p>
+                      </div>
                     </div>
-                    <p class="text-xs text-muted mt-1">{{ a.description }}</p>
-                  </button>
+                  </DashboardState>
+                </div>
+
+                <div>
+                  <p class="arka-eyebrow mb-3">
+                    recent personas
+                  </p>
+                  <DashboardState
+                    :status="status"
+                    :empty="!data?.recent_personas?.length"
+                    empty-title="No personas yet"
+                    empty-description="Create one from /personas → New Persona."
+                    empty-icon="i-lucide-user-plus"
+                  >
+                    <div class="space-y-1.5">
+                      <NuxtLink
+                        v-for="p in data?.recent_personas"
+                        :key="p.id"
+                        :to="`/personas/${p.id}`"
+                        class="block rounded-lg border border-default p-3 transition-colors hover:border-primary/40"
+                      >
+                        <div class="flex items-center justify-between gap-3">
+                          <div class="min-w-0">
+                            <p class="truncate text-sm font-semibold">
+                              {{ p.name }}
+                            </p>
+                            <p class="truncate text-xs text-muted">
+                              {{ p.title || '—' }}
+                            </p>
+                          </div>
+                          <div class="flex shrink-0 items-center gap-2">
+                            <UBadge
+                              v-if="p.mbti"
+                              :label="p.mbti"
+                              variant="subtle"
+                              size="xs"
+                            />
+                            <UBadge
+                              v-if="p.source_store === 'obsidian'"
+                              icon="i-lucide-file-text"
+                              label="Obsidian"
+                              color="primary"
+                              variant="soft"
+                              size="xs"
+                            />
+                          </div>
+                        </div>
+                      </NuxtLink>
+                    </div>
+                  </DashboardState>
                 </div>
               </div>
             </div>
-          </div>
+          </ArkaSection>
         </div>
       </DashboardState>
     </template>

package/dashboard/nuxt.config.ts

@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
   modules: [
     '@nuxt/eslint',
+    '@nuxt/fonts',
     '@nuxt/ui',
     '@vueuse/nuxt'
   ],
@@ -12,8 +13,20 @@ export default defineNuxtConfig({
     enabled: true
   },
 
+  app: {
+    pageTransition: {
+      name: 'arka-page',
+      mode: 'out-in'
+    }
+  },
+
   css: ['~/assets/css/main.css'],
 
+  colorMode: {
+    preference: 'dark',
+    fallback: 'dark'
+  },
+
   runtimeConfig: {
     public: {
       apiBase: 'http://localhost:3334'
@@ -35,5 +48,13 @@ export default defineNuxtConfig({
         braceStyle: '1tbs'
       }
     }
+  },
+
+  fonts: {
+    families: [
+      // Explicit entry guarantees the italic axis (Instrument Serif ships
+      // 400 normal+italic only); the other families auto-resolve from @theme.
+      { name: 'Instrument Serif', provider: 'google', weights: [400], styles: ['normal', 'italic'] }
+    ]
   }
 })

package/dashboard/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
+    "@nuxt/fonts": "^0.14.0",
     "@playwright/test": "^1.60.0",
     "eslint": "^10.1.0",
     "typescript": "^6.0.2",