yourskills 0.4.0 → 0.4.3

package/dist/main.js

@@ -909,6 +909,24 @@ function SearchInput({
   });
 }
 
+// src/ui/viewport.ts
+import { useWindowSize as useWindowSize2 } from "ink";
+var MIN_ROWS = 3;
+var MAX_ROWS = 20;
+function useViewport({
+  cursor,
+  total,
+  chrome
+}) {
+  const { rows } = useWindowSize2();
+  const size = Math.max(MIN_ROWS, Math.min(MAX_ROWS, rows - chrome));
+  const first = Math.max(0, Math.min(cursor - Math.floor(size / 2), total - size));
+  return { first, size };
+}
+function position(cursor, total) {
+  return `${total > 0 ? cursor + 1 : 0}/${total}`;
+}
+
 // src/ui/command.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function filterCommands(groups, query) {
@@ -923,6 +941,20 @@ function filterCommands(groups, query) {
 function flattenCommands(groups) {
   return groups.flatMap((group) => group.items);
 }
+function windowGroups(groups, first, count) {
+  const out = [];
+  let index = 0;
+  for (const group of groups) {
+    const items = group.items.filter((_, i) => {
+      const row = index + i;
+      return row >= first && row < first + count;
+    });
+    index += group.items.length;
+    if (items.length > 0)
+      out.push({ group: group.group, items });
+  }
+  return out;
+}
 var POINTER = 2;
 var GAP2 = 2;
 var LABEL_CAP = 22;
@@ -969,6 +1001,7 @@ function CommandPalette({
   query,
   cursor,
   width,
+  chrome = 11,
   placeholder = "type a command or search",
   emptyMessage = "No matching commands."
 }) {
@@ -977,6 +1010,12 @@ function CommandPalette({
   const current = rows[cursor];
   const interior = width - FRAME_CHROME;
   const column = valueColumn(rows);
+  const { first, size } = useViewport({
+    cursor,
+    total: rows.length,
+    chrome: chrome + Math.max(0, visible.length * 2 - 1)
+  });
+  const paged = windowGroups(visible, first, size);
   return /* @__PURE__ */ jsxs5(Box3, {
     flexDirection: "column",
     children: [
@@ -998,7 +1037,7 @@ function CommandPalette({
       rows.length === 0 ? /* @__PURE__ */ jsx5(Text4, {
         dimColor: true,
         children: emptyMessage
-      }) : visible.map((group, i) => /* @__PURE__ */ jsxs5(Box3, {
+      }) : paged.map((group, i) => /* @__PURE__ */ jsxs5(Box3, {
         flexDirection: "column",
         children: [
           i > 0 ? /* @__PURE__ */ jsx5(Divider, {
@@ -1159,6 +1198,7 @@ function LoginScreen({
   const { exit } = useApp();
   const width = useFrameWidth();
   const [state, setState] = useState3({ phase: "starting" });
+  const [finished, setFinished] = useState3(false);
   useEffect2(() => {
     let live = true;
     (async () => {
@@ -1179,15 +1219,18 @@ function LoginScreen({
       }
       if (!live)
         return;
+      setFinished(true);
       if (onDone)
         onDone();
-      else
-        exit();
     })();
     return () => {
       live = false;
     };
-  }, [exit, onError, onDone]);
+  }, [onError, onDone]);
+  useEffect2(() => {
+    if (finished && !onDone)
+      exit();
+  }, [finished, onDone, exit]);
   if (state.phase === "done") {
     return /* @__PURE__ */ jsx8(Frame, {
       title: "login",
@@ -1485,7 +1528,7 @@ function catalogReport(title, skills) {
   };
 }
 // src/catalog/screens/browser.tsx
-import { Box as Box9, Text as Text11, useApp as useApp5, useInput as useInput5, useWindowSize as useWindowSize2 } from "ink";
+import { Box as Box9, Text as Text11, useApp as useApp5, useInput as useInput5 } from "ink";
 import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState7 } from "react";
 
 // src/manifest/manifest.ts
@@ -1597,7 +1640,8 @@ import { createRequire } from "node:module";
 import { dirname as dirname3, join as join5 } from "node:path";
 function skillsAddArgv(location, opts = {}) {
   const path = location.path.replace(/^\/+|\/+$/g, "");
-  const spec = `${location.source}${path ? `/${path}` : ""}#${location.ref}`;
+  const at = location.ref ? `#${location.ref}` : "";
+  const spec = `${location.source}${path ? `/${path}` : ""}${at}`;
   const argv = ["add", spec, "--yes"];
   if (opts.scope !== "project")
     argv.push("--global");
@@ -1676,7 +1720,7 @@ function manifestEntryFor(location, reached, bundle) {
   return {
     name: location.skillName,
     externalId: location.externalId,
-    ref: location.ref,
+    ref: location.ref ?? "",
     source: location.source,
     path,
     ...bundle ? { bundle } : {},
@@ -1907,7 +1951,7 @@ async function adoptSkills(client, where, plan) {
       if (event.kind === "installed")
         outcome.adopted.push({
           name: event.location.skillName,
-          ref: event.location.ref
+          ref: event.location.ref ?? ""
         });
       else if (event.kind === "failed")
         outcome.failed.push({ name: event.name, message: event.message });
@@ -1946,7 +1990,7 @@ function importReport(nearest, plan, outcome) {
     lines.push({
       mark: "ok",
       text: row.name.padEnd(width),
-      note: `adopted at ${row.ref.slice(0, 7)}`
+      note: row.ref ? `adopted at ${row.ref.slice(0, 7)}` : "adopted, unpinned"
     });
   for (const name of outcome.pending)
     lines.push({
@@ -2002,7 +2046,8 @@ import { useEffect as useEffect4, useState as useState5 } from "react";
 
 // src/install/lines.ts
 function where(location) {
-  return `${location.source}/${location.path}@${location.ref.slice(0, 8)}`;
+  const at = location.ref ? `@${location.ref.slice(0, 8)}` : " (unpinned)";
+  return `${location.source}/${location.path}${at}`;
 }
 function put(lines, name, progress, deprecated = false) {
   const at = lines.findIndex((l) => l.name === name);
@@ -2232,13 +2277,15 @@ function Installer({
         return;
       setDone(true);
       onDone?.(summarise(current));
-      if (exitWhenDone)
-        exit();
     })();
     return () => {
       live = false;
     };
-  }, [stream, onDone, exit, exitWhenDone]);
+  }, [stream, onDone]);
+  useEffect4(() => {
+    if (done && exitWhenDone)
+      exit();
+  }, [done, exit, exitWhenDone]);
   const counts = done ? receipt(lines) : null;
   const pending = counts?.pending ?? 0;
   const questions = counts?.questions ?? 0;
@@ -2777,9 +2824,6 @@ function runFor(command, where, connect) {
 // src/catalog/screens/browser.tsx
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var TABS = ["bundles", "skills"];
-function pageSize(rows) {
-  return Math.max(3, Math.min(20, rows - 11));
-}
 function matches(row, query) {
   if (query.length === 0)
     return true;
@@ -2817,7 +2861,6 @@ function BrowserScreen({
 }) {
   const { exit } = useApp5();
   const width = useFrameWidth();
-  const { rows: terminalRows } = useWindowSize2();
   const [catalog, setCatalog] = useState7(null);
   const [tab, setTab] = useState7(initialTab);
   const [query, setQuery] = useState7(initialQuery);
@@ -2860,6 +2903,11 @@ function BrowserScreen({
     setCursor((c) => Math.max(0, Math.min(c, visible.length - 1)));
   }, [visible.length]);
   const selected = picked[tab];
+  const { first, size } = useViewport({
+    cursor,
+    total: visible.length,
+    chrome: 11
+  });
   const start = useCallback2(() => {
     const names = selected.size > 0 ? [...selected] : visible[cursor] ? [visible[cursor].name] : [];
     if (names.length === 0)
@@ -2875,9 +2923,9 @@ function BrowserScreen({
     } else if (key.downArrow) {
       setCursor((c) => Math.min(visible.length - 1, c + 1));
     } else if (key.pageUp) {
-      setCursor((c) => Math.max(0, c - pageSize(terminalRows)));
+      setCursor((c) => Math.max(0, c - size));
     } else if (key.pageDown) {
-      setCursor((c) => Math.min(visible.length - 1, c + pageSize(terminalRows)));
+      setCursor((c) => Math.min(visible.length - 1, c + size));
     } else if (key.tab) {
       setTab((t) => t === "bundles" ? "skills" : "bundles");
       setCursor(0);
@@ -2935,9 +2983,7 @@ function BrowserScreen({
       })
     });
   }
-  const size = pageSize(terminalRows);
-  const first = Math.max(0, Math.min(cursor - Math.floor(size / 2), visible.length - size));
-  const page = visible.slice(Math.max(0, first), Math.max(0, first) + size);
+  const page = visible.slice(first, first + size);
   const names = nameWidth(visible.length > 0 ? visible : catalog[tab]);
   return /* @__PURE__ */ jsx13(Frame, {
     title: "yourskills",
@@ -2974,7 +3020,7 @@ function BrowserScreen({
           width: width - 2,
           names,
           selectable: true,
-          cursor: Math.max(0, first) + i === cursor,
+          cursor: first + i === cursor,
           selected: selected.has(row.name)
         }, row.name)),
         /* @__PURE__ */ jsx13(Divider, {
@@ -2984,7 +3030,7 @@ function BrowserScreen({
           children: [
             /* @__PURE__ */ jsx13(Text11, {
               dimColor: true,
-              children: `${visible.length > 0 ? cursor + 1 : 0}/${visible.length}`
+              children: position(cursor, visible.length)
             }),
             selected.size > 0 ? /* @__PURE__ */ jsx13(Text11, {
               color: tone.notice,
@@ -3026,7 +3072,6 @@ function CatalogScreen({
       if (!live)
         return;
       setRows(result);
-      exit();
     }).catch((error) => {
       if (live)
         onError(error);
@@ -3034,7 +3079,11 @@ function CatalogScreen({
     return () => {
       live = false;
     };
-  }, [load, exit, onError]);
+  }, [load, onError]);
+  useEffect7(() => {
+    if (rows !== null)
+      exit();
+  }, [rows, exit]);
   if (rows === null) {
     return /* @__PURE__ */ jsx14(Frame, {
       title,
@@ -5768,7 +5817,7 @@ import { realpathSync } from "node:fs";
 // package.json
 var package_default = {
   name: "yourskills",
-  version: "0.4.0",
+  version: "0.4.3",
   description: "Browse, install and keep up to date the agent skills and bundles your team publishes on yourskills.",
   license: "UNLICENSED",
   homepage: "https://yourskills.store",
@@ -8545,11 +8594,20 @@ function PickScreen({
   useEffect8(() => {
     setCursor((c) => Math.max(0, Math.min(c, visible.length - 1)));
   }, [visible.length]);
+  const { first, size } = useViewport({
+    cursor,
+    total: visible.length,
+    chrome: 9
+  });
   useInput6((input, key) => {
     if (key.upArrow) {
       setCursor((c) => Math.max(0, c - 1));
     } else if (key.downArrow) {
       setCursor((c) => Math.min(visible.length - 1, c + 1));
+    } else if (key.pageUp) {
+      setCursor((c) => Math.max(0, c - size));
+    } else if (key.pageDown) {
+      setCursor((c) => Math.min(visible.length - 1, c + size));
     } else if (key.return) {
       const names = picked.size > 0 ? [...picked] : visible[cursor] ? [visible[cursor].name] : [];
       if (names.length > 0)
@@ -8580,6 +8638,7 @@ function PickScreen({
     }
   });
   const names = nameWidth(rows);
+  const page = visible.slice(first, first + size);
   return /* @__PURE__ */ jsx16(Frame, {
     title,
     width,
@@ -8607,12 +8666,12 @@ function PickScreen({
         }) : visible.length === 0 ? /* @__PURE__ */ jsx16(Text14, {
           dimColor: true,
           children: `Nothing matches "${query}".`
-        }) : visible.map((row, i) => /* @__PURE__ */ jsx16(SkillRow, {
+        }) : page.map((row, i) => /* @__PURE__ */ jsx16(SkillRow, {
           row,
           width: width - 2,
           names,
           selectable: true,
-          cursor: i === cursor,
+          cursor: first + i === cursor,
           selected: single ? row.name === marked : picked.has(row.name)
         }, row.name)),
         /* @__PURE__ */ jsx16(Divider, {
@@ -8620,6 +8679,10 @@ function PickScreen({
         }),
         /* @__PURE__ */ jsxs14(Box12, {
           children: [
+            /* @__PURE__ */ jsx16(Text14, {
+              dimColor: true,
+              children: `${position(cursor, visible.length)}  `
+            }),
             picked.size > 0 && !single ? /* @__PURE__ */ jsx16(Text14, {
               color: tone.notice,
               children: `${mark.selected} ${picked.size} marked   `

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "yourskills",
-	"version": "0.4.0",
+	"version": "0.4.3",
 	"description": "Browse, install and keep up to date the agent skills and bundles your team publishes on yourskills.",
 	"license": "UNLICENSED",
 	"homepage": "https://yourskills.store",