@skillsgate/tui 0.1.1

package/bin/skillsgate-tui

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+const { execFileSync } = require("child_process");
+const path = require("path");
+const os = require("os");
+
+const platform = os.platform();
+const arch = os.arch();
+
+// Map to npm package names
+const platformMap = {
+  darwin: { arm64: "tui-darwin-arm64", x64: "tui-darwin-x64" },
+  linux: { arm64: "tui-linux-arm64", x64: "tui-linux-x64" },
+  win32: { x64: "tui-win32-x64" },
+};
+
+const pkg = platformMap[platform]?.[arch];
+if (!pkg) {
+  console.error(`Unsupported platform: ${platform}-${arch}`);
+  process.exit(1);
+}
+
+try {
+  const binPath = require.resolve(`@skillsgate/${pkg}/skillsgate-tui`);
+  execFileSync(binPath, process.argv.slice(2), { stdio: "inherit" });
+} catch {
+  console.error("Platform binary not found. Try reinstalling: npm install -g @skillsgate/tui");
+  process.exit(1);
+}

package/bunfig.toml

@@ -0,0 +1,3 @@
+[install]
+# Treat this package as standalone - do not walk up to the monorepo root
+scopes = {}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@skillsgate/tui",
+  "version": "0.1.1",
+  "type": "module",
+  "bin": {
+    "skillsgate-tui": "bin/skillsgate-tui"
+  },
+  "scripts": {
+    "dev": "bun --watch run src/index.tsx",
+    "start": "bun run src/index.tsx"
+  },
+  "dependencies": {
+    "@opentui/core": "0.1.90",
+    "@opentui/react": "0.1.90",
+    "gray-matter": "^4.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skillsgate/skillsgate"
+  }
+}

package/src/app.tsx

@@ -0,0 +1,18 @@
+import type { Database } from "bun:sqlite"
+import { StoreProvider } from "./store/context.js"
+import { DbProvider } from "./db/context.js"
+import { Layout } from "./components/layout.js"
+
+interface AppProps {
+  db: Database
+}
+
+export function App({ db }: AppProps) {
+  return (
+    <DbProvider db={db}>
+      <StoreProvider>
+        <Layout />
+      </StoreProvider>
+    </DbProvider>
+  )
+}

package/src/components/agent-filter.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useStore, useDispatch } from "../store/context.js"
+import { useDb } from "../db/context.js"
+import { colors, agentBadges } from "../utils/colors.js"
+
+/**
+ * Vertical sidebar showing the Library section (All Skills, Favorites)
+ * and the Tools section (detected agents with skill counts).
+ * Rendered as the left panel in the three-panel home layout.
+ */
+export function AgentFilter() {
+  const state = useStore()
+  const dispatch = useDispatch()
+  const { servers } = useDb()
+
+  const allCount = state.installedSkills.length
+
+  // Remote servers with skill counts
+  const serverList = servers.list()
+  const serverEntries = serverList.map((srv) => ({
+    id: srv.id,
+    label: srv.label,
+    count: servers.skillCount(srv.id),
+  }))
+
+  // Build the list of filter options
+  const agentOptions = state.detectedAgents.map((a) => ({
+    name: a.displayName,
+    value: a.name,
+    count: a.skillCount,
+    badge: agentBadges[a.name],
+  }))
+
+  // Navigate agent filters with keyboard when agents pane is focused
+  useKeyboard((key) => {
+    if (state.activeView !== "home") return
+    if (state.focusedPane !== "agents") return
+    if (state.showHelp) return
+
+    const allOptions = ["all", ...agentOptions.map((o) => o.value)]
+    const currentIdx = allOptions.indexOf(state.selectedAgentFilter)
+
+    if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
+      const prev = Math.max(0, currentIdx - 1)
+      dispatch({ type: "SET_AGENT_FILTER", filter: allOptions[prev] })
+    }
+    if (key.name === "down" || (key.name === "j" && !key.ctrl)) {
+      const next = Math.min(allOptions.length - 1, currentIdx + 1)
+      dispatch({ type: "SET_AGENT_FILTER", filter: allOptions[next] })
+    }
+  })
+
+  const isFocused = state.focusedPane === "agents"
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: 22,
+        borderRight: true,
+        borderColor: isFocused ? colors.primary : colors.border,
+        backgroundColor: colors.bg,
+        paddingTop: 0,
+      }}
+    >
+      {/* Library section header */}
+      <box style={{ paddingLeft: 1, height: 1, backgroundColor: colors.bgAlt }}>
+        <text fg={colors.textDim}>LIBRARY</text>
+      </box>
+
+      {/* All Skills */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          height: 1,
+          backgroundColor: state.selectedAgentFilter === "all" ? colors.bgAlt : "transparent",
+        }}
+      >
+        <text fg={state.selectedAgentFilter === "all" ? colors.primary : colors.text}>
+          All Skills
+        </text>
+        <text fg={colors.textDim}> ({allCount})</text>
+      </box>
+
+      {/* Spacer */}
+      <box style={{ height: 1 }}>
+        <text>{" "}</text>
+      </box>
+
+      {/* Tools section header */}
+      <box style={{ paddingLeft: 1, height: 1, backgroundColor: colors.bgAlt }}>
+        <text fg={colors.textDim}>TOOLS</text>
+      </box>
+
+      {/* Agent entries */}
+      {agentOptions.length === 0 ? (
+        <box style={{ paddingLeft: 1, height: 1 }}>
+          <text fg={colors.textDim}>(none)</text>
+        </box>
+      ) : (
+        agentOptions.map((opt) => {
+          const isActive = state.selectedAgentFilter === opt.value
+          return (
+            <box
+              key={opt.value}
+              style={{
+                paddingLeft: 1,
+                paddingRight: 1,
+                height: 1,
+                flexDirection: "row",
+                backgroundColor: isActive ? colors.bgAlt : "transparent",
+              }}
+            >
+              <text fg={opt.badge?.color ?? colors.agent}>
+                {opt.badge?.label ?? opt.name.slice(0, 2)}
+              </text>
+              <text fg={isActive ? colors.primary : colors.text}>
+                {" "}{opt.name}
+              </text>
+              <text fg={colors.textDim}> {opt.count}</text>
+            </box>
+          )
+        })
+      )}
+
+      {/* Spacer */}
+      <box style={{ height: 1 }}>
+        <text>{" "}</text>
+      </box>
+
+      {/* Servers section header */}
+      <box style={{ paddingLeft: 1, height: 1, backgroundColor: colors.bgAlt }}>
+        <text fg={colors.textDim}>SERVERS</text>
+      </box>
+
+      {/* Server entries */}
+      {serverEntries.length === 0 ? (
+        <box style={{ paddingLeft: 1, height: 1 }}>
+          <text fg={colors.textDim}>(none)</text>
+        </box>
+      ) : (
+        serverEntries.map((srv) => (
+          <box
+            key={srv.id}
+            style={{
+              paddingLeft: 1,
+              paddingRight: 1,
+              height: 1,
+              flexDirection: "row",
+            }}
+          >
+            <text fg={colors.secondary}>S </text>
+            <text fg={colors.text}>{srv.label}</text>
+            <text fg={colors.textDim}> {srv.count}</text>
+          </box>
+        ))
+      )}
+    </box>
+  )
+}

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,56 @@
+import { useKeyboard } from "@opentui/react"
+import { colors } from "../utils/colors.js"
+
+interface ConfirmDialogProps {
+  message: string
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+/**
+ * Overlay confirmation dialog that captures y/n keypress.
+ * Renders as a centered box with the message and (y/n) hint.
+ */
+export function ConfirmDialog({ message, onConfirm, onCancel }: ConfirmDialogProps) {
+  useKeyboard((key) => {
+    if (key.name === "y") {
+      onConfirm()
+    } else if (key.name === "n" || key.name === "escape") {
+      onCancel()
+    }
+  })
+
+  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",
+          alignItems: "center",
+        }}
+        title="Confirm"
+      >
+        <text fg={colors.text}>{message}</text>
+        <text>{" "}</text>
+        <text fg={colors.textDim}>
+          Press <span fg={colors.success}>y</span> to confirm, <span fg={colors.error}>n</span> to cancel
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/components/help-overlay.tsx

@@ -0,0 +1,101 @@
+import { colors } from "../utils/colors.js"
+
+interface ShortcutEntry {
+  key: string
+  description: string
+}
+
+const SHORTCUTS_LEFT: ShortcutEntry[] = [
+  { key: "j/k", description: "Navigate list up/down" },
+  { key: "g", description: "Jump to first item" },
+  { key: "G", description: "Jump to last item" },
+  { key: "v", description: "View skill detail" },
+  { key: "/", description: "Focus search input" },
+  { key: "Tab", description: "Cycle focus: agents > search > list" },
+  { key: "Esc", description: "Clear search / go back" },
+]
+
+const SHORTCUTS_RIGHT: ShortcutEntry[] = [
+  { key: "1/2/3/4", description: "Switch tabs" },
+  { key: "s", description: "Open settings" },
+  { key: "r", description: "Refresh installed skills" },
+  { key: "l", description: "Login / auth status" },
+  { key: "i", description: "Install selected skill" },
+  { key: "d", description: "Remove selected skill" },
+  { key: "x", description: "Unfavorite (favorites view)" },
+  { key: "m", description: "Toggle keyword/AI search" },
+  { key: "?", description: "Toggle this help" },
+  { key: "Ctrl+Q", description: "Quit" },
+  { key: "", description: "" },
+  { key: "-- Servers View --", description: "" },
+  { key: "S", description: "Sync selected server" },
+  { key: "a", description: "Add new server" },
+  { key: "e", description: "Edit server" },
+  { key: "t", description: "Test connection" },
+  { key: "", description: "" },
+  { key: "-- Detail View --", description: "" },
+  { key: "q/Esc", description: "Go back" },
+  { key: "e", description: "Edit skill in $EDITOR" },
+  { key: "o", description: "Open folder / source URL" },
+  { key: "d", description: "Remove (per-agent if multiple)" },
+]
+
+const KEY_COL_WIDTH = 18
+const DESC_COL_WIDTH = 34
+
+function formatShortcutLine(entry: ShortcutEntry): string {
+  if (!entry.key && !entry.description) return ""
+  if (entry.key.startsWith("--")) {
+    return entry.key
+  }
+  const keyPadded = entry.key.padEnd(KEY_COL_WIDTH)
+  return `${keyPadded}${entry.description}`
+}
+
+export function HelpOverlay() {
+  const maxRows = Math.max(SHORTCUTS_LEFT.length, SHORTCUTS_RIGHT.length)
+  const lines: string[] = []
+
+  // Title
+  lines.push("")
+  lines.push("  Keyboard Shortcuts")
+  lines.push("  " + "-".repeat(KEY_COL_WIDTH + DESC_COL_WIDTH + 4 + KEY_COL_WIDTH + DESC_COL_WIDTH))
+  lines.push("")
+
+  for (let i = 0; i < maxRows; i++) {
+    const left = SHORTCUTS_LEFT[i]
+    const right = SHORTCUTS_RIGHT[i]
+
+    const leftStr = left ? formatShortcutLine(left) : ""
+    const rightStr = right ? formatShortcutLine(right) : ""
+
+    const leftPadded = leftStr.padEnd(KEY_COL_WIDTH + DESC_COL_WIDTH + 2)
+    lines.push(`  ${leftPadded}  ${rightStr}`)
+  }
+
+  lines.push("")
+  lines.push("  Press ? or Esc to close")
+  lines.push("")
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        backgroundColor: "#1a1a2e",
+        border: true,
+        borderColor: colors.primary,
+        flexDirection: "column",
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+      title="Help"
+    >
+      {lines.map((line, i) => (
+        <text key={i} fg={line.includes("--") && !line.includes("Keyboard") ? colors.primary : colors.text}>
+          {line}
+        </text>
+      ))}
+    </box>
+  )
+}

package/src/components/layout.tsx

@@ -0,0 +1,272 @@
+import { useState } from "react"
+import { useKeyboard, useTerminalDimensions } from "@opentui/react"
+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 { useAuth } from "../data/use-auth.js"
+import { StatusBar } from "./status-bar.js"
+import { HelpOverlay } from "./help-overlay.js"
+import { HomeView } from "../views/home.js"
+import { SkillDetailView } from "../views/skill-detail.js"
+import { DiscoverView } from "../views/discover.js"
+import { FavoritesView } from "../views/favorites.js"
+import { ServersView } from "../views/servers.js"
+import { AddServerView } from "../views/add-server.js"
+import { ServerSkillsView } from "../views/server-skills.js"
+import { SettingsView } from "../views/settings.js"
+import { LoginView } from "../views/login.js"
+import { colors } from "../utils/colors.js"
+import type { ViewName } from "../store/types.js"
+
+function getTabOptions(favCount: number, serverCount: number) {
+  return [
+    { name: "Installed", description: "Locally installed skills", value: "home" },
+    { name: "Discover", description: "Search the registry", value: "discover" },
+    {
+      name: favCount > 0 ? `Favorites (${favCount})` : "Favorites",
+      description: "Your starred skills",
+      value: "favorites",
+    },
+    {
+      name: serverCount > 0 ? `Servers (${serverCount})` : "Servers",
+      description: "Remote SSH servers",
+      value: "servers",
+    },
+  ]
+}
+
+export function Layout() {
+  const state = useStore()
+  const dispatch = useDispatch()
+  const { width, height } = useTerminalDimensions()
+  const { servers } = useDb()
+  const [serverCount, setServerCount] = useState(() => servers.list().length)
+
+  // Load auth, agent + skill data on mount
+  useAuth()
+  useDetectedAgents()
+  useInstalledSkills()
+
+  // Global keyboard shortcuts
+  useKeyboard((key) => {
+    // Ctrl+Q always works -- clean exit
+    if (key.name === "q" && key.ctrl) {
+      const exit = (globalThis as any).__skillsgateTuiCleanExit
+      if (exit) exit()
+      else process.exit(0)
+    }
+
+    // When search input is focused, only handle Escape, Tab, and Ctrl shortcuts
+    // All other keys pass through to the input component
+    if (state.focusedPane === "search") {
+      if (key.name === "escape") {
+        dispatch({ type: "SET_FOCUSED_PANE", pane: "list" })
+        return
+      }
+      if (key.name === "tab" && !key.shift) {
+        dispatch({ type: "CYCLE_FOCUS" })
+        return
+      }
+      return
+    }
+
+    // When on login view, only handle Escape -- let input keys pass through
+    if (state.activeView === "login") {
+      if (key.name === "escape") {
+        dispatch({ type: "GO_BACK" })
+      }
+      return
+    }
+
+    // Help overlay toggle
+    if (key.name === "?" || (key.shift && key.name === "/")) {
+      dispatch({ type: "TOGGLE_HELP" })
+      return
+    }
+
+    // Dismiss help with Esc
+    if (state.showHelp && key.name === "escape") {
+      dispatch({ type: "TOGGLE_HELP" })
+      return
+    }
+
+    // When help is shown, block other shortcuts
+    if (state.showHelp) return
+
+    // Tab switching (only when not in detail/form views)
+    const inFormView = state.activeView === "detail" || state.activeView === "add-server"
+      || state.activeView === "edit-server" || state.activeView === "settings"
+      || state.activeView === "server-skills" || state.activeView === "login"
+    if (!inFormView) {
+      if (key.name === "1") dispatch({ type: "NAVIGATE", view: "home" })
+      if (key.name === "2") dispatch({ type: "NAVIGATE", view: "discover" })
+      if (key.name === "3") dispatch({ type: "NAVIGATE", view: "favorites" })
+      if (key.name === "4") {
+        setServerCount(servers.list().length)
+        dispatch({ type: "NAVIGATE", view: "servers" })
+      }
+    }
+
+    // "s" to open settings (only from home/favorites views when not in search)
+    if (key.name === "s" && state.focusedPane !== "search"
+      && state.activeView !== "discover" && state.activeView !== "detail"
+      && !inFormView) {
+      dispatch({ type: "NAVIGATE", view: "settings" })
+      return
+    }
+
+    // Tab to cycle focus (only on home/discover views)
+    if (key.name === "tab" && !key.shift && (state.activeView === "home" || state.activeView === "discover")) {
+      dispatch({ type: "CYCLE_FOCUS" })
+      return
+    }
+
+    // "/" to focus search from anywhere
+    if (key.name === "/" && state.activeView !== "detail") {
+      dispatch({ type: "SET_FOCUSED_PANE", pane: "search" })
+      return
+    }
+
+    // Esc: go back from sub-views, clear search, etc.
+    if (key.name === "escape") {
+      if (state.activeView === "detail" || state.activeView === "add-server"
+        || state.activeView === "edit-server" || state.activeView === "settings"
+        || state.activeView === "server-skills") {
+        dispatch({ type: "GO_BACK" })
+        return
+      }
+      if (state.installedFilter) {
+        dispatch({ type: "SET_INSTALLED_FILTER", filter: "" })
+      }
+      if (state.focusedPane === "search") {
+        dispatch({ type: "SET_FOCUSED_PANE", pane: "list" })
+      }
+      return
+    }
+
+    // "l" to navigate to login view (always -- allows re-login if token expired)
+    if (key.name === "l" && state.focusedPane !== "search" && state.activeView !== "detail" && state.activeView !== "login") {
+      dispatch({ type: "NAVIGATE", view: "login" })
+      return
+    }
+
+    // "r" to refresh installed skills (when not typing in search, not on login view)
+    if (key.name === "r" && state.focusedPane !== "search" && state.activeView !== "detail" && state.activeView !== "login") {
+      dispatch({ type: "REFRESH_SKILLS" })
+      return
+    }
+  })
+
+  const TAB_OPTIONS = getTabOptions(state.favorites.length, serverCount)
+
+  const activeTabIndex = TAB_OPTIONS.findIndex(
+    (t) => t.value === state.activeView
+  )
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: colors.bg,
+      }}
+    >
+      {/* Header */}
+      <box
+        style={{
+          height: 1,
+          width: "100%",
+          backgroundColor: colors.header,
+          flexDirection: "row",
+          paddingLeft: 1,
+          paddingRight: 1,
+          justifyContent: "space-between",
+        }}
+      >
+        <text fg={colors.primary}>
+          <strong>SkillsGate TUI</strong> <span fg={colors.textDim}>v0.1.0</span>
+        </text>
+      </box>
+
+      {/* Tab navigation */}
+      <tab-select
+        options={TAB_OPTIONS}
+        focused={state.activeView !== "detail" && !state.showHelp}
+        selectedIndex={activeTabIndex >= 0 ? activeTabIndex : 0}
+        selectedBackgroundColor={colors.tabActive}
+        selectedTextColor={colors.tabText}
+        textColor={colors.textDim}
+        backgroundColor={colors.bg}
+        showDescription={false}
+        showUnderline={true}
+        wrapSelection={true}
+        onChange={(index: number) => {
+          const view = TAB_OPTIONS[index]?.value as ViewName | undefined
+          if (view) dispatch({ type: "NAVIGATE", view })
+        }}
+      />
+
+      {/* Content area */}
+      <box style={{ flexGrow: 1, width: "100%" }}>
+        {state.showHelp ? (
+          <HelpOverlay />
+        ) : (
+          <>
+            {state.activeView === "home" && <HomeView />}
+            {state.activeView === "discover" && <DiscoverView />}
+            {state.activeView === "favorites" && <FavoritesView />}
+            {state.activeView === "servers" && <ServersView onServerCountChange={setServerCount} />}
+            {(state.activeView === "add-server" || state.activeView === "edit-server") && (
+              <AddServerView
+                editServerId={state.activeView === "edit-server" ? state.selectedServerId : null}
+                onServerCountChange={setServerCount}
+              />
+            )}
+            {state.activeView === "server-skills" && state.selectedServerId && (
+              <ServerSkillsView serverId={state.selectedServerId} />
+            )}
+            {state.activeView === "settings" && <SettingsView />}
+            {state.activeView === "login" && <LoginView />}
+            {state.activeView === "detail" && state.selectedSkill && (
+              <SkillDetailView />
+            )}
+          </>
+        )}
+      </box>
+
+      {/* Notification bar (conditional) */}
+      {state.notification && (
+        <box
+          style={{
+            height: 1,
+            width: "100%",
+            backgroundColor:
+              state.notification.type === "error"
+                ? "#331111"
+                : state.notification.type === "success"
+                  ? "#113311"
+                  : "#111133",
+            paddingLeft: 1,
+          }}
+        >
+          <text
+            fg={
+              state.notification.type === "error"
+                ? colors.error
+                : state.notification.type === "success"
+                  ? colors.success
+                  : colors.primary
+            }
+          >
+            {state.notification.message}
+          </text>
+        </box>
+      )}
+
+      {/* Status bar */}
+      <StatusBar />
+    </box>
+  )
+}