cognova 0.1.0

package/app/components/tasks/TaskForm.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+import type { Task, Project, CreateTaskInput, UpdateTaskInput, TaskStatus } from '~~/shared/types'
+
+const props = defineProps<{
+  open: boolean
+  task?: Task | null
+  projects: Project[]
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'submit': [data: CreateTaskInput | UpdateTaskInput]
+}>()
+
+const isEditing = computed(() => !!props.task?.id)
+const title = computed(() => isEditing.value ? 'Edit Task' : 'Create Task')
+
+// Form state
+const formTitle = ref('')
+const description = ref('')
+const status = ref<TaskStatus>('todo')
+const priority = ref(2)
+const projectId = ref<string | null>(null)
+const dueDate = ref('')
+const tags = ref<string[]>([])
+
+// Status options
+const statusOptions = [
+  { value: 'todo', label: 'Todo' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'done', label: 'Done' },
+  { value: 'blocked', label: 'Blocked' }
+]
+
+// Priority options
+const priorityOptions = [
+  { value: 1, label: 'Low' },
+  { value: 2, label: 'Medium' },
+  { value: 3, label: 'High' }
+]
+
+// Editor toolbar
+const editorToolbar: EditorToolbarItem[][] = [
+  [
+    { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
+    { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
+    { kind: 'mark', mark: 'code', icon: 'i-lucide-code' }
+  ],
+  [
+    { kind: 'bulletList', icon: 'i-lucide-list' },
+    { kind: 'orderedList', icon: 'i-lucide-list-ordered' }
+  ],
+  [
+    { kind: 'link', icon: 'i-lucide-link' }
+  ]
+]
+
+// Editor content (use undefined for empty to avoid TipTap issues)
+const editorContent = computed(() => description.value || undefined)
+
+// Initialize form when task changes
+watch(() => props.task, (task) => {
+  if (task) {
+    formTitle.value = task.title
+    description.value = task.description || ''
+    status.value = task.status
+    priority.value = task.priority
+    projectId.value = task.projectId || null
+    dueDate.value = task.dueDate
+      ? new Date(task.dueDate).toISOString().split('T')[0] || ''
+      : ''
+    tags.value = task.tags || []
+  } else {
+    resetForm()
+  }
+}, { immediate: true })
+
+// Reset form when closing
+watch(() => props.open, (open) => {
+  if (!open) resetForm()
+})
+
+function resetForm() {
+  formTitle.value = ''
+  description.value = ''
+  status.value = 'todo'
+  priority.value = 2
+  projectId.value = null
+  dueDate.value = ''
+  tags.value = []
+}
+
+function close() {
+  emit('update:open', false)
+}
+
+function handleSubmit() {
+  if (!formTitle.value.trim()) return
+
+  const data: CreateTaskInput | UpdateTaskInput = {
+    title: formTitle.value.trim(),
+    description: description.value.trim() || undefined,
+    status: status.value,
+    priority: priority.value,
+    projectId: projectId.value,
+    dueDate: dueDate.value || undefined,
+    tags: tags.value
+  }
+
+  emit('submit', data)
+  close()
+}
+</script>
+
+<template>
+  <USlideover
+    :open="open"
+    :title="title"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="task-form-body">
+        <!-- Title -->
+        <UFormField
+          label="Title"
+          required
+        >
+          <UInput
+            v-model="formTitle"
+            placeholder="Task title..."
+            autofocus
+            class="w-full"
+          />
+        </UFormField>
+
+        <!-- Description - grows to fill available space -->
+        <div class="task-form-description">
+          <label class="block text-sm font-medium text-default mb-1.5">Description</label>
+          <UEditor
+            v-slot="{ editor }"
+            :model-value="editorContent"
+            content-type="markdown"
+            placeholder="Add a description..."
+            class="task-editor"
+            @update:model-value="description = $event"
+          >
+            <UEditorToolbar
+              :editor="editor"
+              :items="editorToolbar"
+              class="border-b border-default"
+            />
+          </UEditor>
+        </div>
+
+        <!-- Other fields -->
+        <div class="task-form-fields">
+          <!-- Status & Priority -->
+          <div class="grid grid-cols-2 gap-4">
+            <UFormField label="Status">
+              <USelect
+                v-model="status"
+                :items="statusOptions"
+                value-key="value"
+                class="w-full"
+              />
+            </UFormField>
+
+            <UFormField label="Priority">
+              <USelect
+                v-model="priority"
+                :items="priorityOptions"
+                value-key="value"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
+
+          <!-- Project -->
+          <UFormField label="Project">
+            <TasksProjectSelect
+              v-model="projectId"
+              :projects="projects"
+              class="w-full"
+            />
+          </UFormField>
+
+          <!-- Due Date -->
+          <UFormField label="Due Date">
+            <UInput
+              v-model="dueDate"
+              type="date"
+              class="w-full"
+            />
+          </UFormField>
+
+          <!-- Tags -->
+          <UFormField label="Tags">
+            <UInputTags
+              v-model="tags"
+              placeholder="Add tags..."
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          @click="close"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          :disabled="!formTitle.trim()"
+          @click="handleSubmit"
+        >
+          {{ isEditing ? 'Save Changes' : 'Create Task' }}
+        </UButton>
+      </div>
+    </template>
+  </USlideover>
+</template>
+
+<style>
+/* Body fills available space with flex layout */
+.task-form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Description section - grows to fill available space */
+.task-form-description {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 8rem;
+  overflow: hidden;
+}
+
+/* Other form fields - fixed height */
+.task-form-fields {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Editor fills available space in description */
+.task-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.375rem;
+}
+
+.task-editor [data-slot="content"] {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.task-editor .tiptap {
+  min-height: 100%;
+  padding: 0.75rem;
+}
+
+.task-editor .tiptap:focus {
+  outline: none;
+}
+</style>

package/app/components/tasks/TaskList.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Task } from '~~/shared/types'
+
+defineProps<{
+  tasks: Task[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  edit: [task: Task]
+  delete: [id: string]
+  create: []
+  view: [task: Task]
+}>()
+</script>
+
+<template>
+  <div>
+    <!-- Loading state -->
+    <div
+      v-if="loading"
+      class="flex items-center justify-center py-12"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-8 animate-spin text-dimmed"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <UCard v-else-if="tasks.length === 0">
+      <div class="text-center py-8 text-dimmed">
+        <UIcon
+          name="i-lucide-check-square"
+          class="size-12 mx-auto mb-2 opacity-50"
+        />
+        <p class="font-medium">
+          No tasks yet
+        </p>
+        <p class="text-sm mt-1">
+          Create your first task to get started.
+        </p>
+        <UButton
+          class="mt-4"
+          icon="i-lucide-plus"
+          label="Add Task"
+          @click="emit('create')"
+        />
+      </div>
+    </UCard>
+
+    <!-- Task list -->
+    <div
+      v-else
+      class="space-y-2"
+    >
+      <TasksTaskCard
+        v-for="task in tasks"
+        :key="task.id"
+        :task="task"
+        @toggle="emit('toggle', $event)"
+        @edit="emit('edit', $event)"
+        @delete="emit('delete', $event)"
+        @view="emit('view', $event)"
+      />
+    </div>
+  </div>
+</template>

package/app/components/view/ViewToc.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { TocLink } from '~~/shared/types'
+
+defineProps<{
+  links: TocLink[]
+}>()
+
+const activeId = ref<string | null>(null)
+
+function scrollToHeading(id: string) {
+  const element = document.getElementById(id)
+  if (element)
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(() => {
+  const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          activeId.value = entry.target.id
+          break
+        }
+      }
+    },
+    { rootMargin: '-80px 0px -80% 0px' }
+  )
+
+  headings.forEach(heading => observer.observe(heading))
+
+  onUnmounted(() => observer.disconnect())
+})
+</script>
+
+<template>
+  <nav
+    v-if="links.length"
+    class="space-y-1"
+  >
+    <p class="text-sm font-semibold text-muted mb-3">
+      On this page
+    </p>
+
+    <template
+      v-for="link in links"
+      :key="link.id"
+    >
+      <button
+        type="button"
+        class="block w-full text-left text-sm py-1 hover:text-primary transition-colors"
+        :class="[
+          activeId === link.id ? 'text-primary font-medium' : 'text-dimmed',
+          link.depth === 2 && 'pl-0',
+          link.depth === 3 && 'pl-4',
+          link.depth >= 4 && 'pl-8'
+        ]"
+        @click="scrollToHeading(link.id)"
+      >
+        {{ link.text }}
+      </button>
+
+      <template v-if="link.children?.length">
+        <button
+          v-for="child in link.children"
+          :key="child.id"
+          type="button"
+          class="block w-full text-left text-sm py-1 hover:text-primary transition-colors pl-4"
+          :class="activeId === child.id ? 'text-primary font-medium' : 'text-dimmed'"
+          @click="scrollToHeading(child.id)"
+        >
+          {{ child.text }}
+        </button>
+      </template>
+    </template>
+  </nav>
+
+  <div
+    v-else
+    class="text-sm text-dimmed italic"
+  >
+    No headings found
+  </div>
+</template>

package/app/composables/useAgents.ts

@@ -0,0 +1,153 @@
+import type { CronAgent, CronAgentRun, CreateAgentInput, UpdateAgentInput, StatsPeriod, AgentGlobalStats, AgentDetailStats } from '~~/shared/types'
+
+export function useAgents() {
+  const agents = ref<CronAgent[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchAgents() {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await $fetch<{ data: CronAgent[] }>('/api/agents')
+      agents.value = response.data
+      return response.data
+    } catch (e) {
+      error.value = 'Failed to load agents'
+      console.error('Failed to load agents:', e)
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createAgent(input: CreateAgentInput) {
+    try {
+      const response = await $fetch<{ data: CronAgent }>('/api/agents', {
+        method: 'POST',
+        body: input
+      })
+      agents.value = [response.data, ...agents.value]
+      return response.data
+    } catch (e) {
+      console.error('Failed to create agent:', e)
+      throw e
+    }
+  }
+
+  async function updateAgent(id: string, input: UpdateAgentInput) {
+    try {
+      const response = await $fetch<{ data: CronAgent }>(`/api/agents/${id}`, {
+        method: 'PATCH',
+        body: input
+      })
+      const index = agents.value.findIndex(a => a.id === id)
+      if (index !== -1)
+        agents.value[index] = response.data
+      return response.data
+    } catch (e) {
+      console.error('Failed to update agent:', e)
+      throw e
+    }
+  }
+
+  async function deleteAgent(id: string) {
+    try {
+      // @ts-expect-error - Nitro route type inference issue with multiple methods on same path
+      await $fetch(`/api/agents/${id}`, { method: 'DELETE' })
+      agents.value = agents.value.filter(a => a.id !== id)
+    } catch (e) {
+      console.error('Failed to delete agent:', e)
+      throw e
+    }
+  }
+
+  async function toggleEnabled(id: string) {
+    const agent = agents.value.find(a => a.id === id)
+    if (!agent) return
+
+    return updateAgent(id, { enabled: !agent.enabled })
+  }
+
+  async function runAgent(id: string) {
+    try {
+      await $fetch(`/api/agents/${id}/run`, { method: 'POST' })
+    } catch (e) {
+      console.error('Failed to run agent:', e)
+      throw e
+    }
+  }
+
+  async function cancelAgent(id: string) {
+    try {
+      await $fetch(`/api/agents/${id}/cancel`, { method: 'POST' })
+    } catch (e) {
+      console.error('Failed to cancel agent:', e)
+      throw e
+    }
+  }
+
+  async function fetchRuns(agentId: string, period?: StatsPeriod, limit = 100) {
+    try {
+      const response = await $fetch<{ data: CronAgentRun[] }>(`/api/agents/${agentId}/runs`, {
+        query: { limit, period }
+      })
+      return response.data
+    } catch (e) {
+      console.error('Failed to fetch runs:', e)
+      throw e
+    }
+  }
+
+  async function fetchAgent(agentId: string) {
+    try {
+      const response = await $fetch<{ data: CronAgent }>(`/api/agents/${agentId}`)
+      return response.data
+    } catch (e) {
+      console.error('Failed to fetch agent:', e)
+      throw e
+    }
+  }
+
+  async function fetchGlobalStats(period: StatsPeriod = '7d') {
+    try {
+      const response = await $fetch<{ data: AgentGlobalStats }>('/api/agents/stats', {
+        query: { period }
+      })
+      return response.data
+    } catch (e) {
+      console.error('Failed to fetch global stats:', e)
+      throw e
+    }
+  }
+
+  async function fetchAgentStats(agentId: string, period: StatsPeriod = '7d') {
+    try {
+      const response = await $fetch<{ data: AgentDetailStats }>(`/api/agents/${agentId}/stats`, {
+        query: { period }
+      })
+      return response.data
+    } catch (e) {
+      console.error('Failed to fetch agent stats:', e)
+      throw e
+    }
+  }
+
+  return {
+    agents,
+    loading,
+    error,
+    fetchAgents,
+    fetchAgent,
+    createAgent,
+    updateAgent,
+    deleteAgent,
+    toggleEnabled,
+    runAgent,
+    cancelAgent,
+    fetchRuns,
+    fetchGlobalStats,
+    fetchAgentStats
+  }
+}

package/app/composables/useAuth.ts

@@ -0,0 +1,73 @@
+import { createAuthClient } from 'better-auth/vue'
+
+let _authClient: ReturnType<typeof createAuthClient> | null = null
+
+function getAuthClient() {
+  if (!_authClient) {
+    const baseURL = import.meta.server
+      ? (process.env.BETTER_AUTH_URL || 'http://localhost:3000')
+      : window.location.origin
+
+    _authClient = createAuthClient({ baseURL })
+  }
+  return _authClient
+}
+
+export function useAuth() {
+  const authClient = getAuthClient()
+  const session = authClient.useSession()
+
+  async function login(email: string, password: string) {
+    const result = await authClient.signIn.email({ email, password })
+    return result
+  }
+
+  async function logout() {
+    await authClient.signOut()
+    navigateTo('/login')
+  }
+
+  async function register(email: string, password: string, name: string) {
+    const result = await authClient.signUp.email({ email, password, name })
+    return result
+  }
+
+  async function updateProfile(data: { name?: string, image?: string }) {
+    const result = await authClient.updateUser(data)
+    return result
+  }
+
+  async function changeEmail(newEmail: string) {
+    // Use custom endpoint to bypass BetterAuth verification flow
+    try {
+      await $fetch('/api/user/email', {
+        method: 'PATCH',
+        body: { email: newEmail }
+      })
+      // Refresh session to get updated user data
+      await authClient.getSession({ fetchOptions: { cache: 'no-store' } })
+      return { data: { success: true }, error: null }
+    } catch (err: unknown) {
+      const error = err as { data?: { message?: string } }
+      return { data: null, error: { message: error.data?.message || 'Failed to change email' } }
+    }
+  }
+
+  async function changePassword(data: { currentPassword: string, newPassword: string }) {
+    const result = await authClient.changePassword(data)
+    return result
+  }
+
+  return {
+    session,
+    user: computed(() => session.value?.data?.user),
+    isAuthenticated: computed(() => !!session.value?.data?.user),
+    isPending: computed(() => session.value?.isPending ?? true),
+    login,
+    logout,
+    register,
+    updateProfile,
+    changeEmail,
+    changePassword
+  }
+}