cognova 0.2.2 → 0.2.4

package/app/components/usage/UsageCostChart.client.vue

@@ -2,12 +2,13 @@
 import { format } from 'date-fns'
 import { useElementSize } from '@vueuse/core'
 import { VisXYContainer, VisLine, VisArea, VisAxis, VisCrosshair, VisTooltip } from '@unovis/vue'
-import type { DailyUsageData } from '~~/shared/types'
+import type { DailyUsageData, UsageDisplayMode } from '~~/shared/types'
 
 const props = defineProps<{
   data: DailyUsageData[]
   title?: string
   granularity: 'daily' | 'hourly'
+  displayMode?: UsageDisplayMode
 }>()
 
 const emit = defineEmits<{
@@ -17,9 +18,12 @@ const emit = defineEmits<{
 const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
 const { width } = useElementSize(cardRef)
 
+const isTokens = computed(() => props.displayMode === 'tokens')
+
 const x = (_: DailyUsageData, i: number) => i
 
-const yTotal = (d: DailyUsageData) => d.totalCost
+const yTotal = (d: DailyUsageData) =>
+  isTokens.value ? d.inputTokens + d.outputTokens : d.totalCost
 
 // Parse "2026-02-18" as local date (not UTC) to avoid off-by-one in western timezones
 function parseLocalDate(dateStr: string): Date {
@@ -41,6 +45,12 @@ const xTicks = (i: number) => {
   return format(parseLocalDate(item.date), 'd MMM')
 }
 
+function formatTokens(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`
+  return String(value)
+}
+
 const template = (d: DailyUsageData) => {
   let label: string
   if (props.granularity === 'hourly') {
@@ -51,6 +61,14 @@ const template = (d: DailyUsageData) => {
   } else {
     label = format(parseLocalDate(d.date), 'MMM d, yyyy')
   }
+  if (isTokens.value)
+    return `<div class="p-2 text-sm">
+      <div class="font-medium">${label}</div>
+      <div style="color: var(--ui-primary)">Input: ${formatTokens(d.inputTokens)}</div>
+      <div style="color: var(--ui-warning)">Output: ${formatTokens(d.outputTokens)}</div>
+      <div class="text-muted mt-1">Total: ${formatTokens(d.inputTokens + d.outputTokens)}</div>
+      <div class="text-muted">${d.calls} calls</div>
+    </div>`
   return `<div class="p-2 text-sm">
     <div class="font-medium">${label}</div>
     <div style="color: var(--ui-primary)">Chat: $${d.chat.toFixed(4)}</div>
@@ -96,27 +114,45 @@ const template = (d: DailyUsageData) => {
           </UFieldGroup>
         </div>
         <div class="flex items-center gap-3 text-xs text-muted">
-          <span class="flex items-center gap-1">
-            <span
-              class="inline-block size-2.5 rounded-full"
-              style="background: var(--ui-primary)"
-            />
-            Chat
-          </span>
-          <span class="flex items-center gap-1">
-            <span
-              class="inline-block size-2.5 rounded-full"
-              style="background: var(--ui-warning)"
-            />
-            Agents
-          </span>
-          <span class="flex items-center gap-1">
-            <span
-              class="inline-block size-2.5 rounded-full"
-              style="background: var(--ui-info)"
-            />
-            Memory
-          </span>
+          <template v-if="isTokens">
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-primary)"
+              />
+              Input
+            </span>
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-warning)"
+              />
+              Output
+            </span>
+          </template>
+          <template v-else>
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-primary)"
+              />
+              Chat
+            </span>
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-warning)"
+              />
+              Agents
+            </span>
+            <span class="flex items-center gap-1">
+              <span
+                class="inline-block size-2.5 rounded-full"
+                style="background: var(--ui-info)"
+              />
+              Memory
+            </span>
+          </template>
         </div>
       </div>
     </template>

package/app/components/usage/UsageCostChart.server.vue

@@ -3,6 +3,7 @@ defineProps<{
   data?: unknown[]
   title?: string
   granularity?: string
+  displayMode?: string
 }>()
 </script>
 

package/app/components/usage/UsageSourceDonut.client.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VisSingleContainer, VisDonut } from '@unovis/vue'
-import type { TokenUsageSource } from '~~/shared/types'
+import type { TokenUsageSource, UsageDisplayMode } from '~~/shared/types'
 
 interface SourceData {
   source: TokenUsageSource
@@ -12,6 +12,7 @@ interface SourceData {
 const props = defineProps<{
   data: SourceData[]
   title?: string
+  displayMode?: UsageDisplayMode
 }>()
 
 const sourceLabels: Record<TokenUsageSource, string> = {
@@ -26,10 +27,19 @@ const sourceColors: Record<TokenUsageSource, string> = {
   memory_extraction: 'var(--ui-info)'
 }
 
-const value = (d: SourceData) => d.cost
+const isTokens = computed(() => props.displayMode === 'tokens')
+const value = (d: SourceData) => isTokens.value ? d.tokens : d.cost
 const color = (d: SourceData) => sourceColors[d.source] || 'var(--ui-neutral)'
 
-const totalCost = computed(() => props.data.reduce((sum, d) => sum + d.cost, 0))
+const total = computed(() =>
+  props.data.reduce((sum, d) => sum + (isTokens.value ? d.tokens : d.cost), 0)
+)
+
+function formatTokens(v: number): string {
+  if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+  if (v >= 1_000) return `${(v / 1_000).toFixed(1)}K`
+  return String(v)
+}
 </script>
 
 <template>
@@ -81,9 +91,11 @@ const totalCost = computed(() => props.data.reduce((sum, d) => sum + d.cost, 0))
             <span class="text-sm font-medium">{{ sourceLabels[item.source] }}</span>
           </div>
           <div class="text-right">
-            <span class="text-sm font-semibold">${{ item.cost.toFixed(2) }}</span>
+            <span class="text-sm font-semibold">
+              {{ isTokens ? formatTokens(item.tokens) : `$${item.cost.toFixed(2)}` }}
+            </span>
             <span class="text-xs text-muted ml-2">
-              {{ totalCost > 0 ? Math.round((item.cost / totalCost) * 100) : 0 }}%
+              {{ total > 0 ? Math.round(((isTokens ? item.tokens : item.cost) / total) * 100) : 0 }}%
             </span>
           </div>
         </div>

package/app/components/usage/UsageSourceDonut.server.vue

@@ -2,6 +2,7 @@
 defineProps<{
   data?: unknown[]
   title?: string
+  displayMode?: string
 }>()
 </script>
 

package/app/components/usage/UsageTopConsumers.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { TokenUsageSource } from '~~/shared/types'
+import type { TokenUsageSource, UsageDisplayMode } from '~~/shared/types'
 
 interface Consumer {
   name: string
   source: TokenUsageSource
   cost: number
   calls: number
+  tokens: number
 }
 
-defineProps<{
+const props = defineProps<{
   data: Consumer[]
   title?: string
+  displayMode?: UsageDisplayMode
 }>()
 
 const sourceLabels: Record<TokenUsageSource, string> = {
@@ -25,10 +27,18 @@ const sourceColors = {
   memory_extraction: 'info'
 } as const
 
+const isTokens = computed(() => props.displayMode === 'tokens')
+
 function formatCurrency(value: number): string {
   if (value < 0.01 && value > 0) return '<$0.01'
   return `$${value.toFixed(4)}`
 }
+
+function formatTokens(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`
+  return String(value)
+}
 </script>
 
 <template>
@@ -77,7 +87,7 @@ function formatCurrency(value: number): string {
 
         <div class="text-right shrink-0 ml-4">
           <p class="text-sm font-semibold">
-            {{ formatCurrency(item.cost) }}
+            {{ isTokens ? formatTokens(item.tokens) : formatCurrency(item.cost) }}
           </p>
           <p class="text-xs text-muted">
             {{ item.calls }} {{ item.calls === 1 ? 'call' : 'calls' }}

package/app/composables/usePreferences.ts

@@ -1,4 +1,4 @@
-import type { TaskStatus } from '~~/shared/types'
+import type { TaskStatus, UsageDisplayMode } from '~~/shared/types'
 
 interface Preferences {
   // Editor preferences
@@ -24,6 +24,7 @@ interface Preferences {
 
   // Usage stats
   usageStatsPeriod: '24h' | '7d' | '30d'
+  usageDisplayMode: UsageDisplayMode
 
   // Onboarding
   onboardingDismissed: boolean
@@ -45,6 +46,7 @@ const defaults: Preferences = {
   taskProjectFilter: null,
   agentStatsPeriod: '7d',
   usageStatsPeriod: '7d',
+  usageDisplayMode: 'tokens',
   onboardingDismissed: false
 }
 
@@ -123,6 +125,11 @@ export function usePreferences() {
     set: v => set('usageStatsPeriod', v)
   })
 
+  const usageDisplayMode = computed({
+    get: () => get('usageDisplayMode'),
+    set: v => set('usageDisplayMode', v)
+  })
+
   const onboardingDismissed = computed({
     get: () => get('onboardingDismissed'),
     set: v => set('onboardingDismissed', v)
@@ -146,6 +153,7 @@ export function usePreferences() {
     taskProjectFilter,
     agentStatsPeriod,
     usageStatsPeriod,
+    usageDisplayMode,
     onboardingDismissed
   }
 }

package/app/layouts/auth.vue

@@ -4,16 +4,6 @@
 <template>
   <div class="min-h-screen flex items-center justify-center bg-default">
     <div class="w-full max-w-md px-4">
-      <div class="flex flex-col items-center gap-6 mb-8">
-        <div class="flex items-center gap-3">
-          <UIcon
-            name="i-lucide-brain"
-            class="size-10 text-primary"
-          />
-          <span class="font-bold text-2xl">Cognova</span>
-        </div>
-      </div>
-
       <slot />
     </div>
   </div>

package/app/pages/login.vue

@@ -49,12 +49,22 @@ async function handleSubmit(event: { data: { email: string, password: string } }
 </script>
 
 <template>
-  <UAuthForm
-    title="Sign In"
-    description="Enter your credentials to access your account"
-    icon="i-lucide-brain"
-    :fields="fields"
-    :submit="{ label: 'Sign In', loading }"
-    @submit="handleSubmit"
-  />
+  <div>
+    <div class="flex flex-col items-center gap-6 mb-8">
+      <div class="flex items-center gap-3">
+        <UIcon
+          name="i-lucide-brain"
+          class="size-10 text-primary"
+        />
+        <span class="font-bold text-2xl">Cognova</span>
+      </div>
+    </div>
+    <UAuthForm
+      title="Sign In"
+      description="Enter your credentials to access your account"
+      :fields="fields"
+      :submit="{ label: 'Sign In', loading }"
+      @submit="handleSubmit"
+    />
+  </div>
 </template>

package/app/pages/settings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NotificationPreferences, NotificationResource, NotificationAction } from '~~/shared/types'
+import type { NotificationPreferences, NotificationResource, NotificationAction, Bridge, BridgePlatform } from '~~/shared/types'
 import { defaultNotificationPreferences } from '~~/shared/utils/notification-defaults'
 
 interface Secret {
@@ -81,6 +81,7 @@ async function fetchSecrets() {
 const tabs = [
   { label: 'Account', icon: 'i-lucide-user', value: 'account', slot: 'account' },
   { label: 'Secrets', icon: 'i-lucide-key', value: 'secrets', slot: 'secrets' },
+  { label: 'Integrations', icon: 'i-lucide-plug', value: 'integrations', slot: 'integrations' },
   { label: 'App', icon: 'i-lucide-settings', value: 'app', slot: 'app' }
 ]
 
@@ -209,7 +210,8 @@ const resourceConfig: { key: NotificationResource, label: string, icon: string,
   { key: 'reminder', label: 'Reminders', icon: 'i-lucide-bell', subtypes: ['create'] },
   { key: 'secret', label: 'Secrets', icon: 'i-lucide-key-round', subtypes: ['create', 'edit', 'delete'] },
   { key: 'hook', label: 'Hooks', icon: 'i-lucide-webhook', subtypes: ['create'] },
-  { key: 'conversation', label: 'Conversations', icon: 'i-lucide-message-square', subtypes: ['delete'] }
+  { key: 'conversation', label: 'Conversations', icon: 'i-lucide-message-square', subtypes: ['delete'] },
+  { key: 'bridge', label: 'Bridges', icon: 'i-lucide-plug', subtypes: ['create', 'edit', 'delete', 'complete', 'fail'] }
 ]
 
 async function loadNotificationPrefs() {
@@ -257,10 +259,107 @@ function setSubtypeEnabled(key: NotificationResource, subtype: NotificationActio
   }
 }
 
-// Load secrets + notification prefs when component mounts
+// === Integrations / Bridges ===
+const bridgesData = ref<Bridge[]>([])
+const bridgesLoading = ref(false)
+const bridgeModal = ref(false)
+const bridgeSaving = ref(false)
+const bridgeDeleteConfirm = ref(false)
+const bridgeToDelete = ref<Bridge | null>(null)
+
+const bridgeForm = reactive({
+  platform: 'telegram' as BridgePlatform,
+  name: ''
+})
+
+const platformOptions: { value: BridgePlatform, label: string, icon: string }[] = [
+  { value: 'telegram', label: 'Telegram', icon: 'i-lucide-send' },
+  { value: 'discord', label: 'Discord', icon: 'i-lucide-message-circle' },
+  { value: 'imessage', label: 'iMessage', icon: 'i-lucide-smartphone' },
+  { value: 'google', label: 'Google Suite', icon: 'i-lucide-mail' },
+  { value: 'email', label: 'Email (IMAP)', icon: 'i-lucide-at-sign' }
+]
+
+const healthColors: Record<string, string> = {
+  connected: 'text-success',
+  disconnected: 'text-dimmed',
+  error: 'text-error',
+  unconfigured: 'text-dimmed'
+}
+
+async function fetchBridges() {
+  bridgesLoading.value = true
+  try {
+    const { data } = await $fetch<{ data: Bridge[] }>('/api/bridges')
+    bridgesData.value = data
+  } catch {
+    toast.add({ title: 'Failed to load integrations', color: 'error' })
+  }
+  bridgesLoading.value = false
+}
+
+function openCreateBridge() {
+  bridgeForm.platform = 'telegram'
+  bridgeForm.name = ''
+  bridgeModal.value = true
+}
+
+async function handleBridgeCreate() {
+  if (!bridgeForm.name) {
+    toast.add({ title: 'Name is required', color: 'error' })
+    return
+  }
+  bridgeSaving.value = true
+  try {
+    await $fetch('/api/bridges', {
+      method: 'POST',
+      body: { platform: bridgeForm.platform, name: bridgeForm.name }
+    })
+    toast.add({ title: 'Integration created', color: 'success' })
+    bridgeModal.value = false
+    await fetchBridges()
+  } catch (err: unknown) {
+    const error = err as { data?: { message?: string } }
+    toast.add({ title: 'Failed to create integration', description: error.data?.message, color: 'error' })
+  }
+  bridgeSaving.value = false
+}
+
+async function toggleBridge(bridge: Bridge) {
+  try {
+    await $fetch(`/api/bridges/${bridge.id}`, {
+      method: 'PUT',
+      body: { enabled: !bridge.enabled }
+    })
+    await fetchBridges()
+  } catch {
+    toast.add({ title: 'Failed to update integration', color: 'error' })
+  }
+}
+
+function confirmDeleteBridge(bridge: Bridge) {
+  bridgeToDelete.value = bridge
+  bridgeDeleteConfirm.value = true
+}
+
+async function handleDeleteBridge() {
+  if (!bridgeToDelete.value) return
+  try {
+    await $fetch(`/api/bridges/${bridgeToDelete.value.id}`, { method: 'DELETE' })
+    toast.add({ title: 'Integration deleted', color: 'success' })
+    bridgeDeleteConfirm.value = false
+    bridgeToDelete.value = null
+    await fetchBridges()
+  } catch {
+    toast.add({ title: 'Failed to delete integration', color: 'error' })
+  }
+}
+
+// Load secrets + notification prefs + bridges when component mounts
 onMounted(() => {
   fetchSecrets()
   loadNotificationPrefs()
+  fetchBridges()
 })
 
 // Form handlers
@@ -564,6 +663,104 @@ async function handlePasswordSubmit() {
             </div>
           </template>
 
+          <!-- Integrations Tab -->
+          <template #integrations>
+            <div class="py-6">
+              <div class="flex items-center justify-between mb-6">
+                <div>
+                  <h3 class="text-lg font-semibold">
+                    Integrations
+                  </h3>
+                  <p class="text-sm text-dimmed">
+                    Connect external platforms to the message bridge.
+                  </p>
+                </div>
+                <UButton
+                  icon="i-lucide-plus"
+                  @click="openCreateBridge"
+                >
+                  Add Integration
+                </UButton>
+              </div>
+
+              <div
+                v-if="bridgesLoading"
+                class="space-y-3"
+              >
+                <USkeleton
+                  v-for="i in 3"
+                  :key="i"
+                  class="h-16 w-full"
+                />
+              </div>
+
+              <div
+                v-else-if="bridgesData.length === 0"
+                class="py-12 text-center"
+              >
+                <UIcon
+                  name="i-lucide-plug"
+                  class="size-12 mx-auto mb-4 text-dimmed"
+                />
+                <p class="text-dimmed">
+                  No integrations configured.
+                </p>
+                <p class="text-sm text-dimmed mt-1">
+                  Connect Telegram, Discord, iMessage, or Google Suite.
+                </p>
+              </div>
+
+              <div
+                v-else
+                class="space-y-3"
+              >
+                <div
+                  v-for="bridge in bridgesData"
+                  :key="bridge.id"
+                  class="border border-default rounded-lg px-4 py-3"
+                >
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <UIcon
+                        :name="platformOptions.find(p => p.value === bridge.platform)?.icon || 'i-lucide-plug'"
+                        class="size-5 text-dimmed"
+                      />
+                      <div>
+                        <span class="font-medium">{{ bridge.name }}</span>
+                        <span class="text-sm text-dimmed ml-2">{{ platformOptions.find(p => p.value === bridge.platform)?.label }}</span>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-3">
+                      <span
+                        class="text-xs capitalize"
+                        :class="healthColors[bridge.healthStatus] || 'text-dimmed'"
+                      >
+                        {{ bridge.healthStatus }}
+                      </span>
+                      <USwitch
+                        :model-value="bridge.enabled"
+                        @update:model-value="toggleBridge(bridge)"
+                      />
+                      <UButton
+                        variant="ghost"
+                        color="error"
+                        icon="i-lucide-trash-2"
+                        size="xs"
+                        @click="confirmDeleteBridge(bridge)"
+                      />
+                    </div>
+                  </div>
+                  <p
+                    v-if="bridge.healthMessage"
+                    class="text-xs text-dimmed mt-1 pl-8"
+                  >
+                    {{ bridge.healthMessage }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </template>
+
           <!-- App Tab -->
           <template #app>
             <div class="max-w-2xl mx-auto py-6">
@@ -756,5 +953,84 @@ async function handlePasswordSubmit() {
         </div>
       </template>
     </UModal>
+
+    <!-- Bridge Create Modal -->
+    <UModal v-model:open="bridgeModal">
+      <template #header>
+        <h3 class="text-lg font-semibold">
+          Add Integration
+        </h3>
+      </template>
+      <template #body>
+        <div class="space-y-4">
+          <UFormField
+            label="Platform"
+            name="platform"
+          >
+            <USelect
+              v-model="bridgeForm.platform"
+              :items="platformOptions"
+              value-key="value"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            label="Name"
+            name="name"
+          >
+            <UInput
+              v-model="bridgeForm.name"
+              placeholder="My Telegram Bot"
+              class="w-full"
+            />
+          </UFormField>
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton
+              variant="ghost"
+              @click="bridgeModal = false"
+            >
+              Cancel
+            </UButton>
+            <UButton
+              :loading="bridgeSaving"
+              @click="handleBridgeCreate"
+            >
+              Create
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Bridge Delete Confirmation Modal -->
+    <UModal v-model:open="bridgeDeleteConfirm">
+      <template #header>
+        <h3 class="text-lg font-semibold">
+          Delete Integration
+        </h3>
+      </template>
+      <template #body>
+        <p class="mb-4">
+          Are you sure you want to delete <strong>{{ bridgeToDelete?.name }}</strong>?
+        </p>
+        <p class="text-sm text-dimmed">
+          This will remove the integration and all associated message history.
+        </p>
+        <div class="flex justify-end gap-2 pt-6">
+          <UButton
+            variant="ghost"
+            @click="bridgeDeleteConfirm = false"
+          >
+            Cancel
+          </UButton>
+          <UButton
+            color="error"
+            @click="handleDeleteBridge"
+          >
+            Delete
+          </UButton>
+        </div>
+      </template>
+    </UModal>
   </UDashboardPanel>
 </template>

package/app/pages/skills/[name].vue

@@ -55,6 +55,10 @@ function handleRenamed(newName: string) {
   router.replace(`/skills/${newName}`)
 }
 
+function handleExport() {
+  window.open(`/api/skills/${skillName.value}/export`, '_blank')
+}
+
 onMounted(() => loadSkill())
 </script>
 
@@ -151,6 +155,14 @@ onMounted(() => loadSkill())
               size="sm"
               @click="renameOpen = true"
             />
+            <UButton
+              v-if="skill"
+              icon="i-lucide-download"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              @click="handleExport"
+            />
           </template>
         </UDashboardNavbar>
       </template>