cognova 0.1.0

package/app/pages/docs.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+})
+
+const route = useRoute()
+
+const {
+  document,
+  metadata,
+  body,
+  filePath,
+  loading,
+  saveStatus,
+  isDirty,
+  metadataDirty,
+  loadDocument,
+  updateBody,
+  updateMetadata,
+  saveNow
+} = useDocument()
+
+const { lastDocumentPath } = usePreferences()
+
+async function handleFileSelect(path: string) {
+  await loadDocument(path)
+  lastDocumentPath.value = path
+}
+
+// Load document from query parameter or last viewed on mount
+onMounted(async () => {
+  const pathParam = route.query.path as string | undefined
+  if (pathParam) {
+    await loadDocument(pathParam)
+    lastDocumentPath.value = pathParam
+  } else if (lastDocumentPath.value) {
+    await loadDocument(lastDocumentPath.value)
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-1 min-w-0">
+    <UDashboardPanel
+      id="docs-filetree"
+      collapsible
+      resizable
+      :min-size="12"
+      :default-size="16"
+      :max-size="24"
+      class="hidden lg:flex"
+    >
+      <template #body>
+        <FilesFileTree
+          class="h-full"
+          @select="handleFileSelect"
+        />
+      </template>
+    </UDashboardPanel>
+
+    <UDashboardPanel
+      id="docs-editor"
+      grow
+      :ui="{ body: 'sm:py-0' }"
+    >
+      <template #header>
+        <UDashboardNavbar>
+          <template #title>
+            <UDashboardSidebarCollapse />
+            Editor
+          </template>
+          <template #right>
+            <UColorModeButton />
+            <UDrawer>
+              <UButton
+                icon="i-lucide-folder-tree"
+                class="block lg:hidden"
+              />
+              <template #content>
+                <FilesFileTree
+                  class="h-full"
+                  @select="handleFileSelect"
+                />
+              </template>
+            </UDrawer>
+          </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="!filePath"
+          class="flex-1 flex items-center justify-center h-full text-dimmed"
+        >
+          <div class="text-center">
+            <UIcon
+              name="i-lucide-file-text"
+              class="size-32 mx-auto mb-4 opacity-50"
+            />
+            <p>Select a file to edit</p>
+          </div>
+        </div>
+        <EditorDocumentEditor
+          v-else-if="metadata && document"
+          :key="filePath"
+          :document="document"
+          :body="body"
+          :metadata="metadata"
+          :file-path="filePath"
+          :save-status="saveStatus"
+          :is-dirty="isDirty"
+          :metadata-dirty="metadataDirty"
+          class="h-full"
+          @update:body="updateBody"
+          @update:metadata="updateMetadata"
+          @save="saveNow"
+        />
+      </template>
+    </UDashboardPanel>
+  </div>
+</template>

package/app/pages/hooks.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { HookEvent, HookEventStats, StatsPeriod } from '~~/shared/types'
+
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+})
+
+const { fetchEvents, fetchStats } = useHookEvents()
+const { agentStatsPeriod } = usePreferences()
+
+// State
+const events = ref<HookEvent[]>([])
+const stats = ref<HookEventStats | null>(null)
+const loading = ref(false)
+const period = ref<StatsPeriod>(agentStatsPeriod.value)
+
+// Period options
+const periodOptions = [
+  { label: '24h', value: '24h' as StatsPeriod },
+  { label: '7d', value: '7d' as StatsPeriod },
+  { label: '30d', value: '30d' as StatsPeriod }
+]
+
+// Load data
+async function loadData() {
+  loading.value = true
+  try {
+    const [statsData, eventsData] = await Promise.all([
+      fetchStats(period.value),
+      fetchEvents({ limit: 50 })
+    ])
+    stats.value = statsData
+    events.value = eventsData
+  } catch (e) {
+    console.error('Failed to load hook data:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+// Watch period changes
+watch(period, () => {
+  agentStatsPeriod.value = period.value
+  loadData()
+})
+
+// Load on mount
+onMounted(loadData)
+</script>
+
+<template>
+  <div class="contents">
+    <UDashboardPanel
+      id="hooks"
+      grow
+    >
+      <template #header>
+        <UDashboardNavbar title="Hook Analytics">
+          <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>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <div class="p-4 space-y-6">
+          <!-- Stats Cards -->
+          <HooksHookStatsCards
+            :stats="stats"
+            :loading="loading"
+          />
+
+          <!-- Activity Chart -->
+          <HooksHookActivityChart
+            v-if="stats && stats.dailyActivity.length > 0"
+            :data="stats.dailyActivity"
+            title="Daily Activity"
+          />
+
+          <!-- Two column layout for tables -->
+          <div class="grid lg:grid-cols-2 gap-6">
+            <!-- Tool Breakdown -->
+            <HooksToolBreakdownTable
+              :data="stats?.toolBreakdown ?? []"
+              :loading="loading"
+            />
+
+            <!-- Event Types -->
+            <UCard v-if="stats">
+              <template #header>
+                <p class="text-sm font-medium">
+                  Events by Type
+                </p>
+              </template>
+
+              <div
+                v-if="!stats.eventsByType || Object.keys(stats.eventsByType).length === 0"
+                class="text-center text-muted py-8"
+              >
+                No events by type data
+              </div>
+
+              <div
+                v-else
+                class="space-y-3"
+              >
+                <div
+                  v-for="(count, type) in stats.eventsByType"
+                  :key="type"
+                  class="flex items-center justify-between"
+                >
+                  <span class="text-sm">{{ type }}</span>
+                  <UBadge
+                    color="neutral"
+                    variant="subtle"
+                  >
+                    {{ count }}
+                  </UBadge>
+                </div>
+              </div>
+            </UCard>
+          </div>
+
+          <!-- Recent Events -->
+          <HooksRecentEventsTable
+            :events="events"
+            :loading="loading"
+          />
+
+          <!-- Empty state -->
+          <div
+            v-if="!loading && events.length === 0 && !stats?.totalEvents"
+            class="flex flex-col items-center justify-center h-64 text-neutral-500"
+          >
+            <UIcon
+              name="i-lucide-webhook"
+              class="w-12 h-12 mb-4"
+            />
+            <p class="text-lg font-medium">
+              No hook events yet
+            </p>
+            <p class="text-sm text-center max-w-md">
+              Hook events will appear here once Claude Code hooks are triggered.
+              Make sure your hooks are configured in ~/.claude/settings.json
+            </p>
+          </div>
+        </div>
+      </template>
+    </UDashboardPanel>
+  </div>
+</template>

package/app/pages/index.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'view'
+})
+
+const { isAuthenticated } = useAuth()
+
+// Redirect authenticated users to dashboard (disabled for public home page)
+// watch([isAuthenticated, isPending], ([authenticated, pending]) => {
+//   if (!pending && authenticated)
+//     navigateTo('/dashboard')
+// }, { immediate: true })
+
+// Fetch home page content
+const { data } = await useFetch<{ data: { hasCustomHome: boolean, content: string | null } }>('/api/home')
+
+const hasCustomContent = computed(() => data.value?.data?.hasCustomHome ?? false)
+const customContent = computed(() => data.value?.data?.content ?? '')
+
+// Hero links
+const heroLinks = computed(() => {
+  const links = [
+    {
+      label: 'Get Started',
+      to: '/login',
+      icon: 'i-lucide-log-in'
+    },
+    {
+      label: 'View on GitHub',
+      to: 'https://github.com/Patrity/cognova',
+      target: '_blank',
+      color: 'neutral' as const,
+      variant: 'subtle' as const,
+      icon: 'i-simple-icons-github'
+    }
+  ]
+  if (isAuthenticated.value) {
+    links[0] = {
+      label: 'Dashboard',
+      to: '/dashboard',
+      icon: 'i-lucide-home'
+    }
+  }
+  return links
+})
+
+// Core features
+const coreFeatures = [
+  {
+    title: 'Terminal Integration',
+    description: 'Native terminal support with node-pty for running commands directly in your workflow.',
+    icon: 'i-lucide-terminal'
+  },
+  {
+    title: 'Claude Code Support',
+    description: 'Built-in integration with Claude Code for AI-assisted development and knowledge management.',
+    icon: 'i-lucide-bot'
+  },
+  {
+    title: 'Custom Skills',
+    description: 'Extend functionality with custom skills that automate common tasks and workflows.',
+    icon: 'i-lucide-sparkles'
+  },
+  {
+    title: 'Task Management',
+    description: 'Track tasks across projects with priorities, due dates, and smart filtering.',
+    icon: 'i-lucide-check-square'
+  }
+]
+
+// Additional features for the grid
+const additionalFeatures = [
+  {
+    title: 'Markdown Editor',
+    description: 'Full-featured markdown editor with live preview, syntax highlighting, and frontmatter support.',
+    icon: 'i-lucide-file-text'
+  },
+  {
+    title: 'Document Sharing',
+    description: 'Share documents publicly or with private links. Control visibility per document.',
+    icon: 'i-lucide-share-2'
+  },
+  {
+    title: 'Scheduled Reminders',
+    description: 'Set reminders and scheduled tasks that notify you at the right time.',
+    icon: 'i-lucide-bell'
+  },
+  {
+    title: 'File Sync',
+    description: 'Automatic synchronization between your local vault and the database.',
+    icon: 'i-lucide-refresh-cw'
+  },
+  {
+    title: 'Self-Hosted',
+    description: 'Own your data. Deploy anywhere with Docker or your preferred platform.',
+    icon: 'i-lucide-server'
+  },
+  {
+    title: 'Dark Mode',
+    description: 'Beautiful light and dark themes that respect your system preferences.',
+    icon: 'i-lucide-moon'
+  }
+]
+
+// Tech stack for carousel
+const techStack = [
+  { name: 'Nuxt', icon: 'i-simple-icons-nuxtdotjs' },
+  { name: 'Vue', icon: 'i-simple-icons-vuedotjs' },
+  { name: 'TypeScript', icon: 'i-simple-icons-typescript' },
+  { name: 'Tailwind CSS', icon: 'i-simple-icons-tailwindcss' },
+  { name: 'PostgreSQL', icon: 'i-simple-icons-postgresql' },
+  { name: 'Docker', icon: 'i-simple-icons-docker' },
+  { name: 'Drizzle', icon: 'i-simple-icons-drizzle' },
+  { name: 'Claude', icon: 'i-simple-icons-anthropic' }
+]
+
+// CTA links
+const ctaLinks = computed(() => {
+  const links = [
+    {
+      label: 'Get Started',
+      to: '/login',
+      color: 'neutral' as const
+    },
+    {
+      label: 'Read the Docs',
+      to: 'https://github.com/Patrity/cognova#readme',
+      target: '_blank',
+      color: 'neutral' as const,
+      variant: 'subtle' as const,
+      trailingIcon: 'i-lucide-arrow-right'
+    }
+  ]
+  if (isAuthenticated.value) {
+    links[0] = {
+      label: 'Dashboard',
+      to: '/dashboard',
+      color: 'neutral'
+    }
+  }
+  return links
+})
+</script>
+
+<template>
+  <!-- Custom home page from index.md -->
+  <UContainer
+    v-if="hasCustomContent"
+    class="py-12"
+  >
+    <div class="prose prose-primary dark:prose-invert max-w-none">
+      <MDC :value="customContent" />
+    </div>
+  </UContainer>
+
+  <!-- Default home page -->
+  <div v-else>
+    <!-- Hero Section -->
+    <UPageHero
+      title="Your Personal Knowledge System"
+      description="A self-hosted knowledge management platform for capturing thoughts, organizing tasks, and building your digital brain. Powered by Claude Code integration."
+      :links="heroLinks"
+    >
+      <template #top>
+        <div class="flex justify-center mt-16 -mb-24">
+          <div class="p-4 rounded-full bg-primary/10">
+            <UIcon
+              name="i-lucide-brain"
+              class="size-24 text-primary"
+            />
+          </div>
+        </div>
+      </template>
+    </UPageHero>
+
+    <!-- Core Features Section -->
+    <UPageSection
+      headline="Features"
+      title="Everything you need for knowledge management"
+      description="Cognova combines powerful tools for note-taking, task management, and AI-assisted workflows in one self-hosted solution."
+      :features="coreFeatures"
+    />
+
+    <USeparator />
+
+    <!-- Additional Features Grid -->
+    <UPageSection
+      title="And much more..."
+      description="Built with modern technologies and extensible architecture."
+      :ui="{ root: 'bg-muted' }"
+      class="w-full"
+    >
+      <UPageGrid>
+        <UPageCard
+          v-for="feature in additionalFeatures"
+          :key="feature.title"
+          :title="feature.title"
+          :description="feature.description"
+          :icon="feature.icon"
+          variant="subtle"
+          spotlight
+        />
+      </UPageGrid>
+    </UPageSection>
+
+    <USeparator />
+
+    <!-- Tech Stack Section -->
+    <UPageSection
+      headline="Built With"
+      title="Modern, battle-tested technologies"
+      description="Cognova is built on a solid foundation of open-source tools."
+    >
+      <UCarousel
+        :items="techStack"
+        :ui="{
+          item: 'basis-1/3 md:basis-1/4 lg:basis-1/6'
+        }"
+        class="w-full"
+        arrows
+        loop
+        :autoplay="{ delay: 2000 }"
+      >
+        <template #default="{ item }">
+          <div class="flex flex-col items-center gap-3 p-6">
+            <div class="p-4 rounded-xl bg-default border border-default">
+              <UIcon
+                :name="item.icon"
+                class="size-10 text-muted"
+              />
+            </div>
+            <span class="text-sm font-medium text-muted">{{ item.name }}</span>
+          </div>
+        </template>
+      </UCarousel>
+    </UPageSection>
+
+    <USeparator />
+
+    <!-- CTA Section -->
+    <UPageCTA
+      title="Ready to build your knowledge system?"
+      description="Get started in minutes. Self-host with Docker or deploy to your favorite cloud platform."
+      :links="ctaLinks"
+      variant="subtle"
+      class="mb-16"
+    />
+  </div>
+</template>

package/app/pages/login.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const { login, isAuthenticated } = useAuth()
+const toast = useToast()
+
+const loading = ref(false)
+
+const fields = [
+  {
+    name: 'email',
+    type: 'email' as const,
+    label: 'Email',
+    placeholder: 'admin@example.com',
+    required: true
+  },
+  {
+    name: 'password',
+    type: 'password' as const,
+    label: 'Password',
+    placeholder: 'Enter your password',
+    required: true
+  }
+]
+
+// Redirect if already authenticated
+watchEffect(() => {
+  if (isAuthenticated.value) navigateTo('/')
+})
+
+async function handleSubmit(event: { data: { email: string, password: string } }) {
+  loading.value = true
+
+  const result = await login(event.data.email, event.data.password)
+
+  if (result.error) {
+    toast.add({
+      title: 'Login failed',
+      description: result.error.message || 'Invalid email or password',
+      color: 'error',
+      icon: 'i-lucide-alert-circle'
+    })
+  } else {
+    navigateTo('/')
+  }
+
+  loading.value = false
+}
+</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"
+  />
+</template>