cognova 0.1.0

package/app/components/hooks/RecentEventsTable.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { formatDistanceToNow } from 'date-fns'
+import type { HookEvent } from '~~/shared/types'
+
+defineProps<{
+  events: HookEvent[]
+  loading?: boolean
+}>()
+
+function getEventTypeColor(type: string): 'success' | 'warning' | 'error' | 'info' | 'neutral' {
+  switch (type) {
+    case 'SessionStart': return 'success'
+    case 'SessionEnd': return 'neutral'
+    case 'PreToolUse': return 'info'
+    case 'PostToolUse': return 'success'
+    case 'PostToolUseFailure': return 'error'
+    case 'UserPromptSubmit': return 'info'
+    default: return 'neutral'
+  }
+}
+
+function formatTime(date: Date | string): string {
+  return formatDistanceToNow(new Date(date), { addSuffix: true })
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <p class="text-sm font-medium">
+        Recent Events
+      </p>
+    </template>
+
+    <div
+      v-if="loading"
+      class="space-y-3"
+    >
+      <USkeleton
+        v-for="i in 10"
+        :key="i"
+        class="h-10 w-full"
+      />
+    </div>
+
+    <div
+      v-else-if="events.length === 0"
+      class="text-center text-muted py-8"
+    >
+      No events recorded yet
+    </div>
+
+    <UTable
+      v-else
+      :data="events"
+      :columns="[
+        { accessorKey: 'eventType', header: 'Event' },
+        { accessorKey: 'toolName', header: 'Tool' },
+        { accessorKey: 'blocked', header: 'Status' },
+        { accessorKey: 'durationMs', header: 'Duration' },
+        { accessorKey: 'createdAt', header: 'Time' }
+      ]"
+    >
+      <template #eventType-cell="{ row }">
+        <UBadge
+          :color="getEventTypeColor(row.original.eventType)"
+          variant="subtle"
+          size="sm"
+        >
+          {{ row.original.eventType }}
+        </UBadge>
+      </template>
+      <template #toolName-cell="{ row }">
+        <span
+          v-if="row.original.toolName"
+          class="font-mono text-sm"
+        >
+          {{ row.original.toolName }}
+        </span>
+        <span
+          v-else
+          class="text-muted"
+        >
+          -
+        </span>
+      </template>
+      <template #blocked-cell="{ row }">
+        <UBadge
+          v-if="row.original.blocked"
+          color="error"
+          variant="subtle"
+          size="sm"
+        >
+          Blocked
+        </UBadge>
+        <UBadge
+          v-else
+          color="success"
+          variant="subtle"
+          size="sm"
+        >
+          Allowed
+        </UBadge>
+      </template>
+      <template #durationMs-cell="{ row }">
+        <span v-if="row.original.durationMs">
+          {{ row.original.durationMs }}ms
+        </span>
+        <span
+          v-else
+          class="text-muted"
+        >
+          -
+        </span>
+      </template>
+      <template #createdAt-cell="{ row }">
+        <span class="text-muted text-sm">
+          {{ formatTime(row.original.createdAt) }}
+        </span>
+      </template>
+    </UTable>
+  </UCard>
+</template>

package/app/components/hooks/ToolBreakdownTable.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { HookToolBreakdown } from '~~/shared/types'
+
+defineProps<{
+  data: HookToolBreakdown[]
+  loading?: boolean
+}>()
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${(ms / 60000).toFixed(1)}m`
+}
+
+function getBlockRateColor(blocked: number, total: number): string {
+  const rate = total > 0 ? (blocked / total) * 100 : 0
+  if (rate > 50) return 'text-error'
+  if (rate > 25) return 'text-warning'
+  return 'text-success'
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <p class="text-sm font-medium">
+        Tool Usage Breakdown
+      </p>
+    </template>
+
+    <div
+      v-if="loading"
+      class="space-y-3"
+    >
+      <USkeleton
+        v-for="i in 5"
+        :key="i"
+        class="h-10 w-full"
+      />
+    </div>
+
+    <div
+      v-else-if="data.length === 0"
+      class="text-center text-muted py-8"
+    >
+      No tool usage data yet
+    </div>
+
+    <UTable
+      v-else
+      :data="data"
+      :columns="[
+        { accessorKey: 'toolName', header: 'Tool' },
+        { accessorKey: 'total', header: 'Total' },
+        { accessorKey: 'blocked', header: 'Blocked' },
+        { accessorKey: 'avgDurationMs', header: 'Avg Duration' }
+      ]"
+    >
+      <template #toolName-cell="{ row }">
+        <span class="font-mono text-sm">{{ row.original.toolName }}</span>
+      </template>
+      <template #blocked-cell="{ row }">
+        <span :class="getBlockRateColor(row.original.blocked, row.original.total)">
+          {{ row.original.blocked }}
+        </span>
+      </template>
+      <template #avgDurationMs-cell="{ row }">
+        {{ formatDuration(row.original.avgDurationMs) }}
+      </template>
+    </UTable>
+  </UCard>
+</template>

package/app/components/search/DashboardSearch.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+
+const router = useRouter()
+const toast = useToast()
+const { searchTerm, loading, results, reset } = useSearch()
+
+const statusIcons: Record<string, string> = {
+  todo: 'i-lucide-circle',
+  in_progress: 'i-lucide-clock',
+  done: 'i-lucide-check-circle',
+  blocked: 'i-lucide-alert-circle'
+}
+
+const priorityLabels: Record<number, string> = {
+  1: 'Low',
+  2: 'Medium',
+  3: 'High'
+}
+
+const navigationItems: CommandPaletteItem[] = [
+  { label: 'Dashboard', icon: 'i-lucide-layout-dashboard', to: '/dashboard', kbds: ['G', 'D'] },
+  { label: 'Tasks', icon: 'i-lucide-check-square', to: '/tasks', kbds: ['G', 'T'] },
+  { label: 'Docs', icon: 'i-lucide-file-text', to: '/docs', kbds: ['G', 'O'] },
+  { label: 'Settings', icon: 'i-lucide-settings', to: '/settings', kbds: ['G', 'S'] }
+]
+
+const actionItems: CommandPaletteItem[] = [
+  {
+    label: 'Create new document',
+    icon: 'i-lucide-file-plus',
+    onSelect: () => {
+      router.push('/docs')
+      toast.add({
+        title: 'Create a document',
+        description: 'Right-click in the file tree to create a new file',
+        icon: 'i-lucide-info'
+      })
+      reset()
+    }
+  },
+  {
+    label: 'Add new task',
+    icon: 'i-lucide-plus-square',
+    onSelect: () => {
+      router.push('/tasks?action=new')
+      reset()
+    }
+  }
+]
+
+const groups = computed<CommandPaletteGroup[]>(() => {
+  const g: CommandPaletteGroup[] = []
+
+  // Tasks group (only show if we have results)
+  if (results.value.tasks.length) {
+    g.push({
+      id: 'tasks',
+      label: 'Tasks',
+      ignoreFilter: true,
+      items: results.value.tasks.map(t => ({
+        label: t.title,
+        icon: statusIcons[t.status] || 'i-lucide-circle',
+        suffix: t.project?.name || priorityLabels[t.priority] || '',
+        onSelect: () => {
+          router.push(`/tasks?selected=${t.id}`)
+          reset()
+        }
+      }))
+    })
+  }
+
+  // Documents group (only show if we have results)
+  if (results.value.documents.length) {
+    g.push({
+      id: 'documents',
+      label: 'Documents',
+      ignoreFilter: true,
+      items: results.value.documents.map(d => ({
+        label: d.title,
+        icon: 'i-lucide-file-text',
+        suffix: d.path,
+        onSelect: () => {
+          router.push(`/docs?path=${encodeURIComponent(d.path)}`)
+          reset()
+        }
+      }))
+    })
+  }
+
+  // Navigation group (always visible)
+  g.push({
+    id: 'navigation',
+    label: 'Navigation',
+    items: navigationItems
+  })
+
+  // Actions group (filtered based on search term)
+  g.push({
+    id: 'actions',
+    label: 'Actions',
+    items: actionItems,
+    postFilter: (term: string, items: CommandPaletteItem[]) => {
+      if (!term) return items
+      const lower = term.toLowerCase()
+      return ['new', 'create', 'add'].some(k => lower.includes(k)) ? items : []
+    }
+  })
+
+  return g
+})
+</script>
+
+<template>
+  <UDashboardSearch
+    v-model:search-term="searchTerm"
+    :groups="groups"
+    :loading="loading"
+    placeholder="Search tasks, docs, or type a command..."
+    :fuse="{ resultLimit: 10 }"
+  />
+</template>

package/app/components/tasks/ProjectSelect.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Project } from '~~/shared/types'
+
+const props = defineProps<{
+  modelValue?: string | null
+  projects: Project[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const NONE_VALUE = '__none__'
+
+const selectedId = computed({
+  get: () => props.modelValue || NONE_VALUE,
+  set: value => emit('update:modelValue', value === NONE_VALUE ? null : value)
+})
+
+const options = computed(() => [
+  { value: NONE_VALUE, label: 'No Project' },
+  ...props.projects
+    .filter(p => !p.deletedAt)
+    .map(p => ({ value: p.id, label: p.name }))
+])
+</script>
+
+<template>
+  <USelect
+    v-model="selectedId"
+    :items="options"
+    value-key="value"
+    class="w-full"
+  />
+</template>

package/app/components/tasks/TaskCard.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Task } from '~~/shared/types'
+
+const props = defineProps<{
+  task: Task
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  edit: [task: Task]
+  delete: [id: string]
+  view: [task: Task]
+}>()
+
+const priorityConfig = {
+  1: { label: 'Low', color: 'neutral' as const, icon: 'i-lucide-arrow-down' },
+  2: { label: 'Medium', color: 'warning' as const, icon: 'i-lucide-minus' },
+  3: { label: 'High', color: 'error' as const, icon: 'i-lucide-arrow-up' }
+}
+
+const statusConfig = {
+  todo: { label: 'Todo', color: 'neutral' as const, icon: 'i-lucide-circle' },
+  in_progress: { label: 'In Progress', color: 'info' as const, icon: 'i-lucide-clock' },
+  done: { label: 'Done', color: 'success' as const, icon: 'i-lucide-check-circle' },
+  blocked: { label: 'Blocked', color: 'error' as const, icon: 'i-lucide-alert-circle' }
+}
+
+const priority = computed(() => priorityConfig[props.task.priority as 1 | 2 | 3] || priorityConfig[2])
+const status = computed(() => statusConfig[props.task.status])
+const isDone = computed(() => props.task.status === 'done')
+const hasDescription = computed(() => !!props.task.description?.trim())
+
+const isOverdue = computed(() => {
+  if (!props.task.dueDate || isDone.value) return false
+  return new Date(props.task.dueDate) < new Date()
+})
+
+function formatDate(date: Date | string | undefined) {
+  if (!date) return null
+  const d = new Date(date)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+const menuItems = computed(() => [[
+  {
+    label: 'Edit',
+    icon: 'i-lucide-pencil',
+    onSelect: () => emit('edit', props.task)
+  },
+  {
+    label: 'Delete',
+    icon: 'i-lucide-trash-2',
+    color: 'error' as const,
+    onSelect: () => emit('delete', props.task.id)
+  }
+]])
+</script>
+
+<template>
+  <div
+    class="group flex items-start gap-3 p-3 rounded-lg border border-default hover:bg-elevated transition-colors"
+    :class="{ 'opacity-60': isDone }"
+  >
+    <!-- Checkbox -->
+    <button
+      class="mt-0.5 shrink-0"
+      @click.stop="emit('toggle', task.id)"
+    >
+      <UIcon
+        :name="isDone ? 'i-lucide-check-circle-2' : 'i-lucide-circle'"
+        class="size-5"
+        :class="isDone ? 'text-success' : 'text-dimmed hover:text-default'"
+      />
+    </button>
+
+    <!-- Content (clickable for details) -->
+    <button
+      class="flex-1 min-w-0 text-left"
+      @click="emit('view', task)"
+    >
+      <div class="flex items-center gap-2">
+        <span
+          class="font-medium"
+          :class="{ 'line-through text-dimmed': isDone }"
+        >
+          {{ task.title }}
+        </span>
+        <UIcon
+          v-if="hasDescription"
+          name="i-lucide-file-text"
+          class="size-3.5 text-dimmed shrink-0"
+        />
+      </div>
+
+      <!-- Meta row -->
+      <div class="flex items-center flex-wrap gap-2 mt-2">
+        <!-- Project badge -->
+        <UBadge
+          v-if="task.project"
+          variant="subtle"
+          color="neutral"
+          size="xs"
+        >
+          <span
+            class="size-2 rounded-full mr-1"
+            :style="{ backgroundColor: task.project.color }"
+          />
+          {{ task.project.name }}
+        </UBadge>
+
+        <!-- Priority badge -->
+        <UBadge
+          v-if="task.priority !== 2"
+          :color="priority.color"
+          variant="subtle"
+          size="xs"
+        >
+          <UIcon
+            :name="priority.icon"
+            class="size-3 mr-1"
+          />
+          {{ priority.label }}
+        </UBadge>
+
+        <!-- Status badge (if not todo or done) -->
+        <UBadge
+          v-if="task.status === 'in_progress' || task.status === 'blocked'"
+          :color="status.color"
+          variant="subtle"
+          size="xs"
+        >
+          <UIcon
+            :name="status.icon"
+            class="size-3 mr-1"
+          />
+          {{ status.label }}
+        </UBadge>
+
+        <!-- Due date -->
+        <span
+          v-if="task.dueDate"
+          class="text-xs flex items-center gap-1"
+          :class="isOverdue ? 'text-error' : 'text-dimmed'"
+        >
+          <UIcon
+            name="i-lucide-calendar"
+            class="size-3"
+          />
+          {{ formatDate(task.dueDate) }}
+        </span>
+
+        <!-- Tags -->
+        <UBadge
+          v-for="tag in task.tags?.slice(0, 3)"
+          :key="tag"
+          variant="subtle"
+          color="neutral"
+          size="xs"
+        >
+          {{ tag }}
+        </UBadge>
+        <span
+          v-if="task.tags && task.tags.length > 3"
+          class="text-xs text-dimmed"
+        >
+          +{{ task.tags.length - 3 }}
+        </span>
+      </div>
+    </button>
+
+    <!-- Actions -->
+    <UDropdownMenu :items="menuItems">
+      <UButton
+        icon="i-lucide-more-vertical"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    </UDropdownMenu>
+  </div>
+</template>

package/app/components/tasks/TaskDetail.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { Task } from '~~/shared/types'
+
+const props = defineProps<{
+  task: Task
+}>()
+
+const emit = defineEmits<{
+  edit: []
+  close: []
+  toggle: []
+}>()
+
+const priorityConfig = {
+  1: { label: 'Low', color: 'neutral' as const },
+  2: { label: 'Medium', color: 'warning' as const },
+  3: { label: 'High', color: 'error' as const }
+}
+
+const statusConfig = {
+  todo: { label: 'Todo', color: 'neutral' as const },
+  in_progress: { label: 'In Progress', color: 'info' as const },
+  done: { label: 'Done', color: 'success' as const },
+  blocked: { label: 'Blocked', color: 'error' as const }
+}
+
+const priority = computed(() => priorityConfig[props.task.priority as 1 | 2 | 3] || priorityConfig[2])
+const status = computed(() => statusConfig[props.task.status])
+const isComplete = computed(() => props.task.status === 'done')
+
+function formatDate(date: Date | string | undefined) {
+  if (!date) return null
+  const d = new Date(date)
+  return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-start justify-between gap-4">
+        <h3 class="text-lg font-semibold">
+          {{ task.title }}
+        </h3>
+        <UBadge
+          :color="status.color"
+          variant="subtle"
+        >
+          {{ status.label }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <!-- Meta info -->
+      <div class="flex flex-wrap items-center gap-3 text-sm">
+        <div
+          v-if="task.project"
+          class="flex items-center gap-1.5"
+        >
+          <span
+            class="size-2.5 rounded-full"
+            :style="{ backgroundColor: task.project.color }"
+          />
+          <span class="text-dimmed">{{ task.project.name }}</span>
+        </div>
+
+        <div class="flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-flag"
+            class="size-4 text-dimmed"
+          />
+          <UBadge
+            :color="priority.color"
+            variant="subtle"
+            size="xs"
+          >
+            {{ priority.label }}
+          </UBadge>
+        </div>
+
+        <div
+          v-if="task.dueDate"
+          class="flex items-center gap-1.5"
+        >
+          <UIcon
+            name="i-lucide-calendar"
+            class="size-4 text-dimmed"
+          />
+          <span class="text-dimmed">{{ formatDate(task.dueDate) }}</span>
+        </div>
+      </div>
+
+      <!-- Tags -->
+      <div
+        v-if="task.tags && task.tags.length > 0"
+        class="flex flex-wrap gap-1.5"
+      >
+        <UBadge
+          v-for="tag in task.tags"
+          :key="tag"
+          variant="subtle"
+          color="neutral"
+          size="sm"
+        >
+          {{ tag }}
+        </UBadge>
+      </div>
+
+      <!-- Description -->
+      <div
+        v-if="task.description"
+        class="pt-2 border-t border-default"
+      >
+        <div class="prose prose-sm dark:prose-invert max-w-none">
+          <MDC :value="task.description" />
+        </div>
+      </div>
+
+      <!-- Timestamps & Audit -->
+      <div class="pt-2 border-t border-default text-xs text-dimmed space-y-1">
+        <p>
+          Created: {{ formatDate(task.createdAt) }}
+          <span v-if="task.creator"> by {{ task.creator.name }}</span>
+        </p>
+        <p v-if="task.completedAt">
+          Completed: {{ formatDate(task.completedAt) }}
+        </p>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-between">
+        <UButton
+          :icon="isComplete ? 'i-lucide-rotate-ccw' : 'i-lucide-check'"
+          :color="isComplete ? 'neutral' : 'success'"
+          :variant="isComplete ? 'ghost' : 'soft'"
+          @click="emit('toggle')"
+        >
+          {{ isComplete ? 'Mark Incomplete' : 'Mark Complete' }}
+        </UButton>
+        <div class="flex gap-2">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            @click="emit('close')"
+          >
+            Close
+          </UButton>
+          <UButton
+            icon="i-lucide-pencil"
+            @click="emit('edit')"
+          >
+            Edit
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UCard>
+</template>