@skillsgate/tui 0.2.0 → 0.3.0

package/bin/postinstall.cjs

@@ -16,7 +16,7 @@ const pkg = platformMap[os.platform()]?.[os.arch()];
 if (!pkg) process.exit(0);
 
 // Check if already available as a sibling (optionalDeps worked)
-const siblingPath = path.join(__dirname, "..", "..", "..", `@skillsgate/${pkg}`);
+const siblingPath = path.join(__dirname, "..", "..", `@skillsgate/${pkg}`);
 if (fs.existsSync(siblingPath)) process.exit(0);
 
 // Also check nested node_modules
@@ -27,11 +27,20 @@ try {
 
 // Not found — install it explicitly
 const version = require("../package.json").version;
+const fullPkg = `@skillsgate/${pkg}@${version}`;
 try {
-  execSync(`npm install -g @skillsgate/${pkg}@${version} --no-save`, {
+  execSync(`npm install -g ${fullPkg} --no-save`, {
     stdio: "inherit",
     timeout: 30000,
   });
 } catch {
-  console.warn(`Warning: could not install @skillsgate/${pkg}. Run manually: npm install -g @skillsgate/${pkg}`);
+  console.warn(`Could not install ${fullPkg}, falling back to @latest (versions may differ)`);
+  try {
+    execSync(`npm install -g @skillsgate/${pkg}@latest --no-save`, {
+      stdio: "inherit",
+      timeout: 30000,
+    });
+  } catch {
+    console.warn(`Warning: could not install @skillsgate/${pkg}. Run manually: npm install -g @skillsgate/${pkg}`);
+  }
 }

package/bin/skillsgate-tui

@@ -25,14 +25,34 @@ const binName = platform === "win32" ? "skillsgate-tui.exe" : "skillsgate-tui";
 const require = createRequire(import.meta.url);
 const thisDir = path.dirname(fileURLToPath(import.meta.url));
 
-function findBinary() {
+function getNpmGlobalRoot() {
+  try {
+    return execFileSync("npm", ["root", "-g"], {
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "ignore"],
+      timeout: 10000,
+    }).trim();
+  } catch {
+    return null;
+  }
+}
+
+function findBinary({ includeGlobal = false } = {}) {
   const candidates = [
     // Nested node_modules (local installs)
     () => require.resolve(`@skillsgate/${pkg}/${binName}`),
     // Sibling in global node_modules (npm install -g)
-    () => path.join(thisDir, "..", "..", "..", `@skillsgate/${pkg}`, binName),
+    () => path.join(thisDir, "..", "..", `@skillsgate/${pkg}`, binName),
   ];
 
+  if (includeGlobal) {
+    candidates.push(() => {
+      const globalRoot = getNpmGlobalRoot();
+      if (!globalRoot) throw new Error("npm global root not found");
+      return path.join(globalRoot, `@skillsgate/${pkg}`, binName);
+    });
+  }
+
   for (const resolve of candidates) {
     try {
       const p = resolve();
@@ -54,9 +74,16 @@ if (!binPath) {
   console.error(`Installing platform binary (${fullPkg})...`);
   try {
     execSync(`npm install -g ${fullPkg}`, { stdio: "inherit", timeout: 30000 });
-    binPath = findBinary();
+    binPath = findBinary({ includeGlobal: true });
   } catch {
-    // fall through to error below
+    // Fallback to latest if exact version is not published for this platform
+    console.warn(`Could not install ${fullPkg}, falling back to @latest (versions may differ)`);
+    try {
+      execSync(`npm install -g @skillsgate/${pkg}@latest`, { stdio: "inherit", timeout: 30000 });
+      binPath = findBinary({ includeGlobal: true });
+    } catch {
+      binPath = findBinary({ includeGlobal: true });
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillsgate/tui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "bin": {
     "skillsgate-tui": "bin/skillsgate-tui"

package/src/components/agent-filter.tsx

@@ -15,6 +15,12 @@ export function AgentFilter() {
   const { servers } = useDb()
 
   const allCount = state.installedSkills.length
+  // Count favorites that are currently installed.
+  const favSet = new Set(state.favorites)
+  const favoritesCount = state.installedSkills.reduce(
+    (n, s) => (favSet.has(s.name) ? n + 1 : n),
+    0,
+  )
 
   // Remote servers with skill counts
   const serverList = servers.list()
@@ -38,7 +44,7 @@ export function AgentFilter() {
     if (state.focusedPane !== "agents") return
     if (state.showHelp) return
 
-    const allOptions = ["all", ...agentOptions.map((o) => o.value)]
+    const allOptions = ["all", "favorites", ...agentOptions.map((o) => o.value)]
     const currentIdx = allOptions.indexOf(state.selectedAgentFilter)
 
     if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
@@ -84,6 +90,21 @@ export function AgentFilter() {
         <text fg={colors.textDim}> ({allCount})</text>
       </box>
 
+      {/* Favorites */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          height: 1,
+          backgroundColor: state.selectedAgentFilter === "favorites" ? colors.bgAlt : "transparent",
+        }}
+      >
+        <text fg={state.selectedAgentFilter === "favorites" ? colors.primary : colors.text}>
+          {"★ "}Favorites
+        </text>
+        <text fg={colors.textDim}> ({favoritesCount})</text>
+      </box>
+
       {/* Spacer */}
       <box style={{ height: 1 }}>
         <text>{" "}</text>

package/src/components/help-overlay.tsx

@@ -10,6 +10,7 @@ const SHORTCUTS_LEFT: ShortcutEntry[] = [
   { key: "g", description: "Jump to first item" },
   { key: "G", description: "Jump to last item" },
   { key: "v", description: "View skill detail" },
+  { key: "f", description: "Toggle favorite on selected skill" },
   { key: "n", description: "Create local skill (home)" },
   { key: "c", description: "Manage collections (home)" },
   { key: "/", description: "Focus search input" },

package/src/components/layout.tsx

@@ -4,6 +4,7 @@ import { useStore, useDispatch } from "../store/context.js"
 import { useDb } from "../db/context.js"
 import { useDetectedAgents } from "../data/use-agents.js"
 import { useInstalledSkills } from "../data/use-installed-skills.js"
+import { useFavorites } from "../data/use-favorites.js"
 import { StatusBar } from "./status-bar.js"
 import { HelpOverlay } from "./help-overlay.js"
 import { HomeView } from "../views/home.js"
@@ -38,6 +39,7 @@ export function Layout() {
   // Load agent + skill data on mount
   useDetectedAgents()
   useInstalledSkills()
+  useFavorites()
 
   // Global keyboard shortcuts
   useKeyboard((key) => {

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

@@ -4,13 +4,14 @@ import { colors, agentBadges as badgeMap } from "../utils/colors.js"
 interface SkillListItemProps {
   skill: EnrichedSkill
   selected?: boolean
+  favorited?: boolean
 }
 
 /**
  * Compact skill list item for the middle panel.
  * Shows just the name and small agent dot indicators.
  */
-export function SkillListItem({ skill, selected }: SkillListItemProps) {
+export function SkillListItem({ skill, selected, favorited }: SkillListItemProps) {
   // Build compact agent dots (single-char badges)
   const agentDots = skill.agents.slice(0, 3).map((a) => {
     const badge = badgeMap[a]
@@ -27,6 +28,11 @@ export function SkillListItem({ skill, selected }: SkillListItemProps) {
         backgroundColor: selected ? colors.bgAlt : "transparent",
       }}
     >
+      {/* Star indicator (favorited skills only) */}
+      <text fg={favorited ? colors.warning : colors.textDim}>
+        {favorited ? "★ " : "  "}
+      </text>
+
       {/* Skill name */}
       <text fg={selected ? colors.primary : colors.text} style={{ flexGrow: 1 }}>
         {skill.name}

package/src/components/skill-list.tsx

@@ -1,7 +1,8 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo } from "react"
 import { useKeyboard } from "@opentui/react"
 import { useStore, useDispatch } from "../store/context.js"
 import { useSkillActions } from "../data/use-skill-actions.js"
+import { useFavorites } from "../data/use-favorites.js"
 import { SkillListItem } from "./skill-list-item.js"
 import { ConfirmDialog } from "./confirm-dialog.js"
 import { colors, agentBadges as badgeMap } from "../utils/colors.js"
@@ -30,6 +31,8 @@ export function SkillList({ skills }: SkillListProps) {
   const dispatch = useDispatch()
   const state = useStore()
   const { removeSkill, removeSkillFromOneAgent, updateSkill } = useSkillActions()
+  const { favorites, toggleFavorite } = useFavorites()
+  const favoritesSet = useMemo(() => new Set(favorites), [favorites])
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [pendingAction, setPendingAction] = useState<PendingAction>(null)
   const [removeMode, setRemoveMode] = useState<RemoveMode>(null)
@@ -114,6 +117,21 @@ export function SkillList({ skills }: SkillListProps) {
     if (key.name === "u" && skills[selectedIndex]) {
       setPendingAction({ type: "update", skill: skills[selectedIndex] })
     }
+
+    // f to toggle favorite for selected skill
+    if (key.name === "f" && skills[selectedIndex]) {
+      const skill = skills[selectedIndex]
+      const isFavoritedAfter = toggleFavorite(skill.name)
+      dispatch({
+        type: "SHOW_NOTIFICATION",
+        notification: {
+          type: "info",
+          message: isFavoritedAfter
+            ? `Added "${skill.name}" to favorites`
+            : `Removed "${skill.name}" from favorites`,
+        },
+      })
+    }
   })
 
   // Handle confirm/cancel for pending actions
@@ -201,7 +219,9 @@ export function SkillList({ skills }: SkillListProps) {
         <text fg={colors.textDim}>
           {state.installedLoading
             ? "Scanning for installed skills..."
-            : "No skills found. Install skills with: skillsgate install <source>"}
+            : state.selectedAgentFilter === "favorites"
+              ? "No favorites yet. Press f on any skill to save it here."
+              : "No skills found. Install skills with: skillsgate install <source>"}
         </text>
       </box>
     )
@@ -237,6 +257,7 @@ export function SkillList({ skills }: SkillListProps) {
             key={skill.name}
             skill={skill}
             selected={i === selectedIndex}
+            favorited={favoritesSet.has(skill.name)}
           />
         ))}
       </scrollbox>

package/src/data/api-client.ts

@@ -1,3 +1,11 @@
+// Re-export the shared trending browse helpers from the CLI core so the
+// scraping/filtering logic lives in exactly one place.
+export {
+  fetchTrending,
+  filterSkills,
+  type SkillsShSkill,
+} from "../../../cli/src/core/skills-sh-client.js"
+
 const SKILLS_SH_BASE = "https://skills.sh"
 const GITHUB_API_BASE = "https://api.github.com"
 const GITHUB_RAW_BASE = "https://raw.githubusercontent.com"

package/src/data/use-favorites.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect } from "react"
+import { useDispatch, useStore } from "../store/context.js"
+import { useDb } from "../db/context.js"
+
+/**
+ * Hydrates the favorites list from the local DB on mount and exposes a
+ * `toggleFavorite` callback that updates both DB and store state.
+ */
+export function useFavorites() {
+  const dispatch = useDispatch()
+  const state = useStore()
+  const { favorites } = useDb()
+
+  useEffect(() => {
+    dispatch({ type: "SET_FAVORITES", favorites: favorites.list() })
+  }, [])
+
+  const toggleFavorite = useCallback(
+    (name: string): boolean => {
+      const next = favorites.toggle(name)
+      dispatch({ type: "SET_FAVORITES", favorites: favorites.list() })
+      return next
+    },
+    [favorites, dispatch],
+  )
+
+  return {
+    favorites: state.favorites,
+    toggleFavorite,
+  }
+}

package/src/data/use-trending.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+import { useDb } from "../db/context.js"
+import {
+  loadTrendingCache,
+  saveTrendingCache,
+} from "../db/trending-cache.js"
+import { fetchTrending, type SkillsShSkill } from "./api-client.js"
+
+interface UseTrendingResult {
+  trending: SkillsShSkill[]
+  loading: boolean
+}
+
+/**
+ * Loads the ranked, most-installed skills for an instant local browse + filter.
+ * Reads a fresh local cache first; if it's stale or missing, scrapes the live
+ * list and persists it. A scrape failure is non-fatal — trending falls back to
+ * empty and the live search path still works.
+ */
+export function useTrending(): UseTrendingResult {
+  const { db } = useDb()
+  const [trending, setTrending] = useState<SkillsShSkill[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const cached = loadTrendingCache(db)
+    if (cached) {
+      setTrending(cached)
+      setLoading(false)
+      return
+    }
+
+    const load = async () => {
+      try {
+        const skills = await fetchTrending()
+        if (cancelled) return
+        saveTrendingCache(db, skills)
+        setTrending(skills)
+      } catch {
+        // Non-fatal: live search remains available without trending.
+        if (!cancelled) setTrending([])
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    void load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [db])
+
+  return { trending, loading }
+}

package/src/db/context.tsx

@@ -3,12 +3,14 @@ import type { Database } from "bun:sqlite"
 import { SettingsStore } from "./settings.js"
 import { RemoteServerStore } from "./servers.js"
 import { RemoteSkillStore } from "./skills.js"
+import { FavoritesStore } from "./favorites.js"
 
 export interface DbContext {
   db: Database
   settings: SettingsStore
   servers: RemoteServerStore
   skills: RemoteSkillStore
+  favorites: FavoritesStore
 }
 
 const DbCtx = createContext<DbContext | null>(null)
@@ -24,6 +26,7 @@ export function DbProvider({ db, children }: DbProviderProps) {
     settings: new SettingsStore(db),
     servers: new RemoteServerStore(db),
     skills: new RemoteSkillStore(db),
+    favorites: new FavoritesStore(db),
   }
 
   return <DbCtx.Provider value={ctx}>{children}</DbCtx.Provider>

package/src/db/favorites.ts

@@ -0,0 +1,39 @@
+import type { Database } from "bun:sqlite"
+
+export class FavoritesStore {
+  private db: Database
+
+  constructor(db: Database) {
+    this.db = db
+  }
+
+  list(): string[] {
+    const rows = this.db
+      .query("SELECT skill_name FROM favorites ORDER BY created_at DESC")
+      .all() as Array<{ skill_name: string }>
+    return rows.map((r) => r.skill_name)
+  }
+
+  has(name: string): boolean {
+    const row = this.db
+      .query("SELECT 1 FROM favorites WHERE skill_name = ?")
+      .get(name)
+    return row !== null
+  }
+
+  toggle(name: string): boolean {
+    if (this.has(name)) {
+      this.db.query("DELETE FROM favorites WHERE skill_name = ?").run(name)
+      return false
+    }
+    this.db.query("INSERT INTO favorites (skill_name) VALUES (?)").run(name)
+    return true
+  }
+
+  count(): number {
+    const row = this.db
+      .query("SELECT COUNT(*) as c FROM favorites")
+      .get() as { c: number }
+    return row.c
+  }
+}

package/src/db/migrations.ts

@@ -70,6 +70,29 @@ const MIGRATIONS: Migration[] = [
       INSERT OR IGNORE INTO schema_version VALUES (2);
     `,
   },
+  {
+    version: 3,
+    up: `
+      CREATE TABLE IF NOT EXISTS favorites (
+        skill_name TEXT PRIMARY KEY,
+        created_at TEXT NOT NULL DEFAULT (datetime('now'))
+      );
+
+      INSERT OR IGNORE INTO schema_version VALUES (3);
+    `,
+  },
+  {
+    version: 4,
+    up: `
+      CREATE TABLE IF NOT EXISTS trending_cache (
+        id INTEGER PRIMARY KEY CHECK (id = 1),
+        fetched_at TEXT NOT NULL,
+        payload    TEXT NOT NULL
+      );
+
+      INSERT OR IGNORE INTO schema_version VALUES (4);
+    `,
+  },
 ]
 
 function getCurrentVersion(db: Database): number {

package/src/db/trending-cache.ts

@@ -0,0 +1,45 @@
+import type { Database } from "bun:sqlite"
+import type { SkillsShSkill } from "../../../cli/src/core/skills-sh-client.js"
+
+// How long a cached trending payload stays fresh before a re-fetch is needed.
+const TTL_MS = 6 * 60 * 60 * 1000 // 6 hours
+
+interface TrendingCacheRow {
+  id: number
+  fetched_at: string
+  payload: string
+}
+
+/**
+ * Returns the cached trending skills if the single-row cache exists and is
+ * still within the TTL window; otherwise returns null so the caller can
+ * re-fetch.
+ */
+export function loadTrendingCache(db: Database): SkillsShSkill[] | null {
+  const row = db
+    .query("SELECT * FROM trending_cache WHERE id = 1")
+    .get() as TrendingCacheRow | null
+
+  if (!row) return null
+
+  const fetchedAt = Date.parse(row.fetched_at)
+  if (Number.isNaN(fetchedAt)) return null
+  if (Date.now() - fetchedAt >= TTL_MS) return null
+
+  try {
+    return JSON.parse(row.payload) as SkillsShSkill[]
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Upserts the single-row (id=1) trending cache with the given skills and the
+ * current timestamp.
+ */
+export function saveTrendingCache(db: Database, skills: SkillsShSkill[]): void {
+  db.query(
+    `INSERT OR REPLACE INTO trending_cache (id, fetched_at, payload)
+     VALUES (1, ?, ?)`
+  ).run(new Date().toISOString(), JSON.stringify(skills))
+}

package/src/store/reducers.ts

@@ -10,6 +10,7 @@ export const initialState: AppState = {
   installedSkills: [],
   installedLoading: true,
   installedFilter: "",
+  favorites: [],
   searchQuery: "",
   searchResults: [],
   searchLoading: false,
@@ -61,6 +62,9 @@ export function appReducer(state: AppState, action: Action): AppState {
     case "SET_INSTALLED_FILTER":
       return { ...state, installedFilter: action.filter }
 
+    case "SET_FAVORITES":
+      return { ...state, favorites: action.favorites }
+
     case "SET_SEARCH_QUERY":
       return { ...state, searchQuery: action.query }
 

package/src/store/types.ts

@@ -63,11 +63,14 @@ export interface AppState {
   detectedAgents: DetectedAgent[]
 
   // Installed skills (home view)
-  selectedAgentFilter: string // agent name or "all"
+  selectedAgentFilter: string // agent name, "all", or "favorites"
   installedSkills: EnrichedSkill[]
   installedLoading: boolean
   installedFilter: string
 
+  // Favorites (skill names)
+  favorites: string[]
+
   // Search / discover
   searchQuery: string
   searchResults: unknown[]
@@ -98,6 +101,7 @@ export type Action =
   | { type: "SET_INSTALLED_SKILLS"; skills: EnrichedSkill[] }
   | { type: "SET_INSTALLED_LOADING"; loading: boolean }
   | { type: "SET_INSTALLED_FILTER"; filter: string }
+  | { type: "SET_FAVORITES"; favorites: string[] }
   | { type: "SET_SEARCH_QUERY"; query: string }
   | { type: "SET_SEARCH_RESULTS"; results: unknown[] }
   | { type: "SET_SEARCH_LOADING"; loading: boolean }

package/src/views/discover.tsx

@@ -1,12 +1,18 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo } from "react"
 import { useKeyboard } from "@opentui/react"
 import { useStore, useDispatch } from "../store/context.js"
 import { useSearch } from "../data/use-search.js"
+import { useTrending } from "../data/use-trending.js"
 import { useSkillActions } from "../data/use-skill-actions.js"
 import { ConfirmDialog } from "../components/confirm-dialog.js"
-import type { CatalogSkill } from "../data/api-client.js"
+import type { CatalogSkill, SkillsShSkill } from "../data/api-client.js"
+import { filterSkills } from "../data/api-client.js"
 import { colors } from "../utils/colors.js"
 
+// Sentinel selection index for the focusable "Official only" toggle row that
+// sits above the skill rows in the list pane.
+const TOGGLE_INDEX = -1
+
 /**
  * Discover view: two-column layout with search results.
  * LEFT  - Search input + results list (40%)
@@ -17,8 +23,9 @@ export function DiscoverView() {
   const dispatch = useDispatch()
   const [query, setQuery] = useState("")
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [officialOnly, setOfficialOnly] = useState(false)
   const [installTarget, setInstallTarget] = useState<CatalogSkill | null>(null)
-  const [previewSkill, setPreviewSkill] = useState<CatalogSkill | null>(null)
+  const [previewSkill, setPreviewSkill] = useState<SkillsShSkill | null>(null)
 
   // Auto-focus search input when Discover view mounts
   useEffect(() => {
@@ -29,16 +36,47 @@ export function DiscoverView() {
 
   const { results, loading, error, total, hasMore, loadMore } =
     useSearch(query)
+  const { trending, loading: trendingLoading } = useTrending()
   const { installSkill } = useSkillActions()
 
+  const isSearching = query.trim().length >= 2
+
+  // Compose the list shown to the user:
+  // - short query -> ranked trending (instant local browse)
+  // - 2+ chars    -> local filter over trending FIRST, then live API results
+  //   whose id is not already present, then optionally restrict to official.
+  const visibleSkills = useMemo<SkillsShSkill[]>(() => {
+    let combined: SkillsShSkill[]
+    if (!isSearching) {
+      combined = trending
+    } else {
+      const local = filterSkills(trending, query)
+      const seen = new Set(local.map((s) => s.id))
+      const remote = results.filter((s) => !seen.has(s.id))
+      combined = [...local, ...remote]
+    }
+    if (officialOnly) {
+      combined = combined.filter((s) => s.isOfficial === true)
+    }
+    return combined
+  }, [isSearching, query, trending, results, officialOnly])
+
+  // Clamp selection whenever the visible set changes.
+  useEffect(() => {
+    setSelectedIndex((i) => {
+      if (i === TOGGLE_INDEX) return TOGGLE_INDEX
+      return Math.min(Math.max(0, i), Math.max(0, visibleSkills.length - 1))
+    })
+  }, [visibleSkills.length])
+
   // Update preview when selection changes
   useEffect(() => {
-    if (results[selectedIndex]) {
-      setPreviewSkill(results[selectedIndex])
+    if (selectedIndex >= 0 && visibleSkills[selectedIndex]) {
+      setPreviewSkill(visibleSkills[selectedIndex])
     } else {
       setPreviewSkill(null)
     }
-  }, [selectedIndex, results])
+  }, [selectedIndex, visibleSkills])
 
   // Keyboard navigation for the discover list
   useKeyboard((key) => {
@@ -47,15 +85,24 @@ export function DiscoverView() {
     if (state.focusedPane === "search") return
     if (installTarget) return
 
-    // j/k or arrow keys
+    // space/enter toggles the focusable "Official only" row when selected
+    if (
+      selectedIndex === TOGGLE_INDEX &&
+      (key.name === "space" || key.name === "return")
+    ) {
+      setOfficialOnly((v) => !v)
+      return
+    }
+
+    // j/k or arrow keys (TOGGLE_INDEX sits above the first skill row)
     if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
-      setSelectedIndex((i) => Math.max(0, i - 1))
+      setSelectedIndex((i) => Math.max(TOGGLE_INDEX, i - 1))
     }
     if (key.name === "down" || (key.name === "j" && !key.ctrl)) {
       setSelectedIndex((i) => {
-        const next = Math.min(results.length - 1, i + 1)
-        // If we're near the bottom and there's more, load next page
-        if (next >= results.length - 3 && hasMore && !loading) {
+        const next = Math.min(visibleSkills.length - 1, i + 1)
+        // If we're near the bottom and the live API has more, load next page.
+        if (isSearching && next >= visibleSkills.length - 3 && hasMore && !loading) {
           loadMore()
         }
         return next
@@ -67,12 +114,12 @@ export function DiscoverView() {
       setSelectedIndex(0)
     }
     if (key.name === "g" && key.shift) {
-      setSelectedIndex(Math.max(0, results.length - 1))
+      setSelectedIndex(Math.max(0, visibleSkills.length - 1))
     }
 
     // v to open full detail view
-    if (key.name === "v" && results[selectedIndex]) {
-      const skill = results[selectedIndex]
+    if (key.name === "v" && visibleSkills[selectedIndex]) {
+      const skill = visibleSkills[selectedIndex]
       dispatch({
         type: "SELECT_SKILL",
         skill: catalogSkillToEnriched(skill),
@@ -81,8 +128,8 @@ export function DiscoverView() {
     }
 
     // i to install
-    if (key.name === "i" && results[selectedIndex]) {
-      setInstallTarget(results[selectedIndex])
+    if (key.name === "i" && visibleSkills[selectedIndex]) {
+      setInstallTarget(visibleSkills[selectedIndex])
       return
     }
   })
@@ -143,13 +190,11 @@ export function DiscoverView() {
       >
         {/* Results info */}
         <text fg={colors.textDim}>
-          {loading
+          {isSearching && loading
             ? "Loading..."
-            : error
+            : isSearching && error
               ? `Error: ${error}`
-              : query.trim()
-                ? `${results.length} result${results.length !== 1 ? "s" : ""}`
-                : `${results.length}/${total} skills`}
+              : `${visibleSkills.length} ${isSearching ? "result" : "skill"}${visibleSkills.length !== 1 ? "s" : ""}`}
         </text>
       </box>
 
@@ -164,15 +209,38 @@ export function DiscoverView() {
             flexDirection: "column",
           } as any}
         >
-          {/* List header */}
+          {/* Section header */}
           <box style={{ height: 1, paddingLeft: 1, backgroundColor: colors.bgAlt }}>
-            <text fg={colors.textDim}>RESULTS</text>
+            <text fg={colors.textDim}>{isSearching ? "Results" : "Trending"}</text>
+          </box>
+
+          {/* Focusable "Official only" filter row */}
+          <box
+            style={{
+              height: 1,
+              width: "100%",
+              paddingLeft: 1,
+              paddingRight: 1,
+              flexDirection: "row",
+              backgroundColor:
+                selectedIndex === TOGGLE_INDEX ? colors.bgAlt : "transparent",
+            }}
+          >
+            <text
+              fg={selectedIndex === TOGGLE_INDEX ? colors.primary : colors.textDim}
+            >
+              {officialOnly ? "[x]" : "[ ]"} Official only
+            </text>
           </box>
 
-          {results.length === 0 && !loading ? (
+          {!isSearching && trendingLoading && trending.length === 0 ? (
+            <box style={{ padding: 1 }}>
+              <text fg={colors.textDim}>Loading popular skills…</text>
+            </box>
+          ) : visibleSkills.length === 0 && !(isSearching && loading) ? (
             <box style={{ padding: 1 }}>
               <text fg={colors.textDim}>
-                {query.trim()
+                {isSearching
                   ? "No skills found matching your query."
                   : "No skills available in the catalog."}
               </text>
@@ -194,7 +262,7 @@ export function DiscoverView() {
                 },
               }}
             >
-              {results.map((skill, i) => (
+              {visibleSkills.map((skill, i) => (
                 <box
                   key={skill.id ?? `${skill.skillId}-${i}`}
                   style={{
@@ -205,12 +273,15 @@ export function DiscoverView() {
                     backgroundColor: i === selectedIndex ? colors.bgAlt : "transparent",
                   }}
                 >
+                  {skill.isOfficial ? (
+                    <text fg={colors.primary}>{"✓ "}</text>
+                  ) : null}
                   <text fg={i === selectedIndex ? colors.primary : colors.text}>
                     {skill.name}
                   </text>
                 </box>
               ))}
-              {hasMore && (
+              {isSearching && hasMore && (
                 <box style={{ paddingLeft: 1, height: 1 }}>
                   <text fg={colors.textDim}>
                     {loading ? "Loading more..." : "Scroll down to load more..."}

package/src/views/home.tsx

@@ -73,8 +73,11 @@ export function HomeView() {
       skills = skills.filter((skill) => ids.has(skill.canonicalPath))
     }
 
-    // Agent filter
-    if (state.selectedAgentFilter !== "all") {
+    // Agent filter (or favorites)
+    if (state.selectedAgentFilter === "favorites") {
+      const favSet = new Set(state.favorites)
+      skills = skills.filter((s) => favSet.has(s.name))
+    } else if (state.selectedAgentFilter !== "all") {
       skills = skills.filter((s) =>
         s.agents.includes(state.selectedAgentFilter as any)
       )
@@ -96,7 +99,7 @@ export function HomeView() {
     }
 
     return skills
-  }, [state.installedSkills, state.selectedAgentFilter, state.installedFilter, selectedCollection, collections, collectionsVersion])
+  }, [state.installedSkills, state.selectedAgentFilter, state.installedFilter, state.favorites, selectedCollection, collections, collectionsVersion])
 
   useKeyboard((key) => {
     if (state.activeView !== "home") return
@@ -383,7 +386,7 @@ function DetailPanel({ skill, collections, selectedCollection }: DetailPanelProp
         <text>{" "}</text>
 
         {/* Shortcut hints */}
-        <text fg={colors.textDim}>v=view detail  d=remove  u=update  n=create skill  c=collections  Tab=switch pane</text>
+        <text fg={colors.textDim}>v=view detail  d=remove  u=update  f=favorite  n=create skill  c=collections  Tab=switch pane</text>
         <text fg={colors.border}>---</text>
 
         {/* SKILL.md content */}