@skillsgate/tui 0.1.1

package/src/data/use-favorites.ts

@@ -0,0 +1,147 @@
+import { useState, useEffect, useCallback } from "react"
+import { useStore, useDispatch } from "../store/context.js"
+import type { CatalogSkill } from "./api-client.js"
+
+const API_BASE = process.env.SKILLSGATE_SEARCH_API_URL ?? "https://api.skillsgate.ai"
+
+interface FavoriteSkill extends CatalogSkill {
+  favoriteId?: string
+}
+
+interface UseFavoritesResult {
+  favorites: FavoriteSkill[]
+  loading: boolean
+  error: string | null
+  toggle: (skillId: string) => Promise<void>
+  refresh: () => void
+}
+
+/**
+ * Hook that manages the user's favorited skills.
+ * Requires authentication -- returns empty list if not logged in.
+ */
+export function useFavorites(): UseFavoritesResult {
+  const state = useStore()
+  const dispatch = useDispatch()
+  const [favorites, setFavorites] = useState<FavoriteSkill[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [refreshToken, setRefreshToken] = useState(0)
+
+  const token = state.auth?.token
+
+  // Fetch favorites when authenticated
+  useEffect(() => {
+    if (!token) {
+      setFavorites([])
+      setLoading(false)
+      return
+    }
+
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+
+    async function fetchFavorites() {
+      try {
+        const res = await fetch(`${API_BASE}/api/favorites`, {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+
+        if (!res.ok) {
+          throw new Error(`Failed to fetch favorites (HTTP ${res.status})`)
+        }
+
+        const data = (await res.json()) as { favorites: FavoriteSkill[] }
+        if (!cancelled) {
+          const items = data.favorites ?? []
+          setFavorites(items)
+          dispatch({ type: "SET_FAVORITES", favorites: items })
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const msg = err instanceof Error ? err.message : String(err)
+          setError(msg)
+          setFavorites([])
+          dispatch({ type: "SET_FAVORITES", favorites: [] })
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      }
+    }
+
+    fetchFavorites()
+    return () => { cancelled = true }
+  }, [token, refreshToken])
+
+  /**
+   * Toggle a skill's favorite status.
+   * If already favorited, removes it. Otherwise, adds it.
+   */
+  const toggle = useCallback(async (skillId: string) => {
+    if (!token) return
+
+    const isFavorited = favorites.some((f) => f.id === skillId)
+
+    try {
+      if (isFavorited) {
+        // Remove favorite
+        const res = await fetch(`${API_BASE}/api/favorites/${skillId}`, {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        if (!res.ok) {
+          throw new Error(`Failed to remove favorite (HTTP ${res.status})`)
+        }
+
+        // Optimistic update: remove from local list
+        setFavorites((prev) => {
+          const updated = prev.filter((f) => f.id !== skillId)
+          dispatch({ type: "SET_FAVORITES", favorites: updated })
+          return updated
+        })
+      } else {
+        // Add favorite
+        const res = await fetch(`${API_BASE}/api/favorites`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ skillId }),
+        })
+        if (!res.ok) {
+          throw new Error(`Failed to add favorite (HTTP ${res.status})`)
+        }
+
+        // Refresh the full list to get the complete skill data
+        setRefreshToken((t) => t + 1)
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      dispatch({
+        type: "SHOW_NOTIFICATION",
+        notification: { type: "error", message: msg },
+      })
+    }
+  }, [token, favorites, dispatch])
+
+  const refresh = useCallback(() => {
+    setRefreshToken((t) => t + 1)
+  }, [])
+
+  return {
+    favorites,
+    loading,
+    error,
+    toggle,
+    refresh,
+  }
+}

package/src/data/use-installed-skills.ts

@@ -0,0 +1,128 @@
+import { useEffect } from "react"
+import fs from "node:fs/promises"
+import path from "node:path"
+import matter from "gray-matter"
+import { useStore, useDispatch } from "../store/context.js"
+import { agents } from "../../../cli/src/core/agents.js"
+import { readSkillLock } from "../../../cli/src/core/skill-lock.js"
+import { SKILL_MD } from "../../../cli/src/constants.js"
+import type { EnrichedSkill } from "../store/types.js"
+import type { AgentType, SkillLockFile } from "../../../cli/src/types.js"
+
+/**
+ * Scans all detected agent globalSkillsDir paths for SKILL.md files,
+ * parses them with gray-matter, enriches with lock file data, and
+ * populates the store.
+ */
+export function useInstalledSkills() {
+  const dispatch = useDispatch()
+  const { installedLoading } = useStore()
+
+  useEffect(() => {
+    // Only scan when installedLoading is true (initial mount or refresh triggered)
+    if (!installedLoading) return
+
+    let cancelled = false
+
+    async function scan() {
+      dispatch({ type: "SET_INSTALLED_LOADING", loading: true })
+
+      try {
+        const lock = await readSkillLock()
+        // Map: skillName -> EnrichedSkill (deduplicating across agents)
+        const skillMap = new Map<string, EnrichedSkill>()
+
+        // Scan each agent's global skills directory
+        for (const agent of Object.values(agents)) {
+          const skillsDir = agent.globalSkillsDir
+          try {
+            const entries = await fs.readdir(skillsDir, { withFileTypes: true })
+            for (const entry of entries) {
+              // Include both real directories and symlinks (skills are often symlinked)
+              if (!entry.isDirectory() && !entry.isSymbolicLink()) continue
+
+              const skillMdPath = path.join(skillsDir, entry.name, SKILL_MD)
+              try {
+                const raw = await fs.readFile(skillMdPath, "utf-8")
+                const { data: frontmatter } = matter(raw)
+                const skillName = entry.name
+
+                const existing = skillMap.get(skillName)
+                if (existing) {
+                  // Skill already seen from another agent - add this agent
+                  if (!existing.agents.includes(agent.name)) {
+                    existing.agents.push(agent.name)
+                  }
+                } else {
+                  skillMap.set(skillName, {
+                    name: skillName,
+                    description:
+                      (frontmatter.description as string) ??
+                      extractFirstLine(raw),
+                    filePath: skillMdPath,
+                    agents: [agent.name],
+                    metadata: frontmatter as Record<string, unknown>,
+                    lock: lock.skills[skillName],
+                  })
+                }
+              } catch {
+                // SKILL.md not found or unreadable in this directory - skip
+              }
+            }
+          } catch {
+            // Agent skills directory doesn't exist - skip
+          }
+        }
+
+        if (cancelled) return
+
+        const skills = Array.from(skillMap.values()).sort((a, b) =>
+          a.name.localeCompare(b.name)
+        )
+
+        dispatch({ type: "SET_INSTALLED_SKILLS", skills })
+
+        // Update agent skill counts (without removing agents that have 0 skills)
+        const agentCounts = new Map<AgentType, number>()
+        for (const skill of skills) {
+          for (const agentName of skill.agents) {
+            agentCounts.set(agentName, (agentCounts.get(agentName) ?? 0) + 1)
+          }
+        }
+
+        dispatch({ type: "UPDATE_AGENT_COUNTS", counts: Object.fromEntries(agentCounts) })
+      } catch {
+        if (!cancelled) {
+          dispatch({ type: "SET_INSTALLED_SKILLS", skills: [] })
+        }
+      }
+    }
+
+    scan()
+    return () => { cancelled = true }
+  }, [installedLoading])
+}
+
+/** Extracts the first non-empty, non-heading line from markdown content. */
+function extractFirstLine(content: string): string {
+  const lines = content.split("\n")
+  // Skip frontmatter delimiter and heading lines
+  let pastFrontmatter = false
+  let frontmatterCount = 0
+  for (const line of lines) {
+    if (line.trim() === "---") {
+      frontmatterCount++
+      if (frontmatterCount >= 2) {
+        pastFrontmatter = true
+        continue
+      }
+      continue
+    }
+    if (!pastFrontmatter) continue
+    const trimmed = line.trim()
+    if (!trimmed) continue
+    if (trimmed.startsWith("#")) continue
+    return trimmed.slice(0, 120)
+  }
+  return ""
+}

package/src/data/use-search.ts

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef, useCallback } from "react"
+import { fetchCatalog, searchSkills, type CatalogSkill, type SearchMode } from "./api-client.js"
+
+const DEBOUNCE_MS = 300
+const PAGE_SIZE = 20
+
+interface UseSearchResult {
+  results: CatalogSkill[]
+  loading: boolean
+  error: string | null
+  total: number
+  hasMore: boolean
+  loadMore: () => void
+  remainingSearches: number | null
+}
+
+/**
+ * Hook that manages search state with debounce and pagination.
+ * - When query is empty, loads the catalog with pagination
+ * - When query is provided, searches after 300ms debounce
+ * - Supports keyword and semantic search modes
+ */
+export function useSearch(
+  query: string,
+  mode: SearchMode,
+  token?: string | null
+): UseSearchResult {
+  const [results, setResults] = useState<CatalogSkill[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [total, setTotal] = useState(0)
+  const [offset, setOffset] = useState(0)
+  const [remainingSearches, setRemainingSearches] = useState<number | null>(null)
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Reset pagination when query or mode changes
+  useEffect(() => {
+    setResults([])
+    setOffset(0)
+    setError(null)
+  }, [query, mode])
+
+  useEffect(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+
+    const doFetch = async () => {
+      setLoading(true)
+      setError(null)
+
+      try {
+        if (query.trim()) {
+          const data = await searchSkills(query, mode, token)
+          setResults(data.skills)
+          setTotal(data.total)
+          if (data.remainingSearches !== undefined) {
+            setRemainingSearches(data.remainingSearches)
+          }
+        } else {
+          const data = await fetchCatalog(PAGE_SIZE, 0)
+          setResults(data.skills)
+          setTotal(data.total)
+          setOffset(PAGE_SIZE)
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err)
+        if (!msg.includes("abort")) {
+          setError(msg)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (query.trim()) {
+      timerRef.current = setTimeout(doFetch, DEBOUNCE_MS)
+    } else {
+      doFetch()
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+    }
+  }, [query, mode, token])
+
+  const loadMore = useCallback(async () => {
+    if (query.trim() || loading) return
+    if (results.length >= total) return
+
+    setLoading(true)
+    try {
+      const data = await fetchCatalog(PAGE_SIZE, offset)
+      setResults((prev) => [...prev, ...data.skills])
+      setTotal(data.total)
+      setOffset((prev) => prev + PAGE_SIZE)
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setError(msg)
+    } finally {
+      setLoading(false)
+    }
+  }, [query, loading, results.length, total, offset])
+
+  return {
+    results,
+    loading,
+    error,
+    total,
+    hasMore: results.length < total,
+    loadMore,
+    remainingSearches,
+  }
+}