cognova 0.2.13 → 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/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
   }