cognova 0.1.10 → 0.2.2

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/composables/useCopyToClipboard.ts

@@ -0,0 +1,37 @@
+/**
+ * Copy text to clipboard with fallback for non-secure contexts (HTTP).
+ * navigator.clipboard.writeText() requires HTTPS or localhost.
+ * The fallback uses a hidden textarea + execCommand('copy').
+ */
+export function useCopyToClipboard() {
+  async function copy(text: string): Promise<boolean> {
+    // Try modern clipboard API first (works on HTTPS / localhost)
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(text)
+        return true
+      } catch {
+        // Fall through to legacy method
+      }
+    }
+
+    // Legacy fallback for HTTP / non-secure contexts
+    try {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      textarea.style.top = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.focus()
+      textarea.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(textarea)
+      return ok
+    } catch {
+      return false
+    }
+  }
+
+  return { copy }
+}

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',

package/app/pages/chat.vue

@@ -29,8 +29,18 @@ onMounted(() => {
   connect()
   loadConversations()
 
+  // Load specific conversation from URL param (e.g., from dashboard)
+  if (route.query.conversation) {
+    const conversationId = route.query.conversation as string
+    const stop = watch(connectionStatus, (status) => {
+      if (status === 'connected') {
+        stop()
+        loadConversation(conversationId)
+        router.replace({ query: {} })
+      }
+    }, { immediate: true })
+  } else if (route.query.onboarding) {
   // Auto-send greeting when arriving from onboarding modal
-  if (route.query.onboarding) {
     const stop = watch(connectionStatus, (status) => {
       if (status === 'connected') {
         stop()