@skillsgate/tui 0.1.1

package/src/store/types.ts

@@ -0,0 +1,124 @@
+import type { AgentType, SkillLockEntry, SourceType } from "../../../cli/src/types.js"
+
+// ---------- View Names ----------
+
+export type ViewName =
+  | "home"
+  | "discover"
+  | "favorites"
+  | "servers"
+  | "server-skills"
+  | "add-server"
+  | "edit-server"
+  | "settings"
+  | "detail"
+  | "login"
+
+// ---------- Enriched Skill ----------
+
+export interface EnrichedSkill {
+  name: string
+  description: string
+  filePath: string
+  /** Which agents have this skill installed (by agent name) */
+  agents: AgentType[]
+  /** Frontmatter metadata from the SKILL.md */
+  metadata: Record<string, unknown>
+  /** Lock file entry if tracked */
+  lock?: SkillLockEntry
+}
+
+// ---------- Detected Agent ----------
+
+export interface DetectedAgent {
+  name: AgentType
+  displayName: string
+  skillCount: number
+}
+
+// ---------- Auth ----------
+
+export interface AuthState {
+  token: string
+  user: { id: string; name: string; email: string }
+}
+
+// ---------- Notification ----------
+
+export interface Notification {
+  type: "success" | "error" | "info"
+  message: string
+}
+
+// ---------- Focus Pane ----------
+
+export type FocusedPane = "agents" | "search" | "list"
+
+// ---------- App State ----------
+
+export interface AppState {
+  activeView: ViewName
+  previousView: ViewName | null
+
+  // Auth
+  auth: AuthState | null
+
+  // Agent detection
+  detectedAgents: DetectedAgent[]
+
+  // Installed skills (home view)
+  selectedAgentFilter: string // agent name or "all"
+  installedSkills: EnrichedSkill[]
+  installedLoading: boolean
+  installedFilter: string
+
+  // Search / discover
+  searchQuery: string
+  searchResults: unknown[]
+  searchLoading: boolean
+
+  // Favorites
+  favorites: unknown[]
+  favoritesLoading: boolean
+
+  // Detail
+  selectedSkill: EnrichedSkill | null
+
+  // Servers
+  selectedServerId: string | null
+
+  // UI state
+  showHelp: boolean
+  focusedPane: FocusedPane
+
+  // Notification toast
+  notification: Notification | null
+}
+
+// ---------- Actions ----------
+
+export type Action =
+  | { type: "NAVIGATE"; view: ViewName }
+  | { type: "GO_BACK" }
+  | { type: "SET_AUTH"; auth: AuthState | null }
+  | { type: "SET_DETECTED_AGENTS"; agents: DetectedAgent[] }
+  | { type: "UPDATE_AGENT_COUNTS"; counts: Record<string, number> }
+  | { type: "SET_AGENT_FILTER"; filter: string }
+  | { type: "SET_INSTALLED_SKILLS"; skills: EnrichedSkill[] }
+  | { type: "SET_INSTALLED_LOADING"; loading: boolean }
+  | { type: "SET_INSTALLED_FILTER"; filter: string }
+  | { type: "SET_SEARCH_QUERY"; query: string }
+  | { type: "SET_SEARCH_RESULTS"; results: unknown[] }
+  | { type: "SET_SEARCH_LOADING"; loading: boolean }
+  | { type: "SET_FAVORITES"; favorites: unknown[] }
+  | { type: "SET_FAVORITES_LOADING"; loading: boolean }
+  | { type: "SELECT_SKILL"; skill: EnrichedSkill }
+  | { type: "PREVIEW_SKILL"; skill: EnrichedSkill }
+  | { type: "CLEAR_SKILL" }
+  | { type: "SHOW_NOTIFICATION"; notification: Notification }
+  | { type: "CLEAR_NOTIFICATION" }
+  | { type: "TOGGLE_HELP" }
+  | { type: "SET_FOCUSED_PANE"; pane: FocusedPane }
+  | { type: "CYCLE_FOCUS" }
+  | { type: "REFRESH_SKILLS" }
+  | { type: "SET_SELECTED_SERVER"; serverId: string | null }

package/src/utils/colors.ts

@@ -0,0 +1,42 @@
+export const colors = {
+  primary: "#00BFFF",    // cyan - skill names, highlights
+  secondary: "#888888",  // dim gray - descriptions, secondary text
+  success: "#00FF00",    // green - success messages
+  error: "#FF4444",      // red - errors
+  warning: "#FFAA00",    // amber - warnings
+  agent: "#FF00FF",      // magenta - agent badges (fallback)
+  bg: "#1a1a1a",         // dark background
+  bgAlt: "#2a2a2a",      // slightly lighter background
+  border: "#444444",     // border color
+  text: "#FFFFFF",       // primary text
+  textDim: "#888888",    // dimmed text
+  header: "#1e1e2e",     // header background
+  statusBar: "#1e1e2e",  // status bar background
+  tabActive: "#334455",  // active tab background
+  tabText: "#FFFF00",    // active tab text (yellow)
+} as const
+
+/**
+ * Compact single/two-letter agent badge with a unique color per agent.
+ * Used in list items and detail views for a tighter layout than full names.
+ */
+export const agentBadges: Record<string, { label: string; color: string }> = {
+  "claude-code":    { label: "C",  color: "#FFAA00" }, // amber
+  cursor:           { label: "Cu", color: "#5599FF" }, // blue
+  windsurf:         { label: "W",  color: "#00CED1" }, // cyan
+  "codex-cli":      { label: "Cx", color: "#FF4444" }, // red
+  opencode:         { label: "O",  color: "#2ECCAA" }, // teal
+  zed:              { label: "Z",  color: "#FFFF00" }, // yellow
+  "github-copilot": { label: "Gh", color: "#8B5CF6" }, // purple
+  cline:            { label: "Cl", color: "#F472B6" }, // pink
+  continue:         { label: "Cn", color: "#34D399" }, // emerald
+  amp:              { label: "A",  color: "#F97316" }, // orange
+  goose:            { label: "G",  color: "#A3E635" }, // lime
+  junie:            { label: "J",  color: "#E879F9" }, // fuchsia
+  "kilo-code":      { label: "K",  color: "#67E8F9" }, // light cyan
+  openclaw:         { label: "Oc", color: "#FB923C" }, // light orange
+  "pear-ai":        { label: "P",  color: "#86EFAC" }, // light green
+  "roo-code":       { label: "R",  color: "#FCA5A5" }, // light red
+  trae:             { label: "T",  color: "#C4B5FD" }, // lavender
+  universal:        { label: "U",  color: "#888888" }, // dim
+}

package/src/views/add-server.tsx

@@ -0,0 +1,240 @@
+import { useState, useCallback } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useStore, useDispatch } from "../store/context.js"
+import { useDb } from "../db/context.js"
+import { testConnection, syncRemoteServer } from "../db/ssh.js"
+import { colors } from "../utils/colors.js"
+
+interface AddServerViewProps {
+  editServerId: string | null
+  onServerCountChange: (count: number) => void
+}
+
+type FieldName = "label" | "host" | "port" | "username" | "skillsBasePath" | "sshKeyPath"
+
+const FIELDS: { name: FieldName; label: string; placeholder: string; defaultValue: string }[] = [
+  { name: "label", label: "Label", placeholder: "e.g. prod-box", defaultValue: "" },
+  { name: "host", label: "Host", placeholder: "e.g. 192.168.1.100 or dev.example.com", defaultValue: "" },
+  { name: "port", label: "Port", placeholder: "22", defaultValue: "22" },
+  { name: "username", label: "Username", placeholder: "e.g. sultan", defaultValue: "" },
+  { name: "skillsBasePath", label: "Skills Base Path", placeholder: "~/.agents/skills", defaultValue: "~/.agents/skills" },
+  { name: "sshKeyPath", label: "SSH Key Path (optional)", placeholder: "(auto-discover)", defaultValue: "" },
+]
+
+export function AddServerView({ editServerId, onServerCountChange }: AddServerViewProps) {
+  const state = useStore()
+  const dispatch = useDispatch()
+  const { servers, skills } = useDb()
+
+  // Load existing server data if editing
+  const existingServer = editServerId ? servers.get(editServerId) : null
+  const isEdit = !!existingServer
+
+  const [values, setValues] = useState<Record<FieldName, string>>(() => {
+    if (existingServer) {
+      return {
+        label: existingServer.label,
+        host: existingServer.host,
+        port: String(existingServer.port),
+        username: existingServer.username,
+        skillsBasePath: existingServer.skillsBasePath,
+        sshKeyPath: existingServer.sshKeyPath ?? "",
+      }
+    }
+    const initial: Record<FieldName, string> = {} as any
+    for (const field of FIELDS) {
+      initial[field.name] = field.defaultValue
+    }
+    return initial
+  })
+
+  const [focusedFieldIndex, setFocusedFieldIndex] = useState(0)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleFieldChange = useCallback((fieldName: FieldName, value: string) => {
+    setValues((prev) => ({ ...prev, [fieldName]: value }))
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    setError(null)
+
+    // Validate required fields
+    if (!values.label.trim()) {
+      setError("Label is required")
+      return
+    }
+    if (!values.host.trim()) {
+      setError("Host is required")
+      return
+    }
+    if (!values.username.trim()) {
+      setError("Username is required")
+      return
+    }
+
+    const port = parseInt(values.port || "22", 10)
+    if (isNaN(port) || port < 1 || port > 65535) {
+      setError("Port must be between 1 and 65535")
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      if (isEdit && editServerId) {
+        servers.update(editServerId, {
+          label: values.label.trim(),
+          host: values.host.trim(),
+          port,
+          username: values.username.trim(),
+          skillsBasePath: values.skillsBasePath.trim() || "~/.agents/skills",
+          sshKeyPath: values.sshKeyPath.trim() || null,
+        })
+
+        dispatch({
+          type: "SHOW_NOTIFICATION",
+          notification: { type: "success", message: `Updated "${values.label}"` },
+        })
+      } else {
+        const newServer = servers.create({
+          label: values.label.trim(),
+          host: values.host.trim(),
+          port,
+          username: values.username.trim(),
+          skillsBasePath: values.skillsBasePath.trim() || "~/.agents/skills",
+          sshKeyPath: values.sshKeyPath.trim() || null,
+        })
+
+        dispatch({
+          type: "SHOW_NOTIFICATION",
+          notification: { type: "info", message: `Testing connection to ${values.host}...` },
+        })
+
+        // Auto-test and auto-sync after creating
+        const testResult = await testConnection(newServer)
+        if (testResult.ok) {
+          dispatch({
+            type: "SHOW_NOTIFICATION",
+            notification: { type: "info", message: `Connected. Syncing skills from ${values.label}...` },
+          })
+          await syncRemoteServer(newServer, servers, skills)
+          dispatch({
+            type: "SHOW_NOTIFICATION",
+            notification: { type: "success", message: `Added and synced "${values.label}"` },
+          })
+        } else {
+          dispatch({
+            type: "SHOW_NOTIFICATION",
+            notification: {
+              type: "error",
+              message: `Added "${values.label}" but connection failed: ${testResult.error}`,
+            },
+          })
+        }
+      }
+
+      onServerCountChange(servers.list().length)
+      setSaving(false)
+      dispatch({ type: "GO_BACK" })
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setSaving(false)
+      if (msg.includes("UNIQUE constraint")) {
+        setError("A server with that host/port/username already exists")
+      } else {
+        setError(msg)
+      }
+    }
+  }, [values, isEdit, editServerId, servers, skills, dispatch, onServerCountChange])
+
+  // Navigate between fields with Tab / Shift+Tab, save with Ctrl+S
+  useKeyboard((key) => {
+    if (state.activeView !== "add-server" && state.activeView !== "edit-server") return
+    if (state.showHelp) return
+
+    // Esc to cancel handled by the layout
+
+    // Tab to next field
+    if (key.name === "tab" && !key.shift) {
+      setFocusedFieldIndex((i) => Math.min(FIELDS.length - 1, i + 1))
+      return
+    }
+
+    // Shift+Tab to previous field
+    if (key.name === "tab" && key.shift) {
+      setFocusedFieldIndex((i) => Math.max(0, i - 1))
+      return
+    }
+
+    // Ctrl+S to save
+    if (key.name === "s" && key.ctrl) {
+      handleSave()
+      return
+    }
+  })
+
+  return (
+    <box style={{ flexDirection: "column", padding: 2, flexGrow: 1 }}>
+      {/* Title */}
+      <text fg={colors.primary}>
+        <strong>{isEdit ? "Edit Server" : "Add Remote Server"}</strong>
+      </text>
+      <text>{" "}</text>
+
+      {/* Form fields */}
+      {FIELDS.map((field, i) => (
+        <box key={field.name} style={{ flexDirection: "column", marginBottom: 0 }}>
+          <text fg={i === focusedFieldIndex ? colors.primary : colors.textDim}>
+            {field.label}
+          </text>
+          <box
+            style={{
+              height: 3,
+              width: 60,
+              border: true,
+              borderColor: i === focusedFieldIndex ? colors.primary : colors.border,
+              paddingLeft: 1,
+              paddingRight: 1,
+            }}
+          >
+            <input
+              placeholder={field.placeholder}
+              focused={i === focusedFieldIndex && !state.showHelp && !saving}
+              defaultValue={values[field.name]}
+              onInput={(value: string) => handleFieldChange(field.name, value)}
+              onSubmit={() => {
+                // When pressing Enter on the last field, save
+                if (i === FIELDS.length - 1) {
+                  handleSave()
+                } else {
+                  setFocusedFieldIndex(i + 1)
+                }
+              }}
+            />
+          </box>
+        </box>
+      ))}
+
+      {/* Error message */}
+      {error ? (
+        <>
+          <text>{" "}</text>
+          <text fg={colors.error}>{error}</text>
+        </>
+      ) : null}
+
+      {/* Status / hints */}
+      <text>{" "}</text>
+      {saving ? (
+        <text fg={colors.primary}>
+          {isEdit ? "Saving..." : "Saving and testing connection..."}
+        </text>
+      ) : (
+        <text fg={colors.textDim}>
+          Tab=next field  Shift+Tab=prev  Ctrl+S=save  Esc=cancel
+        </text>
+      )}
+    </box>
+  )
+}