cognova 0.1.9 → 0.2.0

package/app/components/usage/UsageSourceDonut.client.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { VisSingleContainer, VisDonut } from '@unovis/vue'
+import type { TokenUsageSource } from '~~/shared/types'
+
+interface SourceData {
+  source: TokenUsageSource
+  cost: number
+  calls: number
+  tokens: number
+}
+
+const props = defineProps<{
+  data: SourceData[]
+  title?: string
+}>()
+
+const sourceLabels: Record<TokenUsageSource, string> = {
+  chat: 'Chat',
+  agent: 'Agents',
+  memory_extraction: 'Memory'
+}
+
+const sourceColors: Record<TokenUsageSource, string> = {
+  chat: 'var(--ui-primary)',
+  agent: 'var(--ui-warning)',
+  memory_extraction: 'var(--ui-info)'
+}
+
+const value = (d: SourceData) => d.cost
+const color = (d: SourceData) => sourceColors[d.source] || 'var(--ui-neutral)'
+
+const totalCost = computed(() => props.data.reduce((sum, d) => sum + d.cost, 0))
+</script>
+
+<template>
+  <UCard>
+    <template
+      v-if="title"
+      #header
+    >
+      <p class="text-sm font-medium">
+        {{ title }}
+      </p>
+    </template>
+
+    <div
+      v-if="data.length === 0"
+      class="flex items-center justify-center h-64 text-muted"
+    >
+      No usage data
+    </div>
+
+    <div
+      v-else
+      class="flex items-center gap-6"
+    >
+      <VisSingleContainer
+        :data="data"
+        class="h-48 w-48 shrink-0"
+      >
+        <VisDonut
+          :value="value"
+          :color="color"
+          :arc-width="30"
+          :pad-angle="0.02"
+          :corner-radius="3"
+        />
+      </VisSingleContainer>
+
+      <div class="flex-1 space-y-3">
+        <div
+          v-for="item in data"
+          :key="item.source"
+          class="flex items-center justify-between"
+        >
+          <div class="flex items-center gap-2">
+            <span
+              class="inline-block size-3 rounded-full"
+              :style="{ background: sourceColors[item.source] }"
+            />
+            <span class="text-sm font-medium">{{ sourceLabels[item.source] }}</span>
+          </div>
+          <div class="text-right">
+            <span class="text-sm font-semibold">${{ item.cost.toFixed(2) }}</span>
+            <span class="text-xs text-muted ml-2">
+              {{ totalCost > 0 ? Math.round((item.cost / totalCost) * 100) : 0 }}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/usage/UsageSourceDonut.server.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  data?: unknown[]
+  title?: string
+}>()
+</script>
+
+<template>
+  <UCard :ui="{ body: '!p-0' }">
+    <template
+      v-if="title"
+      #header
+    >
+      <p class="text-sm font-medium">
+        {{ title }}
+      </p>
+    </template>
+
+    <div class="h-64 bg-muted/5 rounded animate-pulse" />
+  </UCard>
+</template>

package/app/components/usage/UsageStatsCards.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { UsageStats } from '~~/shared/types'
+
+defineProps<{
+  stats: UsageStats | null
+  loading?: boolean
+}>()
+
+function formatCurrency(value: number): string {
+  if (value < 0.01 && value > 0) return '<$0.01'
+  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 String(value)
+}
+</script>
+
+<template>
+  <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
+    <template v-if="loading">
+      <div
+        v-for="i in 5"
+        :key="i"
+        class="p-4 rounded-lg bg-elevated border border-default"
+      >
+        <USkeleton class="h-4 w-16 mb-2" />
+        <USkeleton class="h-8 w-12" />
+      </div>
+    </template>
+
+    <template v-else-if="stats">
+      <div class="p-4 rounded-lg bg-elevated border border-default">
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            name="i-lucide-dollar-sign"
+            class="size-4"
+          />
+          <span>Total Cost</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ formatCurrency(stats.totalCostUsd) }}
+        </p>
+      </div>
+
+      <div class="p-4 rounded-lg bg-elevated border border-default">
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            name="i-lucide-arrow-down"
+            class="size-4"
+          />
+          <span>Input Tokens</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ formatTokens(stats.totalInputTokens) }}
+        </p>
+      </div>
+
+      <div class="p-4 rounded-lg bg-elevated border border-default">
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            name="i-lucide-arrow-up"
+            class="size-4"
+          />
+          <span>Output Tokens</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ formatTokens(stats.totalOutputTokens) }}
+        </p>
+      </div>
+
+      <div class="p-4 rounded-lg bg-elevated border border-default">
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            name="i-lucide-zap"
+            class="size-4"
+          />
+          <span>API Calls</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ stats.totalCalls }}
+        </p>
+      </div>
+
+      <div class="p-4 rounded-lg bg-elevated border border-default">
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            name="i-lucide-calculator"
+            class="size-4"
+          />
+          <span>Avg / Call</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ formatCurrency(stats.avgCostPerCall) }}
+        </p>
+      </div>
+    </template>
+  </div>
+</template>

package/app/components/usage/UsageTopConsumers.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { TokenUsageSource } from '~~/shared/types'
+
+interface Consumer {
+  name: string
+  source: TokenUsageSource
+  cost: number
+  calls: number
+}
+
+defineProps<{
+  data: Consumer[]
+  title?: string
+}>()
+
+const sourceLabels: Record<TokenUsageSource, string> = {
+  chat: 'Chat',
+  agent: 'Agent',
+  memory_extraction: 'Memory'
+}
+
+const sourceColors = {
+  chat: 'primary',
+  agent: 'warning',
+  memory_extraction: 'info'
+} as const
+
+function formatCurrency(value: number): string {
+  if (value < 0.01 && value > 0) return '<$0.01'
+  return `$${value.toFixed(4)}`
+}
+</script>
+
+<template>
+  <UCard>
+    <template
+      v-if="title"
+      #header
+    >
+      <p class="text-sm font-medium">
+        {{ title }}
+      </p>
+    </template>
+
+    <div
+      v-if="data.length === 0"
+      class="flex items-center justify-center h-32 text-muted"
+    >
+      No usage data
+    </div>
+
+    <div
+      v-else
+      class="divide-y divide-default"
+    >
+      <div
+        v-for="(item, index) in data"
+        :key="`${item.source}-${item.name}`"
+        class="flex items-center justify-between py-2.5"
+        :class="{ 'pt-0': index === 0 }"
+      >
+        <div class="flex items-center gap-3 min-w-0">
+          <span class="text-sm text-muted w-5 text-right shrink-0">{{ index + 1 }}</span>
+          <div class="min-w-0">
+            <p class="text-sm font-medium truncate">
+              {{ item.name }}
+            </p>
+            <UBadge
+              :color="sourceColors[item.source]"
+              variant="subtle"
+              size="xs"
+            >
+              {{ sourceLabels[item.source] }}
+            </UBadge>
+          </div>
+        </div>
+
+        <div class="text-right shrink-0 ml-4">
+          <p class="text-sm font-semibold">
+            {{ formatCurrency(item.cost) }}
+          </p>
+          <p class="text-xs text-muted">
+            {{ item.calls }} {{ item.calls === 1 ? 'call' : 'calls' }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/composables/useCopyToClipboard.ts

@@ -0,0 +1,37 @@
+/**
+ * Copy text to clipboard with fallback for non-secure contexts (HTTP).
+ * navigator.clipboard.writeText() requires HTTPS or localhost.
+ * The fallback uses a hidden textarea + execCommand('copy').
+ */
+export function useCopyToClipboard() {
+  async function copy(text: string): Promise<boolean> {
+    // Try modern clipboard API first (works on HTTPS / localhost)
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(text)
+        return true
+      } catch {
+        // Fall through to legacy method
+      }
+    }
+
+    // Legacy fallback for HTTP / non-secure contexts
+    try {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      textarea.style.top = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.focus()
+      textarea.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(textarea)
+      return ok
+    } catch {
+      return false
+    }
+  }
+
+  return { copy }
+}

package/app/composables/usePreferences.ts

@@ -22,6 +22,9 @@ interface Preferences {
   // Agent stats
   agentStatsPeriod: '24h' | '7d' | '30d'
 
+  // Usage stats
+  usageStatsPeriod: '24h' | '7d' | '30d'
+
   // Onboarding
   onboardingDismissed: boolean
 }
@@ -41,6 +44,7 @@ const defaults: Preferences = {
   taskStatusFilter: 'all',
   taskProjectFilter: null,
   agentStatsPeriod: '7d',
+  usageStatsPeriod: '7d',
   onboardingDismissed: false
 }
 
@@ -114,6 +118,11 @@ export function usePreferences() {
     set: v => set('assistantLastConversationId', v)
   })
 
+  const usageStatsPeriod = computed({
+    get: () => get('usageStatsPeriod'),
+    set: v => set('usageStatsPeriod', v)
+  })
+
   const onboardingDismissed = computed({
     get: () => get('onboardingDismissed'),
     set: v => set('onboardingDismissed', v)
@@ -136,6 +145,7 @@ export function usePreferences() {
     taskStatusFilter,
     taskProjectFilter,
     agentStatsPeriod,
+    usageStatsPeriod,
     onboardingDismissed
   }
 }

package/app/layouts/dashboard.vue

@@ -56,6 +56,13 @@ const links = [[{
   onSelect: () => {
     open.value = false
   }
+}, {
+  label: 'Usage',
+  icon: 'i-lucide-bar-chart-3',
+  to: '/usage',
+  onSelect: () => {
+    open.value = false
+  }
 }, {
   label: 'Chat',
   icon: 'i-lucide-message-square',
@@ -92,7 +99,7 @@ const links = [[{
           <span
             v-if="!collapsed"
             class="font-semibold text-lg"
-          >Brain</span>
+          >Cognova</span>
         </div>
       </template>
 

package/app/pages/chat.vue

@@ -29,8 +29,18 @@ onMounted(() => {
   connect()
   loadConversations()
 
+  // Load specific conversation from URL param (e.g., from dashboard)
+  if (route.query.conversation) {
+    const conversationId = route.query.conversation as string
+    const stop = watch(connectionStatus, (status) => {
+      if (status === 'connected') {
+        stop()
+        loadConversation(conversationId)
+        router.replace({ query: {} })
+      }
+    }, { immediate: true })
+  } else if (route.query.onboarding) {
   // Auto-send greeting when arriving from onboarding modal
-  if (route.query.onboarding) {
     const stop = watch(connectionStatus, (status) => {
       if (status === 'connected') {
         stop()

package/app/pages/dashboard.vue

@@ -1,80 +1,81 @@
 <script setup lang="ts">
+import type { DashboardOverview } from '~~/shared/types'
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
 })
+
+const { user } = useAuth()
+const overview = ref<DashboardOverview | null>(null)
+const loading = ref(true)
+
+async function loadOverview() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: DashboardOverview }>('/api/dashboard/overview')
+    overview.value = res.data
+  } catch {
+    // Silently fail — cards show empty state
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadOverview()
+})
 </script>
 
 <template>
-  <UDashboardPanel
-    id="dashboard"
-    grow
-  >
-    <UDashboardNavbar title="Dashboard">
-      <template #actions>
-        <UColorModeButton />
+  <div class="contents">
+    <UDashboardPanel
+      id="dashboard"
+      grow
+    >
+      <template #header>
+        <UDashboardNavbar title="Dashboard" />
       </template>
-    </UDashboardNavbar>
-
-    <div class="p-6 overflow-auto">
-      <div class="space-y-6">
-        <div>
-          <h1 class="text-2xl font-bold">
-            Welcome to Cognova
-          </h1>
-          <p class="text-muted mt-1">
-            Your personal knowledge management system.
-          </p>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-check-square"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Tasks Due Today</span>
-              </div>
-            </template>
-            <p class="text-muted text-sm">
-              No tasks due today.
+      <template #body>
+        <div class="p-4 space-y-6">
+          <div>
+            <h1 class="text-2xl font-bold">
+              Welcome back{{ user?.name ? `, ${user.name}` : '' }}
+            </h1>
+            <p class="text-muted mt-1 text-sm">
+              Here's what's happening in your workspace.
             </p>
-          </UCard>
+          </div>
 
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-file-text"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Recent Notes</span>
-              </div>
-            </template>
-            <p class="text-muted text-sm">
-              No recent notes.
-            </p>
-          </UCard>
+          <DashboardStatCards
+            :overview="overview"
+            :loading="loading"
+          />
+
+          <div class="grid gap-6 lg:grid-cols-2">
+            <DashboardUpcomingTasks
+              :tasks="overview?.tasks.upcoming ?? []"
+              :loading="loading"
+            />
+            <DashboardRecentChats
+              :conversations="overview?.conversations ?? []"
+              :loading="loading"
+            />
+          </div>
 
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-inbox"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Quick Capture</span>
-              </div>
-            </template>
-            <UInput
-              placeholder="What's on your mind?"
-              class="mt-2"
+          <div class="grid gap-6 lg:grid-cols-2">
+            <DashboardRecentDocs
+              :documents="overview?.documents ?? []"
+              :loading="loading"
+            />
+            <DashboardUsageSummary
+              :usage="overview?.usage ?? { totalCost7d: 0, totalCalls7d: 0, totalInputTokens7d: 0, totalOutputTokens7d: 0 }"
+              :loading="loading"
             />
-          </UCard>
+          </div>
         </div>
-      </div>
-    </div>
-  </UDashboardPanel>
+      </template>
+    </UDashboardPanel>
+  </div>
 </template>