cognova 0.2.12 → 0.2.14

package/app/composables/useSearch.ts

@@ -1,38 +1,48 @@
 import { refDebounced } from '@vueuse/core'
-import type { Task, Document } from '~~/shared/types'
+import type { Task, Document, CronAgent, Conversation } from '~~/shared/types'
 
 export interface SearchResults {
   tasks: Task[]
   documents: Document[]
+  agents: CronAgent[]
+  conversations: Conversation[]
+}
+
+const emptyResults: SearchResults = {
+  tasks: [],
+  documents: [],
+  agents: [],
+  conversations: []
 }
 
 export function useSearch() {
   const searchTerm = ref('')
   const debouncedSearchTerm = refDebounced(searchTerm, 300)
   const loading = ref(false)
-  const results = ref<SearchResults>({
-    tasks: [],
-    documents: []
-  })
+  const results = ref<SearchResults>({ ...emptyResults })
 
   watch(debouncedSearchTerm, async (term) => {
     if (!term || term.length < 2) {
-      results.value = { tasks: [], documents: [] }
+      results.value = { ...emptyResults }
       return
     }
 
     loading.value = true
     try {
-      const [tasksRes, docsRes] = await Promise.all([
+      const [tasksRes, docsRes, agentsRes, convsRes] = await Promise.all([
         $fetch<{ data: Task[] }>('/api/tasks', { query: { search: term } }),
-        $fetch<{ data: Document[] }>('/api/documents', { query: { search: term } })
+        $fetch<{ data: Document[] }>('/api/documents', { query: { search: term } }),
+        $fetch<{ data: CronAgent[] }>('/api/agents', { query: { search: term } }),
+        $fetch<{ data: Conversation[] }>('/api/conversations', { query: { search: term } })
       ])
       results.value = {
         tasks: tasksRes.data.slice(0, 5),
-        documents: docsRes.data.slice(0, 5)
+        documents: docsRes.data.slice(0, 5),
+        agents: agentsRes.data.slice(0, 5),
+        conversations: convsRes.data.slice(0, 5)
       }
     } catch {
-      results.value = { tasks: [], documents: [] }
+      results.value = { ...emptyResults }
     } finally {
       loading.value = false
     }
@@ -40,7 +50,7 @@ export function useSearch() {
 
   function reset() {
     searchTerm.value = ''
-    results.value = { tasks: [], documents: [] }
+    results.value = { ...emptyResults }
   }
 
   return {

package/app/layouts/dashboard.vue

@@ -80,7 +80,7 @@ const links = [[{
 }, {
   label: 'Settings',
   icon: 'i-lucide-settings',
-  to: '/settings',
+  to: '/settings/account',
   onSelect: () => {
     open.value = false
   }

package/app/pages/agents/[id].vue

@@ -61,72 +61,6 @@ const showDeleteConfirm = ref(false)
 const selectedRun = ref<CronAgentRun | null>(null)
 const showRunModal = ref(false)
 
-// Format cron expression to human readable
-function formatSchedule(schedule: string) {
-  const parts = schedule.split(' ')
-  if (parts.length !== 5) return schedule
-
-  const min = parts[0]!
-  const hour = parts[1]!
-  const dayOfMonth = parts[2]!
-  const month = parts[3]!
-  const dayOfWeek = parts[4]!
-
-  if (min === '0' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*')
-    return 'Every hour'
-  if (min === '*/5' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*')
-    return 'Every 5 minutes'
-  if (dayOfMonth === '*' && month === '*' && dayOfWeek === '*' && hour !== '*')
-    return `Daily at ${hour}:${min.padStart(2, '0')}`
-  if (dayOfWeek === '0' && dayOfMonth === '*' && month === '*')
-    return `Weekly on Sunday at ${hour}:${min.padStart(2, '0')}`
-
-  return schedule
-}
-
-// Format relative time
-function formatRelativeTime(date?: Date | string) {
-  if (!date) return 'Never'
-  const d = new Date(date)
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-  const minutes = Math.floor(diff / 60000)
-  const hours = Math.floor(diff / 3600000)
-  const days = Math.floor(diff / 86400000)
-
-  if (minutes < 1) return 'Just now'
-  if (minutes < 60) return `${minutes}m ago`
-  if (hours < 24) return `${hours}h ago`
-  return `${days}d ago`
-}
-
-// Format duration
-function formatDuration(ms?: number) {
-  if (!ms) return '-'
-  if (ms < 1000) return `${ms}ms`
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
-  return `${(ms / 60000).toFixed(1)}m`
-}
-
-// Format date time
-function formatDateTime(date?: Date | string) {
-  if (!date) return '-'
-  const d = new Date(date)
-  return d.toLocaleString()
-}
-
-// Status badge color
-function getStatusColor(status?: string) {
-  switch (status) {
-    case 'success': return 'success'
-    case 'error': return 'error'
-    case 'budget_exceeded': return 'warning'
-    case 'running': return 'info'
-    case 'cancelled': return 'neutral'
-    default: return 'neutral'
-  }
-}
-
 // Load stats
 async function loadStats() {
   statsLoading.value = true
@@ -256,13 +190,6 @@ function openRunModal(run: CronAgentRun) {
   showRunModal.value = true
 }
 
-// Truncate output for list display
-function truncateOutput(output?: string, maxLength = 100) {
-  if (!output) return '-'
-  if (output.length <= maxLength) return output
-  return output.substring(0, maxLength) + '...'
-}
-
 // Watch period changes
 watch(period, () => {
   loadStats()
@@ -392,49 +319,7 @@ onMounted(() => {
           class="p-4 space-y-6"
         >
           <!-- Agent Info -->
-          <UCard>
-            <div class="space-y-3">
-              <div v-if="agent.description">
-                <p class="text-sm text-muted uppercase mb-1">
-                  Description
-                </p>
-                <p>{{ agent.description }}</p>
-              </div>
-
-              <div class="flex flex-wrap gap-6">
-                <div>
-                  <p class="text-sm text-muted uppercase mb-1">
-                    Schedule
-                  </p>
-                  <p class="flex items-center gap-2">
-                    <UIcon name="i-lucide-clock" />
-                    {{ formatSchedule(agent.schedule) }}
-                    <span class="text-sm text-muted">({{ agent.schedule }})</span>
-                  </p>
-                </div>
-
-                <div v-if="agent.maxBudgetUsd">
-                  <p class="text-sm text-muted uppercase mb-1">
-                    Budget Limit
-                  </p>
-                  <p class="flex items-center gap-2">
-                    <UIcon name="i-lucide-dollar-sign" />
-                    ${{ agent.maxBudgetUsd }} per run
-                  </p>
-                </div>
-
-                <div v-if="agent.lastRunAt">
-                  <p class="text-sm text-muted uppercase mb-1">
-                    Last Run
-                  </p>
-                  <p class="flex items-center gap-2">
-                    <UIcon name="i-lucide-activity" />
-                    {{ formatRelativeTime(agent.lastRunAt) }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </UCard>
+          <AgentsAgentInfoCard :agent="agent" />
 
           <!-- Stats Cards -->
           <AgentsAgentStatsCards
@@ -451,87 +336,11 @@ onMounted(() => {
           />
 
           <!-- Run History -->
-          <div class="space-y-4">
-            <h2 class="text-lg font-semibold">
-              Run History
-            </h2>
-
-            <!-- Loading runs -->
-            <div
-              v-if="runsLoading"
-              class="flex items-center justify-center h-32"
-            >
-              <UIcon
-                name="i-lucide-loader-2"
-                class="w-6 h-6 animate-spin text-neutral-400"
-              />
-            </div>
-
-            <!-- Empty state -->
-            <div
-              v-else-if="runs.length === 0"
-              class="flex flex-col items-center justify-center h-32 text-neutral-500"
-            >
-              <UIcon
-                name="i-lucide-history"
-                class="w-8 h-8 mb-2"
-              />
-              <p>No runs yet</p>
-            </div>
-
-            <!-- Run list -->
-            <div
-              v-else
-              class="space-y-2"
-            >
-              <UCard
-                v-for="run in runs"
-                :key="run.id"
-                class="cursor-pointer transition-all hover:ring-2 hover:ring-primary/50"
-                @click="openRunModal(run)"
-              >
-                <div class="flex items-start justify-between gap-4">
-                  <div class="flex-1 min-w-0">
-                    <div class="flex items-center gap-2 mb-1">
-                      <UBadge
-                        v-if="run.status === 'running'"
-                        color="info"
-                        variant="subtle"
-                        size="sm"
-                      >
-                        <UIcon
-                          name="i-lucide-loader-2"
-                          class="w-3 h-3 animate-spin mr-1"
-                        />
-                        Running
-                      </UBadge>
-                      <UBadge
-                        v-else
-                        :color="getStatusColor(run.status)"
-                        size="sm"
-                      >
-                        {{ run.status }}
-                      </UBadge>
-                      <span class="text-sm text-muted">
-                        {{ formatDateTime(run.startedAt) }}
-                      </span>
-                    </div>
-
-                    <p class="text-sm text-muted truncate">
-                      {{ run.error ? truncateOutput(run.error) : truncateOutput(run.output) }}
-                    </p>
-                  </div>
-
-                  <div class="text-right text-sm text-muted shrink-0">
-                    <p>{{ formatDuration(run.durationMs) }}</p>
-                    <p v-if="run.costUsd">
-                      ${{ run.costUsd.toFixed(4) }}
-                    </p>
-                  </div>
-                </div>
-              </UCard>
-            </div>
-          </div>
+          <AgentsAgentRunHistory
+            :runs="runs"
+            :loading="runsLoading"
+            @select="openRunModal"
+          />
         </div>
       </template>
     </UDashboardPanel>

package/app/pages/agents/index.vue

@@ -36,45 +36,6 @@ const periodOptions = [
   { label: '30d', value: '30d' as StatsPeriod }
 ]
 
-// Format cron expression to human readable
-function formatSchedule(schedule: string) {
-  const parts = schedule.split(' ')
-  if (parts.length !== 5) return schedule
-
-  const min = parts[0]!
-  const hour = parts[1]!
-  const dayOfMonth = parts[2]!
-  const month = parts[3]!
-  const dayOfWeek = parts[4]!
-
-  if (min === '0' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*')
-    return 'Every hour'
-  if (min === '*/5' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*')
-    return 'Every 5 minutes'
-  if (dayOfMonth === '*' && month === '*' && dayOfWeek === '*' && hour !== '*')
-    return `Daily at ${hour}:${min.padStart(2, '0')}`
-  if (dayOfWeek === '0' && dayOfMonth === '*' && month === '*')
-    return `Weekly on Sunday at ${hour}:${min.padStart(2, '0')}`
-
-  return schedule
-}
-
-// Format relative time
-function formatRelativeTime(date?: Date | string) {
-  if (!date) return 'Never'
-  const d = new Date(date)
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-  const minutes = Math.floor(diff / 60000)
-  const hours = Math.floor(diff / 3600000)
-  const days = Math.floor(diff / 86400000)
-
-  if (minutes < 1) return 'Just now'
-  if (minutes < 60) return `${minutes}m ago`
-  if (hours < 24) return `${hours}h ago`
-  return `${days}d ago`
-}
-
 // Open form for new agent
 function openNewAgentForm() {
   editingAgent.value = null
@@ -171,18 +132,6 @@ async function handleCancel(id: string, event: Event) {
   }
 }
 
-// Status badge color
-function getStatusColor(status?: string) {
-  switch (status) {
-    case 'success': return 'success'
-    case 'error': return 'error'
-    case 'budget_exceeded': return 'warning'
-    case 'running': return 'info'
-    case 'cancelled': return 'neutral'
-    default: return 'neutral'
-  }
-}
-
 // Load stats
 async function loadStats() {
   statsLoading.value = true
@@ -296,99 +245,17 @@ onMounted(async () => {
             <h2 class="text-lg font-semibold">
               Agents
             </h2>
-            <UCard
+            <AgentsAgentCard
               v-for="agent in agents"
               :key="agent.id"
-              class="cursor-pointer transition-all hover:ring-2 hover:ring-primary/50"
-              @click="navigateToAgent(agent)"
-            >
-              <div class="flex items-start justify-between gap-4">
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-center gap-2">
-                    <h3 class="font-medium truncate">
-                      {{ agent.name }}
-                    </h3>
-                    <UBadge
-                      v-if="checkAgentRunning(agent.id)"
-                      color="info"
-                      variant="subtle"
-                      size="sm"
-                    >
-                      <UIcon
-                        name="i-lucide-loader-2"
-                        class="w-3 h-3 animate-spin mr-1"
-                      />
-                      Running
-                    </UBadge>
-                    <UBadge
-                      v-else-if="agent.lastStatus"
-                      :color="getStatusColor(agent.lastStatus)"
-                      size="sm"
-                    >
-                      {{ agent.lastStatus }}
-                    </UBadge>
-                  </div>
-
-                  <p
-                    v-if="agent.description"
-                    class="text-sm text-muted truncate mt-1"
-                  >
-                    {{ agent.description }}
-                  </p>
-
-                  <div class="flex items-center gap-4 mt-2 text-sm text-muted">
-                    <span class="flex items-center gap-1">
-                      <UIcon name="i-lucide-clock" />
-                      {{ formatSchedule(agent.schedule) }}
-                    </span>
-                    <span
-                      v-if="agent.lastRunAt"
-                      class="flex items-center gap-1"
-                    >
-                      <UIcon name="i-lucide-activity" />
-                      {{ formatRelativeTime(agent.lastRunAt) }}
-                    </span>
-                    <span
-                      v-if="agent.maxBudgetUsd"
-                      class="flex items-center gap-1"
-                    >
-                      <UIcon name="i-lucide-dollar-sign" />
-                      ${{ agent.maxBudgetUsd }} limit
-                    </span>
-                  </div>
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <USwitch
-                    :model-value="agent.enabled"
-                    @click.stop
-                    @update:model-value="handleToggle(agent.id)"
-                  />
-                  <UButton
-                    v-if="checkAgentRunning(agent.id)"
-                    icon="i-lucide-square"
-                    variant="ghost"
-                    size="sm"
-                    color="error"
-                    @click.stop="handleCancel(agent.id, $event)"
-                  />
-                  <UButton
-                    v-else
-                    icon="i-lucide-play"
-                    variant="ghost"
-                    size="sm"
-                    :disabled="!agent.enabled"
-                    @click.stop="handleRun(agent.id, $event)"
-                  />
-                  <UButton
-                    icon="i-lucide-pencil"
-                    variant="ghost"
-                    size="sm"
-                    @click.stop="openEditForm(agent, $event)"
-                  />
-                </div>
-              </div>
-            </UCard>
+              :agent="agent"
+              :running="checkAgentRunning(agent.id)"
+              @toggle="handleToggle"
+              @run="handleRun"
+              @cancel="handleCancel"
+              @edit="openEditForm"
+              @navigate="navigateToAgent"
+            />
           </div>
         </div>
       </template>

package/app/pages/chat.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ChatImageBlock, ChatDocumentBlock } from '~~/shared/types'
+
 definePageMeta({
   layout: 'dashboard',
   middleware: 'auth'
@@ -53,8 +55,8 @@ onMounted(() => {
   }
 })
 
-function handleSend(message: string) {
-  sendMessage(message)
+function handleSend(message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]) {
+  sendMessage(message, attachments, documents)
   nextTick(scrollToBottom)
 }