cognova 0.1.10 → 0.2.2

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/skills/Card.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { SkillListItem } from '~~/shared/types'
+
+const props = defineProps<{
+  skill: SkillListItem
+}>()
+
+const emit = defineEmits<{
+  toggle: [name: string]
+}>()
+
+const toggling = ref(false)
+
+async function handleToggle() {
+  toggling.value = true
+  emit('toggle', props.skill.name)
+  toggling.value = false
+}
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/skills/${skill.name}`"
+    class="block p-4 rounded-lg border border-default bg-elevated/50 hover:bg-elevated transition-colors"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 mb-1">
+          <span class="font-medium text-sm truncate">{{ skill.name }}</span>
+          <UBadge
+            v-if="skill.core"
+            variant="subtle"
+            color="primary"
+            size="xs"
+          >
+            Core
+          </UBadge>
+          <UBadge
+            v-if="!skill.active"
+            variant="subtle"
+            color="neutral"
+            size="xs"
+          >
+            Disabled
+          </UBadge>
+        </div>
+        <p class="text-xs text-muted line-clamp-2">
+          {{ skill.description }}
+        </p>
+      </div>
+
+      <USwitch
+        v-if="!skill.core"
+        :model-value="skill.active"
+        size="sm"
+        :loading="toggling"
+        @update:model-value="handleToggle"
+        @click.prevent.stop
+      />
+    </div>
+
+    <div class="flex items-center gap-2 mt-3">
+      <UBadge
+        v-if="skill.version"
+        variant="soft"
+        color="neutral"
+        size="xs"
+      >
+        v{{ skill.version }}
+      </UBadge>
+      <UBadge
+        v-if="skill.author"
+        variant="soft"
+        color="neutral"
+        size="xs"
+      >
+        {{ skill.author }}
+      </UBadge>
+      <span class="text-xs text-dimmed ml-auto">{{ skill.fileCount }} file{{ skill.fileCount !== 1 ? 's' : '' }}</span>
+    </div>
+  </NuxtLink>
+</template>

package/app/components/skills/CreateModal.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'created': [name: string]
+}>()
+
+const router = useRouter()
+const toast = useToast()
+
+const mode = ref<'blank' | 'generate'>('blank')
+const name = ref('')
+const description = ref('')
+const loading = ref(false)
+
+function resetForm() {
+  mode.value = 'blank'
+  name.value = ''
+  description.value = ''
+  loading.value = false
+}
+
+function close() {
+  emit('update:open', false)
+  resetForm()
+}
+
+async function handleCreate() {
+  if (!name.value.trim()) return
+
+  loading.value = true
+  try {
+    if (mode.value === 'blank') {
+      await $fetch('/api/skills/create', {
+        method: 'POST',
+        body: { name: name.value.trim(), description: description.value.trim() || undefined }
+      })
+      toast.add({ title: `Skill '${name.value}' created`, color: 'success' })
+      emit('created', name.value.trim())
+      close()
+      router.push(`/skills/${name.value.trim()}`)
+    } else {
+      if (!description.value.trim()) {
+        toast.add({ title: 'Description is required for AI generation', color: 'warning' })
+        loading.value = false
+        return
+      }
+      const res = await $fetch<{ data: { name: string, costUsd: number } }>('/api/skills/generate', {
+        method: 'POST',
+        body: { name: name.value.trim(), description: description.value.trim() }
+      })
+      toast.add({
+        title: `Skill '${name.value}' generated`,
+        description: `Cost: $${res.data.costUsd.toFixed(4)} — created in inactive state for review`,
+        color: 'success'
+      })
+      emit('created', name.value.trim())
+      close()
+      router.push(`/skills/${name.value.trim()}`)
+    }
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Failed to create 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">Create Skill</span>
+    </template>
+
+    <template #body>
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <UButton
+            :variant="mode === 'blank' ? 'solid' : 'outline'"
+            color="neutral"
+            size="sm"
+            icon="i-lucide-file-plus"
+            @click="mode = 'blank'"
+          >
+            Blank Skill
+          </UButton>
+          <UButton
+            :variant="mode === 'generate' ? 'solid' : 'outline'"
+            color="neutral"
+            size="sm"
+            icon="i-lucide-sparkles"
+            @click="mode = 'generate'"
+          >
+            AI Generate
+          </UButton>
+        </div>
+
+        <UFormField label="Name">
+          <UInput
+            v-model="name"
+            placeholder="my-skill"
+            :disabled="loading"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="Description"
+          :required="mode === 'generate'"
+        >
+          <UTextarea
+            v-model="description"
+            :placeholder="mode === 'generate' ? 'Describe what this skill should do...' : 'Optional description'"
+            :rows="3"
+            :disabled="loading"
+            class="w-full"
+          />
+        </UFormField>
+
+        <p
+          v-if="mode === 'generate'"
+          class="text-xs text-muted"
+        >
+          AI-generated skills are created in an inactive state so you can review them before enabling.
+        </p>
+      </div>
+    </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="!name.trim()"
+          @click="handleCreate"
+        >
+          {{ mode === 'generate' ? 'Generate' : 'Create' }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/skills/Editor.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { CodeLanguage } from '~~/shared/types'
+
+const props = defineProps<{
+  skillName: string
+  filePath: string
+}>()
+
+const emit = defineEmits<{
+  saved: []
+}>()
+
+const toast = useToast()
+const content = ref('')
+const originalContent = ref('')
+const loading = ref(true)
+const saving = ref(false)
+
+const isDirty = computed(() => content.value !== originalContent.value)
+
+const language = computed<CodeLanguage>(() => {
+  const ext = props.filePath.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'py': return 'python'
+    case 'md': return 'markdown'
+    case 'json': return 'json'
+    case 'ts': return 'typescript'
+    case 'js': return 'javascript'
+    case 'yaml':
+    case 'yml': return 'yaml'
+    case 'sh':
+    case 'bash': return 'bash'
+    default: return 'plaintext'
+  }
+})
+
+async function loadFile() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: { content: string } }>(`/api/skills/${props.skillName}/files/read`, {
+      method: 'POST',
+      body: { path: props.filePath }
+    })
+    content.value = res.data.content
+    originalContent.value = res.data.content
+  } catch {
+    toast.add({ title: 'Failed to load file', color: 'error' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/write`, {
+      method: 'POST',
+      body: { path: props.filePath, content: content.value }
+    })
+    originalContent.value = content.value
+    toast.add({ title: 'File saved', color: 'success' })
+    emit('saved')
+  } catch {
+    toast.add({ title: 'Failed to save file', color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+// Ctrl+S / Cmd+S keyboard shortcut
+function handleKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+    e.preventDefault()
+    if (isDirty.value) save()
+  }
+}
+
+onMounted(() => {
+  loadFile()
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+watch(() => props.filePath, () => loadFile())
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-default">
+      <div class="flex items-center gap-2 text-sm text-muted">
+        <UIcon
+          name="i-lucide-file-code"
+          class="size-4"
+        />
+        <span>{{ filePath }}</span>
+        <UBadge
+          v-if="isDirty"
+          variant="soft"
+          color="warning"
+          size="xs"
+        >
+          Modified
+        </UBadge>
+      </div>
+      <UButton
+        size="xs"
+        :loading="saving"
+        :disabled="!isDirty"
+        @click="save"
+      >
+        Save
+      </UButton>
+    </div>
+
+    <div
+      v-if="loading"
+      class="flex-1 flex items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-6 animate-spin text-dimmed"
+      />
+    </div>
+
+    <EditorCodeEditor
+      v-else
+      v-model="content"
+      :language="language"
+      class="flex-1"
+    />
+  </div>
+</template>