cognova 0.2.0 → 0.2.2

package/app/components/skills/Editor.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { CodeLanguage } from '~~/shared/types'
+
+const props = defineProps<{
+  skillName: string
+  filePath: string
+}>()
+
+const emit = defineEmits<{
+  saved: []
+}>()
+
+const toast = useToast()
+const content = ref('')
+const originalContent = ref('')
+const loading = ref(true)
+const saving = ref(false)
+
+const isDirty = computed(() => content.value !== originalContent.value)
+
+const language = computed<CodeLanguage>(() => {
+  const ext = props.filePath.split('.').pop()?.toLowerCase()
+  switch (ext) {
+    case 'py': return 'python'
+    case 'md': return 'markdown'
+    case 'json': return 'json'
+    case 'ts': return 'typescript'
+    case 'js': return 'javascript'
+    case 'yaml':
+    case 'yml': return 'yaml'
+    case 'sh':
+    case 'bash': return 'bash'
+    default: return 'plaintext'
+  }
+})
+
+async function loadFile() {
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: { content: string } }>(`/api/skills/${props.skillName}/files/read`, {
+      method: 'POST',
+      body: { path: props.filePath }
+    })
+    content.value = res.data.content
+    originalContent.value = res.data.content
+  } catch {
+    toast.add({ title: 'Failed to load file', color: 'error' })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/write`, {
+      method: 'POST',
+      body: { path: props.filePath, content: content.value }
+    })
+    originalContent.value = content.value
+    toast.add({ title: 'File saved', color: 'success' })
+    emit('saved')
+  } catch {
+    toast.add({ title: 'Failed to save file', color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+// Ctrl+S / Cmd+S keyboard shortcut
+function handleKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+    e.preventDefault()
+    if (isDirty.value) save()
+  }
+}
+
+onMounted(() => {
+  loadFile()
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
+watch(() => props.filePath, () => loadFile())
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-default">
+      <div class="flex items-center gap-2 text-sm text-muted">
+        <UIcon
+          name="i-lucide-file-code"
+          class="size-4"
+        />
+        <span>{{ filePath }}</span>
+        <UBadge
+          v-if="isDirty"
+          variant="soft"
+          color="warning"
+          size="xs"
+        >
+          Modified
+        </UBadge>
+      </div>
+      <UButton
+        size="xs"
+        :loading="saving"
+        :disabled="!isDirty"
+        @click="save"
+      >
+        Save
+      </UButton>
+    </div>
+
+    <div
+      v-if="loading"
+      class="flex-1 flex items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-6 animate-spin text-dimmed"
+      />
+    </div>
+
+    <EditorCodeEditor
+      v-else
+      v-model="content"
+      :language="language"
+      class="flex-1"
+    />
+  </div>
+</template>

package/app/components/skills/FileTree.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import type { TreeItem } from '~/composables/useFileTree'
+import type { SkillFile } from '~~/shared/types'
+
+const props = defineProps<{
+  skillName: string
+  files: SkillFile[]
+  selectedPath?: string
+}>()
+
+const emit = defineEmits<{
+  select: [path: string]
+  refresh: []
+}>()
+
+const toast = useToast()
+
+// Convert SkillFile[] to TreeItem[] for UTree
+function toTreeItems(files: SkillFile[], parentPath = ''): TreeItem[] {
+  return files.map((f) => {
+    const fullPath = parentPath ? `${parentPath}/${f.path}` : f.path
+    const item: TreeItem = {
+      id: fullPath,
+      label: f.name,
+      path: fullPath,
+      type: f.type,
+      defaultExpanded: true
+    }
+    if (f.type === 'directory') {
+      item.children = f.children ? toTreeItems(f.children, fullPath) : []
+    } else {
+      if (f.name.endsWith('.py')) item.icon = 'i-lucide-file-code'
+      else if (f.name.endsWith('.md')) item.icon = 'i-lucide-file-text'
+      else if (f.name.endsWith('.json')) item.icon = 'i-lucide-file-json'
+      else item.icon = 'i-lucide-file'
+    }
+    return item
+  })
+}
+
+const treeItems = computed(() => toTreeItems(props.files))
+
+const contextMenuTarget = ref<TreeItem | null>(null)
+const showNewFileModal = ref(false)
+const showNewFolderModal = ref(false)
+const showDeleteConfirm = ref(false)
+const newItemName = ref('')
+
+const contextMenuItems = computed(() => [
+  [{
+    label: 'New File',
+    icon: 'i-lucide-file-plus',
+    onSelect: () => {
+      newItemName.value = ''
+      showNewFileModal.value = true
+    }
+  }, {
+    label: 'New Folder',
+    icon: 'i-lucide-folder-plus',
+    onSelect: () => {
+      newItemName.value = ''
+      showNewFolderModal.value = true
+    }
+  }],
+  [{
+    label: 'Delete',
+    icon: 'i-lucide-trash-2',
+    color: 'error' as const,
+    onSelect: () => {
+      if (contextMenuTarget.value && contextMenuTarget.value.label !== 'SKILL.md')
+        showDeleteConfirm.value = true
+    }
+  }]
+])
+
+function handleSelect(_e: unknown, item: TreeItem) {
+  if (item.type === 'file') {
+    emit('select', item.path)
+  }
+}
+
+async function handleCreateFile() {
+  if (!newItemName.value.trim()) return
+
+  let filename = newItemName.value.trim()
+  if (!filename.includes('.')) filename += '.py'
+
+  const parentPath = contextMenuTarget.value?.type === 'directory'
+    ? contextMenuTarget.value.path
+    : ''
+
+  const filePath = parentPath ? `${parentPath}/${filename}` : filename
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/create`, {
+      method: 'POST',
+      body: { path: filePath, type: 'file' }
+    })
+    emit('refresh')
+    emit('select', filePath)
+    toast.add({ title: `Created ${filename}`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to create file', color: 'error' })
+  }
+
+  showNewFileModal.value = false
+  newItemName.value = ''
+}
+
+async function handleCreateFolder() {
+  if (!newItemName.value.trim()) return
+
+  const folderName = newItemName.value.trim()
+  const parentPath = contextMenuTarget.value?.type === 'directory'
+    ? contextMenuTarget.value.path
+    : ''
+
+  const folderPath = parentPath ? `${parentPath}/${folderName}` : folderName
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/create`, {
+      method: 'POST',
+      body: { path: folderPath, type: 'directory' }
+    })
+    emit('refresh')
+    toast.add({ title: `Created ${folderName}/`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to create folder', color: 'error' })
+  }
+
+  showNewFolderModal.value = false
+  newItemName.value = ''
+}
+
+async function handleDelete() {
+  if (!contextMenuTarget.value) return
+
+  try {
+    await $fetch(`/api/skills/${props.skillName}/files/delete`, {
+      method: 'POST',
+      body: { path: contextMenuTarget.value.path }
+    })
+    emit('refresh')
+    toast.add({ title: `Deleted ${contextMenuTarget.value.label}`, color: 'success' })
+  } catch {
+    toast.add({ title: 'Failed to delete', color: 'error' })
+  }
+
+  showDeleteConfirm.value = false
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <UContextMenu
+      :items="contextMenuItems"
+    >
+      <div
+        class="flex-1 h-full overflow-auto p-2"
+        @contextmenu.self="contextMenuTarget = null"
+      >
+        <div
+          v-if="files.length === 0"
+          class="h-full min-h-32 flex flex-col items-center justify-center text-dimmed text-sm"
+        >
+          <UIcon
+            name="i-lucide-folder-open"
+            class="size-8 mx-auto mb-2 opacity-50"
+          />
+          <p>No files found</p>
+          <p class="text-xs mt-1">
+            Right-click to create a file
+          </p>
+        </div>
+
+        <UTree
+          v-else
+          :items="treeItems"
+          :get-key="(item: TreeItem) => item.id"
+          color="primary"
+          expanded-icon="i-lucide-folder-open"
+          collapsed-icon="i-lucide-folder"
+          @select="handleSelect"
+        >
+          <template #item="{ item, expanded }">
+            <div
+              class="flex items-center gap-2 w-full"
+              @contextmenu="contextMenuTarget = item"
+            >
+              <UIcon
+                v-if="item.children?.length"
+                :name="expanded ? 'i-lucide-folder-open' : 'i-lucide-folder'"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <UIcon
+                v-else-if="item.icon"
+                :name="item.icon"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <UIcon
+                v-else
+                name="i-lucide-file"
+                class="size-4 shrink-0 text-dimmed"
+              />
+              <span class="truncate">{{ item.label }}</span>
+            </div>
+          </template>
+        </UTree>
+      </div>
+    </UContextMenu>
+
+    <!-- New File Modal -->
+    <UModal v-model:open="showNewFileModal">
+      <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.py"
+            autofocus
+            @keyup.enter="handleCreateFile"
+          />
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="ghost"
+                @click="showNewFileModal = false"
+              >
+                Cancel
+              </UButton>
+              <UButton @click="handleCreateFile">
+                Create
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- New Folder Modal -->
+    <UModal v-model:open="showNewFolderModal">
+      <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="showNewFolderModal = false"
+              >
+                Cancel
+              </UButton>
+              <UButton @click="handleCreateFolder">
+                Create
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- Delete Confirmation -->
+    <UModal v-model:open="showDeleteConfirm">
+      <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>{{ contextMenuTarget?.label }}</strong>?
+          </p>
+          <p
+            v-if="contextMenuTarget?.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="showDeleteConfirm = false"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                color="error"
+                @click="handleDelete"
+              >
+                Delete
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/skills/LibraryCard.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { SkillCatalogItem } from '~~/shared/types'
+
+defineProps<{
+  skill: SkillCatalogItem
+}>()
+
+const emit = defineEmits<{
+  install: [name: string]
+  update: [name: string]
+}>()
+</script>
+
+<template>
+  <div class="p-4 rounded-lg border border-default bg-elevated/50 hover:bg-elevated transition-colors">
+    <div class="flex items-start justify-between gap-2 mb-2">
+      <div class="flex items-center gap-2 min-w-0">
+        <UIcon
+          name="i-lucide-puzzle"
+          class="size-4 shrink-0 text-primary"
+        />
+        <span class="font-medium truncate">{{ skill.name }}</span>
+      </div>
+      <div class="flex items-center gap-1.5 shrink-0">
+        <UBadge
+          v-if="skill.installed && !skill.hasUpdate"
+          variant="subtle"
+          color="success"
+          size="xs"
+        >
+          Installed
+        </UBadge>
+        <UBadge
+          v-if="skill.hasUpdate"
+          variant="subtle"
+          color="warning"
+          size="xs"
+        >
+          Update available
+        </UBadge>
+        <UBadge
+          variant="subtle"
+          color="neutral"
+          size="xs"
+        >
+          v{{ skill.version }}
+        </UBadge>
+      </div>
+    </div>
+
+    <p class="text-sm text-muted line-clamp-2 mb-3">
+      {{ skill.description }}
+    </p>
+
+    <div
+      v-if="skill.tags.length > 0"
+      class="flex flex-wrap gap-1 mb-3"
+    >
+      <UBadge
+        v-for="tag in skill.tags"
+        :key="tag"
+        variant="subtle"
+        :color="tag === 'official' ? 'primary' : 'neutral'"
+        size="xs"
+      >
+        {{ tag }}
+      </UBadge>
+    </div>
+
+    <div
+      v-if="skill.requiresSecrets.length > 0"
+      class="flex items-center gap-1 mb-3 text-xs text-dimmed"
+    >
+      <UIcon
+        name="i-lucide-key-round"
+        class="size-3 shrink-0"
+      />
+      <span>Requires: {{ skill.requiresSecrets.join(', ') }}</span>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span
+        v-if="skill.author"
+        class="text-xs text-dimmed"
+      >
+        by {{ skill.author }}
+      </span>
+      <span v-else />
+
+      <div class="flex items-center gap-1.5">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-external-link"
+          :to="`https://github.com/Patrity/cognova-skills/tree/main/${skill.name}`"
+          target="_blank"
+        >
+          View
+        </UButton>
+        <UButton
+          v-if="!skill.installed"
+          size="xs"
+          icon="i-lucide-download"
+          @click="emit('install', skill.name)"
+        >
+          Install
+        </UButton>
+        <UButton
+          v-else-if="skill.hasUpdate"
+          size="xs"
+          color="warning"
+          variant="soft"
+          icon="i-lucide-refresh-cw"
+          @click="emit('update', skill.name)"
+        >
+          Update
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/skills/RenameModal.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+  currentName: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'renamed': [newName: string]
+}>()
+
+const toast = useToast()
+const newName = ref(props.currentName)
+const loading = ref(false)
+
+watch(() => props.currentName, (val) => {
+  newName.value = val
+})
+
+function close() {
+  emit('update:open', false)
+}
+
+async function handleRename() {
+  if (!newName.value.trim() || newName.value.trim() === props.currentName) return
+
+  loading.value = true
+  try {
+    await $fetch(`/api/skills/${props.currentName}/rename`, {
+      method: 'POST',
+      body: { newName: newName.value.trim() }
+    })
+    toast.add({ title: `Skill renamed to '${newName.value.trim()}'`, color: 'success' })
+    emit('renamed', newName.value.trim())
+    close()
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Failed to rename skill'
+    toast.add({ title: message, color: 'error' })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #header>
+      <span class="font-semibold">Rename Skill</span>
+    </template>
+
+    <template #body>
+      <UFormField label="New Name">
+        <UInput
+          v-model="newName"
+          placeholder="my-skill"
+          :disabled="loading"
+        />
+      </UFormField>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          variant="ghost"
+          color="neutral"
+          :disabled="loading"
+          @click="close"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          :loading="loading"
+          :disabled="!newName.trim() || newName.trim() === currentName"
+          @click="handleRename"
+        >
+          Rename
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/layouts/dashboard.vue

@@ -49,6 +49,13 @@ const links = [[{
   onSelect: () => {
     open.value = false
   }
+}, {
+  label: 'Skills',
+  icon: 'i-lucide-puzzle',
+  to: '/skills',
+  onSelect: () => {
+    open.value = false
+  }
 }, {
   label: 'Memories',
   icon: 'i-lucide-brain',