cognova 0.2.13 → 0.2.15

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/settings/account.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+const { user, updateProfile, changeEmail, changePassword } = useAuth()
+const toast = useToast()
+
+// Profile form state
+const profileState = reactive({
+  name: ''
+})
+const profileLoading = ref(false)
+
+// Email form state
+const emailState = reactive({
+  newEmail: ''
+})
+const emailLoading = ref(false)
+
+// Password form state
+const passwordState = reactive({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+const passwordLoading = ref(false)
+
+// Initialize forms with current user data
+watch(() => user.value, (u) => {
+  if (u) {
+    profileState.name = u.name || ''
+    emailState.newEmail = u.email || ''
+  }
+}, { immediate: true })
+
+async function handleProfileSubmit() {
+  profileLoading.value = true
+  const result = await updateProfile({
+    name: profileState.name
+  })
+
+  if (result.error) {
+    toast.add({
+      title: 'Update failed',
+      description: result.error.message,
+      color: 'error'
+    })
+  } else {
+    toast.add({
+      title: 'Profile updated',
+      description: 'Your name has been updated successfully.',
+      color: 'success'
+    })
+  }
+  profileLoading.value = false
+}
+
+async function handleEmailSubmit() {
+  if (!emailState.newEmail) {
+    toast.add({
+      title: 'Email required',
+      description: 'Please enter a new email address.',
+      color: 'error'
+    })
+    return
+  }
+
+  emailLoading.value = true
+  const result = await changeEmail(emailState.newEmail)
+
+  if (result.error) {
+    toast.add({
+      title: 'Email change failed',
+      description: result.error.message,
+      color: 'error'
+    })
+  } else {
+    toast.add({
+      title: 'Email updated',
+      description: 'Your email has been changed successfully.',
+      color: 'success'
+    })
+  }
+  emailLoading.value = false
+}
+
+async function handlePasswordSubmit() {
+  if (passwordState.newPassword !== passwordState.confirmPassword) {
+    toast.add({
+      title: 'Passwords do not match',
+      description: 'Please make sure your new passwords match.',
+      color: 'error'
+    })
+    return
+  }
+
+  if (!passwordState.currentPassword || !passwordState.newPassword) {
+    toast.add({
+      title: 'Missing fields',
+      description: 'Please fill in all password fields.',
+      color: 'error'
+    })
+    return
+  }
+
+  passwordLoading.value = true
+  const result = await changePassword({
+    currentPassword: passwordState.currentPassword,
+    newPassword: passwordState.newPassword
+  })
+
+  if (result.error) {
+    toast.add({
+      title: 'Password change failed',
+      description: result.error.message,
+      color: 'error'
+    })
+  } else {
+    toast.add({
+      title: 'Password changed',
+      description: 'Your password has been changed successfully.',
+      color: 'success'
+    })
+    passwordState.currentPassword = ''
+    passwordState.newPassword = ''
+    passwordState.confirmPassword = ''
+  }
+  passwordLoading.value = false
+}
+</script>
+
+<template>
+  <div class="space-y-8 max-w-2xl mx-auto py-6">
+    <!-- Profile Section -->
+    <div>
+      <h3 class="text-lg font-semibold mb-4">
+        Profile
+      </h3>
+      <UForm
+        :state="profileState"
+        class="space-y-4"
+        @submit="handleProfileSubmit"
+      >
+        <UFormField
+          label="Name"
+          name="name"
+        >
+          <UInput
+            v-model="profileState.name"
+            placeholder="Your name"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton
+          type="submit"
+          :loading="profileLoading"
+        >
+          Save Name
+        </UButton>
+      </UForm>
+    </div>
+
+    <USeparator />
+
+    <!-- Email Section -->
+    <div>
+      <h3 class="text-lg font-semibold mb-4">
+        Email Address
+      </h3>
+      <UForm
+        :state="emailState"
+        class="space-y-4"
+        @submit="handleEmailSubmit"
+      >
+        <UFormField
+          label="Email"
+          name="newEmail"
+        >
+          <UInput
+            v-model="emailState.newEmail"
+            type="email"
+            placeholder="your@email.com"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton
+          type="submit"
+          :loading="emailLoading"
+        >
+          Change Email
+        </UButton>
+      </UForm>
+    </div>
+
+    <USeparator />
+
+    <!-- Password Section -->
+    <div>
+      <h3 class="text-lg font-semibold mb-4">
+        Change Password
+      </h3>
+      <UForm
+        :state="passwordState"
+        class="space-y-4"
+        @submit="handlePasswordSubmit"
+      >
+        <UFormField
+          label="Current Password"
+          name="currentPassword"
+        >
+          <UInput
+            v-model="passwordState.currentPassword"
+            type="password"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField
+          label="New Password"
+          name="newPassword"
+        >
+          <UInput
+            v-model="passwordState.newPassword"
+            type="password"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField
+          label="Confirm New Password"
+          name="confirmPassword"
+        >
+          <UInput
+            v-model="passwordState.confirmPassword"
+            type="password"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton
+          type="submit"
+          :loading="passwordLoading"
+        >
+          Change Password
+        </UButton>
+      </UForm>
+    </div>
+  </div>
+</template>