arkaos 2.80.0 → 2.82.0

package/VERSION

@@ -1 +1 @@
-2.80.0
+2.82.0

package/core/profile/__init__.py

@@ -0,0 +1,9 @@
+"""Profile management for ArkaOS (~/.arkaos/profile.json)."""
+
+from core.profile.manager import (
+    Profile,
+    ProfileManager,
+    DEFAULT_PROFILE_PATH,
+)
+
+__all__ = ["Profile", "ProfileManager", "DEFAULT_PROFILE_PATH"]

package/core/profile/manager.py

@@ -0,0 +1,165 @@
+"""Profile manager — safe read/write of ~/.arkaos/profile.json (PR63 v2.81.0).
+
+The profile is operator-local user data:
+  - identity (name, company, role)
+  - market context (language, market)
+  - filesystem context (projectsDir, vaultPath)
+  - timestamps (created, updated)
+
+Used by:
+  - Sync engine (`core/sync/engine.py`) to discover project directories
+    from `projectsDir`
+  - Dashboard Settings page (PR63) for editing
+  - Various skills to greet by name and route by market
+
+Lives at ``~/.arkaos/profile.json`` per ADR
+`docs/adr/2026-04-17-user-data-separation.md`. The manager NEVER
+raises on disk errors — read returns a default ``Profile``, write
+swallows OSError so a failed save is logged but doesn't break the
+caller.
+"""
+
+from __future__ import annotations
+
+import json
+from dataclasses import dataclass, field, asdict
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, Optional
+
+
+DEFAULT_PROFILE_PATH = Path.home() / ".arkaos" / "profile.json"
+
+# Fields the API accepts in a POST payload — anything else is ignored
+# so callers can't sneak in arbitrary JSON.
+_WRITABLE_FIELDS = frozenset({
+    "name", "language", "market", "role", "company",
+    "projectsDir", "vaultPath",
+})
+
+
+@dataclass
+class Profile:
+    """Operator profile stored at ``~/.arkaos/profile.json``."""
+
+    version: str = "2"
+    name: str = ""
+    language: str = "en"
+    market: str = ""
+    role: str = ""
+    company: str = ""
+    projectsDir: str = ""
+    vaultPath: str = ""
+    created: str = ""
+    updated: str = ""
+
+    @classmethod
+    def from_dict(cls, data: dict) -> "Profile":
+        """Build a Profile from a JSON dict, dropping unknown keys."""
+        if not isinstance(data, dict):
+            return cls()
+        known = {
+            f.name: data[f.name]
+            for f in cls.__dataclass_fields__.values()  # type: ignore[attr-defined]
+            if f.name in data and data[f.name] is not None
+        }
+        # Pydantic-free defensive conversion: every field must be a string.
+        for key, value in list(known.items()):
+            if not isinstance(value, str):
+                known[key] = str(value)
+        return cls(**known)
+
+    def to_dict(self) -> dict:
+        return asdict(self)
+
+
+class ProfileManager:
+    """Read / patch / write the operator profile.
+
+    Always returns a ``Profile`` (the dataclass) — even when the file
+    doesn't exist or is unparseable. The default Profile carries empty
+    strings everywhere; the dashboard renders that as a setup CTA.
+    """
+
+    def __init__(self, path: Path | None = None) -> None:
+        self._path = path or DEFAULT_PROFILE_PATH
+
+    @property
+    def path(self) -> Path:
+        return self._path
+
+    def read(self) -> Profile:
+        """Return the current profile, or a default Profile on any error."""
+        if not self._path.exists():
+            return Profile()
+        try:
+            data = json.loads(self._path.read_text(encoding="utf-8"))
+        except (json.JSONDecodeError, OSError):
+            return Profile()
+        return Profile.from_dict(data)
+
+    def patch(self, updates: dict[str, Any]) -> Profile:
+        """Merge ``updates`` into the stored profile and persist.
+
+        - Drops any key not in ``_WRITABLE_FIELDS``.
+        - Coerces values to strings (the schema is all-string).
+        - Bumps ``updated`` to the current UTC timestamp.
+        - Initialises ``created`` if absent.
+        - Atomic write (.tmp + os.replace).
+        - Returns the new Profile.
+        """
+        current = self.read()
+        sanitized = {
+            k: ("" if v is None else str(v))
+            for k, v in updates.items()
+            if k in _WRITABLE_FIELDS
+        }
+        merged = {**current.to_dict(), **sanitized}
+        now = datetime.now(timezone.utc).isoformat()
+        merged["updated"] = now
+        if not merged.get("created"):
+            merged["created"] = now
+        merged["version"] = "2"
+        self._write(merged)
+        return Profile.from_dict(merged)
+
+    def _write(self, data: dict) -> None:
+        try:
+            self._path.parent.mkdir(parents=True, exist_ok=True)
+            tmp = self._path.with_suffix(self._path.suffix + ".tmp")
+            tmp.write_text(
+                json.dumps(data, indent=2, ensure_ascii=False),
+                encoding="utf-8",
+            )
+            tmp.replace(self._path)
+        except OSError:
+            # Caller still gets a Profile back from patch(); persistence
+            # failure is logged via stderr by upstream callers when
+            # appropriate. We never raise.
+            return
+
+
+# ─── Helpers ────────────────────────────────────────────────────────────
+
+
+def parse_projects_dirs(value: str) -> list[str]:
+    """Split the free-text ``projectsDir`` field into individual paths.
+
+    The historical schema stored e.g.
+        "/Users/foo/Herd para Laravel, /Users/foo/Work para Nuxt"
+    so the parser walks the comma-separated segments and keeps anything
+    that starts with ``/`` (POSIX absolute) or ``~/`` (home-relative).
+    """
+    if not value:
+        return []
+    out: list[str] = []
+    for raw in value.split(","):
+        token = raw.strip()
+        if not token:
+            continue
+        # First whitespace-delimited word that looks like a path wins.
+        for word in token.split():
+            if word.startswith("/") or word.startswith("~/"):
+                out.append(word)
+                break
+    return out

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/dashboard/app/pages/settings.vue

@@ -1,26 +1,126 @@
 <script setup lang="ts">
+interface ProfileResponse {
+  version: string
+  name: string
+  language: string
+  market: string
+  role: string
+  company: string
+  projectsDir: string
+  vaultPath: string
+  created: string
+  updated: string
+  projects_dirs_list: string[]
+}
+
 const { fetchApi, apiBase } = useApi()
+const toast = useToast()
+
+// ─── Profile (PR63 v2.81.0) ─────────────────────────────────────────────
+
+const {
+  data: profile,
+  status: profileStatus,
+  error: profileError,
+  refresh: refreshProfile,
+} = await fetchApi<ProfileResponse>('/api/profile')
+
+const profileDraft = ref({
+  name: profile.value?.name ?? '',
+  company: profile.value?.company ?? '',
+  role: profile.value?.role ?? '',
+  market: profile.value?.market ?? '',
+  language: profile.value?.language ?? 'en',
+  vaultPath: profile.value?.vaultPath ?? '',
+  projectsDir: profile.value?.projectsDir ?? '',
+})
+
+watch(profile, (p) => {
+  if (!p) return
+  profileDraft.value = {
+    name: p.name,
+    company: p.company,
+    role: p.role,
+    market: p.market,
+    language: p.language,
+    vaultPath: p.vaultPath,
+    projectsDir: p.projectsDir,
+  }
+}, { immediate: true })
+
+const savingProfile = ref(false)
+
+async function saveProfile() {
+  savingProfile.value = true
+  try {
+    await $fetch<ProfileResponse>(`${apiBase}/api/profile`, {
+      method: 'POST',
+      body: profileDraft.value,
+    })
+    await refreshProfile()
+    toast.add({
+      title: 'Profile saved',
+      description: 'Settings written to ~/.arkaos/profile.json',
+      color: 'success',
+    })
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err instanceof Error ? err.message : 'unknown error',
+      color: 'error',
+    })
+  } finally {
+    savingProfile.value = false
+  }
+}
+
+const languageOptions = [
+  { label: 'English', value: 'en' },
+  { label: 'Português', value: 'pt' },
+]
 
-const { data, status, error, refresh } = fetchApi<any>('/api/keys')
+const roleOptions = [
+  { label: 'Founder', value: 'founder' },
+  { label: 'CTO', value: 'cto' },
+  { label: 'CEO', value: 'ceo' },
+  { label: 'Engineer', value: 'engineer' },
+  { label: 'Designer', value: 'designer' },
+  { label: 'Operator', value: 'operator' },
+  { label: 'Consultant', value: 'consultant' },
+]
 
-const keys = computed(() => data.value?.keys ?? [])
+// ─── API Keys (preserved from earlier) ──────────────────────────────────
+
+const {
+  data: keysData,
+  status: keysStatus,
+  refresh: refreshKeys,
+} = fetchApi<any>('/api/keys')
+
+const keys = computed(() => keysData.value?.keys ?? [])
 
 const newKey = ref('')
 const newValue = ref('')
+const customKeyName = ref('')
 const saving = ref(false)
 const deletingKey = ref<string | null>(null)
 
+const isCustom = computed(() => newKey.value === 'custom')
+const effectiveKeyName = computed(() => isCustom.value ? customKeyName.value : newKey.value)
+
 async function saveKey() {
-  if (!newKey.value || !newValue.value) return
+  const keyName = effectiveKeyName.value
+  if (!keyName || !newValue.value) return
   saving.value = true
   try {
     await $fetch(`${apiBase}/api/keys`, {
       method: 'POST',
-      body: { key: newKey.value, value: newValue.value },
+      body: { key: keyName, value: newValue.value },
     })
     newKey.value = ''
     newValue.value = ''
-    await refresh()
+    customKeyName.value = ''
+    await refreshKeys()
   } catch {}
   saving.value = false
 }
@@ -29,7 +129,7 @@ async function deleteKey(keyName: string) {
   deletingKey.value = keyName
   try {
     await $fetch(`${apiBase}/api/keys/${keyName}`, { method: 'DELETE' })
-    await refresh()
+    await refreshKeys()
   } catch {}
   deletingKey.value = null
 }
@@ -41,9 +141,17 @@ const keyOptions = [
   { label: 'Custom...', value: 'custom' },
 ]
 
-const isCustom = computed(() => newKey.value === 'custom')
-const customKeyName = ref('')
-const effectiveKeyName = computed(() => isCustom.value ? customKeyName.value : newKey.value)
+// ─── Section nav ────────────────────────────────────────────────────────
+
+type SectionId = 'profile' | 'projects' | 'keys'
+
+const sections: { id: SectionId; label: string; icon: string }[] = [
+  { id: 'profile', label: 'Profile', icon: 'i-lucide-user-circle' },
+  { id: 'projects', label: 'Projects', icon: 'i-lucide-folders' },
+  { id: 'keys', label: 'API Keys', icon: 'i-lucide-key' },
+]
+
+const activeSection = ref<SectionId>('profile')
 </script>
 
 <template>
@@ -57,88 +165,250 @@ const effectiveKeyName = computed(() => isCustom.value ? customKeyName.value : n
     </template>
 
     <template #body>
-      <div class="space-y-8">
-        <!-- API Keys Section -->
+      <div class="grid grid-cols-1 md:grid-cols-[14rem_1fr] gap-6">
+        <!-- Section nav -->
+        <nav class="space-y-1" aria-label="Settings sections">
+          <button
+            v-for="s in sections"
+            :key="s.id"
+            type="button"
+            class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left transition-colors"
+            :class="activeSection === s.id
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-muted hover:bg-elevated/50'"
+            @click="activeSection = s.id"
+          >
+            <UIcon :name="s.icon" class="size-4" />
+            <span>{{ s.label }}</span>
+          </button>
+          <p class="text-xs text-muted px-3 mt-6">
+            More sections (MCPs, Hooks, Plugins, Theme) coming in PR63b.
+          </p>
+        </nav>
+
+        <!-- Section content -->
         <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" />
+          <!-- Profile -->
+          <section v-if="activeSection === 'profile'">
+            <h2 class="text-lg font-semibold mb-1">Profile</h2>
+            <p class="text-sm text-muted mb-6">
+              Your identity, role, and language. Stored locally at
+              <code class="font-mono text-xs">~/.arkaos/profile.json</code>.
+            </p>
+
+            <DashboardState
+              :status="profileStatus"
+              :error="profileError"
+              loading-label="Loading profile"
+              :on-retry="() => refreshProfile()"
+            >
+              <UCard>
+                <div class="space-y-4">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <UFormField label="Name">
+                      <UInput
+                        v-model="profileDraft.name"
+                        placeholder="André Agro Ferreira"
+                        class="w-full"
+                      />
+                    </UFormField>
+                    <UFormField label="Company">
+                      <UInput
+                        v-model="profileDraft.company"
+                        placeholder="WizardingCode"
+                        class="w-full"
+                      />
+                    </UFormField>
+                  </div>
+
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <UFormField label="Role">
+                      <USelect
+                        v-model="profileDraft.role"
+                        :items="roleOptions"
+                        placeholder="Select role"
+                        class="w-full"
+                      />
+                    </UFormField>
+                    <UFormField label="Language">
+                      <USelect
+                        v-model="profileDraft.language"
+                        :items="languageOptions"
+                        class="w-full"
+                      />
+                    </UFormField>
+                  </div>
+
+                  <UFormField
+                    label="Market"
+                    help="Comma-separated list of markets you operate in (free text)."
+                  >
+                    <UInput
+                      v-model="profileDraft.market"
+                      placeholder="Portugal, Europa, Emirados Árabes Unidos"
+                      class="w-full"
+                    />
+                  </UFormField>
+
+                  <UFormField
+                    label="Vault path"
+                    help="Where your Obsidian vault lives. Used by the KB-first hook."
+                  >
+                    <UInput
+                      v-model="profileDraft.vaultPath"
+                      placeholder="/Users/you/Documents/Vault"
+                      class="w-full font-mono text-sm"
+                    />
+                  </UFormField>
+
+                  <div class="flex justify-end pt-2">
+                    <UButton
+                      label="Save profile"
+                      icon="i-lucide-check"
+                      :loading="savingProfile"
+                      @click="saveProfile"
+                    />
+                  </div>
                 </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-..." />
+              </UCard>
+            </DashboardState>
+          </section>
+
+          <!-- Projects -->
+          <section v-else-if="activeSection === 'projects'">
+            <h2 class="text-lg font-semibold mb-1">Project directories</h2>
+            <p class="text-sm text-muted mb-6">
+              Directories the sync engine scans for projects.
+              Comma-separated absolute paths (e.g.
+              <code class="font-mono text-xs">~/Herd</code>,
+              <code class="font-mono text-xs">~/Work</code>).
+            </p>
+
+            <UCard>
+              <div class="space-y-4">
+                <UFormField
+                  label="projectsDir"
+                  help="Free text. Each comma-separated segment's leading absolute path is consumed by the sync engine."
+                >
+                  <UTextarea
+                    v-model="profileDraft.projectsDir"
+                    :rows="3"
+                    placeholder="/Users/you/Herd para projectos laravel, /Users/you/Work para projectos Nuxt e Python"
+                    class="w-full font-mono text-sm"
+                  />
+                </UFormField>
+
+                <div v-if="profile?.projects_dirs_list?.length" class="rounded-lg border border-default p-3">
+                  <p class="text-xs font-semibold text-muted uppercase tracking-wider mb-2">
+                    Currently parsed
+                  </p>
+                  <ul class="space-y-1">
+                    <li
+                      v-for="dir in profile.projects_dirs_list"
+                      :key="dir"
+                      class="flex items-center gap-2 text-sm"
+                    >
+                      <UIcon name="i-lucide-folder" class="size-4 text-muted" />
+                      <code class="font-mono text-xs">{{ dir }}</code>
+                    </li>
+                  </ul>
                 </div>
-                <div>
+
+                <div class="flex justify-end pt-2">
                   <UButton
-                    label="Save Key"
-                    icon="i-lucide-key"
-                    :loading="saving"
-                    :disabled="!effectiveKeyName || !newValue"
-                    @click="() => { newKey = effectiveKeyName; saveKey() }"
-                    block
+                    label="Save directories"
+                    icon="i-lucide-check"
+                    :loading="savingProfile"
+                    @click="saveProfile"
                   />
                 </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"
+            </UCard>
+          </section>
+
+          <!-- API Keys -->
+          <section v-else-if="activeSection === 'keys'">
+            <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 <code class="font-mono text-xs">~/.arkaos/keys.json</code>.
+            </p>
+
+            <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"
+                      block
+                      @click="saveKey"
+                    />
+                  </div>
+                </div>
+              </div>
+            </UCard>
+
+            <DashboardState
+              :status="keysStatus"
+              :empty="!keys.length"
+              empty-title="No keys configured"
+              empty-icon="i-lucide-key"
+              loading-label="Loading API keys"
             >
-              <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"
+              <div 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"
+                    aria-label="Delete key"
+                    @click="deleteKey(k.key)"
                   />
                 </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>
+            </DashboardState>
+          </section>
         </div>
       </div>
     </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "2.80.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.80.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,139 @@ 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")
+def profile_get():
+    """Return the operator profile from ~/.arkaos/profile.json.
+
+    Always returns a profile object (default empty strings when the
+    file doesn't exist yet) so the dashboard can render a setup form
+    instead of an error.
+    """
+    from core.profile import ProfileManager
+    from core.profile.manager import parse_projects_dirs
+    profile = ProfileManager().read()
+    payload = profile.to_dict()
+    # Convenience: split projectsDir into a list for the UI.
+    payload["projects_dirs_list"] = parse_projects_dirs(profile.projectsDir)
+    return payload
+
+
+@app.post("/api/profile")
+def profile_post(body: dict):
+    """Patch the operator profile.
+
+    Only the writable fields are honoured (name, language, market,
+    role, company, projectsDir, vaultPath). Unknown keys are silently
+    dropped. Returns the updated profile.
+    """
+    if not isinstance(body, dict):
+        return {"error": "body must be an object"}
+    from core.profile import ProfileManager
+    from core.profile.manager import parse_projects_dirs
+    updated = ProfileManager().patch(body)
+    payload = updated.to_dict()
+    payload["projects_dirs_list"] = parse_projects_dirs(updated.projectsDir)
+    return payload
+
+
 # --- API Keys ---
 
 @app.get("/api/keys")