cognova 0.1.10 → 0.2.2

package/app/pages/dashboard.vue

@@ -1,80 +1,81 @@
 <script setup lang="ts">
+import type { DashboardOverview } from '~~/shared/types'
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
 })
+
+const { user } = useAuth()
+const overview = ref<DashboardOverview | null>(null)
+const loading = ref(true)
+
+async function loadOverview() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: DashboardOverview }>('/api/dashboard/overview')
+    overview.value = res.data
+  } catch {
+    // Silently fail — cards show empty state
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadOverview()
+})
 </script>
 
 <template>
-  <UDashboardPanel
-    id="dashboard"
-    grow
-  >
-    <UDashboardNavbar title="Dashboard">
-      <template #actions>
-        <UColorModeButton />
+  <div class="contents">
+    <UDashboardPanel
+      id="dashboard"
+      grow
+    >
+      <template #header>
+        <UDashboardNavbar title="Dashboard" />
       </template>
-    </UDashboardNavbar>
-
-    <div class="p-6 overflow-auto">
-      <div class="space-y-6">
-        <div>
-          <h1 class="text-2xl font-bold">
-            Welcome to Cognova
-          </h1>
-          <p class="text-muted mt-1">
-            Your personal knowledge management system.
-          </p>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-check-square"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Tasks Due Today</span>
-              </div>
-            </template>
-            <p class="text-muted text-sm">
-              No tasks due today.
+      <template #body>
+        <div class="p-4 space-y-6">
+          <div>
+            <h1 class="text-2xl font-bold">
+              Welcome back{{ user?.name ? `, ${user.name}` : '' }}
+            </h1>
+            <p class="text-muted mt-1 text-sm">
+              Here's what's happening in your workspace.
             </p>
-          </UCard>
+          </div>
 
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-file-text"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Recent Notes</span>
-              </div>
-            </template>
-            <p class="text-muted text-sm">
-              No recent notes.
-            </p>
-          </UCard>
+          <DashboardStatCards
+            :overview="overview"
+            :loading="loading"
+          />
+
+          <div class="grid gap-6 lg:grid-cols-2">
+            <DashboardUpcomingTasks
+              :tasks="overview?.tasks.upcoming ?? []"
+              :loading="loading"
+            />
+            <DashboardRecentChats
+              :conversations="overview?.conversations ?? []"
+              :loading="loading"
+            />
+          </div>
 
-          <UCard>
-            <template #header>
-              <div class="flex items-center gap-2">
-                <UIcon
-                  name="i-lucide-inbox"
-                  class="size-5 text-primary"
-                />
-                <span class="font-semibold">Quick Capture</span>
-              </div>
-            </template>
-            <UInput
-              placeholder="What's on your mind?"
-              class="mt-2"
+          <div class="grid gap-6 lg:grid-cols-2">
+            <DashboardRecentDocs
+              :documents="overview?.documents ?? []"
+              :loading="loading"
+            />
+            <DashboardUsageSummary
+              :usage="overview?.usage ?? { totalCost7d: 0, totalCalls7d: 0, totalInputTokens7d: 0, totalOutputTokens7d: 0 }"
+              :loading="loading"
             />
-          </UCard>
+          </div>
         </div>
-      </div>
-    </div>
-  </UDashboardPanel>
+      </template>
+    </UDashboardPanel>
+  </div>
 </template>

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

@@ -0,0 +1,198 @@
+<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}`)
+}
+
+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"
+            />
+          </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,157 @@
+<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 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 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-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>