@skillsgate/tui 0.1.14 → 0.2.0

package/src/views/push-dialog.tsx

@@ -0,0 +1,251 @@
+// packages/tui/src/views/push-dialog.tsx
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { colors } from "../utils/colors.js"
+import type { RemoteServer } from "../db/servers.js"
+import { planPush, applyPush } from "../db/push.js"
+import type { PushPreview, PushResult } from "../db/push.js"
+
+interface PushDialogProps {
+  server: RemoteServer
+  onClose: (result?: PushResult) => void
+}
+
+type Stage = "choose" | "previewing" | "review" | "applying" | "done" | "error"
+
+/**
+ * TUI push dialog. State machine: choose -> previewing -> review -> applying -> done | error.
+ * Keybindings:
+ *   m      toggle Mirror mode (in choose)
+ *   Enter  advance (choose->preview, review->apply if changes exist)
+ *   Esc    cancel / go back
+ */
+export function PushDialog({ server, onClose }: PushDialogProps) {
+  const [mirror, setMirror] = useState(false)
+  const [stage, setStage] = useState<Stage>("choose")
+  const [preview, setPreview] = useState<PushPreview | null>(null)
+  const [result, setResult] = useState<PushResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const totalChanges =
+    (preview?.toAdd.length ?? 0) +
+    (preview?.toUpdate.length ?? 0) +
+    (preview?.toDelete.length ?? 0)
+
+  useKeyboard((key) => {
+    if (stage === "previewing" || stage === "applying") return // no input while running
+
+    if (key.name === "escape") {
+      if (stage === "review") {
+        // Go back to choose
+        setStage("choose")
+        setPreview(null)
+        return
+      }
+      onClose()
+      return
+    }
+
+    if (stage === "choose") {
+      if (key.name === "m") {
+        setMirror((v) => !v)
+        return
+      }
+      if (key.name === "return") {
+        runPreview()
+        return
+      }
+    }
+
+    if (stage === "review") {
+      if (key.name === "return" && totalChanges > 0) {
+        runApply()
+        return
+      }
+    }
+
+    if (stage === "done" || stage === "error") {
+      if (key.name === "return" || key.name === "escape") {
+        onClose(result ?? undefined)
+        return
+      }
+    }
+  })
+
+  async function runPreview() {
+    setStage("previewing")
+    setError(null)
+    try {
+      const p = await planPush(server, { mirror })
+      setPreview(p)
+      setStage("review")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setStage("error")
+    }
+  }
+
+  async function runApply() {
+    if (!preview) return
+    setStage("applying")
+    setError(null)
+    try {
+      const r = await applyPush(server, preview)
+      setResult(r)
+      setStage("done")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setStage("error")
+    }
+  }
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: colors.bg,
+      }}
+    >
+      <box
+        style={{
+          width: 72,
+          border: true,
+          borderColor: colors.primary,
+          backgroundColor: "#1a1a2e",
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          flexDirection: "column",
+        }}
+        title={`Push to ${server.label}`}
+      >
+        {stage === "choose" && (
+          <>
+            <text fg={colors.primary}>
+              <strong>Push to {server.label}</strong>
+            </text>
+            <text>{" "}</text>
+            <text fg={mirror ? colors.textDim : colors.success}>
+              {mirror ? "  " : "> "}[Push] additive — adds/updates only, never deletes
+            </text>
+            <text fg={mirror ? colors.warning : colors.textDim}>
+              {mirror ? "> " : "  "}[Mirror] one-to-one — also deletes remote-only skills
+            </text>
+            <text>{" "}</text>
+            <text fg={colors.textDim}>
+              m=toggle mode  Enter=preview  Esc=cancel
+            </text>
+          </>
+        )}
+
+        {stage === "previewing" && (
+          <>
+            <text fg={colors.textDim}>Computing diff...</text>
+          </>
+        )}
+
+        {stage === "review" && preview && (
+          <>
+            <text fg={colors.primary}>
+              <strong>Preview</strong>
+              {preview.mirror ? (
+                <span fg={colors.warning}> (Mirror mode)</span>
+              ) : null}
+            </text>
+            <text>{" "}</text>
+            <text fg={colors.text}>
+              <span fg={colors.success}>{preview.toAdd.length} to add</span>
+              {"  "}
+              <span fg={colors.warning}>{preview.toUpdate.length} to update</span>
+              {preview.mirror ? (
+                <>
+                  {"  "}
+                  <span fg={colors.error}>{preview.toDelete.length} to delete</span>
+                </>
+              ) : null}
+              {"  "}
+              <span fg={colors.textDim}>{preview.unchanged.length} unchanged</span>
+            </text>
+            <text>{" "}</text>
+            {totalChanges === 0 ? (
+              <text fg={colors.textDim}>Nothing to push — remote already matches local.</text>
+            ) : (
+              <>
+                {preview.toAdd.map((e, i) => (
+                  <text key={`add-${i}`} fg={colors.success}>+ {e.folderName}</text>
+                ))}
+                {preview.toUpdate.map((e, i) => (
+                  <text key={`upd-${i}`} fg={colors.warning}>~ {e.folderName}</text>
+                ))}
+                {preview.toDelete.map((e, i) => (
+                  <text key={`del-${i}`} fg={colors.error}>- {e.folderName}</text>
+                ))}
+              </>
+            )}
+            {preview.mirror && preview.toDelete.length > 0 && (
+              <>
+                <text>{" "}</text>
+                <text fg={colors.error}>
+                  Mirror will delete {preview.toDelete.length} skill{preview.toDelete.length === 1 ? "" : "s"} from remote.
+                </text>
+              </>
+            )}
+            <text>{" "}</text>
+            <text fg={colors.textDim}>
+              {totalChanges > 0
+                ? preview.mirror && preview.toDelete.length > 0
+                  ? "Enter=confirm mirror (destructive)  Esc=back"
+                  : "Enter=apply  Esc=back"
+                : "Esc=close"}
+            </text>
+          </>
+        )}
+
+        {stage === "applying" && (
+          <text fg={colors.textDim}>Pushing to remote...</text>
+        )}
+
+        {stage === "done" && result && (
+          <>
+            <text fg={colors.success}><strong>Push complete</strong></text>
+            <text>{" "}</text>
+            <text fg={colors.text}>
+              <span fg={colors.success}>{result.added} added</span>
+              {"  "}
+              <span fg={colors.warning}>{result.updated} updated</span>
+              {"  "}
+              <span fg={result.deleted > 0 ? colors.error : colors.textDim}>{result.deleted} deleted</span>
+              {"  "}
+              <span fg={colors.textDim}>{result.unchanged} unchanged</span>
+            </text>
+            {result.errors.length > 0 && (
+              <>
+                <text>{" "}</text>
+                <text fg={colors.error}>Errors ({result.errors.length}):</text>
+                {result.errors.map((e, i) => (
+                  <text key={i} fg={colors.error}>  {e.folderName}: {e.message}</text>
+                ))}
+              </>
+            )}
+            <text>{" "}</text>
+            <text fg={colors.textDim}>Enter or Esc to close</text>
+          </>
+        )}
+
+        {stage === "error" && (
+          <>
+            <text fg={colors.error}><strong>Push failed</strong></text>
+            <text>{" "}</text>
+            <text fg={colors.error}>{error || "Unknown error"}</text>
+            <text>{" "}</text>
+            <text fg={colors.textDim}>Enter or Esc to close</text>
+          </>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/views/servers.tsx

@@ -6,6 +6,7 @@ import { ConfirmDialog } from "../components/confirm-dialog.js"
 import { testConnection, syncRemoteServer } from "../db/ssh.js"
 import { colors } from "../utils/colors.js"
 import type { RemoteServer } from "../db/servers.js"
+import { PushDialog } from "./push-dialog.js"
 
 interface ServersViewProps {
   onServerCountChange: (count: number) => void
@@ -40,6 +41,7 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
   const [serverList, setServerList] = useState<RemoteServer[]>(() => servers.list())
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [pendingAction, setPendingAction] = useState<PendingAction>(null)
+  const [pushTarget, setPushTarget] = useState<RemoteServer | null>(null)
   const [syncing, setSyncing] = useState(false)
   const [syncLog, setSyncLog] = useState<string[] | null>(null)
   const [testing, setTesting] = useState(false)
@@ -67,6 +69,7 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
     if (state.activeView !== "servers") return
     if (state.showHelp) return
     if (pendingAction) return
+    if (pushTarget) return
     if (syncing || testing) return
 
     // j/k or arrow keys
@@ -116,6 +119,12 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
       return
     }
 
+    // P = push to selected server
+    if (key.name === "P" && selectedServer) {
+      setPushTarget(selectedServer)
+      return
+    }
+
     // Enter = browse server's skills
     if (key.name === "return" && selectedServer) {
       const count = skillCounts.get(selectedServer.id) ?? 0
@@ -169,18 +178,21 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
     setSyncing(false)
     refreshList()
 
-    if (result.total > 0 || result.removed > 0) {
+    if (result.error) {
       dispatch({
         type: "SHOW_NOTIFICATION",
         notification: {
-          type: "success",
-          message: `Synced ${server.label}: ${result.added} new, ${result.updated} updated, ${result.removed} removed`,
+          type: "error",
+          message: `Sync failed for ${server.label}: ${result.error}`,
         },
       })
-    } else if (result.log.some((l) => l.includes("failed"))) {
+    } else if (result.total > 0 || result.removed > 0) {
       dispatch({
         type: "SHOW_NOTIFICATION",
-        notification: { type: "error", message: `Sync failed for ${server.label}` },
+        notification: {
+          type: "success",
+          message: `Synced ${server.label}: ${result.added} new, ${result.updated} updated, ${result.removed} removed`,
+        },
       })
     } else {
       dispatch({
@@ -190,6 +202,19 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
     }
   }, [servers, skills, dispatch, refreshList])
 
+  // Push dialog
+  if (pushTarget) {
+    return (
+      <PushDialog
+        server={pushTarget}
+        onClose={() => {
+          setPushTarget(null)
+          refreshList()
+        }}
+      />
+    )
+  }
+
   // Confirm dialog for delete
   if (pendingAction?.type === "delete") {
     return (
@@ -324,7 +349,7 @@ export function ServersView({ onServerCountChange }: ServersViewProps) {
           {/* Bottom shortcut hints */}
           <box style={{ height: 1, paddingLeft: 1, backgroundColor: colors.bgAlt }}>
             <text fg={colors.textDim}>
-              S=sync  Enter=browse  a=add  e=edit  d=delete  t=test
+              S=sync  P=push  Enter=browse  a=add  e=edit  d=delete  t=test
             </text>
           </box>
         </box>
@@ -397,7 +422,7 @@ function ServerDetailPanel({ server, skillCount }: ServerDetailPanelProps) {
       ) : null}
 
       <text fg={colors.border}>---</text>
-      <text fg={colors.textDim}>S=sync  t=test  e=edit  d=delete  Enter=browse skills</text>
+      <text fg={colors.textDim}>S=sync  P=push  t=test  e=edit  d=delete  Enter=browse skills</text>
     </box>
   )
 }

package/src/data/use-auth.ts

@@ -1,136 +0,0 @@
-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
-}

package/src/data/use-favorites.ts

@@ -1,161 +0,0 @@
-import { useState, useEffect, useCallback } from "react"
-import { useStore, useDispatch } from "../store/context.js"
-import { SKILLSGATE_API_BASE } from "./api-client.js"
-
-/**
- * Shape returned by the favorites API endpoint.
- */
-export interface FavoriteSkill {
-  id: string
-  name: string
-  description: string
-  summary?: string
-  categories: string[]
-  capabilities?: string[]
-  keywords?: string[]
-  githubUrl?: string
-  githubStars?: number | null
-  installCommand?: string | null
-  slug?: string
-  favoriteId?: string
-}
-
-const API_BASE = SKILLSGATE_API_BASE
-
-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/views/favorites.tsx

@@ -1,19 +0,0 @@
-import { colors } from "../utils/colors.js"
-
-/**
- * Favorites view: Coming soon placeholder.
- * Favorites require authentication which is not yet available in the public TUI.
- */
-export function FavoritesView() {
-  return (
-    <box style={{ flexDirection: "column", padding: 2 }}>
-      <text fg={colors.primary}>
-        <strong>Favorites</strong>
-      </text>
-      <text>{" "}</text>
-      <text fg={colors.text}>
-        Coming soon. Favorites will be available once accounts are launched.
-      </text>
-    </box>
-  )
-}