@kmiyh/pi-skills-menu 1.1.0 → 1.2.0

package/README.md

@@ -67,7 +67,7 @@ After that, the skill is inserted into the editor so it will be used by Pi when
 
 Press:
 
-- `x` — toggle the selected skill between enabled and disabled
+- `Ctrl+X` — toggle the selected skill between enabled and disabled
 
 This also works for skills that come from installed libraries/packages.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kmiyh/pi-skills-menu",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Pi extension that moves skills into a dedicated /skills menu with browsing, preview, editing, and AI-assisted creation.",
   "type": "module",
   "keywords": [

package/src/create-skill.ts

@@ -546,6 +546,7 @@ export type SkillCreationThinkingLevel = ThinkingLevel | "off";
 
 export interface SkillGenerationOptions {
 	thinkingLevel?: SkillCreationThinkingLevel;
+	signal?: AbortSignal;
 }
 
 class SingleLineText implements Component {
@@ -863,11 +864,21 @@ function getGenerationStatusLabel(
 		: `Generating skill draft using ${modelLabel}...`;
 }
 
+function isAbortError(error: unknown): boolean {
+	if (!error || typeof error !== "object") return false;
+	const name = "name" in error ? String((error as { name?: unknown }).name) : "";
+	const message = "message" in error ? String((error as { message?: unknown }).message) : "";
+	return name === "AbortError" || message.toLowerCase().includes("aborted");
+}
+
 async function generateSkillDraft(
 	ctx: ExtensionContext,
 	answers: SkillCreationAnswers,
 	options?: SkillGenerationOptions,
 ): Promise<string> {
+	if (options?.signal?.aborted) {
+		throw new Error("Generation aborted");
+	}
 	if (!ctx.model) {
 		return buildFallbackSkill(answers);
 	}
@@ -910,9 +921,13 @@ async function generateSkillDraft(
 	const response = await completeSimple(
 		ctx.model,
 		{ systemPrompt: GENERATE_SKILL_SYSTEM_PROMPT, messages: [userMessage] },
-		{ apiKey: auth.apiKey, headers: auth.headers, ...(reasoning ? { reasoning } : {}) },
+		{ apiKey: auth.apiKey, headers: auth.headers, ...(reasoning ? { reasoning } : {}), ...(options?.signal ? { signal: options.signal } : {}) },
 	);
 
+	if (options?.signal?.aborted) {
+		throw new Error("Generation aborted");
+	}
+
 	const generated = response.content
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
 		.map((c) => c.text)
@@ -942,12 +957,45 @@ async function runDraftGeneration(
 
 		generateSkillDraft(ctx, answers, options)
 			.then(done)
-			.catch(() => done(buildFallbackSkill(answers)));
+			.catch((error) => done(isAbortError(error) ? null : buildFallbackSkill(answers)));
 
 		return loader;
 	});
 }
 
+async function saveCreatedSkill(
+	ctx: ExtensionContext,
+	answers: SkillCreationAnswers,
+	draft: string,
+): Promise<SkillEntry | null> {
+	let parsedSkill: ParsedSkillDraft;
+	try {
+		parsedSkill = parseSkillDraft(draft, answers.name);
+	} catch (error) {
+		ctx.ui.notify(error instanceof Error ? error.message : "Invalid generated SKILL.md", "error");
+		return null;
+	}
+
+	const targetDir = getTargetDir(ctx, answers.location, answers.name);
+	const targetPath = join(targetDir, "SKILL.md");
+	await mkdir(targetDir, { recursive: true });
+	await writeFile(targetPath, parsedSkill.raw, "utf8");
+
+	ctx.ui.notify(`Created skill: ${targetPath}`, "info");
+	return {
+		name: parsedSkill.name,
+		description: parsedSkill.description,
+		path: targetPath,
+		content: parsedSkill.content,
+		frontmatter: parsedSkill.frontmatter,
+		scope: answers.location === "global" ? "user" : "project",
+		origin: "top-level",
+		source: "auto",
+		baseDir: targetDir,
+		enabled: true,
+	};
+}
+
 async function collectAnswers(ctx: ExtensionContext): Promise<SkillCreationAnswers | null> {
 	const answers = await ctx.ui.custom<SkillCreationAnswers | null>((tui, _theme, _kb, done) => {
 		const component = new SkillCreationWizard(ctx.ui.theme, done);
@@ -992,30 +1040,36 @@ export async function createSkillFromAnswers(
 		return null;
 	}
 
-	let parsedSkill: ParsedSkillDraft;
+	return await saveCreatedSkill(ctx, answers, draft);
+}
+
+export async function createSkillFromAnswersWithoutUI(
+	ctx: ExtensionContext,
+	answers: SkillCreationAnswers,
+	options?: SkillGenerationOptions,
+): Promise<SkillEntry | null> {
+	const targetDir = getTargetDir(ctx, answers.location, answers.name);
+	const targetPath = join(targetDir, "SKILL.md");
+	if (existsSync(targetPath)) {
+		ctx.ui.notify(`Skill already exists: ${targetPath}`, "error");
+		return null;
+	}
+
+	let draft: string;
 	try {
-		parsedSkill = parseSkillDraft(draft, answers.name);
+		draft = await generateSkillDraft(ctx, answers, options);
 	} catch (error) {
-		ctx.ui.notify(error instanceof Error ? error.message : "Invalid generated SKILL.md", "error");
-		return null;
+		if (isAbortError(error) || options?.signal?.aborted) {
+			return null;
+		}
+		draft = buildFallbackSkill(answers);
 	}
 
-	await mkdir(targetDir, { recursive: true });
-	await writeFile(targetPath, parsedSkill.raw, "utf8");
+	if (options?.signal?.aborted) {
+		return null;
+	}
 
-	ctx.ui.notify(`Created skill: ${targetPath}`, "info");
-	return {
-		name: parsedSkill.name,
-		description: parsedSkill.description,
-		path: targetPath,
-		content: parsedSkill.content,
-		frontmatter: parsedSkill.frontmatter,
-		scope: answers.location === "global" ? "user" : "project",
-		origin: "top-level",
-		source: "auto",
-		baseDir: targetDir,
-		enabled: true,
-	};
+	return await saveCreatedSkill(ctx, answers, draft);
 }
 
 export async function createNewSkill(

package/src/index.ts

@@ -1,5 +1,5 @@
 import type { ExtensionAPI, ExtensionContext, InputEventResult } from "@mariozechner/pi-coding-agent";
-import { createSkillFromAnswers } from "./create-skill.js";
+import { createSkillFromAnswersWithoutUI } from "./create-skill.js";
 import { deleteSkill } from "./delete-skill.js";
 import { detectExtensionInstallScope } from "./extension-scope.js";
 import { expandSkillMarkers, hasSkillMarker, insertSkillMarker, removeIncompleteSkillMarkerLines } from "./markers.js";
@@ -7,8 +7,7 @@ import { loadSkillRegistry } from "./skill-registry.js";
 import { ensureSkillCommandsHidden } from "./settings-toggle.js";
 import { setSkillEnabled } from "./skill-enabled-toggle.js";
 import type { ExtensionInstallScope, SkillRegistry } from "./types.js";
-import { showSkillPreview } from "./ui/skill-preview.js";
-import { showSkillsSelector } from "./ui/skills-selector.js";
+import { showSkillsManager } from "./ui/skills-manager.js";
 
 const EMPTY_REGISTRY: SkillRegistry = {
 	skills: [],
@@ -107,81 +106,42 @@ export default function skillsMenuExtension(pi: ExtensionAPI) {
 				return;
 			}
 
-			let selectorIndex = 0;
-			let selectorQuery = "";
-			while (true) {
-				try {
-					await refreshRegistry(ctx.cwd);
-				} catch (error) {
-					console.error("skills-menu: failed to refresh skills registry", error);
-					ctx.ui.notify("Failed to load skills list", "error");
-					return;
-				}
-
-				const selection = await showSkillsSelector(ctx, registry, selectorIndex, selectorQuery);
-				if (!selection) {
-					return;
-				}
-				selectorIndex = selection.selectedIndex;
-				selectorQuery = selection.query;
-
-				if (selection.type === "create") {
-					const createdSkill = await createSkillFromAnswers(ctx, selection.answers, {
-						thinkingLevel: pi.getThinkingLevel(),
-					});
-					if (!createdSkill) {
-						continue;
-					}
-					await refreshRegistry(ctx.cwd);
-					const createdSkillIndex = registry.allSkills.findIndex((skill) => skill.path === createdSkill.path);
-					selectorIndex = createdSkillIndex >= 0 ? createdSkillIndex + 1 : 0;
-					selectorQuery = "";
-					continue;
-				}
-
-				if (selection.type === "toggle") {
+			try {
+				await refreshRegistry(ctx.cwd);
+			} catch (error) {
+				console.error("skills-menu: failed to refresh skills registry", error);
+				ctx.ui.notify("Failed to load skills list", "error");
+				return;
+			}
+
+			const selection = await showSkillsManager(ctx, registry, {
+				onCreate: async (answers, signal) => await createSkillFromAnswersWithoutUI(ctx, answers, {
+					thinkingLevel: pi.getThinkingLevel(),
+					signal,
+				}),
+				onDelete: async (skill) => {
 					try {
-						await setSkillEnabled(ctx.cwd, selection.skill, !selection.skill.enabled);
-						await refreshRegistry(ctx.cwd);
-						ctx.ui.notify(
-							selection.skill.enabled
-								? `Disabled ${selection.skill.name}. Run /reload to fully apply the change.`
-								: `Enabled ${selection.skill.name}. Run /reload to fully apply the change.`,
-							"info",
-						);
+						return await deleteSkill(ctx, skill);
 					} catch (error) {
-						console.error("skills-menu: failed to toggle skill", error);
-						ctx.ui.notify(error instanceof Error ? error.message : "Failed to update skill visibility", "error");
-					}
-					continue;
-				}
-
-				if (selection.type === "preview") {
-					await showSkillPreview(ctx, selection.skill);
-					continue;
-				}
-
-				if (selection.type === "delete") {
-					const confirmed = await ctx.ui.confirm(
-						"Delete skill",
-						`Delete ${selection.skill.name}? This removes the skill from disk and cannot be undone.`,
-					);
-					if (!confirmed) {
-						continue;
+						console.error("skills-menu: failed to delete skill", error);
+						ctx.ui.notify("Failed to delete skill", "error");
+						return false;
 					}
+				},
+				onToggle: async (skill, enabled) => {
 					try {
-						await deleteSkill(ctx, selection.skill);
-						selectorIndex = Math.max(0, selectorIndex - 1);
+						await setSkillEnabled(ctx.cwd, skill, enabled);
 					} catch (error) {
-						console.error("skills-menu: failed to delete skill", error);
-						ctx.ui.notify("Failed to delete skill", "error");
+						console.error("skills-menu: failed to toggle skill", error);
+						throw error instanceof Error ? error : new Error("Failed to update skill visibility");
 					}
-					continue;
-				}
-
-				insertSkillMarker(ctx, selection.skill);
+				},
+				onRefresh: async () => await refreshRegistry(ctx.cwd),
+			});
+			if (!selection) {
 				return;
 			}
+			insertSkillMarker(ctx, selection);
 		},
 	});
 
@@ -207,7 +167,7 @@ export default function skillsMenuExtension(pi: ExtensionAPI) {
 			return { action: "continue" };
 		}
 
-		if (!currentCwd || currentCwd !== ctx.cwd || registry.skills.length === 0) {
+		if (!currentCwd || currentCwd !== ctx.cwd || registry.allSkills.length === 0) {
 			try {
 				await refreshRegistry(ctx.cwd);
 			} catch (error) {

package/src/skill-registry.ts

@@ -3,10 +3,6 @@ import { parseSkillFile } from "./skill-parser.js";
 import type { SkillEntry, SkillRegistry } from "./types.js";
 
 function compareSkills(a: SkillEntry, b: SkillEntry): number {
-	if (a.enabled !== b.enabled) {
-		return a.enabled ? -1 : 1;
-	}
-
 	const scopeRank = (scope: SkillEntry["scope"]) => {
 		switch (scope) {
 			case "project":

package/src/ui/skill-preview.ts

@@ -37,7 +37,7 @@ function getSkillLocation(skill: SkillEntry): string {
 }
 
 function getSkillLocationLabel(skill: SkillEntry): string {
-	return skill.origin === "package" ? "package" : "path";
+	return skill.origin === "package" ? "package • " : "";
 }
 
 function formatScalar(value: unknown): string {
@@ -271,7 +271,7 @@ class ScrollableSkillPreview implements Component {
 	private buildContentLines(innerWidth: number): string[] {
 		const content = new Container();
 		content.addChild(new Text(this.theme.fg("accent", this.theme.bold(this.skill.name)), 0, 0));
-		content.addChild(new Text(this.theme.fg("muted", `${getSkillLocationLabel(this.skill)} • ${getSkillLocation(this.skill)}`), 0, 0));
+		content.addChild(new Text(this.theme.fg("muted", `${getSkillLocationLabel(this.skill)}${getSkillLocation(this.skill)}`), 0, 0));
 		content.addChild(new Spacer(1));
 		content.addChild(new Text(this.theme.fg("muted", this.theme.bold("Metadata")), 0, 0));
 		content.addChild(new Text(this.theme.fg("dim", buildFrontmatterBlock(this.skill)), 0, 0));
@@ -292,7 +292,7 @@ class ScrollableSkillPreview implements Component {
 			: "";
 		const editInfo = this.editable ? " • e edit • r rename" : "";
 		return truncateToWidth(
-			this.theme.fg("dim", `↑/↓ scroll • pgup/pgdn jump • home/end${editInfo} • esc back${scrollInfo}`),
+			this.theme.fg("dim", `↑/↓ scroll${editInfo} • esc back${scrollInfo}`),
 			innerWidth,
 			this.theme.fg("dim", "..."),
 		);