cognova 0.2.12 → 0.2.14

package/app/components/files/FileTreeModals.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { TreeItem } from '~/composables/useFileTree'
+
+const showNewFile = defineModel<boolean>('showNewFile', { required: true })
+const showNewFolder = defineModel<boolean>('showNewFolder', { required: true })
+const showRename = defineModel<boolean>('showRename', { required: true })
+const showDelete = defineModel<boolean>('showDelete', { required: true })
+
+const props = defineProps<{
+  contextTarget: TreeItem | null
+}>()
+
+const emit = defineEmits<{
+  createFile: [name: string]
+  createFolder: [name: string]
+  rename: [name: string]
+  delete: []
+}>()
+
+const newItemName = ref('')
+
+// Pre-fill name when rename opens
+watch(showRename, (open) => {
+  if (open && props.contextTarget)
+    newItemName.value = props.contextTarget.label
+})
+
+// Clear name when new file/folder opens
+watch(showNewFile, (open) => {
+  if (open) newItemName.value = ''
+})
+watch(showNewFolder, (open) => {
+  if (open) newItemName.value = ''
+})
+
+function handleCreateFile() {
+  if (!newItemName.value.trim()) return
+  emit('createFile', newItemName.value.trim())
+  showNewFile.value = false
+  newItemName.value = ''
+}
+
+function handleCreateFolder() {
+  if (!newItemName.value.trim()) return
+  emit('createFolder', newItemName.value.trim())
+  showNewFolder.value = false
+  newItemName.value = ''
+}
+
+function handleRename() {
+  if (!newItemName.value.trim()) return
+  emit('rename', newItemName.value.trim())
+  showRename.value = false
+  newItemName.value = ''
+}
+
+function handleDelete() {
+  emit('delete')
+  showDelete.value = false
+}
+</script>
+
+<template>
+  <!-- New File Modal -->
+  <UModal v-model:open="showNewFile">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-file-plus"
+              class="size-5"
+            />
+            <span class="font-semibold">New File</span>
+          </div>
+        </template>
+
+        <UInput
+          v-model="newItemName"
+          placeholder="filename.md"
+          autofocus
+          @keyup.enter="handleCreateFile"
+        />
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showNewFile = false"
+            >
+              Cancel
+            </UButton>
+            <UButton @click="handleCreateFile">
+              Create
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+
+  <!-- New Folder Modal -->
+  <UModal v-model:open="showNewFolder">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-folder-plus"
+              class="size-5"
+            />
+            <span class="font-semibold">New Folder</span>
+          </div>
+        </template>
+
+        <UInput
+          v-model="newItemName"
+          placeholder="folder-name"
+          autofocus
+          @keyup.enter="handleCreateFolder"
+        />
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showNewFolder = false"
+            >
+              Cancel
+            </UButton>
+            <UButton @click="handleCreateFolder">
+              Create
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+
+  <!-- Rename Modal -->
+  <UModal v-model:open="showRename">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-pencil"
+              class="size-5"
+            />
+            <span class="font-semibold">Rename</span>
+          </div>
+        </template>
+
+        <UInput
+          v-model="newItemName"
+          placeholder="new-name"
+          autofocus
+          @keyup.enter="handleRename"
+        />
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showRename = false"
+            >
+              Cancel
+            </UButton>
+            <UButton @click="handleRename">
+              Rename
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+
+  <!-- Delete Confirmation -->
+  <UModal v-model:open="showDelete">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2 text-error">
+            <UIcon
+              name="i-lucide-trash-2"
+              class="size-5"
+            />
+            <span class="font-semibold">Delete</span>
+          </div>
+        </template>
+
+        <p>
+          Are you sure you want to delete
+          <strong>{{ contextTarget?.label }}</strong>?
+        </p>
+        <p
+          v-if="contextTarget?.type === 'directory'"
+          class="text-sm text-dimmed mt-1"
+        >
+          This will delete all files and folders inside.
+        </p>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showDelete = false"
+            >
+              Cancel
+            </UButton>
+            <UButton
+              color="error"
+              @click="handleDelete"
+            >
+              Delete
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>

package/app/components/hooks/HookStatsCards.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import type { HookEventStats } from '~~/shared/types'
+import { formatDuration } from '~~/shared/utils/formatting'
 
 const props = defineProps<{
   stats: HookEventStats | null
   loading?: boolean
 }>()
 
-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`
-}
-
 const displayStats = computed(() => {
   if (!props.stats) return []
   const s = props.stats

package/app/components/hooks/ToolBreakdownTable.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import type { HookToolBreakdown } from '~~/shared/types'
+import { formatDuration } from '~~/shared/utils/formatting'
 
 defineProps<{
   data: HookToolBreakdown[]
   loading?: boolean
 }>()
 
-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 getBlockRateColor(blocked: number, total: number): string {
   const rate = total > 0 ? (blocked / total) * 100 : 0
   if (rate > 50) return 'text-error'

package/app/components/search/DashboardSearch.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+import { formatRelativeTime } from '~~/shared/utils/formatting'
 
 const router = useRouter()
 const toast = useToast()
@@ -88,6 +89,42 @@ const groups = computed<CommandPaletteGroup[]>(() => {
     })
   }
 
+  // Agents group (only show if we have results)
+  if (results.value.agents.length) {
+    g.push({
+      id: 'agents',
+      label: 'Agents',
+      ignoreFilter: true,
+      items: results.value.agents.map(a => ({
+        label: a.name,
+        icon: a.enabled ? 'i-lucide-bot' : 'i-lucide-bot-off',
+        suffix: a.schedule,
+        onSelect: () => {
+          router.push(`/agents/${a.id}`)
+          reset()
+        }
+      }))
+    })
+  }
+
+  // Conversations group (only show if we have results)
+  if (results.value.conversations.length) {
+    g.push({
+      id: 'conversations',
+      label: 'Conversations',
+      ignoreFilter: true,
+      items: results.value.conversations.map(c => ({
+        label: c.title || 'Untitled chat',
+        icon: 'i-lucide-message-square',
+        suffix: formatRelativeTime(c.startedAt),
+        onSelect: () => {
+          router.push({ path: '/chat', query: { conversation: c.id } })
+          reset()
+        }
+      }))
+    })
+  }
+
   // Navigation group (always visible)
   g.push({
     id: 'navigation',
@@ -116,7 +153,7 @@ const groups = computed<CommandPaletteGroup[]>(() => {
     v-model:search-term="searchTerm"
     :groups="groups"
     :loading="loading"
-    placeholder="Search tasks, docs, or type a command..."
+    placeholder="Search tasks, docs, agents, chats..."
     :fuse="{ resultLimit: 10 }"
   />
 </template>

package/app/components/tasks/TaskCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Task } from '~~/shared/types'
+import { formatDateShort } from '~~/shared/utils/formatting'
 
 const props = defineProps<{
   task: Task
@@ -35,12 +36,6 @@ const isOverdue = computed(() => {
   return new Date(props.task.dueDate) < new Date()
 })
 
-function formatDate(date: Date | string | undefined) {
-  if (!date) return null
-  const d = new Date(date)
-  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-}
-
 const menuItems = computed(() => [[
   {
     label: 'Edit',
@@ -146,7 +141,7 @@ const menuItems = computed(() => [[
             name="i-lucide-calendar"
             class="size-3"
           />
-          {{ formatDate(task.dueDate) }}
+          {{ formatDateShort(task.dueDate) }}
         </span>
 
         <!-- Tags -->

package/app/components/tasks/TaskDetail.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Task } from '~~/shared/types'
+import { formatDateLong } from '~~/shared/utils/formatting'
 
 const props = defineProps<{
   task: Task
@@ -27,12 +28,6 @@ const statusConfig = {
 const priority = computed(() => priorityConfig[props.task.priority as 1 | 2 | 3] || priorityConfig[2])
 const status = computed(() => statusConfig[props.task.status])
 const isComplete = computed(() => props.task.status === 'done')
-
-function formatDate(date: Date | string | undefined) {
-  if (!date) return null
-  const d = new Date(date)
-  return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })
-}
 </script>
 
 <template>
@@ -87,7 +82,7 @@ function formatDate(date: Date | string | undefined) {
             name="i-lucide-calendar"
             class="size-4 text-dimmed"
           />
-          <span class="text-dimmed">{{ formatDate(task.dueDate) }}</span>
+          <span class="text-dimmed">{{ formatDateLong(task.dueDate) }}</span>
         </div>
       </div>
 
@@ -120,11 +115,11 @@ function formatDate(date: Date | string | undefined) {
       <!-- Timestamps & Audit -->
       <div class="pt-2 border-t border-default text-xs text-dimmed space-y-1">
         <p>
-          Created: {{ formatDate(task.createdAt) }}
+          Created: {{ formatDateLong(task.createdAt) }}
           <span v-if="task.creator"> by {{ task.creator.name }}</span>
         </p>
         <p v-if="task.completedAt">
-          Completed: {{ formatDate(task.completedAt) }}
+          Completed: {{ formatDateLong(task.completedAt) }}
         </p>
       </div>
     </div>

package/app/composables/useAttachments.ts

@@ -0,0 +1,196 @@
+import type { ChatImageBlock, ChatImageMediaType, ChatDocumentBlock } from '~~/shared/types'
+
+const IMAGE_TYPES: ChatImageMediaType[] = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+const TEXT_MIME_TYPES = new Set([
+  'application/json',
+  'application/javascript',
+  'application/typescript',
+  'application/xml',
+  'application/x-yaml',
+  'application/x-sh',
+  'application/sql',
+  'application/toml',
+  'application/x-httpd-php'
+])
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20MB
+
+export interface PendingImageAttachment {
+  id: string
+  kind: 'image'
+  previewUrl: string
+  base64: string
+  mediaType: ChatImageMediaType
+  name: string
+}
+
+export interface PendingDocumentAttachment {
+  id: string
+  kind: 'document'
+  data: string
+  sourceType: 'base64' | 'text'
+  name: string
+}
+
+export type PendingAttachment = PendingImageAttachment | PendingDocumentAttachment
+
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID)
+    return crypto.randomUUID()
+  return Math.random().toString(36).slice(2)
+}
+
+function readFileAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      const base64 = result.split(',')[1]
+      if (base64) resolve(base64)
+      else reject(new Error('Failed to read file as base64'))
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(file)
+  })
+}
+
+function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}
+
+function isImageType(mime: string): mime is ChatImageMediaType {
+  return IMAGE_TYPES.includes(mime as ChatImageMediaType)
+}
+
+function isTextType(mime: string): boolean {
+  return mime.startsWith('text/') || TEXT_MIME_TYPES.has(mime)
+}
+
+function isPdfType(mime: string): boolean {
+  return mime === 'application/pdf'
+}
+
+export function useAttachments() {
+  const attachments = ref<PendingAttachment[]>([])
+  const toast = useToast()
+
+  async function addFiles(files: FileList | File[]) {
+    for (const file of Array.from(files)) {
+      if (file.size > MAX_FILE_SIZE) {
+        toast.add({ title: 'File too large', description: `${file.name} exceeds 20MB limit`, color: 'error' })
+        continue
+      }
+
+      const mime = file.type || ''
+
+      try {
+        if (isImageType(mime)) {
+          const base64 = await readFileAsBase64(file)
+          const previewUrl = URL.createObjectURL(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'image',
+            previewUrl,
+            base64,
+            mediaType: mime,
+            name: file.name
+          })
+        } else if (isPdfType(mime)) {
+          const base64 = await readFileAsBase64(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'document',
+            data: base64,
+            sourceType: 'base64',
+            name: file.name
+          })
+        } else if (isTextType(mime) || isLikelyTextFile(file.name)) {
+          const text = await readFileAsText(file)
+          attachments.value.push({
+            id: generateId(),
+            kind: 'document',
+            data: text,
+            sourceType: 'text',
+            name: file.name
+          })
+        } else {
+          toast.add({ title: 'Unsupported file type', description: `${file.name} (${mime || 'unknown type'})`, color: 'error' })
+        }
+      } catch {
+        toast.add({ title: 'Failed to read file', description: file.name, color: 'error' })
+      }
+    }
+  }
+
+  function removeAttachment(id: string) {
+    const idx = attachments.value.findIndex(a => a.id === id)
+    if (idx !== -1) {
+      const att = attachments.value[idx]!
+      if (att.kind === 'image') URL.revokeObjectURL(att.previewUrl)
+      attachments.value.splice(idx, 1)
+    }
+  }
+
+  function clearAttachments() {
+    for (const att of attachments.value)
+      if (att.kind === 'image') URL.revokeObjectURL(att.previewUrl)
+    attachments.value = []
+  }
+
+  function toImageBlocks(): ChatImageBlock[] {
+    return attachments.value
+      .filter((a): a is PendingImageAttachment => a.kind === 'image')
+      .map(att => ({
+        type: 'image' as const,
+        source: {
+          type: 'base64' as const,
+          media_type: att.mediaType,
+          data: att.base64
+        }
+      }))
+  }
+
+  function toDocumentBlocks(): ChatDocumentBlock[] {
+    return attachments.value
+      .filter((a): a is PendingDocumentAttachment => a.kind === 'document')
+      .map(att => ({
+        type: 'document' as const,
+        source: att.sourceType === 'base64'
+          ? { type: 'base64' as const, media_type: 'application/pdf' as const, data: att.data }
+          : { type: 'text' as const, media_type: 'text/plain' as const, data: att.data },
+        title: att.name
+      }))
+  }
+
+  return {
+    attachments: readonly(attachments),
+    addFiles,
+    removeAttachment,
+    clearAttachments,
+    toImageBlocks,
+    toDocumentBlocks
+  }
+}
+
+/** Fallback for files with empty MIME but recognizable extensions */
+function isLikelyTextFile(name: string): boolean {
+  const ext = name.split('.').pop()?.toLowerCase()
+  if (!ext) return false
+  const textExtensions = new Set([
+    'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'rb', 'rs', 'go',
+    'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'swift', 'kt', 'scala',
+    'json', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf',
+    'xml', 'html', 'htm', 'css', 'scss', 'sass', 'less',
+    'sh', 'bash', 'zsh', 'fish', 'ps1', 'bat', 'cmd',
+    'sql', 'graphql', 'gql', 'proto',
+    'csv', 'tsv', 'log', 'env', 'gitignore', 'dockerignore',
+    'vue', 'svelte', 'astro', 'prisma', 'tf', 'r', 'lua', 'dart'
+  ])
+  return textExtensions.has(ext)
+}

package/app/composables/useChat.ts

@@ -2,6 +2,8 @@ import type {
   ChatConversation,
   ChatMessage,
   ChatContentBlock,
+  ChatImageBlock,
+  ChatDocumentBlock,
   ChatServerMessage,
   ChatSessionStatus,
   ChatConnectionStatus
@@ -200,21 +202,31 @@ export function useChat() {
     }
   }
 
-  function sendMessage(message: string) {
+  function sendMessage(message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]) {
     if (!ws.value || ws.value.readyState !== WebSocket.OPEN) return
 
+    // Build content blocks for local display
+    const content: ChatContentBlock[] = []
+    if (attachments?.length)
+      for (const img of attachments) content.push(img)
+    if (documents?.length)
+      for (const doc of documents) content.push(doc)
+    if (message) content.push({ type: 'text', text: message })
+
     // Add user message locally
     messages.value.push({
       id: generateId(),
       conversationId: activeConversationId.value || '',
       role: 'user',
-      content: [{ type: 'text', text: message }],
+      content,
       createdAt: new Date()
     })
 
     ws.value.send(JSON.stringify({
       type: 'chat:send',
       message,
+      attachments: attachments?.length ? attachments : undefined,
+      documents: documents?.length ? documents : undefined,
       conversationId: activeConversationId.value
     }))
   }