cognova 0.1.0

package/app/components/agents/AgentActivityChart.client.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { useElementSize } from '@vueuse/core'
+import { VisXYContainer, VisLine, VisArea, VisAxis, VisCrosshair, VisTooltip } from '@unovis/vue'
+import type { DailyRunData } from '~~/shared/types'
+
+const props = defineProps<{
+  data: DailyRunData[]
+  title?: string
+  height?: string
+}>()
+
+const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
+const { width } = useElementSize(cardRef)
+
+// X accessor - use index
+const x = (_: DailyRunData, i: number) => i
+
+// Y accessor - total runs
+const y = (d: DailyRunData) => d.total
+
+// Format X axis ticks
+const xTicks = (i: number) => {
+  const item = props.data[i]
+  if (!item) return ''
+  return format(new Date(item.date), 'd MMM')
+}
+
+// Tooltip template
+const template = (d: DailyRunData) => {
+  return `<div class="p-2 text-sm">
+    <div class="font-medium">${format(new Date(d.date), 'MMM d, yyyy')}</div>
+    <div class="text-success">Success: ${d.success}</div>
+    <div class="text-error">Errors: ${d.error}</div>
+    <div class="text-muted">Total: ${d.total}</div>
+    <div class="text-muted">Cost: $${d.costUsd.toFixed(4)}</div>
+  </div>`
+}
+</script>
+
+<template>
+  <UCard
+    ref="cardRef"
+    :ui="{ root: 'overflow-visible', body: '!px-0 !pt-0 !pb-3' }"
+  >
+    <template
+      v-if="title"
+      #header
+    >
+      <p class="text-sm font-medium">
+        {{ title }}
+      </p>
+    </template>
+
+    <div
+      v-if="data.length === 0"
+      class="flex items-center justify-center h-48 text-muted"
+    >
+      No activity data
+    </div>
+
+    <VisXYContainer
+      v-else
+      :data="data"
+      :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+      :class="height || 'h-48'"
+      :width="width"
+    >
+      <VisLine
+        :x="x"
+        :y="y"
+        color="var(--ui-primary)"
+      />
+      <VisArea
+        :x="x"
+        :y="y"
+        color="var(--ui-primary)"
+        :opacity="0.1"
+      />
+      <VisAxis
+        type="x"
+        :x="x"
+        :tick-format="xTicks"
+      />
+      <VisCrosshair
+        color="var(--ui-primary)"
+        :template="template"
+      />
+      <VisTooltip />
+    </VisXYContainer>
+  </UCard>
+</template>
+
+<style scoped>
+.unovis-xy-container {
+  --vis-crosshair-line-stroke-color: var(--ui-primary);
+  --vis-crosshair-circle-stroke-color: var(--ui-bg);
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-dimmed);
+  --vis-tooltip-background-color: var(--ui-bg);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text-highlighted);
+}
+</style>

package/app/components/agents/AgentActivityChart.server.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  data?: unknown[]
+  title?: string
+  height?: string
+}>()
+</script>
+
+<template>
+  <UCard :ui="{ body: '!p-0' }">
+    <template
+      v-if="title"
+      #header
+    >
+      <p class="text-sm font-medium">
+        {{ title }}
+      </p>
+    </template>
+
+    <div
+      :class="height || 'h-48'"
+      class="bg-muted/5 rounded animate-pulse"
+    />
+  </UCard>
+</template>

package/app/components/agents/AgentForm.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import type { EditorToolbarItem } from '@nuxt/ui'
+import type { CronAgent, CreateAgentInput, UpdateAgentInput } from '~~/shared/types'
+
+const props = defineProps<{
+  agent?: CronAgent | null
+}>()
+
+const emit = defineEmits<{
+  submit: [data: CreateAgentInput | UpdateAgentInput]
+  cancel: []
+}>()
+
+// Form state
+const name = ref('')
+const description = ref('')
+const schedule = ref('0 8 * * *')
+const prompt = ref('')
+const enabled = ref(true)
+const maxTurns = ref<number | undefined>(50)
+const maxBudgetUsd = ref<number | undefined>(undefined)
+
+// Common schedule presets
+const schedulePresets = [
+  { label: 'Every 5 minutes', value: '*/5 * * * *' },
+  { label: 'Every hour', value: '0 * * * *' },
+  { label: 'Every 6 hours', value: '0 */6 * * *' },
+  { label: 'Daily at 8am', value: '0 8 * * *' },
+  { label: 'Daily at midnight', value: '0 0 * * *' },
+  { label: 'Weekly (Sunday midnight)', value: '0 0 * * 0' },
+  { label: 'Custom', value: 'custom' }
+]
+
+const selectedPreset = ref('0 8 * * *')
+const customSchedule = ref('')
+
+// 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: 'codeBlock', icon: 'i-lucide-square-code' }
+  ]
+]
+
+// Editor content (use undefined for empty to avoid TipTap issues)
+const editorContent = computed(() => prompt.value || undefined)
+
+// Watch preset selection
+watch(selectedPreset, (value) => {
+  if (value !== 'custom') {
+    schedule.value = value
+  }
+})
+
+watch(customSchedule, (value) => {
+  if (selectedPreset.value === 'custom' && value) {
+    schedule.value = value
+  }
+})
+
+// Initialize form when agent prop changes
+watch(() => props.agent, (agent) => {
+  if (agent) {
+    name.value = agent.name
+    description.value = agent.description || ''
+    schedule.value = agent.schedule
+    prompt.value = agent.prompt
+    enabled.value = agent.enabled
+    maxTurns.value = agent.maxTurns ?? 50
+    maxBudgetUsd.value = agent.maxBudgetUsd ?? undefined
+
+    // Check if schedule matches a preset
+    const preset = schedulePresets.find(p => p.value === agent.schedule)
+    if (preset) {
+      selectedPreset.value = agent.schedule
+    } else {
+      selectedPreset.value = 'custom'
+      customSchedule.value = agent.schedule
+    }
+  } else {
+    // Reset form for new agent
+    name.value = ''
+    description.value = ''
+    schedule.value = '0 8 * * *'
+    selectedPreset.value = '0 8 * * *'
+    customSchedule.value = ''
+    prompt.value = ''
+    enabled.value = true
+    maxTurns.value = 50
+    maxBudgetUsd.value = undefined
+  }
+}, { immediate: true })
+
+// Validation
+const isValid = computed(() => {
+  return name.value.trim() && schedule.value.trim() && prompt.value.trim()
+})
+
+function handleSubmit() {
+  if (!isValid.value) return
+
+  const data: CreateAgentInput | UpdateAgentInput = {
+    name: name.value.trim(),
+    description: description.value.trim() || undefined,
+    schedule: schedule.value.trim(),
+    prompt: prompt.value.trim(),
+    enabled: enabled.value,
+    maxTurns: maxTurns.value,
+    maxBudgetUsd: maxBudgetUsd.value
+  }
+
+  emit('submit', data)
+}
+</script>
+
+<template>
+  <div class="agent-form-body">
+    <!-- Name -->
+    <UFormField
+      label="Name"
+      required
+    >
+      <UInput
+        v-model="name"
+        placeholder="Email Digest Agent"
+        class="w-full"
+      />
+    </UFormField>
+
+    <!-- Description -->
+    <UFormField label="Description">
+      <UInput
+        v-model="description"
+        placeholder="Scans emails and surfaces important items"
+        class="w-full"
+      />
+    </UFormField>
+
+    <!-- Schedule -->
+    <UFormField
+      label="Schedule"
+      required
+    >
+      <USelect
+        v-model="selectedPreset"
+        :items="schedulePresets"
+        value-key="value"
+        class="w-full"
+      />
+    </UFormField>
+
+    <!-- Custom cron expression -->
+    <UFormField
+      v-if="selectedPreset === 'custom'"
+      label="Custom Cron Expression"
+    >
+      <UInput
+        v-model="customSchedule"
+        placeholder="0 4 * * *"
+        class="w-full"
+      />
+      <template #hint>
+        <span class="text-xs text-neutral-500">
+          Format: minute hour day-of-month month day-of-week
+        </span>
+      </template>
+    </UFormField>
+
+    <!-- Prompt - grows to fill available space -->
+    <div class="agent-form-prompt">
+      <label class="block text-sm font-medium text-default mb-1.5">
+        Prompt <span class="text-error-500">*</span>
+      </label>
+      <UEditor
+        v-slot="{ editor }"
+        :model-value="editorContent"
+        content-type="markdown"
+        placeholder="You are an email scanning agent..."
+        class="agent-editor"
+        @update:model-value="prompt = $event"
+      >
+        <UEditorToolbar
+          :editor="editor"
+          :items="editorToolbar"
+          class="border-b border-default"
+        />
+      </UEditor>
+    </div>
+
+    <!-- Other fields -->
+    <div class="agent-form-fields">
+      <!-- Max Turns & Budget -->
+      <div class="grid grid-cols-2 gap-4">
+        <UFormField label="Max Turns">
+          <UInput
+            v-model.number="maxTurns"
+            type="number"
+            :min="1"
+            :max="200"
+            placeholder="50"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Max Budget (USD)">
+          <UInput
+            v-model.number="maxBudgetUsd"
+            type="number"
+            :min="0.01"
+            :step="0.01"
+            placeholder="No limit"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <!-- Enabled toggle -->
+      <UFormField>
+        <div class="flex items-center gap-2">
+          <USwitch v-model="enabled" />
+          <span class="text-sm">Enabled</span>
+        </div>
+      </UFormField>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex justify-end gap-2 pt-4">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </UButton>
+      <UButton
+        :disabled="!isValid"
+        @click="handleSubmit"
+      >
+        {{ agent ? 'Update Agent' : 'Create Agent' }}
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Body fills available space with flex layout */
+.agent-form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Prompt section - grows to fill available space */
+.agent-form-prompt {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 12rem;
+  overflow: hidden;
+}
+
+/* Other form fields - fixed height */
+.agent-form-fields {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Editor fills available space in prompt */
+.agent-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.375rem;
+}
+
+.agent-editor [data-slot="content"] {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.agent-editor .tiptap {
+  min-height: 100%;
+  padding: 0.75rem;
+}
+
+.agent-editor .tiptap:focus {
+  outline: none;
+}
+</style>

package/app/components/agents/AgentRunModal.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { CronAgentRun } from '~~/shared/types'
+
+defineProps<{
+  run: CronAgentRun | null
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+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`
+}
+
+function formatDateTime(date?: Date | string) {
+  if (!date) return '-'
+  const d = new Date(date)
+  return d.toLocaleString()
+}
+
+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'
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="run ? `Run Details` : 'Run Details'"
+    :ui="{ content: 'sm:max-w-3xl' }"
+  >
+    <template #content>
+      <div
+        v-if="run"
+        class="p-4 space-y-4"
+      >
+        <!-- Status and metadata -->
+        <div class="flex flex-wrap items-center gap-4">
+          <UBadge
+            :color="getStatusColor(run.status)"
+            size="lg"
+          >
+            {{ run.status }}
+          </UBadge>
+          <span class="text-sm text-muted">
+            Started: {{ formatDateTime(run.startedAt) }}
+          </span>
+          <span
+            v-if="run.completedAt"
+            class="text-sm text-muted"
+          >
+            Completed: {{ formatDateTime(run.completedAt) }}
+          </span>
+        </div>
+
+        <!-- Metrics -->
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-lg bg-muted/5">
+          <div>
+            <p class="text-xs text-muted uppercase">
+              Duration
+            </p>
+            <p class="font-medium">
+              {{ formatDuration(run.durationMs) }}
+            </p>
+          </div>
+          <div>
+            <p class="text-xs text-muted uppercase">
+              Cost
+            </p>
+            <p class="font-medium">
+              {{ run.costUsd ? `$${run.costUsd.toFixed(4)}` : '-' }}
+            </p>
+          </div>
+          <div>
+            <p class="text-xs text-muted uppercase">
+              Input Tokens
+            </p>
+            <p class="font-medium">
+              {{ run.inputTokens?.toLocaleString() || '-' }}
+            </p>
+          </div>
+          <div>
+            <p class="text-xs text-muted uppercase">
+              Output Tokens
+            </p>
+            <p class="font-medium">
+              {{ run.outputTokens?.toLocaleString() || '-' }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Error message -->
+        <div
+          v-if="run.error"
+          class="p-4 rounded-lg bg-error-500/10 border border-error-500/20"
+        >
+          <p class="text-sm font-medium text-error-500 mb-2">
+            Error
+          </p>
+          <pre class="text-sm text-error-400 whitespace-pre-wrap font-mono overflow-x-auto">{{ run.error }}</pre>
+        </div>
+
+        <!-- Output -->
+        <div v-if="run.output">
+          <p class="text-sm font-medium mb-2">
+            Output
+          </p>
+          <div class="max-h-96 overflow-auto rounded-lg bg-muted/5 border border-default">
+            <pre class="p-4 text-sm whitespace-pre-wrap font-mono">{{ run.output }}</pre>
+          </div>
+        </div>
+
+        <div
+          v-if="!run.output && !run.error && run.status === 'running'"
+          class="text-center text-muted py-8"
+        >
+          <UIcon
+            name="i-lucide-loader-2"
+            class="size-8 animate-spin mb-2"
+          />
+          <p>Agent is currently running...</p>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="p-4 text-center text-muted"
+      >
+        No run selected
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          @click="open = false"
+        >
+          Close
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/agents/AgentStatsCards.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { AgentGlobalStats, AgentDetailStats } from '~~/shared/types'
+
+const props = defineProps<{
+  stats: AgentGlobalStats | AgentDetailStats | null
+  variant: 'global' | 'detail'
+  loading?: boolean
+}>()
+
+function formatCurrency(value: number): string {
+  if (value < 0.01) return '<$0.01'
+  return `$${value.toFixed(2)}`
+}
+
+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 formatRelativeTime(dateStr: string | null): string {
+  if (!dateStr) return 'Never'
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diff = now.getTime() - date.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`
+}
+
+const globalStats = computed(() => {
+  if (props.variant !== 'global' || !props.stats) return []
+  const s = props.stats as AgentGlobalStats
+  return [
+    { title: 'Total Agents', icon: 'i-lucide-bot', value: s.totalAgents },
+    { title: 'Active', icon: 'i-lucide-play-circle', value: s.activeAgents },
+    { title: 'Runs', icon: 'i-lucide-activity', value: s.runsInPeriod },
+    { title: 'Success Rate', icon: 'i-lucide-check-circle', value: `${s.successRate}%` },
+    { title: 'Total Cost', icon: 'i-lucide-dollar-sign', value: formatCurrency(s.totalCostUsd) }
+  ]
+})
+
+const detailStats = computed(() => {
+  if (props.variant !== 'detail' || !props.stats) return []
+  const s = props.stats as AgentDetailStats
+  return [
+    { title: 'Total Runs', icon: 'i-lucide-activity', value: s.totalRuns },
+    { title: 'Success Rate', icon: 'i-lucide-check-circle', value: `${s.successRate}%` },
+    { title: 'Avg Duration', icon: 'i-lucide-clock', value: formatDuration(s.avgDurationMs) },
+    { title: 'Total Cost', icon: 'i-lucide-dollar-sign', value: formatCurrency(s.totalCostUsd) },
+    { title: 'Last Run', icon: 'i-lucide-calendar', value: formatRelativeTime(s.lastRunAt) }
+  ]
+})
+
+const displayStats = computed(() => props.variant === 'global' ? globalStats.value : detailStats.value)
+</script>
+
+<template>
+  <div
+    class="grid gap-4"
+    :class="variant === 'global' ? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5' : 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5'"
+  >
+    <template v-if="loading">
+      <div
+        v-for="i in (variant === 'global' ? 5 : 5)"
+        :key="i"
+        class="p-4 rounded-lg bg-elevated border border-default"
+      >
+        <USkeleton class="h-4 w-16 mb-2" />
+        <USkeleton class="h-8 w-12" />
+      </div>
+    </template>
+
+    <template v-else-if="stats">
+      <div
+        v-for="stat in displayStats"
+        :key="stat.title"
+        class="p-4 rounded-lg bg-elevated border border-default"
+      >
+        <div class="flex items-center gap-2 text-muted text-sm mb-1">
+          <UIcon
+            :name="stat.icon"
+            class="size-4"
+          />
+          <span>{{ stat.title }}</span>
+        </div>
+        <p class="text-2xl font-semibold">
+          {{ stat.value }}
+        </p>
+      </div>
+    </template>
+  </div>
+</template>