cognova 0.2.0 → 0.2.3

package/app/components/skills/FileTree.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import type { TreeItem } from '~/composables/useFileTree'
+import type { SkillFile } from '~~/shared/types'
+
+const props = defineProps<{
+  skillName: string
+  files: SkillFile[]
+  selectedPath?: string
+}>()
+
+const emit = defineEmits<{
+  select: [path: string]
+  refresh: []
+}>()
+
+const toast = useToast()
+
+// Convert SkillFile[] to TreeItem[] for UTree
+function toTreeItems(files: SkillFile[], parentPath = ''): TreeItem[] {
+  return files.map((f) => {
+    const fullPath = parentPath ? `${parentPath}/${f.path}` : f.path
+    const item: TreeItem = {
+      id: fullPath,
+      label: f.name,
+      path: fullPath,
+      type: f.type,
+      defaultExpanded: true
+    }
+    if (f.type === 'directory') {
+      item.children = f.children ? toTreeItems(f.children, fullPath) : []
+    } else {
+      if (f.name.endsWith('.py')) item.icon = 'i-lucide-file-code'
+      else if (f.name.endsWith('.md')) item.icon = 'i-lucide-file-text'
+      else if (f.name.endsWith('.json')) item.icon = 'i-lucide-file-json'
+      else item.icon = 'i-lucide-file'
+    }
+    return item
+  })
+}
+
+const treeItems = computed(() => toTreeItems(props.files))
+
+const contextMenuTarget = ref<TreeItem | null>(null)
+const showNewFileModal = ref(false)
+const showNewFolderModal = ref(false)
+const showDeleteConfirm = ref(false)
+const newItemName = ref('')
+
+const contextMenuItems = computed(() => [
+  [{
+    label: 'New File',
+    icon: 'i-lucide-file-plus',
+    onSelect: () => {
+      newItemName.value = ''
+      showNewFileModal.value = true
+    }
+  }, {
+    label: 'New Folder',
+    icon: 'i-lucide-folder-plus',
+    onSelect: () => {
+      newItemName.value = ''
+      showNewFolderModal.value = true
+    }
+  }],
+  [{
+    label: 'Delete',
+    icon: 'i-lucide-trash-2',
+    color: 'error' as const,
+    onSelect: () => {
+      if (contextMenuTarget.value && contextMenuTarget.value.label !== 'SKILL.md')
+        showDeleteConfirm.value = true
+    }
+  }]
+])
+
+function handleSelect(_e: unknown, item: TreeItem) {
+  if (item.type === 'file') {
+    emit('select', item.path)
+  }
+}
+
+async function handleCreateFile() {
+  if (!newItemName.value.trim()) return
+
+  let filename = newItemName.value.trim()
+  if (!filename.includes('.')) filename += '.py'
+
+  const parentPath = contextMenuTarget.value?.type === 'directory'
+    ? contextMenuTarget.value.path
+    : ''
+
+  const filePath = parentPath ? `${parentPath}/${filename}` : filename
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/create`, {
+      method: 'POST',
+      body: { path: filePath, type: 'file' }
+    })
+    emit('refresh')
+    emit('select', filePath)
+    toast.add({ title: `Created ${filename}`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to create file', color: 'error' })
+  }
+
+  showNewFileModal.value = false
+  newItemName.value = ''
+}
+
+async function handleCreateFolder() {
+  if (!newItemName.value.trim()) return
+
+  const folderName = newItemName.value.trim()
+  const parentPath = contextMenuTarget.value?.type === 'directory'
+    ? contextMenuTarget.value.path
+    : ''
+
+  const folderPath = parentPath ? `${parentPath}/${folderName}` : folderName
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/create`, {
+      method: 'POST',
+      body: { path: folderPath, type: 'directory' }
+    })
+    emit('refresh')
+    toast.add({ title: `Created ${folderName}/`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to create folder', color: 'error' })
+  }
+
+  showNewFolderModal.value = false
+  newItemName.value = ''
+}
+
+async function handleDelete() {
+  if (!contextMenuTarget.value) return
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/delete`, {
+      method: 'POST',
+      body: { path: contextMenuTarget.value.path }
+    })
+    emit('refresh')
+    toast.add({ title: `Deleted ${contextMenuTarget.value.label}`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to delete', color: 'error' })
+  }
+
+  showDeleteConfirm.value = false
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <UContextMenu
+      :items="contextMenuItems"
+    >
+      <div
+        class="flex-1 h-full overflow-auto p-2"
+        @contextmenu.self="contextMenuTarget = null"
+      >
+        <div
+          v-if="files.length === 0"
+          class="h-full min-h-32 flex flex-col items-center justify-center text-dimmed text-sm"
+        >
+          <UIcon
+            name="i-lucide-folder-open"
+            class="size-8 mx-auto mb-2 opacity-50"
+          />
+          <p>No files found</p>
+          <p class="text-xs mt-1">
+            Right-click to create a file
+          </p>
+        </div>
+
+        <UTree
+          v-else
+          :items="treeItems"
+          :get-key="(item: TreeItem) => item.id"
+          color="primary"
+          expanded-icon="i-lucide-folder-open"
+          collapsed-icon="i-lucide-folder"
+          @select="handleSelect"
+        >
+          <template #item="{ item, expanded }">
+            <div
+              class="flex items-center gap-2 w-full"
+              @contextmenu="contextMenuTarget = item"
+            >
+              <UIcon
+                v-if="item.children?.length"
+                :name="expanded ? 'i-lucide-folder-open' : 'i-lucide-folder'"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <UIcon
+                v-else-if="item.icon"
+                :name="item.icon"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <UIcon
+                v-else
+                name="i-lucide-file"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <span class="truncate">{{ item.label }}</span>
+            </div>
+          </template>
+        </UTree>
+      </div>
+    </UContextMenu>
+
+    <!-- New File Modal -->
+    <UModal v-model:open="showNewFileModal">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center gap-2">
+              <UIcon
+                name="i-lucide-file-plus"
+                class="size-5"
+              />
+              <span class="font-semibold">New File</span>
+            </div>
+          </template>
+
+          <UInput
+            v-model="newItemName"
+            placeholder="filename.py"
+            autofocus
+            @keyup.enter="handleCreateFile"
+          />
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="ghost"
+                @click="showNewFileModal = false"
+              >
+                Cancel
+              </UButton>
+              <UButton @click="handleCreateFile">
+                Create
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- New Folder Modal -->
+    <UModal v-model:open="showNewFolderModal">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center gap-2">
+              <UIcon
+                name="i-lucide-folder-plus"
+                class="size-5"
+              />
+              <span class="font-semibold">New Folder</span>
+            </div>
+          </template>
+
+          <UInput
+            v-model="newItemName"
+            placeholder="folder-name"
+            autofocus
+            @keyup.enter="handleCreateFolder"
+          />
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="ghost"
+                @click="showNewFolderModal = false"
+              >
+                Cancel
+              </UButton>
+              <UButton @click="handleCreateFolder">
+                Create
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- Delete Confirmation -->
+    <UModal v-model:open="showDeleteConfirm">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center gap-2 text-error">
+              <UIcon
+                name="i-lucide-trash-2"
+                class="size-5"
+              />
+              <span class="font-semibold">Delete</span>
+            </div>
+          </template>
+
+          <p>
+            Are you sure you want to delete
+            <strong>{{ contextMenuTarget?.label }}</strong>?
+          </p>
+          <p
+            v-if="contextMenuTarget?.type === 'directory'"
+            class="text-sm text-dimmed mt-1"
+          >
+            This will delete all files and folders inside.
+          </p>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="ghost"
+                @click="showDeleteConfirm = false"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                color="error"
+                @click="handleDelete"
+              >
+                Delete
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/skills/LibraryCard.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { SkillCatalogItem } from '~~/shared/types'
+
+defineProps<{
+  skill: SkillCatalogItem
+}>()
+
+const emit = defineEmits<{
+  install: [name: string]
+  update: [name: string]
+}>()
+</script>
+
+<template>
+  <div class="p-4 rounded-lg border border-default bg-elevated/50 hover:bg-elevated transition-colors">
+    <div class="flex items-start justify-between gap-2 mb-2">
+      <div class="flex items-center gap-2 min-w-0">
+        <UIcon
+          name="i-lucide-puzzle"
+          class="size-4 shrink-0 text-primary"
+        />
+        <span class="font-medium truncate">{{ skill.name }}</span>
+      </div>
+      <div class="flex items-center gap-1.5 shrink-0">
+        <UBadge
+          v-if="skill.installed && !skill.hasUpdate"
+          variant="subtle"
+          color="success"
+          size="xs"
+        >
+          Installed
+        </UBadge>
+        <UBadge
+          v-if="skill.hasUpdate"
+          variant="subtle"
+          color="warning"
+          size="xs"
+        >
+          Update available
+        </UBadge>
+        <UBadge
+          variant="subtle"
+          color="neutral"
+          size="xs"
+        >
+          v{{ skill.version }}
+        </UBadge>
+      </div>
+    </div>
+
+    <p class="text-sm text-muted line-clamp-2 mb-3">
+      {{ skill.description }}
+    </p>
+
+    <div
+      v-if="skill.tags.length > 0"
+      class="flex flex-wrap gap-1 mb-3"
+    >
+      <UBadge
+        v-for="tag in skill.tags"
+        :key="tag"
+        variant="subtle"
+        :color="tag === 'official' ? 'primary' : 'neutral'"
+        size="xs"
+      >
+        {{ tag }}
+      </UBadge>
+    </div>
+
+    <div
+      v-if="skill.requiresSecrets.length > 0"
+      class="flex items-center gap-1 mb-3 text-xs text-dimmed"
+    >
+      <UIcon
+        name="i-lucide-key-round"
+        class="size-3 shrink-0"
+      />
+      <span>Requires: {{ skill.requiresSecrets.join(', ') }}</span>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span
+        v-if="skill.author"
+        class="text-xs text-dimmed"
+      >
+        by {{ skill.author }}
+      </span>
+      <span v-else />
+
+      <div class="flex items-center gap-1.5">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-external-link"
+          :to="`https://github.com/Patrity/cognova-skills/tree/main/${skill.name}`"
+          target="_blank"
+        >
+          View
+        </UButton>
+        <UButton
+          v-if="!skill.installed"
+          size="xs"
+          icon="i-lucide-download"
+          @click="emit('install', skill.name)"
+        >
+          Install
+        </UButton>
+        <UButton
+          v-else-if="skill.hasUpdate"
+          size="xs"
+          color="warning"
+          variant="soft"
+          icon="i-lucide-refresh-cw"
+          @click="emit('update', skill.name)"
+        >
+          Update
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/skills/RenameModal.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+  currentName: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'renamed': [newName: string]
+}>()
+
+const toast = useToast()
+const newName = ref(props.currentName)
+const loading = ref(false)
+
+watch(() => props.currentName, (val) => {
+  newName.value = val
+})
+
+function close() {
+  emit('update:open', false)
+}
+
+async function handleRename() {
+  if (!newName.value.trim() || newName.value.trim() === props.currentName) return
+
+  loading.value = true
+  try {
+    await $fetch(`/api/skills/${props.currentName}/rename`, {
+      method: 'POST',
+      body: { newName: newName.value.trim() }
+    })
+    toast.add({ title: `Skill renamed to '${newName.value.trim()}'`, color: 'success' })
+    emit('renamed', newName.value.trim())
+    close()
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Failed to rename skill'
+    toast.add({ title: message, color: 'error' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #header>
+      <span class="font-semibold">Rename Skill</span>
+    </template>
+
+    <template #body>
+      <UFormField label="New Name">
+        <UInput
+          v-model="newName"
+          placeholder="my-skill"
+          :disabled="loading"
+        />
+      </UFormField>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          variant="ghost"
+          color="neutral"
+          :disabled="loading"
+          @click="close"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          :loading="loading"
+          :disabled="!newName.trim() || newName.trim() === currentName"
+          @click="handleRename"
+        >
+          Rename
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -2,12 +2,13 @@
 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'
+import type { DailyUsageData, UsageDisplayMode } from '~~/shared/types'
 
 const props = defineProps<{
   data: DailyUsageData[]
   title?: string
   granularity: 'daily' | 'hourly'
+  displayMode?: UsageDisplayMode
 }>()
 
 const emit = defineEmits<{
@@ -17,9 +18,12 @@ const emit = defineEmits<{
 const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
 const { width } = useElementSize(cardRef)
 
+const isTokens = computed(() => props.displayMode === 'tokens')
+
 const x = (_: DailyUsageData, i: number) => i
 
-const yTotal = (d: DailyUsageData) => d.totalCost
+const yTotal = (d: DailyUsageData) =>
+  isTokens.value ? d.inputTokens + d.outputTokens : d.totalCost
 
 // Parse "2026-02-18" as local date (not UTC) to avoid off-by-one in western timezones
 function parseLocalDate(dateStr: string): Date {
@@ -41,6 +45,12 @@ const xTicks = (i: number) => {
   return format(parseLocalDate(item.date), 'd MMM')
 }
 
+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)
+}
+
 const template = (d: DailyUsageData) => {
   let label: string
   if (props.granularity === 'hourly') {
@@ -51,6 +61,14 @@ const template = (d: DailyUsageData) => {
   } else {
     label = format(parseLocalDate(d.date), 'MMM d, yyyy')
   }
+  if (isTokens.value)
+    return `<div class="p-2 text-sm">
+      <div class="font-medium">${label}</div>
+      <div style="color: var(--ui-primary)">Input: ${formatTokens(d.inputTokens)}</div>
+      <div style="color: var(--ui-warning)">Output: ${formatTokens(d.outputTokens)}</div>
+      <div class="text-muted mt-1">Total: ${formatTokens(d.inputTokens + d.outputTokens)}</div>
+      <div class="text-muted">${d.calls} calls</div>
+    </div>`
   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>
@@ -96,27 +114,45 @@ const template = (d: DailyUsageData) => {
           </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>
+          <template v-if="isTokens">
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-primary)"
+              />
+              Input
+            </span>
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-warning)"
+              />
+              Output
+            </span>
+          </template>
+          <template v-else>
+            <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>
+          </template>
         </div>
       </div>
     </template>

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

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