cognova 0.2.2 → 0.2.3

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VisSingleContainer, VisDonut } from '@unovis/vue'
-import type { TokenUsageSource } from '~~/shared/types'
+import type { TokenUsageSource, UsageDisplayMode } from '~~/shared/types'
 
 interface SourceData {
   source: TokenUsageSource
@@ -12,6 +12,7 @@ interface SourceData {
 const props = defineProps<{
   data: SourceData[]
   title?: string
+  displayMode?: UsageDisplayMode
 }>()
 
 const sourceLabels: Record<TokenUsageSource, string> = {
@@ -26,10 +27,19 @@ const sourceColors: Record<TokenUsageSource, string> = {
   memory_extraction: 'var(--ui-info)'
 }
 
-const value = (d: SourceData) => d.cost
+const isTokens = computed(() => props.displayMode === 'tokens')
+const value = (d: SourceData) => isTokens.value ? d.tokens : d.cost
 const color = (d: SourceData) => sourceColors[d.source] || 'var(--ui-neutral)'
 
-const totalCost = computed(() => props.data.reduce((sum, d) => sum + d.cost, 0))
+const total = computed(() =>
+  props.data.reduce((sum, d) => sum + (isTokens.value ? d.tokens : d.cost), 0)
+)
+
+function formatTokens(v: number): string {
+  if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+  if (v >= 1_000) return `${(v / 1_000).toFixed(1)}K`
+  return String(v)
+}
 </script>
 
 <template>
@@ -81,9 +91,11 @@ const totalCost = computed(() => props.data.reduce((sum, d) => sum + d.cost, 0))
             <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-sm font-semibold">
+              {{ isTokens ? formatTokens(item.tokens) : `$${item.cost.toFixed(2)}` }}
+            </span>
             <span class="text-xs text-muted ml-2">
-              {{ totalCost > 0 ? Math.round((item.cost / totalCost) * 100) : 0 }}%
+              {{ total > 0 ? Math.round(((isTokens ? item.tokens : item.cost) / total) * 100) : 0 }}%
             </span>
           </div>
         </div>

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

@@ -2,6 +2,7 @@
 defineProps<{
   data?: unknown[]
   title?: string
+  displayMode?: string
 }>()
 </script>
 

package/app/components/usage/UsageTopConsumers.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { TokenUsageSource } from '~~/shared/types'
+import type { TokenUsageSource, UsageDisplayMode } from '~~/shared/types'
 
 interface Consumer {
   name: string
   source: TokenUsageSource
   cost: number
   calls: number
+  tokens: number
 }
 
-defineProps<{
+const props = defineProps<{
   data: Consumer[]
   title?: string
+  displayMode?: UsageDisplayMode
 }>()
 
 const sourceLabels: Record<TokenUsageSource, string> = {
@@ -25,10 +27,18 @@ const sourceColors = {
   memory_extraction: 'info'
 } as const
 
+const isTokens = computed(() => props.displayMode === 'tokens')
+
 function formatCurrency(value: number): string {
   if (value < 0.01 && value > 0) return '<$0.01'
   return `$${value.toFixed(4)}`
 }
+
+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>
@@ -77,7 +87,7 @@ function formatCurrency(value: number): string {
 
         <div class="text-right shrink-0 ml-4">
           <p class="text-sm font-semibold">
-            {{ formatCurrency(item.cost) }}
+            {{ isTokens ? formatTokens(item.tokens) : formatCurrency(item.cost) }}
           </p>
           <p class="text-xs text-muted">
             {{ item.calls }} {{ item.calls === 1 ? 'call' : 'calls' }}

package/app/composables/usePreferences.ts

@@ -1,4 +1,4 @@
-import type { TaskStatus } from '~~/shared/types'
+import type { TaskStatus, UsageDisplayMode } from '~~/shared/types'
 
 interface Preferences {
   // Editor preferences
@@ -24,6 +24,7 @@ interface Preferences {
 
   // Usage stats
   usageStatsPeriod: '24h' | '7d' | '30d'
+  usageDisplayMode: UsageDisplayMode
 
   // Onboarding
   onboardingDismissed: boolean
@@ -45,6 +46,7 @@ const defaults: Preferences = {
   taskProjectFilter: null,
   agentStatsPeriod: '7d',
   usageStatsPeriod: '7d',
+  usageDisplayMode: 'tokens',
   onboardingDismissed: false
 }
 
@@ -123,6 +125,11 @@ export function usePreferences() {
     set: v => set('usageStatsPeriod', v)
   })
 
+  const usageDisplayMode = computed({
+    get: () => get('usageDisplayMode'),
+    set: v => set('usageDisplayMode', v)
+  })
+
   const onboardingDismissed = computed({
     get: () => get('onboardingDismissed'),
     set: v => set('onboardingDismissed', v)
@@ -146,6 +153,7 @@ export function usePreferences() {
     taskProjectFilter,
     agentStatsPeriod,
     usageStatsPeriod,
+    usageDisplayMode,
     onboardingDismissed
   }
 }

package/app/layouts/auth.vue

@@ -4,16 +4,6 @@
 <template>
   <div class="min-h-screen flex items-center justify-center bg-default">
     <div class="w-full max-w-md px-4">
-      <div class="flex flex-col items-center gap-6 mb-8">
-        <div class="flex items-center gap-3">
-          <UIcon
-            name="i-lucide-brain"
-            class="size-10 text-primary"
-          />
-          <span class="font-bold text-2xl">Cognova</span>
-        </div>
-      </div>
-
       <slot />
     </div>
   </div>

package/app/pages/login.vue

@@ -49,12 +49,22 @@ async function handleSubmit(event: { data: { email: string, password: string } }
 </script>
 
 <template>
-  <UAuthForm
-    title="Sign In"
-    description="Enter your credentials to access your account"
-    icon="i-lucide-brain"
-    :fields="fields"
-    :submit="{ label: 'Sign In', loading }"
-    @submit="handleSubmit"
-  />
+  <div>
+    <div class="flex flex-col items-center gap-6 mb-8">
+      <div class="flex items-center gap-3">
+        <UIcon
+          name="i-lucide-brain"
+          class="size-10 text-primary"
+        />
+        <span class="font-bold text-2xl">Cognova</span>
+      </div>
+    </div>
+    <UAuthForm
+      title="Sign In"
+      description="Enter your credentials to access your account"
+      :fields="fields"
+      :submit="{ label: 'Sign In', loading }"
+      @submit="handleSubmit"
+    />
+  </div>
 </template>

package/app/pages/skills/[name].vue

@@ -55,6 +55,10 @@ function handleRenamed(newName: string) {
   router.replace(`/skills/${newName}`)
 }
 
+function handleExport() {
+  window.open(`/api/skills/${skillName.value}/export`, '_blank')
+}
+
 onMounted(() => loadSkill())
 </script>
 
@@ -151,6 +155,14 @@ onMounted(() => loadSkill())
               size="sm"
               @click="renameOpen = true"
             />
+            <UButton
+              v-if="skill"
+              icon="i-lucide-download"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              @click="handleExport"
+            />
           </template>
         </UDashboardNavbar>
       </template>

package/app/pages/skills/index.vue

@@ -11,6 +11,8 @@ const skills = ref<SkillListItem[]>([])
 const loading = ref(true)
 const search = ref('')
 const createOpen = ref(false)
+const importing = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null)
 
 const filteredSkills = computed(() => {
   if (!search.value.trim()) return skills.value
@@ -33,6 +35,34 @@ async function loadSkills() {
   }
 }
 
+async function handleImport(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+
+  importing.value = true
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    const res = await $fetch<{ data: { name: string, fileCount: number } }>('/api/skills/import', {
+      method: 'POST',
+      body: formData
+    })
+    toast.add({
+      title: `Imported ${res.data.name}`,
+      description: `${res.data.fileCount} file${res.data.fileCount === 1 ? '' : 's'}`,
+      color: 'success'
+    })
+    navigateTo(`/skills/${res.data.name}`)
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : 'Import failed'
+    toast.add({ title: 'Import failed', description: message, color: 'error' })
+  } finally {
+    importing.value = false
+    input.value = ''
+  }
+}
+
 async function handleToggle(name: string) {
   try {
     const res = await $fetch<{ data: { name: string, active: boolean } }>(`/api/skills/${name}/toggle`, {
@@ -78,6 +108,23 @@ onMounted(() => loadSkills())
                 Library
               </UButton>
             </NuxtLink>
+            <UButton
+              icon="i-lucide-upload"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              :loading="importing"
+              @click="fileInput?.click()"
+            >
+              Import
+            </UButton>
+            <input
+              ref="fileInput"
+              type="file"
+              accept=".zip"
+              class="hidden"
+              @change="handleImport"
+            >
             <UButton
               icon="i-lucide-plus"
               size="sm"

package/app/pages/usage.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import type { StatsPeriod, UsageStats } from '~~/shared/types'
+import type { StatsPeriod, UsageStats, UsageDisplayMode } from '~~/shared/types'
 
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
 })
 
-const { usageStatsPeriod } = usePreferences()
+const { usageStatsPeriod, usageDisplayMode } = usePreferences()
 const period = ref<StatsPeriod>(usageStatsPeriod.value)
+const displayMode = ref<UsageDisplayMode>(usageDisplayMode.value)
 const granularity = ref<'daily' | 'hourly'>('daily')
 const stats = ref<UsageStats | null>(null)
 const loading = ref(false)
@@ -18,6 +19,11 @@ const periodOptions = [
   { label: '30d', value: '30d' as StatsPeriod }
 ]
 
+const displayModeOptions = [
+  { label: 'Tokens', value: 'tokens' as UsageDisplayMode },
+  { label: 'Cost', value: 'cost' as UsageDisplayMode }
+]
+
 async function loadStats() {
   loading.value = true
   try {
@@ -41,6 +47,10 @@ watch(period, (value) => {
   loadStats()
 })
 
+watch(displayMode, (value) => {
+  usageDisplayMode.value = value
+})
+
 watch(granularity, () => {
   loadStats()
 })
@@ -59,18 +69,32 @@ onMounted(() => {
       <template #header>
         <UDashboardNavbar title="Token Usage">
           <template #right>
-            <UFieldGroup>
-              <UButton
-                v-for="opt in periodOptions"
-                :key="opt.value"
-                :color="period === opt.value ? 'primary' : 'neutral'"
-                :variant="period === opt.value ? 'solid' : 'ghost'"
-                size="sm"
-                @click="period = opt.value"
-              >
-                {{ opt.label }}
-              </UButton>
-            </UFieldGroup>
+            <div class="flex items-center gap-4">
+              <UFieldGroup>
+                <UButton
+                  v-for="opt in displayModeOptions"
+                  :key="opt.value"
+                  :color="displayMode === opt.value ? 'primary' : 'neutral'"
+                  :variant="displayMode === opt.value ? 'solid' : 'ghost'"
+                  size="sm"
+                  @click="displayMode = opt.value"
+                >
+                  {{ opt.label }}
+                </UButton>
+              </UFieldGroup>
+              <UFieldGroup>
+                <UButton
+                  v-for="opt in periodOptions"
+                  :key="opt.value"
+                  :color="period === opt.value ? 'primary' : 'neutral'"
+                  :variant="period === opt.value ? 'solid' : 'ghost'"
+                  size="sm"
+                  @click="period = opt.value"
+                >
+                  {{ opt.label }}
+                </UButton>
+              </UFieldGroup>
+            </div>
           </template>
         </UDashboardNavbar>
       </template>
@@ -86,19 +110,22 @@ onMounted(() => {
             v-if="stats && stats.dailyUsage.length > 0"
             v-model:granularity="granularity"
             :data="stats.dailyUsage"
-            title="Cost Over Time"
+            :display-mode="displayMode"
+            :title="displayMode === 'tokens' ? 'Tokens Over Time' : 'Cost Over Time'"
           />
 
           <div class="grid gap-6 lg:grid-cols-2">
             <UsageSourceDonut
               v-if="stats && stats.bySource.length > 0"
               :data="stats.bySource"
-              title="Cost by Source"
+              :display-mode="displayMode"
+              :title="displayMode === 'tokens' ? 'Tokens by Source' : 'Cost by Source'"
             />
 
             <UsageTopConsumers
               v-if="stats && stats.topConsumers.length > 0"
               :data="stats.topConsumers"
+              :display-mode="displayMode"
               title="Top Consumers"
             />
           </div>

package/dist/cli/index.js

@@ -2339,25 +2339,24 @@ async function update() {
   }
   if (latestVersion === metadata.version) {
     s.stop(`Already on latest version (${metadata.version})`);
-  } else {
-    s.stop(`Update available: ${metadata.version} \u2192 ${import_picocolors6.default.green(latestVersion)}`);
+    Le("Nothing to update.");
+    return;
   }
+  s.stop(`Update available: ${metadata.version} \u2192 ${import_picocolors6.default.green(latestVersion)}`);
   s.start("Creating backup");
   const backupDir = createBackup(installDir);
   s.stop("Backup created");
   let updateFailed = false;
   try {
-    if (latestVersion !== metadata.version) {
-      s.start("Downloading latest version");
-      const tmpDir = execSync7("mktemp -d", { encoding: "utf-8" }).trim();
-      try {
-        execSync7(`npm pack cognova@${latestVersion} --pack-destination ${tmpDir}`, { stdio: "pipe" });
-        execSync7(`tar -xzf ${tmpDir}/cognova-${latestVersion}.tgz -C ${tmpDir}`, { stdio: "pipe" });
-        copyAppSource(`${tmpDir}/package`, installDir);
-        s.stop("Source files updated");
-      } finally {
-        rmSync(tmpDir, { recursive: true, force: true });
-      }
+    s.start("Downloading latest version");
+    const tmpDir = execSync7("mktemp -d", { encoding: "utf-8" }).trim();
+    try {
+      execSync7(`npm pack cognova@${latestVersion} --pack-destination ${tmpDir}`, { stdio: "pipe" });
+      execSync7(`tar -xzf ${tmpDir}/cognova-${latestVersion}.tgz -C ${tmpDir}`, { stdio: "pipe" });
+      copyAppSource(`${tmpDir}/package`, installDir);
+      s.stop("Source files updated");
+    } finally {
+      rmSync(tmpDir, { recursive: true, force: true });
     }
     s.start("Syncing Claude config");
     syncClaudeConfig(installDir);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cognova",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Personal knowledge management system with Claude Code integration",
   "repository": {
     "type": "git",
@@ -75,12 +75,14 @@
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
+    "adm-zip": "^0.5.16",
     "better-auth": "^1.4.17",
     "chokidar": "^5.0.0",
     "codemirror": "^6.0.2",
     "cron": "^4.4.0",
     "date-fns": "^4.1.0",
     "dotenv": "^17.2.3",
+    "drizzle-kit": "^0.31.8",
     "drizzle-orm": "^0.45.1",
     "gray-matter": "^4.0.3",
     "node-pty": "^1.1.0",
@@ -88,11 +90,11 @@
     "postgres": "^3.4.8",
     "shiki": "^3.21.0",
     "sortablejs": "^1.15.6",
-    "tailwindcss": "^4.0.0",
-    "drizzle-kit": "^0.31.8"
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.12.1",
+    "@types/adm-zip": "^0.5.7",
     "@types/node": "^25.0.8",
     "@types/sortablejs": "^1.15.9",
     "eslint": "^9.39.2",

package/server/api/skills/[name]/export.get.ts

@@ -0,0 +1,45 @@
+import { stat } from 'fs/promises'
+import { join } from 'path'
+import AdmZip from 'adm-zip'
+import { getSkillsDir, getInactiveSkillsDir, validateSkillName } from '~~/server/utils/skills-path'
+
+export default defineEventHandler(async (event) => {
+  const name = getRouterParam(event, 'name')
+  if (!name)
+    throw createError({ statusCode: 400, message: 'Skill name required' })
+
+  const nameError = validateSkillName(name)
+  if (nameError)
+    throw createError({ statusCode: 400, message: nameError })
+
+  // Check active first, then inactive
+  const activeDir = join(getSkillsDir(), name)
+  const inactiveDir = join(getInactiveSkillsDir(), name)
+
+  let skillDir = ''
+
+  const activeStat = await stat(activeDir).catch(() => null)
+  if (activeStat?.isDirectory()) {
+    skillDir = activeDir
+  } else {
+    const inactiveStat = await stat(inactiveDir).catch(() => null)
+    if (inactiveStat?.isDirectory())
+      skillDir = inactiveDir
+  }
+
+  if (!skillDir)
+    throw createError({ statusCode: 404, message: `Skill '${name}' not found` })
+
+  const zip = new AdmZip()
+  zip.addLocalFolder(skillDir, name, /^(?!.*(__pycache__|\.pyc))/)
+
+  const buffer = zip.toBuffer()
+
+  setResponseHeaders(event, {
+    'Content-Type': 'application/zip',
+    'Content-Disposition': `attachment; filename="${name}.zip"`,
+    'Content-Length': String(buffer.length)
+  })
+
+  return send(event, buffer)
+})

package/server/api/skills/import.post.ts

@@ -0,0 +1,87 @@
+import { stat, mkdir, writeFile } from 'fs/promises'
+import { join, normalize } from 'path'
+import AdmZip from 'adm-zip'
+import { getSkillsDir, getInactiveSkillsDir, validateSkillName } from '~~/server/utils/skills-path'
+
+export default defineEventHandler(async (event) => {
+  const form = await readMultipartFormData(event)
+  if (!form)
+    throw createError({ statusCode: 400, message: 'Multipart form data required' })
+
+  const fileField = form.find(f => f.name === 'file')
+  if (!fileField?.data)
+    throw createError({ statusCode: 400, message: 'No file uploaded' })
+
+  const zip = new AdmZip(Buffer.from(fileField.data))
+  const entries = zip.getEntries()
+
+  if (entries.length === 0)
+    throw createError({ statusCode: 400, message: 'Zip file is empty' })
+
+  // Determine skill name from root folder or filename
+  const firstEntry = entries[0].entryName
+  const rootFolder = firstEntry.includes('/') ? firstEntry.split('/')[0] : null
+  const fileName = fileField.filename?.replace(/\.zip$/i, '') || ''
+  const skillName = rootFolder || fileName
+
+  if (!skillName)
+    throw createError({ statusCode: 400, message: 'Could not determine skill name from zip' })
+
+  const nameError = validateSkillName(skillName)
+  if (nameError)
+    throw createError({ statusCode: 400, message: `Invalid skill name: ${nameError}` })
+
+  // Check skill doesn't already exist
+  const activeDir = join(getSkillsDir(), skillName)
+  const inactiveDir = join(getInactiveSkillsDir(), skillName)
+
+  const activeExists = await stat(activeDir).catch(() => null)
+  const inactiveExists = await stat(inactiveDir).catch(() => null)
+
+  if (activeExists || inactiveExists)
+    throw createError({ statusCode: 409, message: `Skill '${skillName}' already exists` })
+
+  // Validate zip contains SKILL.md
+  const hasSkillMd = entries.some((e) => {
+    const parts = e.entryName.split('/')
+    // SKILL.md at root or inside one-level folder
+    return parts[parts.length - 1] === 'SKILL.md'
+      || (parts.length === 2 && parts[1] === 'SKILL.md')
+  })
+  if (!hasSkillMd)
+    throw createError({ statusCode: 400, message: 'Zip must contain a SKILL.md file' })
+
+  // Extract to skills dir with path traversal protection
+  const targetDir = activeDir
+  await mkdir(targetDir, { recursive: true })
+
+  let fileCount = 0
+  for (const entry of entries) {
+    if (entry.isDirectory) continue
+
+    // Strip root folder prefix if present
+    let relativePath = entry.entryName
+    if (rootFolder && relativePath.startsWith(rootFolder + '/'))
+      relativePath = relativePath.slice(rootFolder.length + 1)
+
+    if (!relativePath) continue
+
+    // Skip __pycache__ and .pyc files
+    if (relativePath.includes('__pycache__') || relativePath.endsWith('.pyc'))
+      continue
+
+    // Path traversal check
+    const fullPath = normalize(join(targetDir, relativePath))
+    if (!fullPath.startsWith(targetDir))
+      throw createError({ statusCode: 400, message: 'Path traversal detected in zip entry' })
+
+    // Ensure parent directory exists
+    const parentDir = join(fullPath, '..')
+    await mkdir(parentDir, { recursive: true })
+
+    await writeFile(fullPath, entry.getData())
+    fileCount++
+  }
+
+  return { data: { name: skillName, fileCount } }
+})

package/server/api/usage/stats.get.ts

@@ -57,7 +57,7 @@ export default defineEventHandler(async (event) => {
   const sourceMap = new Map<TokenUsageSource, { cost: number, calls: number, tokens: number }>()
 
   // Top consumers
-  const consumerMap = new Map<string, { name: string, source: TokenUsageSource, cost: number, calls: number }>()
+  const consumerMap = new Map<string, { name: string, source: TokenUsageSource, cost: number, calls: number, tokens: number }>()
 
   for (const r of records) {
     totalCostUsd += r.costUsd
@@ -99,10 +99,12 @@ export default defineEventHandler(async (event) => {
       name: r.sourceName || 'Unknown',
       source,
       cost: 0,
-      calls: 0
+      calls: 0,
+      tokens: 0
     }
     consumer.cost += r.costUsd
     consumer.calls++
+    consumer.tokens += r.inputTokens + r.outputTokens
     consumerMap.set(consumerKey, consumer)
   }
 

package/shared/types/index.ts

@@ -345,6 +345,7 @@ export interface UserSettings {
 // === Agent Stats ===
 
 export type StatsPeriod = '24h' | '7d' | '30d'
+export type UsageDisplayMode = 'cost' | 'tokens'
 
 export interface DailyRunData {
   date: string
@@ -412,7 +413,7 @@ export interface UsageStats {
   avgCostPerCall: number
   dailyUsage: DailyUsageData[]
   bySource: { source: TokenUsageSource, cost: number, calls: number, tokens: number }[]
-  topConsumers: { name: string, source: TokenUsageSource, cost: number, calls: number }[]
+  topConsumers: { name: string, source: TokenUsageSource, cost: number, calls: number, tokens: number }[]
 }
 
 // === Dashboard ===