cognova 0.1.9 → 0.2.0

package/app/components/dashboard/UpcomingTasks.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { DashboardOverview } from '~~/shared/types'
+
+defineProps<{
+  tasks: DashboardOverview['tasks']['upcoming']
+  loading?: boolean
+}>()
+
+const priorityLabels = { 1: 'Low', 2: 'Med', 3: 'High' } as const
+const priorityColors = { 1: 'neutral', 2: 'warning', 3: 'error' } as const
+const statusColors = { todo: 'neutral', in_progress: 'primary', blocked: 'error' } as const
+
+function formatDueDate(iso: string | null): string {
+  if (!iso) return ''
+  const date = new Date(iso)
+  const now = new Date()
+  const diff = date.getTime() - now.getTime()
+  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
+  if (days < 0) return `${Math.abs(days)}d overdue`
+  if (days === 0) return 'Today'
+  if (days === 1) return 'Tomorrow'
+  return `${days}d`
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-lucide-check-square"
+            class="size-4 text-primary"
+          />
+          <span class="text-sm font-medium">Upcoming Tasks</span>
+        </div>
+        <UButton
+          to="/tasks"
+          variant="ghost"
+          size="xs"
+          trailing-icon="i-lucide-arrow-right"
+        >
+          View all
+        </UButton>
+      </div>
+    </template>
+
+    <div
+      v-if="loading"
+      class="space-y-3"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="flex items-center gap-3"
+      >
+        <USkeleton class="h-5 w-5 rounded" />
+        <USkeleton class="h-4 flex-1" />
+      </div>
+    </div>
+
+    <div
+      v-else-if="tasks.length === 0"
+      class="text-center py-4 text-muted text-sm"
+    >
+      No upcoming tasks
+    </div>
+
+    <div
+      v-else
+      class="space-y-2"
+    >
+      <NuxtLink
+        v-for="task in tasks"
+        :key="task.id"
+        :to="{ path: '/tasks', query: { selected: task.id } }"
+        class="flex items-center gap-3 p-2 -mx-2 rounded-md hover:bg-elevated transition-colors"
+      >
+        <UBadge
+          :color="statusColors[task.status as keyof typeof statusColors] || 'neutral'"
+          variant="subtle"
+          size="xs"
+        >
+          {{ task.status === 'in_progress' ? 'WIP' : task.status }}
+        </UBadge>
+
+        <span class="text-sm truncate flex-1">{{ task.title }}</span>
+
+        <UBadge
+          v-if="task.projectName"
+          variant="subtle"
+          color="neutral"
+          size="xs"
+        >
+          <span
+            class="inline-block size-2 rounded-full mr-1"
+            :style="{ background: task.projectColor || 'var(--ui-primary)' }"
+          />
+          {{ task.projectName }}
+        </UBadge>
+
+        <UBadge
+          :color="priorityColors[task.priority as keyof typeof priorityColors] || 'neutral'"
+          variant="soft"
+          size="xs"
+        >
+          {{ priorityLabels[task.priority as keyof typeof priorityLabels] || 'Med' }}
+        </UBadge>
+
+        <span
+          v-if="task.dueDate"
+          class="text-xs text-muted whitespace-nowrap"
+        >
+          {{ formatDueDate(task.dueDate) }}
+        </span>
+      </NuxtLink>
+    </div>
+  </UCard>
+</template>

package/app/components/dashboard/UsageSummary.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { DashboardOverview } from '~~/shared/types'
+
+defineProps<{
+  usage: DashboardOverview['usage']
+  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>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon
+            name="i-lucide-bar-chart-3"
+            class="size-4 text-primary"
+          />
+          <span class="text-sm font-medium">Token Usage (7d)</span>
+        </div>
+        <UButton
+          to="/usage"
+          variant="ghost"
+          size="xs"
+          trailing-icon="i-lucide-arrow-right"
+        >
+          Details
+        </UButton>
+      </div>
+    </template>
+
+    <div
+      v-if="loading"
+      class="grid grid-cols-2 gap-4"
+    >
+      <div
+        v-for="i in 4"
+        :key="i"
+      >
+        <USkeleton class="h-3 w-12 mb-1" />
+        <USkeleton class="h-6 w-16" />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="grid grid-cols-2 gap-4"
+    >
+      <div>
+        <p class="text-xs text-muted mb-0.5">
+          Total Cost
+        </p>
+        <p class="text-lg font-semibold">
+          {{ formatCurrency(usage.totalCost7d) }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted mb-0.5">
+          API Calls
+        </p>
+        <p class="text-lg font-semibold">
+          {{ usage.totalCalls7d }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted mb-0.5">
+          Input Tokens
+        </p>
+        <p class="text-lg font-semibold">
+          {{ formatTokens(usage.totalInputTokens7d) }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted mb-0.5">
+          Output Tokens
+        </p>
+        <p class="text-lg font-semibold">
+          {{ formatTokens(usage.totalOutputTokens7d) }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/editor/DocumentEditor.vue

@@ -122,15 +122,17 @@ function handleShareClick() {
   }
 }
 
+const { copy } = useCopyToClipboard()
+
 async function copyShareLink() {
-  try {
-    await navigator.clipboard.writeText(shareUrl.value)
+  const ok = await copy(shareUrl.value)
+  if (ok) {
     linkCopied.value = true
     toast.add({ title: 'Link copied!', icon: 'i-lucide-check', color: 'success' })
     setTimeout(() => {
       linkCopied.value = false
     }, 2000)
-  } catch {
+  } else {
     toast.add({ title: 'Failed to copy link', icon: 'i-lucide-x', color: 'error' })
   }
 }

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

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { useElementSize } from '@vueuse/core'
+import { VisXYContainer, VisLine, VisArea, VisAxis, VisCrosshair, VisTooltip } from '@unovis/vue'
+import type { DailyUsageData } from '~~/shared/types'
+
+const props = defineProps<{
+  data: DailyUsageData[]
+  title?: string
+  granularity: 'daily' | 'hourly'
+}>()
+
+const emit = defineEmits<{
+  'update:granularity': [value: 'daily' | 'hourly']
+}>()
+
+const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
+const { width } = useElementSize(cardRef)
+
+const x = (_: DailyUsageData, i: number) => i
+
+const yTotal = (d: DailyUsageData) => d.totalCost
+
+// Parse "2026-02-18" as local date (not UTC) to avoid off-by-one in western timezones
+function parseLocalDate(dateStr: string): Date {
+  const [y, m, d] = dateStr.slice(0, 10).split('-').map(Number) as [number, number, number]
+  return new Date(y, m - 1, d)
+}
+
+const xTicks = (i: number) => {
+  const item = props.data[i]
+  if (!item) return ''
+  if (props.granularity === 'hourly') {
+    const hour = Number(item.date.slice(11, 13))
+    const ampm = hour >= 12 ? 'pm' : 'am'
+    const h12 = hour % 12 || 12
+    if (i === 0 || item.date.slice(0, 10) !== props.data[i - 1]?.date.slice(0, 10))
+      return `${format(parseLocalDate(item.date), 'MMM d')} ${h12}${ampm}`
+    return `${h12}${ampm}`
+  }
+  return format(parseLocalDate(item.date), 'd MMM')
+}
+
+const template = (d: DailyUsageData) => {
+  let label: string
+  if (props.granularity === 'hourly') {
+    const hour = Number(d.date.slice(11, 13))
+    const ampm = hour >= 12 ? 'pm' : 'am'
+    const h12 = hour % 12 || 12
+    label = `${format(parseLocalDate(d.date), 'MMM d, yyyy')} ${h12}:00${ampm}`
+  } else {
+    label = format(parseLocalDate(d.date), 'MMM d, yyyy')
+  }
+  return `<div class="p-2 text-sm">
+    <div class="font-medium">${label}</div>
+    <div style="color: var(--ui-primary)">Chat: $${d.chat.toFixed(4)}</div>
+    <div style="color: var(--ui-warning)">Agents: $${d.agent.toFixed(4)}</div>
+    <div style="color: var(--ui-info)">Memory: $${d.memory.toFixed(4)}</div>
+    <div class="text-muted mt-1">Total: $${d.totalCost.toFixed(4)}</div>
+    <div class="text-muted">${d.calls} calls</div>
+  </div>`
+}
+</script>
+
+<template>
+  <UCard
+    ref="cardRef"
+    :ui="{ root: 'overflow-visible', body: '!px-0 !pt-0 !pb-3' }"
+  >
+    <template
+      v-if="title"
+      #header
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <p class="text-sm font-medium">
+            {{ title }}
+          </p>
+          <UFieldGroup>
+            <UButton
+              :color="granularity === 'daily' ? 'primary' : 'neutral'"
+              :variant="granularity === 'daily' ? 'solid' : 'ghost'"
+              size="xs"
+              @click="emit('update:granularity', 'daily')"
+            >
+              Daily
+            </UButton>
+            <UButton
+              :color="granularity === 'hourly' ? 'primary' : 'neutral'"
+              :variant="granularity === 'hourly' ? 'solid' : 'ghost'"
+              size="xs"
+              @click="emit('update:granularity', 'hourly')"
+            >
+              Hourly
+            </UButton>
+          </UFieldGroup>
+        </div>
+        <div class="flex items-center gap-3 text-xs text-muted">
+          <span class="flex items-center gap-1">
+            <span
+              class="inline-block size-2.5 rounded-full"
+              style="background: var(--ui-primary)"
+            />
+            Chat
+          </span>
+          <span class="flex items-center gap-1">
+            <span
+              class="inline-block size-2.5 rounded-full"
+              style="background: var(--ui-warning)"
+            />
+            Agents
+          </span>
+          <span class="flex items-center gap-1">
+            <span
+              class="inline-block size-2.5 rounded-full"
+              style="background: var(--ui-info)"
+            />
+            Memory
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-if="data.length === 0"
+      class="flex items-center justify-center h-64 text-muted"
+    >
+      No usage data
+    </div>
+
+    <VisXYContainer
+      v-else
+      :data="data"
+      :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+      class="h-64"
+      :width="width"
+    >
+      <VisArea
+        :x="x"
+        :y="yTotal"
+        color="var(--ui-primary)"
+        :opacity="0.1"
+      />
+      <VisLine
+        :x="x"
+        :y="yTotal"
+        color="var(--ui-primary)"
+      />
+      <VisAxis
+        type="x"
+        :x="x"
+        :tick-format="xTicks"
+      />
+      <VisCrosshair
+        color="var(--ui-primary)"
+        :template="template"
+      />
+      <VisTooltip />
+    </VisXYContainer>
+  </UCard>
+</template>
+
+<style scoped>
+.unovis-xy-container {
+  --vis-crosshair-line-stroke-color: var(--ui-primary);
+  --vis-crosshair-circle-stroke-color: var(--ui-bg);
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-dimmed);
+  --vis-tooltip-background-color: var(--ui-bg);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text-highlighted);
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  data?: unknown[]
+  title?: string
+  granularity?: 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/UsageRecordsTable.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { formatDistanceToNow } from 'date-fns'
+import { useDebounceFn } from '@vueuse/core'
+import type { TokenUsageSource, TokenUsageRecord, StatsPeriod } from '~~/shared/types'
+
+const props = defineProps<{
+  period: StatsPeriod
+}>()
+
+const sourceLabels: Record<TokenUsageSource, string> = {
+  chat: 'Chat',
+  agent: 'Agent',
+  memory_extraction: 'Memory'
+}
+
+const sourceColors = {
+  chat: 'primary',
+  agent: 'warning',
+  memory_extraction: 'info'
+} as const
+
+// Filter state
+const ALL_VALUE = '__all__'
+const sourceFilter = ref(ALL_VALUE)
+const searchQuery = ref('')
+const page = ref(1)
+const limit = 20
+
+// Data state
+const records = ref<TokenUsageRecord[]>([])
+const total = ref(0)
+const totalPages = ref(0)
+const loading = ref(false)
+
+const sourceOptions = [
+  { value: ALL_VALUE, label: 'All Sources' },
+  { value: 'chat', label: 'Chat' },
+  { value: 'agent', label: 'Agents' },
+  { value: 'memory_extraction', label: 'Memory' }
+]
+
+const columns = [
+  { accessorKey: 'source', header: 'Source' },
+  { accessorKey: 'sourceName', header: 'Name' },
+  { accessorKey: 'inputTokens', header: 'Input' },
+  { accessorKey: 'outputTokens', header: 'Output' },
+  { accessorKey: 'costUsd', header: 'Cost' },
+  { accessorKey: 'durationMs', header: 'Duration' },
+  { accessorKey: 'createdAt', header: 'Time' }
+]
+
+async function fetchRecords() {
+  loading.value = true
+  try {
+    const query: Record<string, string | number> = {
+      period: props.period,
+      page: page.value,
+      limit
+    }
+    if (sourceFilter.value !== ALL_VALUE)
+      query.source = sourceFilter.value
+    if (searchQuery.value.trim())
+      query.search = searchQuery.value.trim()
+
+    const res = await $fetch<{
+      data: TokenUsageRecord[]
+      pagination: { page: number, total: number, totalPages: number }
+    }>('/api/usage', { query })
+
+    records.value = res.data
+    total.value = res.pagination.total
+    totalPages.value = res.pagination.totalPages
+  } catch {
+    // Silently fail
+  } finally {
+    loading.value = false
+  }
+}
+
+// Debounced search
+const debouncedFetch = useDebounceFn(() => {
+  page.value = 1
+  fetchRecords()
+}, 300)
+
+watch(sourceFilter, () => {
+  page.value = 1
+  fetchRecords()
+})
+
+watch(searchQuery, debouncedFetch)
+
+watch(page, fetchRecords)
+
+watch(() => props.period, () => {
+  page.value = 1
+  fetchRecords()
+})
+
+function formatCost(value: number): string {
+  if (value < 0.0001 && value > 0) return '<$0.0001'
+  return `$${value.toFixed(4)}`
+}
+
+function formatTokenCount(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)
+}
+
+function formatDuration(ms?: number | null): string {
+  if (!ms) return '-'
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}m`
+}
+
+function formatTime(date: Date | string): string {
+  return formatDistanceToNow(new Date(date), { addSuffix: true })
+}
+
+onMounted(fetchRecords)
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between flex-wrap gap-3">
+        <div class="flex items-center gap-2">
+          <p class="text-sm font-medium">
+            Usage Records
+          </p>
+          <UBadge
+            v-if="total > 0"
+            color="neutral"
+            variant="subtle"
+          >
+            {{ total }}
+          </UBadge>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <USelect
+            v-model="sourceFilter"
+            :items="sourceOptions"
+            value-key="value"
+            class="w-36"
+            size="sm"
+          />
+          <UInput
+            v-model="searchQuery"
+            placeholder="Search name..."
+            icon="i-lucide-search"
+            class="w-48"
+            size="sm"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div v-if="loading && records.length === 0">
+      <USkeleton
+        v-for="i in 5"
+        :key="i"
+        class="h-10 w-full mb-2"
+      />
+    </div>
+
+    <div
+      v-else-if="records.length === 0"
+      class="flex flex-col items-center justify-center h-32 text-muted"
+    >
+      <p class="text-sm">
+        No records found
+      </p>
+    </div>
+
+    <UTable
+      v-else
+      :data="records"
+      :columns="columns"
+      :loading="loading"
+    >
+      <template #source-cell="{ row }">
+        <UBadge
+          :color="sourceColors[row.original.source as TokenUsageSource]"
+          variant="subtle"
+          size="sm"
+        >
+          {{ sourceLabels[row.original.source as TokenUsageSource] || row.original.source }}
+        </UBadge>
+      </template>
+
+      <template #sourceName-cell="{ row }">
+        <span
+          class="text-sm truncate max-w-48 inline-block"
+          :title="row.original.sourceName"
+        >
+          {{ row.original.sourceName || '-' }}
+        </span>
+      </template>
+
+      <template #inputTokens-cell="{ row }">
+        <span class="text-sm text-muted">
+          {{ formatTokenCount(row.original.inputTokens) }}
+        </span>
+      </template>
+
+      <template #outputTokens-cell="{ row }">
+        <span class="text-sm text-muted">
+          {{ formatTokenCount(row.original.outputTokens) }}
+        </span>
+      </template>
+
+      <template #costUsd-cell="{ row }">
+        <span class="text-sm font-medium">
+          {{ formatCost(row.original.costUsd) }}
+        </span>
+      </template>
+
+      <template #durationMs-cell="{ row }">
+        <span class="text-sm text-muted">
+          {{ formatDuration(row.original.durationMs) }}
+        </span>
+      </template>
+
+      <template #createdAt-cell="{ row }">
+        <span class="text-sm text-muted">
+          {{ formatTime(row.original.createdAt) }}
+        </span>
+      </template>
+    </UTable>
+
+    <template
+      v-if="totalPages > 1"
+      #footer
+    >
+      <div class="flex justify-center">
+        <UPagination
+          v-model:page="page"
+          :total="total"
+          :items-per-page="limit"
+          :sibling-count="1"
+          show-edges
+        />
+      </div>
+    </template>
+  </UCard>
+</template>