cognova 0.2.0 → 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/layouts/dashboard.vue

@@ -49,6 +49,13 @@ const links = [[{
   onSelect: () => {
     open.value = false
   }
+}, {
+  label: 'Skills',
+  icon: 'i-lucide-puzzle',
+  to: '/skills',
+  onSelect: () => {
+    open.value = false
+  }
 }, {
   label: 'Memories',
   icon: 'i-lucide-brain',

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

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import type { SkillDetail } from '~~/shared/types'
+
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+})
+
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+
+const skillName = computed(() => route.params.name as string)
+const skill = ref<SkillDetail | null>(null)
+const loading = ref(true)
+const selectedFile = ref('')
+const renameOpen = ref(false)
+
+async function loadSkill() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: SkillDetail }>(`/api/skills/${skillName.value}`)
+    skill.value = res.data
+
+    // Auto-select SKILL.md if exists
+    if (!selectedFile.value) {
+      const skillMd = res.data.files.find(f => f.name === 'SKILL.md')
+      if (skillMd) selectedFile.value = skillMd.path
+    }
+  } catch {
+    toast.add({ title: 'Skill not found', color: 'error' })
+    router.push('/skills')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleToggle() {
+  if (!skill.value || skill.value.core) return
+  try {
+    const res = await $fetch<{ data: { active: boolean } }>(`/api/skills/${skillName.value}/toggle`, {
+      method: 'POST'
+    })
+    skill.value.active = res.data.active
+    toast.add({
+      title: `${skillName.value} ${res.data.active ? 'enabled' : 'disabled'}`,
+      color: 'success'
+    })
+  } catch {
+    toast.add({ title: 'Failed to toggle skill', color: 'error' })
+  }
+}
+
+function handleRenamed(newName: string) {
+  router.replace(`/skills/${newName}`)
+}
+
+function handleExport() {
+  window.open(`/api/skills/${skillName.value}/export`, '_blank')
+}
+
+onMounted(() => loadSkill())
+</script>
+
+<template>
+  <div class="flex flex-1 min-w-0">
+    <!-- File tree sidebar -->
+    <UDashboardPanel
+      id="skill-filetree"
+      collapsible
+      resizable
+      :min-size="12"
+      :default-size="16"
+      :max-size="24"
+      class="hidden lg:flex"
+    >
+      <template #header>
+        <UDashboardNavbar>
+          <template #title>
+            <span class="text-sm font-medium truncate">Files</span>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <div
+          v-if="loading"
+          class="p-4 space-y-2"
+        >
+          <USkeleton
+            v-for="i in 4"
+            :key="i"
+            class="h-6 w-full"
+          />
+        </div>
+        <SkillsFileTree
+          v-else-if="skill"
+          :skill-name="skillName"
+          :files="skill.files"
+          :selected-path="selectedFile"
+          @select="selectedFile = $event"
+          @refresh="loadSkill"
+        />
+      </template>
+    </UDashboardPanel>
+
+    <!-- Editor panel -->
+    <UDashboardPanel
+      id="skill-editor"
+      grow
+      :ui="{ body: '!p-0' }"
+    >
+      <template #header>
+        <UDashboardNavbar>
+          <template #title>
+            <NuxtLink
+              to="/skills"
+              class="text-muted hover:text-default transition-colors"
+            >
+              <UIcon
+                name="i-lucide-arrow-left"
+                class="size-4"
+              />
+            </NuxtLink>
+            <span class="font-medium">{{ skillName }}</span>
+            <UBadge
+              v-if="skill?.core"
+              variant="subtle"
+              color="primary"
+              size="xs"
+            >
+              Core
+            </UBadge>
+            <UBadge
+              v-if="skill && !skill.active"
+              variant="subtle"
+              color="neutral"
+              size="xs"
+            >
+              Disabled
+            </UBadge>
+          </template>
+          <template #right>
+            <USwitch
+              v-if="skill && !skill.core"
+              :model-value="skill.active"
+              size="sm"
+              @update:model-value="handleToggle"
+            />
+            <UButton
+              v-if="skill && !skill.core"
+              icon="i-lucide-pencil"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              @click="renameOpen = true"
+            />
+            <UButton
+              v-if="skill"
+              icon="i-lucide-download"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              @click="handleExport"
+            />
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <div
+          v-if="loading"
+          class="flex-1 flex items-center justify-center h-full"
+        >
+          <UIcon
+            name="i-lucide-loader-2"
+            class="size-6 animate-spin text-dimmed"
+          />
+        </div>
+        <div
+          v-else-if="!selectedFile"
+          class="flex-1 flex items-center justify-center h-full text-dimmed"
+        >
+          <div class="text-center">
+            <UIcon
+              name="i-lucide-file-code"
+              class="size-12 mx-auto mb-4 opacity-50"
+            />
+            <p>Select a file to edit</p>
+          </div>
+        </div>
+        <SkillsEditor
+          v-else
+          :key="selectedFile"
+          :skill-name="skillName"
+          :file-path="selectedFile"
+          @saved="loadSkill"
+        />
+      </template>
+    </UDashboardPanel>
+
+    <SkillsRenameModal
+      v-if="skill"
+      :open="renameOpen"
+      :current-name="skillName"
+      @update:open="renameOpen = $event"
+      @renamed="handleRenamed"
+    />
+  </div>
+</template>

package/app/pages/skills/index.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { SkillListItem } from '~~/shared/types'
+
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+})
+
+const toast = useToast()
+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
+  const q = search.value.toLowerCase()
+  return skills.value.filter(s =>
+    s.name.toLowerCase().includes(q)
+    || s.description.toLowerCase().includes(q)
+  )
+})
+
+async function loadSkills() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: SkillListItem[] }>('/api/skills')
+    skills.value = res.data
+  } catch {
+    toast.add({ title: 'Failed to load skills', color: 'error' })
+  } finally {
+    loading.value = false
+  }
+}
+
+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`, {
+      method: 'POST'
+    })
+    const skill = skills.value.find(s => s.name === name)
+    if (skill) skill.active = res.data.active
+    toast.add({
+      title: `${name} ${res.data.active ? 'enabled' : 'disabled'}`,
+      color: 'success'
+    })
+  } catch {
+    toast.add({ title: `Failed to toggle ${name}`, color: 'error' })
+  }
+}
+
+onMounted(() => loadSkills())
+</script>
+
+<template>
+  <div class="flex flex-1 min-w-0">
+    <UDashboardPanel
+      id="skills-main"
+      grow
+    >
+      <template #header>
+        <UDashboardNavbar title="Skills">
+          <template #right>
+            <UInput
+              v-model="search"
+              icon="i-lucide-search"
+              placeholder="Search skills..."
+              size="sm"
+              class="w-48"
+            />
+            <NuxtLink to="/skills/library">
+              <UButton
+                icon="i-lucide-library"
+                variant="ghost"
+                color="neutral"
+                size="sm"
+              >
+                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"
+              @click="createOpen = true"
+            >
+              Create Skill
+            </UButton>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <div class="p-4">
+          <!-- Loading -->
+          <div
+            v-if="loading"
+            class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          >
+            <div
+              v-for="i in 6"
+              :key="i"
+              class="p-4 rounded-lg border border-default bg-elevated/50"
+            >
+              <USkeleton class="h-4 w-24 mb-2" />
+              <USkeleton class="h-3 w-full mb-1" />
+              <USkeleton class="h-3 w-2/3" />
+            </div>
+          </div>
+
+          <!-- Empty -->
+          <div
+            v-else-if="skills.length === 0"
+            class="flex flex-col items-center justify-center py-16 text-dimmed"
+          >
+            <UIcon
+              name="i-lucide-puzzle"
+              class="size-12 mb-4"
+            />
+            <p class="text-lg font-medium">
+              No skills found
+            </p>
+            <p class="text-sm mt-1">
+              Skills are loaded from ~/.claude/skills/
+            </p>
+          </div>
+
+          <!-- No results -->
+          <div
+            v-else-if="filteredSkills.length === 0"
+            class="text-center py-12 text-muted text-sm"
+          >
+            No skills matching "{{ search }}"
+          </div>
+
+          <!-- Grid -->
+          <div
+            v-else
+            class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          >
+            <SkillsCard
+              v-for="skill in filteredSkills"
+              :key="skill.name"
+              :skill="skill"
+              @toggle="handleToggle"
+            />
+          </div>
+        </div>
+      </template>
+    </UDashboardPanel>
+
+    <SkillsCreateModal
+      :open="createOpen"
+      @update:open="createOpen = $event"
+      @created="loadSkills"
+    />
+  </div>
+</template>