@skillsgate/tui 0.1.1

package/src/components/search-input.tsx

@@ -0,0 +1,48 @@
+import { useStore, useDispatch } from "../store/context.js"
+import { colors } from "../utils/colors.js"
+
+interface SearchInputProps {
+  /** Override focus (if not provided, uses store's focusedPane) */
+  focused?: boolean
+  /** Action type to dispatch on input change */
+  filterAction?: "SET_INSTALLED_FILTER" | "SET_SEARCH_QUERY"
+  /** Placeholder text */
+  placeholder?: string
+}
+
+export function SearchInput({
+  focused,
+  filterAction = "SET_INSTALLED_FILTER",
+  placeholder = "Type to filter...",
+}: SearchInputProps) {
+  const state = useStore()
+  const dispatch = useDispatch()
+
+  const isFocused = focused ?? (state.focusedPane === "search")
+
+  return (
+    <box
+      style={{
+        height: 3,
+        width: "100%",
+        border: true,
+        borderColor: isFocused ? colors.primary : colors.border,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+      title={isFocused ? "Filter skills" : "/ to search"}
+    >
+      {isFocused ? (
+        <input
+          placeholder={placeholder}
+          focused={!state.showHelp}
+          onInput={(value: string) => {
+            dispatch({ type: filterAction, [filterAction === "SET_INSTALLED_FILTER" ? "filter" : "query"]: value } as any)
+          }}
+        />
+      ) : (
+        <text fg={colors.textDim}>/ to search, Tab to cycle panes</text>
+      )}
+    </box>
+  )
+}

package/src/components/skill-list-item.tsx

@@ -0,0 +1,45 @@
+import type { EnrichedSkill } from "../store/types.js"
+import { colors, agentBadges as badgeMap } from "../utils/colors.js"
+
+interface SkillListItemProps {
+  skill: EnrichedSkill
+  selected?: boolean
+}
+
+/**
+ * Compact skill list item for the middle panel.
+ * Shows just the name and small agent dot indicators.
+ */
+export function SkillListItem({ skill, selected }: SkillListItemProps) {
+  // Build compact agent dots (single-char badges)
+  const agentDots = skill.agents.slice(0, 3).map((a) => {
+    const badge = badgeMap[a]
+    return { char: badge?.label?.[0] ?? "?", color: badge?.color ?? colors.agent }
+  })
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexDirection: "row",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: selected ? colors.bgAlt : "transparent",
+      }}
+    >
+      {/* Skill name */}
+      <text fg={selected ? colors.primary : colors.text} style={{ flexGrow: 1 }}>
+        {skill.name}
+      </text>
+
+      {/* Small agent dots on the right */}
+      <box style={{ flexDirection: "row" }}>
+        {agentDots.map((dot, i) => (
+          <text key={i} fg={dot.color}>
+            {dot.char}
+          </text>
+        ))}
+      </box>
+    </box>
+  )
+}

package/src/components/skill-list.tsx

@@ -0,0 +1,245 @@
+import { useState, useEffect } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useStore, useDispatch } from "../store/context.js"
+import { useSkillActions } from "../data/use-skill-actions.js"
+import { SkillListItem } from "./skill-list-item.js"
+import { ConfirmDialog } from "./confirm-dialog.js"
+import { colors, agentBadges as badgeMap } from "../utils/colors.js"
+import { agents } from "../../../cli/src/core/agents.js"
+import type { EnrichedSkill } from "../store/types.js"
+
+interface SkillListProps {
+  skills: EnrichedSkill[]
+}
+
+type PendingAction = {
+  type: "remove" | "update"
+  skill: EnrichedSkill
+} | null
+
+type RemoveMode = null | "select-agent"
+
+/**
+ * Returns the display name for an agent key.
+ */
+function agentDisplayName(agentName: string): string {
+  return agents[agentName]?.displayName ?? agentName
+}
+
+export function SkillList({ skills }: SkillListProps) {
+  const dispatch = useDispatch()
+  const state = useStore()
+  const { removeSkill, removeSkillFromOneAgent, updateSkill } = useSkillActions()
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [pendingAction, setPendingAction] = useState<PendingAction>(null)
+  const [removeMode, setRemoveMode] = useState<RemoveMode>(null)
+  const [removeTarget, setRemoveTarget] = useState<EnrichedSkill | null>(null)
+
+  // Preview the selected skill in the right panel whenever selection changes
+  useEffect(() => {
+    if (skills[selectedIndex]) {
+      dispatch({ type: "PREVIEW_SKILL", skill: skills[selectedIndex] })
+    }
+  }, [selectedIndex, skills])
+
+  // Only handle navigation when on a list-bearing view and list is focused
+  useKeyboard((key) => {
+    if (state.showHelp) return
+    if (state.activeView !== "home") return
+    if (state.focusedPane !== "list") return
+
+    // Handle agent selection menu for per-agent delete
+    if (removeMode === "select-agent" && removeTarget) {
+      if (key.name === "n" || key.name === "escape") {
+        setRemoveMode(null)
+        setRemoveTarget(null)
+        return
+      }
+      if (key.name === "a") {
+        // Remove from all agents
+        setRemoveMode(null)
+        setRemoveTarget(null)
+        setPendingAction({ type: "remove", skill: removeTarget })
+        return
+      }
+      // Number keys 1-9 to select a specific agent
+      const num = parseInt(key.raw ?? "", 10)
+      if (num >= 1 && num <= removeTarget.agents.length) {
+        const agentName = removeTarget.agents[num - 1]
+        setRemoveMode(null)
+        setRemoveTarget(null)
+        removeSkillFromOneAgent(removeTarget, agentName)
+        return
+      }
+      return
+    }
+
+    if (pendingAction) return // Block navigation during confirm dialog
+
+    // j/k or arrow keys for navigation
+    if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
+      setSelectedIndex((i) => Math.max(0, i - 1))
+    }
+    if (key.name === "down" || (key.name === "j" && !key.ctrl)) {
+      setSelectedIndex((i) => Math.min(skills.length - 1, i + 1))
+    }
+
+    // g = jump to first, G (shift+g) = jump to last
+    if (key.name === "g" && !key.shift) {
+      setSelectedIndex(0)
+    }
+    if (key.name === "g" && key.shift) {
+      setSelectedIndex(Math.max(0, skills.length - 1))
+    }
+
+    // v to open full skill detail view (navigates away)
+    if (key.name === "v" && skills[selectedIndex]) {
+      dispatch({ type: "SELECT_SKILL", skill: skills[selectedIndex] })
+    }
+
+    // d to remove selected skill (with per-agent support)
+    if (key.name === "d" && skills[selectedIndex]) {
+      const skill = skills[selectedIndex]
+      if (skill.agents.length > 1) {
+        // Multiple agents: show selection menu
+        setRemoveTarget(skill)
+        setRemoveMode("select-agent")
+      } else {
+        // Single agent or catalog: simple confirm
+        setPendingAction({ type: "remove", skill })
+      }
+    }
+
+    // u to update selected skill
+    if (key.name === "u" && skills[selectedIndex]) {
+      setPendingAction({ type: "update", skill: skills[selectedIndex] })
+    }
+  })
+
+  // Handle confirm/cancel for pending actions
+  const handleConfirm = async () => {
+    if (!pendingAction) return
+    const { type, skill } = pendingAction
+    setPendingAction(null)
+
+    if (type === "remove") {
+      await removeSkill(skill)
+    } else if (type === "update") {
+      await updateSkill(skill)
+    }
+  }
+
+  const handleCancel = () => {
+    setPendingAction(null)
+  }
+
+  // Agent selection menu for per-agent delete
+  if (removeMode === "select-agent" && removeTarget) {
+    return (
+      <box
+        style={{
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: colors.bg,
+        }}
+      >
+        <box
+          style={{
+            width: 60,
+            border: true,
+            borderColor: colors.primary,
+            backgroundColor: "#1a1a2e",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            flexDirection: "column",
+          }}
+          title="Remove"
+        >
+          <text fg={colors.text}>
+            Remove "<span fg={colors.primary}>{removeTarget.name}</span>" from:
+          </text>
+          <text>{" "}</text>
+          {removeTarget.agents.map((agentName, i) => {
+            const badge = badgeMap[agentName]
+            return (
+              <text key={agentName} fg={colors.text}>
+                {"  "}<span fg={colors.primary}>{i + 1}</span>{"  "}<span fg={badge?.color ?? colors.agent}>{agentDisplayName(agentName)}</span>
+              </text>
+            )
+          })}
+          <text>{" "}</text>
+          <text fg={colors.text}>
+            {"  "}<span fg={colors.error}>a</span>{"  "}All agents (removes completely)
+          </text>
+          <text fg={colors.text}>
+            {"  "}<span fg={colors.textDim}>n</span>{"  "}Cancel
+          </text>
+        </box>
+      </box>
+    )
+  }
+
+  // Show confirm dialog if there's a pending action
+  if (pendingAction) {
+    const actionLabel = pendingAction.type === "remove" ? "Remove" : "Update"
+    return (
+      <ConfirmDialog
+        message={`${actionLabel} "${pendingAction.skill.name}"?`}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    )
+  }
+
+  if (skills.length === 0) {
+    return (
+      <box style={{ padding: 1 }}>
+        <text fg={colors.textDim}>
+          {state.installedLoading
+            ? "Scanning for installed skills..."
+            : "No skills found. Install skills with: skillsgate install <source>"}
+        </text>
+      </box>
+    )
+  }
+
+  const isFocused = state.activeView === "home" && state.focusedPane === "list" && !state.showHelp
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      {/* List header */}
+      <box style={{ height: 1, paddingLeft: 1, backgroundColor: colors.bgAlt }}>
+        <text fg={colors.textDim}>SKILLS ({skills.length})</text>
+      </box>
+
+      <scrollbox
+        focused={isFocused}
+        style={{
+          width: "100%",
+          flexGrow: 1,
+          rootOptions: { backgroundColor: colors.bg },
+          viewportOptions: { backgroundColor: colors.bg },
+          contentOptions: { backgroundColor: colors.bg },
+          scrollbarOptions: {
+            trackOptions: {
+              foregroundColor: colors.primary,
+              backgroundColor: colors.border,
+            },
+          },
+        }}
+      >
+        {skills.map((skill, i) => (
+          <SkillListItem
+            key={skill.name}
+            skill={skill}
+            selected={i === selectedIndex}
+          />
+        ))}
+      </scrollbox>
+    </box>
+  )
+}

package/src/components/status-bar.tsx

@@ -0,0 +1,34 @@
+import { useStore } from "../store/context.js"
+import { colors } from "../utils/colors.js"
+
+export function StatusBar() {
+  const state = useStore()
+
+  const skillCount = state.installedSkills.length
+  const agentCount = state.detectedAgents.length
+  const user = state.auth?.user?.name ?? "not logged in (l=login)"
+  const focusHint = state.activeView === "detail"
+    ? "q=back"
+    : state.activeView === "login"
+      ? "Esc=back"
+      : state.focusedPane === "search"
+        ? "Tab=results  Esc=exit search"
+        : "/=search  Tab=switch pane"
+
+  const statusText = `Skills: ${skillCount} | Agents: ${agentCount} | ${user} | ${focusHint} | ?=help 1/2/3/4=tabs`
+
+  return (
+    <box
+      style={{
+        height: 1,
+        width: "100%",
+        backgroundColor: colors.statusBar,
+        flexDirection: "row",
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+    >
+      <text fg={colors.textDim}>{statusText}</text>
+    </box>
+  )
+}

package/src/data/api-client.ts

@@ -0,0 +1,151 @@
+const API_BASE = process.env.SKILLSGATE_SEARCH_API_URL ?? "https://api.skillsgate.ai"
+
+// ---------- Types ----------
+
+export interface CatalogSkill {
+  id: string
+  slug: string
+  name: string
+  description: string
+  summary?: string
+  categories: string[]
+  capabilities?: string[]
+  keywords?: string[]
+  githubUrl?: string
+  githubStars?: number | null
+  installCommand?: string | null
+  score?: number
+  username?: string
+  urlPath?: string
+}
+
+interface CatalogResponse {
+  skills: CatalogSkill[]
+  meta: {
+    total: number
+    limit: number
+    offset: number
+    hasMore?: boolean
+  }
+}
+
+interface KeywordSearchResponse {
+  skills: CatalogSkill[]
+  meta: {
+    total: number
+    limit: number
+    offset: number
+    hasMore?: boolean
+  }
+}
+
+interface SemanticSearchResponse {
+  results: CatalogSkill[]
+  meta: {
+    query: string
+    total: number
+    limit: number
+    remainingSearches: number
+  }
+}
+
+export type SearchMode = "keyword" | "semantic"
+
+export interface SearchResult {
+  skills: CatalogSkill[]
+  total: number
+  remainingSearches?: number
+}
+
+// ---------- Catalog ----------
+
+export async function fetchCatalog(
+  limit: number = 20,
+  offset: number = 0
+): Promise<{ skills: CatalogSkill[]; total: number }> {
+  const url = `${API_BASE}/api/v1/skills?limit=${limit}&offset=${offset}`
+
+  const response = await fetch(url, {
+    headers: { "Content-Type": "application/json" },
+  })
+
+  if (!response.ok) {
+    throw new Error(`Catalog fetch failed (HTTP ${response.status})`)
+  }
+
+  const data = (await response.json()) as CatalogResponse
+  return { skills: data.skills ?? [], total: data.meta?.total ?? 0 }
+}
+
+// ---------- Keyword Search (public, no auth) ----------
+
+export async function keywordSearch(
+  query: string,
+  limit: number = 20,
+  offset: number = 0
+): Promise<SearchResult> {
+  const url = `${API_BASE}/api/v1/skills/search?q=${encodeURIComponent(query)}&limit=${limit}&offset=${offset}`
+
+  const response = await fetch(url, {
+    headers: { "Content-Type": "application/json" },
+  })
+
+  if (!response.ok) {
+    throw new Error(`Keyword search failed (HTTP ${response.status})`)
+  }
+
+  const data = (await response.json()) as KeywordSearchResponse
+  return {
+    skills: data.skills ?? [],
+    total: data.meta?.total ?? 0,
+  }
+}
+
+// ---------- Semantic Search (authenticated, rate limited) ----------
+
+export async function semanticSearch(
+  query: string,
+  token: string,
+  limit: number = 5
+): Promise<SearchResult> {
+  const url = `${API_BASE}/api/v1/search`
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ query, limit }),
+  })
+
+  if (!response.ok) {
+    if (response.status === 429) {
+      throw new Error("RATE_LIMIT")
+    }
+    if (response.status === 401) {
+      throw new Error("AUTH_EXPIRED")
+    }
+    throw new Error(`Semantic search failed (HTTP ${response.status})`)
+  }
+
+  const data = (await response.json()) as SemanticSearchResponse
+  return {
+    skills: data.results ?? [],
+    total: data.meta?.total ?? 0,
+    remainingSearches: data.meta?.remainingSearches,
+  }
+}
+
+// ---------- Unified search ----------
+
+export async function searchSkills(
+  query: string,
+  mode: SearchMode,
+  token?: string | null
+): Promise<SearchResult> {
+  if (mode === "semantic" && token) {
+    return semanticSearch(query, token)
+  }
+  return keywordSearch(query)
+}

package/src/data/use-agents.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react"
+import { useDispatch } from "../store/context.js"
+import { agents, detectInstalledAgents } from "../../../cli/src/core/agents.js"
+import type { DetectedAgent } from "../store/types.js"
+import type { AgentConfig } from "../../../cli/src/types.js"
+
+/**
+ * Detects which AI agents are installed on the system and populates the store.
+ * Runs once on mount.
+ */
+export function useDetectedAgents() {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function detect() {
+      try {
+        const installed: AgentConfig[] = await detectInstalledAgents()
+
+        if (cancelled) return
+
+        const detected: DetectedAgent[] = installed.map((agent) => ({
+          name: agent.name,
+          displayName: agent.displayName,
+          skillCount: 0, // will be updated after skill scan
+        }))
+
+        dispatch({ type: "SET_DETECTED_AGENTS", agents: detected })
+      } catch (err) {
+        // Silently handle detection errors - agents will show as empty
+        if (!cancelled) {
+          dispatch({ type: "SET_DETECTED_AGENTS", agents: [] })
+        }
+      }
+    }
+
+    detect()
+    return () => { cancelled = true }
+  }, [])
+}

package/src/data/use-auth.ts

@@ -0,0 +1,136 @@
+import { useEffect, useCallback } from "react"
+import { useStore, useDispatch } from "../store/context.js"
+import { useDb } from "../db/context.js"
+
+const API_BASE_URL = process.env.SKILLSGATE_API_URL ?? "https://skillsgate.ai"
+
+// SQLite settings keys for auth
+const AUTH_TOKEN_KEY = "auth.token"
+const AUTH_USER_KEY = "auth.user"
+
+interface AuthUser {
+  id: string
+  name: string
+  email: string
+  image?: string
+}
+
+interface ExchangeResponse {
+  access_token: string
+  user: AuthUser
+}
+
+/**
+ * Auth hook using the shared SQLite database.
+ * Both TUI and Electron read/write auth to the same DB at ~/.skillsgate/skillsgate.db
+ * No keyring dependency -- works in both Bun and Node.
+ */
+export function useAuth() {
+  const state = useStore()
+  const dispatch = useDispatch()
+  const { settings } = useDb()
+
+  // On mount, load auth from SQLite
+  useEffect(() => {
+    let cancelled = false
+
+    try {
+      const token = settings.get<string | null>(AUTH_TOKEN_KEY, null)
+      const user = settings.get<AuthUser | null>(AUTH_USER_KEY, null)
+
+      if (token && user) {
+        dispatch({
+          type: "SET_AUTH",
+          auth: { token, user },
+        })
+      } else {
+        // Try legacy file-based auth as fallback
+        loadLegacyAuth().then((legacy) => {
+          if (cancelled) return
+          if (legacy) {
+            settings.set(AUTH_TOKEN_KEY, legacy.token)
+            settings.set(AUTH_USER_KEY, legacy.user)
+            dispatch({
+              type: "SET_AUTH",
+              auth: { token: legacy.token, user: legacy.user },
+            })
+          } else {
+            dispatch({ type: "SET_AUTH", auth: null })
+          }
+        }).catch(() => {
+          if (!cancelled) dispatch({ type: "SET_AUTH", auth: null })
+        })
+      }
+    } catch {
+      dispatch({ type: "SET_AUTH", auth: null })
+    }
+
+    return () => { cancelled = true }
+  }, [])
+
+  const login = useCallback(async (code: string): Promise<string | null> => {
+    try {
+      const res = await fetch(`${API_BASE_URL}/api/auth/device/exchange`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code }),
+      })
+
+      if (res.ok) {
+        const result = (await res.json()) as ExchangeResponse
+
+        // Save to SQLite (shared with Electron)
+        settings.set(AUTH_TOKEN_KEY, result.access_token)
+        settings.set(AUTH_USER_KEY, result.user)
+
+        dispatch({
+          type: "SET_AUTH",
+          auth: { token: result.access_token, user: result.user },
+        })
+        return null
+      }
+
+      const data = (await res.json().catch(() => ({}))) as { error?: string }
+
+      if (data?.error === "rate_limited") {
+        return "Too many attempts. Please wait a minute and try again."
+      } else if (data?.error === "invalid_code") {
+        return "Invalid code. Please check and try again."
+      } else if (data?.error === "expired") {
+        return "Code has expired. Get a new one from the browser."
+      }
+      return "Something went wrong. Please try again."
+    } catch {
+      return "Network error. Please check your connection and try again."
+    }
+  }, [dispatch, settings])
+
+  const logout = useCallback(async () => {
+    settings.set(AUTH_TOKEN_KEY, null)
+    settings.set(AUTH_USER_KEY, null)
+    dispatch({ type: "SET_AUTH", auth: null })
+  }, [dispatch, settings])
+
+  return {
+    auth: state.auth,
+    login,
+    logout,
+  }
+}
+
+/**
+ * Try to load auth from the legacy CLI file (~/.skillsgate/auth.json + keyring).
+ * Used as a one-time migration to SQLite.
+ */
+async function loadLegacyAuth(): Promise<{ token: string; user: AuthUser } | null> {
+  try {
+    const { loadAuth } = await import("../../../cli/src/utils/auth-store.js")
+    const stored = await loadAuth()
+    if (stored?.token && stored?.user) {
+      return { token: stored.token, user: stored.user }
+    }
+  } catch {
+    // CLI auth-store not available or keyring failed
+  }
+  return null
+}