arkaos 2.81.0 → 2.82.0

package/VERSION

@@ -1 +1 @@
-2.81.0
+2.82.0

package/dashboard/app/pages/budget.vue

@@ -1,36 +1,203 @@
 <script setup lang="ts">
+// PR65 v2.82.0 — Budget rebuild backed by the PR47 LLM cost telemetry.
+//
+// The legacy /api/budget endpoint surfaces tokens-only ops counts. PR65
+// adds /api/llm-costs (full PR47 CostSummary) and /api/llm-costs/trend
+// (daily rollups), so this page can now show real cost USD by
+// provider / model / category plus a 7-day spend chart.
+
+interface BreakdownRow {
+  total_cost_usd: number | null
+  any_cost_known?: boolean
+  total_tokens_in: number
+  total_tokens_out: number
+  total_cached_tokens: number
+  call_count: number
+  cache_hit_rate: number
+}
+
+interface CostSummary {
+  period: string
+  total_cost_usd: number | null
+  total_tokens_in: number
+  total_tokens_out: number
+  total_cached_tokens: number
+  cache_hit_rate: number
+  call_count: number
+  by_provider: Record<string, BreakdownRow>
+  by_model: Record<string, BreakdownRow>
+  by_category: Record<string, BreakdownRow>
+  by_session: Array<{
+    session_id: string
+    call_count: number
+    total_tokens_in: number
+    total_tokens_out: number
+    total_cost_usd: number | null
+  }>
+  advisories: string[]
+  corrupt_line_count: number
+}
+
+interface TrendDay {
+  date: string
+  cost_usd: number | null
+  tokens_in: number
+  tokens_out: number
+  call_count: number
+}
+
+interface TrendResponse {
+  days: TrendDay[]
+  period_days: number
+}
+
+type Period = 'today' | 'week' | 'month' | 'all'
+
 const { fetchApi } = useApi()
+const period = ref<Period>('today')
+
+const periodOptions: { label: string; value: Period }[] = [
+  { label: 'Today', value: 'today' },
+  { label: '7 days', value: 'week' },
+  { label: '30 days', value: 'month' },
+  { label: 'All time', value: 'all' },
+]
+
+const {
+  data: costs,
+  status,
+  error,
+  refresh,
+} = fetchApi<CostSummary>(
+  '/api/llm-costs',
+  { query: computed(() => ({ period: period.value })) },
+)
+
+const {
+  data: trend,
+  refresh: refreshTrend,
+} = fetchApi<TrendResponse>('/api/llm-costs/trend?days=7')
+
+watch(period, async () => {
+  await refresh()
+})
 
-const { data, status, error, refresh } = fetchApi<any>('/api/budget')
+// ─── View tabs ───────────────────────────────────────────────────────────
 
-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 ?? [])
+type View = 'category' | 'provider' | 'model'
 
-const showLimits = ref(false)
+const view = ref<View>('category')
 
-const tierLabels: Record<number, string> = {
-  0: 'C-Suite (Unlimited)',
-  1: 'Squad Leads',
-  2: 'Specialists',
-  3: 'Support'
+const viewTabs = [
+  { label: 'By category', value: 'category' as const },
+  { label: 'By provider', value: 'provider' as const },
+  { label: 'By model', value: 'model' as const },
+]
+
+const breakdownRows = computed<Array<[string, BreakdownRow]>>(() => {
+  const source = (() => {
+    switch (view.value) {
+      case 'category': return costs.value?.by_category ?? {}
+      case 'provider': return costs.value?.by_provider ?? {}
+      case 'model':    return costs.value?.by_model    ?? {}
+    }
+  })()
+  return Object.entries(source).sort((a, b) => {
+    const ca = a[1].total_cost_usd ?? 0
+    const cb = b[1].total_cost_usd ?? 0
+    return cb - ca
+  })
+})
+
+const viewEmpty = computed(() =>
+  breakdownRows.value.length === 0
+  || (
+    view.value === 'category'
+    && breakdownRows.value.length === 1
+    && breakdownRows.value[0]?.[0] === ''
+  ),
+)
+
+const maxCostForBar = computed(() => {
+  const max = breakdownRows.value.reduce(
+    (acc, [, row]) => Math.max(acc, row.total_cost_usd ?? 0),
+    0,
+  )
+  return max > 0 ? max : 1
+})
+
+function formatCost(value: number | null): 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(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`
+  return value.toString()
+}
+
+function formatLabel(key: string): string {
+  if (!key) return '(base / uncategorised)'
+  return key
+}
+
+// ─── Trend chart ────────────────────────────────────────────────────────
+
+const maxTrendCost = computed(() => {
+  if (!trend.value?.days?.length) return 1
+  const max = trend.value.days.reduce(
+    (acc, d) => Math.max(acc, d.cost_usd ?? 0),
+    0,
+  )
+  return max > 0 ? max : 1
+})
+
+function trendBarHeight(day: TrendDay): string {
+  const cost = day.cost_usd ?? 0
+  const percent = Math.min(100, (cost / maxTrendCost.value) * 100)
+  return `${Math.max(percent, day.call_count > 0 ? 4 : 0)}%`
+}
+
+function trendDayLabel(iso: string): string {
+  try {
+    const d = new Date(iso + 'T00:00:00Z')
+    return new Intl.DateTimeFormat('en-US', {
+      weekday: 'short',
+    }).format(d)
+  } catch {
+    return iso
+  }
+}
+
+async function refreshAll() {
+  await Promise.all([refresh(), refreshTrend()])
 }
 </script>
 
 <template>
   <UDashboardPanel id="budget">
     <template #header>
-      <UDashboardNavbar title="Usage & Budget">
+      <UDashboardNavbar title="Usage &amp; Budget">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
         <template #right>
+          <USelect
+            v-model="period"
+            :items="periodOptions"
+            size="sm"
+            class="w-32"
+          />
           <UButton
             label="Refresh"
             variant="ghost"
             icon="i-lucide-refresh-cw"
             size="sm"
-            @click="refresh()"
+            class="ml-2"
+            @click="refreshAll"
           />
         </template>
       </UDashboardNavbar>
@@ -41,88 +208,173 @@ const tierLabels: Record<number, string> = {
         :status="status"
         :error="error"
         loading-label="Loading budget"
-        :on-retry="() => refresh()"
+        :on-retry="() => refreshAll()"
       >
-      <div 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 class="space-y-6">
+          <!-- Top-line summary -->
+          <UCard>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
               <div>
-                <span class="text-3xl font-bold">{{ summary.total_tokens.toLocaleString() }}</span>
-                <span class="text-sm text-muted ml-1">tokens</span>
+                <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">
+                  Total cost
+                </p>
+                <p class="text-2xl font-bold">
+                  {{ formatCost(costs?.total_cost_usd ?? null) }}
+                </p>
               </div>
               <div>
-                <span class="text-xl font-semibold">{{ summary.total_ops }}</span>
-                <span class="text-sm text-muted ml-1">operations</span>
+                <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">
+                  Calls
+                </p>
+                <p class="text-2xl font-bold">{{ costs?.call_count ?? 0 }}</p>
               </div>
               <div>
-                <span class="text-xl font-semibold">{{ summary.active_departments }}</span>
-                <span class="text-sm text-muted ml-1">departments active</span>
+                <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">
+                  Tokens in / out
+                </p>
+                <p class="text-lg font-semibold">
+                  {{ formatTokens(costs?.total_tokens_in ?? 0) }} /
+                  {{ formatTokens(costs?.total_tokens_out ?? 0) }}
+                </p>
               </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>
+                <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-1">
+                  Cache hit rate
+                </p>
+                <p class="text-2xl font-bold">
+                  {{ ((costs?.cache_hit_rate ?? 0) * 100).toFixed(1) }}%
+                </p>
               </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">
+          </UCard>
+
+          <!-- 7-day trend (inline bar chart) -->
+          <UCard v-if="trend?.days?.length">
+            <div>
+              <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-4">
+                Last 7 days
+              </p>
+              <div class="flex items-end gap-2 h-32">
                 <div
-                  class="h-3 rounded-full bg-primary transition-none"
-                  :style="{ width: `${dept.percent}%` }"
-                />
+                  v-for="day in trend.days"
+                  :key="day.date"
+                  class="flex-1 flex flex-col items-center gap-1"
+                  :title="`${day.date} — ${formatCost(day.cost_usd)} (${day.call_count} calls)`"
+                >
+                  <div class="w-full h-full flex items-end">
+                    <div
+                      class="w-full rounded-t transition-none"
+                      :class="day.call_count > 0 ? 'bg-primary' : 'bg-muted/20'"
+                      :style="{ height: trendBarHeight(day) }"
+                    />
+                  </div>
+                  <span class="text-xs text-muted">{{ trendDayLabel(day.date) }}</span>
+                </div>
               </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>
+          </UCard>
 
-        <!-- 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"
+          <!-- Advisories -->
+          <UCard
+            v-if="costs?.advisories?.length"
+            class="border-yellow-500/30 bg-yellow-500/5"
           >
-            <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>
+            <div class="flex items-start gap-3">
+              <UIcon
+                name="i-lucide-alert-triangle"
+                class="size-5 text-yellow-500 mt-0.5 shrink-0"
+              />
+              <div>
+                <p class="text-sm font-semibold text-yellow-500 mb-2">
+                  Advisories
+                </p>
+                <ul class="space-y-1 text-sm">
+                  <li v-for="a in costs.advisories" :key="a">
+                    {{ a }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Breakdown views -->
+          <div>
+            <UTabs
+              v-model="view"
+              :items="viewTabs"
+              :ui="{ list: 'mb-4' }"
+            />
+
+            <div v-if="viewEmpty" class="flex flex-col items-center justify-center gap-3 py-12 rounded-lg border border-default">
+              <UIcon name="i-lucide-bar-chart-3" class="size-10 text-muted" />
+              <p class="text-sm text-muted">
+                {{ view === 'category'
+                  ? "No category-aware spend yet. Orchestration layers can set ARKA_CALL_CATEGORY before LLM calls to attribute spend (PR60)."
+                  : "No spend data yet for this view." }}
               </p>
             </div>
+
+            <div v-else class="space-y-2">
+              <div
+                v-for="[key, row] in breakdownRows"
+                :key="key"
+                class="flex items-center gap-3 rounded-lg border border-default p-3"
+              >
+                <span class="w-48 text-sm font-mono truncate" :title="formatLabel(key)">
+                  {{ formatLabel(key) }}
+                </span>
+                <div class="flex-1 h-3 rounded-full bg-muted/10 overflow-hidden">
+                  <div
+                    class="h-3 rounded-full bg-primary"
+                    :style="{
+                      width: `${Math.max(2, ((row.total_cost_usd ?? 0) / maxCostForBar) * 100)}%`,
+                    }"
+                  />
+                </div>
+                <span class="w-20 text-right text-sm font-mono">
+                  {{ formatCost(row.total_cost_usd) }}
+                </span>
+                <span class="w-16 text-right text-xs text-muted">
+                  {{ row.call_count }} calls
+                </span>
+                <span class="w-20 text-right text-xs text-muted">
+                  {{ formatTokens(row.total_tokens_in + row.total_tokens_out) }} tok
+                </span>
+              </div>
+            </div>
           </div>
+
+          <!-- Top sessions -->
+          <UCard v-if="costs?.by_session?.length">
+            <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-3">
+              Top sessions
+            </p>
+            <div class="space-y-2">
+              <div
+                v-for="s in costs.by_session"
+                :key="s.session_id || 'unknown'"
+                class="flex items-center gap-3 text-sm"
+              >
+                <span class="w-48 font-mono text-xs truncate">
+                  {{ s.session_id || '(unknown)' }}
+                </span>
+                <span class="flex-1 text-muted">{{ s.call_count }} calls</span>
+                <span class="w-20 text-right font-mono">{{ formatCost(s.total_cost_usd) }}</span>
+                <span class="w-20 text-right text-xs text-muted">
+                  {{ formatTokens(s.total_tokens_in + s.total_tokens_out) }} tok
+                </span>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Note for corrupt rows -->
+          <p
+            v-if="costs?.corrupt_line_count"
+            class="text-xs text-muted text-center"
+          >
+            Skipped {{ costs.corrupt_line_count }} corrupt JSONL line(s) in telemetry.
+          </p>
         </div>
-      </div>
       </DashboardState>
     </template>
   </UDashboardPanel>

package/package.json

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

package/scripts/dashboard-api.py

@@ -729,6 +729,102 @@ def persona_build(body: dict):
     }
 
 
+# --- LLM Costs (PR65 v2.82.0) ---
+
+@app.get("/api/llm-costs")
+def llm_costs(period: str = "today"):
+    """Aggregated LLM cost summary backed by the PR47 telemetry pipeline.
+
+    `period` ∈ {today, week, month, all}. Returns the same shape the
+    `/arka costs` CLI returns — by_provider, by_model, by_category
+    (PR47), top sessions, advisories. The Budget page consumes this
+    to show category-aware spend instead of the legacy
+    /api/budget tokens-only view.
+    """
+    try:
+        from core.runtime.llm_cost_telemetry import summarise, VALID_PERIODS
+    except Exception as exc:  # pragma: no cover - import guard
+        return {"error": f"telemetry unavailable: {exc}"}
+    if period not in VALID_PERIODS:
+        return {"error": f"period must be one of {list(VALID_PERIODS)}"}
+    summary = summarise(period=period)
+    return {
+        "period": summary.period,
+        "total_cost_usd": summary.total_cost_usd,
+        "total_tokens_in": summary.total_tokens_in,
+        "total_tokens_out": summary.total_tokens_out,
+        "total_cached_tokens": summary.total_cached_tokens,
+        "cache_hit_rate": summary.cache_hit_rate,
+        "call_count": summary.call_count,
+        "by_provider": summary.by_provider,
+        "by_model": summary.by_model,
+        "by_category": summary.by_category,
+        "by_session": summary.by_session,
+        "advisories": summary.advisories,
+        "corrupt_line_count": summary.corrupt_line_count,
+    }
+
+
+@app.get("/api/llm-costs/trend")
+def llm_costs_trend(days: int = 7):
+    """Day-by-day rolling totals from the cost telemetry.
+
+    Returns ``{"days": [{"date": "YYYY-MM-DD", "cost_usd": x.xx,
+    "tokens_in": N, "tokens_out": N, "call_count": N}]}`` so the
+    Budget page can render a 7-day trend chart with @unovis/vue.
+    Cap `days` to 90 to keep response size bounded.
+    """
+    from datetime import datetime, timedelta, timezone
+    from core.runtime.llm_cost_telemetry import read_entries
+    # `days or 7` would treat 0 as "use default", which contradicts the
+    # documented floor-at-1 behaviour. Cast first, then clamp.
+    try:
+        days_int = int(days) if days is not None else 7
+    except (TypeError, ValueError):
+        days_int = 7
+    capped_days = max(1, min(days_int, 90))
+    today = datetime.now(timezone.utc).date()
+    buckets: dict[str, dict] = {}
+    # Seed every day so the chart shows zeros instead of gaps.
+    for offset in range(capped_days):
+        d = today - timedelta(days=capped_days - 1 - offset)
+        buckets[d.isoformat()] = {
+            "date": d.isoformat(),
+            "cost_usd": 0.0,
+            "cost_known": False,
+            "tokens_in": 0,
+            "tokens_out": 0,
+            "call_count": 0,
+        }
+    cutoff = today - timedelta(days=capped_days - 1)
+    for entry in read_entries():
+        raw_ts = entry.get("ts") or ""
+        if not isinstance(raw_ts, str):
+            continue
+        try:
+            ts = datetime.fromisoformat(raw_ts.replace("Z", "+00:00"))
+        except ValueError:
+            continue
+        d = ts.date()
+        if d < cutoff:
+            continue
+        key = d.isoformat()
+        if key not in buckets:
+            continue
+        b = buckets[key]
+        b["tokens_in"] += int(entry.get("tokens_in") or 0)
+        b["tokens_out"] += int(entry.get("tokens_out") or 0)
+        b["call_count"] += 1
+        cost = entry.get("estimated_cost_usd")
+        if cost is not None:
+            b["cost_usd"] += float(cost)
+            b["cost_known"] = True
+    out_days = list(buckets.values())
+    for b in out_days:
+        b["cost_usd"] = round(b["cost_usd"], 6) if b.pop("cost_known") else None
+    return {"days": out_days, "period_days": capped_days}
+
+
 # --- Profile (PR63 v2.81.0) ---
 
 @app.get("/api/profile")