add-skill-kit 3.2.3 → 3.2.4

package/lib/agent-cli/lib/ui/backup-ui.js

@@ -0,0 +1,107 @@
+/**
+ * Backup UI - Interactive backup and restore
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { createBackup, listBackups, restoreBackup, pruneBackups } from "../backup.js";
+
+/**
+ * Interactive backup/restore menu
+ */
+export async function runBackupUI() {
+    p.intro("Backup & Restore (Press ESC to return)");
+
+    while (true) {
+
+        const action = await p.select({
+            message: "What would you like to do?",
+            options: [
+                { value: "create", label: "💾 Create Backup", hint: "Save current lessons & settings" },
+                { value: "restore", label: "♻️  Restore Backup", hint: "Recover from previous backup" },
+                { value: "list", label: "📋 List Backups", hint: "View available backups" },
+                { value: "prune", label: "🗑️  Prune Old", hint: "Keep only last 5 backups" },
+                { value: "back", label: "← Back", hint: "Return to main menu" }
+            ]
+        });
+
+        if (p.isCancel(action) || action === "back") {
+            return;
+        }
+
+        switch (action) {
+            case "create": {
+                const result = createBackup();
+                if (result) {
+                    p.note(
+                        `Backup created:\n${pc.dim(result.path)}`,
+                        pc.green("Success")
+                    );
+                    break; // Continue to show menu again
+                } else {
+                    p.note("Failed to create backup", pc.red("Error"));
+                }
+                break;
+            }
+
+            case "restore": {
+                const backups = listBackups();
+                if (backups.length === 0) {
+                    p.note("No backups found", "Info");
+                    break;
+                }
+
+                const selected = await p.select({
+                    message: "Select backup to restore:",
+                    options: backups.map(b => ({
+                        value: b.path,
+                        label: b.name,
+                        hint: b.date.toLocaleString()
+                    }))
+                });
+
+                if (p.isCancel(selected)) break;
+
+                const confirm = await p.confirm({
+                    message: "Restore this backup? Current data will be overwritten."
+                });
+
+                if (confirm) {
+                    const success = restoreBackup(selected);
+                    if (success) {
+                        p.note("Backup restored successfully", pc.green("Success"));
+                    } else {
+                        p.note("Failed to restore backup", pc.red("Error"));
+                    }
+                }
+                break;
+            }
+
+            case "list": {
+                const backups = listBackups();
+                if (backups.length === 0) {
+                    p.note("No backups found", "Info");
+                } else {
+                    const list = backups.map(b =>
+                        `• ${b.name}\n  ${pc.dim(b.date.toLocaleString())}`
+                    ).join("\n\n");
+                    p.note(list, `${backups.length} Backup(s)`);
+                }
+                break;
+            }
+
+            case "prune": {
+                const confirm = await p.confirm({
+                    message: "Delete old backups, keep only last 5?"
+                });
+
+                if (confirm) {
+                    pruneBackups(5);
+                    p.note("Old backups pruned", pc.green("Done"));
+                }
+                break;
+            }
+        }
+    }
+}
+
+export default runBackupUI;

package/lib/agent-cli/lib/ui/clack-helpers.js

@@ -0,0 +1,317 @@
+/**
+ * Clack UI Helpers - Agent Skill Kit
+ * Reusable UI patterns for consistent CLI experience
+ */
+
+import * as p from '@clack/prompts';
+import color from 'picocolors';
+
+// ============================================================================
+// COLOR SCHEME
+// ============================================================================
+
+export const theme = {
+    // Primary colors
+    primary: color.cyan,
+    success: color.green,
+    error: color.red,
+    warning: color.yellow,
+    info: color.blue,
+
+    // Text styles
+    dim: color.dim,
+    bold: color.bold,
+
+    // Brand color
+    brand: (text) => color.bgCyan(color.black(text)),
+};
+
+// ============================================================================
+// INTRO & OUTRO
+// ============================================================================
+
+/**
+ * Show branded intro banner
+ * @param {string} title - Title text to display
+ */
+export function showIntro(title) {
+    console.clear();
+    p.intro(theme.brand(` ${title} `));
+}
+
+/**
+ * Show success outro
+ * @param {string} message - Success message
+ */
+export function showSuccess(message) {
+    p.outro(theme.success(`✓ ${message}`));
+}
+
+/**
+ * Show error outro
+ * @param {string} message - Error message
+ */
+export function showError(message) {
+    p.outro(theme.error(`✗ ${message}`));
+}
+
+/**
+ * Show info outro
+ * @param {string} message - Info message
+ */
+export function showInfo(message) {
+    p.outro(theme.info(message));
+}
+
+// ============================================================================
+// MENUS
+// ============================================================================
+
+/**
+ * Show main action menu with Exit option
+ * @param {Object} options
+ * @param {string} options.message - Menu message
+ * @param {Array} options.items - Menu items {value, label, hint?}
+ * @param {boolean} options.includeExit - Include Exit option (default: true)
+ * @param {boolean} options.allowCancel - Allow ESC to return to parent (default: true)
+ * @returns {Promise<string|null>} Selected value or null if cancelled
+ */
+export async function showActionMenu({ message, items, includeExit = true, allowCancel = true }) {
+    const menuItems = [...items];
+
+    if (includeExit) {
+        menuItems.push({ value: 'exit', label: 'Exit', hint: 'Close CLI' });
+    }
+
+    const selected = await p.select({
+        message,
+        options: menuItems,
+    });
+
+    // Handle cancel - return null to let parent decide
+    if (p.isCancel(selected)) {
+        if (allowCancel) {
+            return null; // Let parent handle navigation
+        } else {
+            p.cancel('Operation cancelled.');
+            process.exit(0);
+        }
+    }
+
+    // Handle explicit exit
+    if (selected === 'exit') {
+        p.cancel('Goodbye! 👋');
+        process.exit(0);
+    }
+
+    return selected;
+}
+
+/**
+ * Show confirmation prompt
+ * @param {string} message - Confirmation message
+ * @param {boolean} initialValue - Default value
+ * @returns {Promise<boolean>}
+ */
+export async function confirm(message, initialValue = false) {
+    const result = await p.confirm({
+        message,
+        initialValue,
+    });
+
+    if (p.isCancel(result)) {
+        p.cancel('Operation cancelled.');
+        process.exit(0);
+    }
+
+    return result;
+}
+
+// ============================================================================
+// INPUTS
+// ============================================================================
+
+/**
+ * Get text input with validation
+ * @param {Object} options
+ * @param {string} options.message - Input message
+ * @param {string} options.placeholder - Placeholder text
+ * @param {Function} options.validate - Validation function
+ * @returns {Promise<string>}
+ */
+export async function textInput({ message, placeholder = '', validate }) {
+    const result = await p.text({
+        message,
+        placeholder,
+        validate,
+    });
+
+    if (p.isCancel(result)) {
+        p.cancel('Operation cancelled.');
+        process.exit(0);
+    }
+
+    return result;
+}
+
+// ============================================================================
+// PROGRESS
+// ============================================================================
+
+/**
+ * Create and manage a spinner
+ * @param {string} message - Initial message
+ * @returns {Object} Spinner instance with update/stop methods
+ */
+export function createSpinner(message) {
+    const spinner = p.spinner();
+    spinner.start(message);
+
+    return {
+        update: (msg) => {
+            spinner.message(msg);
+        },
+        stop: (msg) => {
+            spinner.stop(msg);
+        },
+        stopSuccess: (msg) => {
+            spinner.stop(theme.success(`✓ ${msg}`));
+        },
+        stopError: (msg) => {
+            spinner.stop(theme.error(`✗ ${msg}`));
+        },
+    };
+}
+
+// ============================================================================
+// NOTES & INFO BOXES
+// ============================================================================
+
+/**
+ * Show info note box
+ * @param {string} content - Note content
+ * @param {string} title - Note title (optional)
+ */
+export function showNote(content, title = '') {
+    p.note(content, title);
+}
+
+/**
+ * Show success note
+ * @param {string} content - Note content
+ * @param {string} title - Note title
+ */
+export function showSuccessNote(content, title = '✓ Success') {
+    p.note(content, theme.success(title));
+}
+
+/**
+ * Show error note
+ * @param {string} content - Note content
+ * @param {string} title - Note title
+ */
+export function showErrorNote(content, title = '✗ Error') {
+    p.note(content, theme.error(title));
+}
+
+/**
+ * Show info note with cyan title
+ * @param {string} content - Note content
+ * @param {string} title - Note title
+ */
+export function showInfoNote(content, title) {
+    p.note(content, theme.primary(title));
+}
+
+// ============================================================================
+// RESULTS
+// ============================================================================
+
+/**
+ * Format results for display
+ * @param {Object} results - Results object
+ * @returns {string} Formatted string
+ */
+export function formatResults(results) {
+    const lines = [];
+
+    if (results.success !== undefined) {
+        const icon = results.success ? theme.success('✓') : theme.error('✗');
+        lines.push(`${icon} ${results.message || ''}`);
+    }
+
+    if (results.details) {
+        lines.push('');
+        lines.push(theme.dim('Details:'));
+        Object.entries(results.details).forEach(([key, value]) => {
+            lines.push(`  ${key}: ${theme.primary(value)}`);
+        });
+    }
+
+    if (results.errors && results.errors.length > 0) {
+        lines.push('');
+        lines.push(theme.error('Errors:'));
+        results.errors.forEach(err => {
+            lines.push(`  ${theme.error('•')} ${err}`);
+        });
+    }
+
+    return lines.join('\n');
+}
+
+// ============================================================================
+// NEXT STEPS
+// ============================================================================
+
+/**
+ * Show next steps guide
+ * @param {Array<string>} steps - Array of step descriptions
+ */
+export function showNextSteps(steps) {
+    const content = steps
+        .map((step, i) => `${theme.primary(`${i + 1}.`)} ${step}`)
+        .join('\n');
+
+    showInfoNote(content, 'Next Steps');
+}
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+/**
+ * Check if value is cancelled
+ * @param {*} value - Value to check
+ * @returns {boolean}
+ */
+export function isCancelled(value) {
+    return p.isCancel(value);
+}
+
+/**
+ * Handle cancellation
+ */
+export function handleCancel() {
+    p.cancel('Operation cancelled.');
+    process.exit(0);
+}
+
+export default {
+    theme,
+    showIntro,
+    showSuccess,
+    showError,
+    showInfo,
+    showActionMenu,
+    confirm,
+    textInput,
+    createSpinner,
+    showNote,
+    showSuccessNote,
+    showErrorNote,
+    showInfoNote,
+    formatResults,
+    showNextSteps,
+    isCancelled,
+    handleCancel,
+};

package/lib/agent-cli/lib/ui/common.js

@@ -0,0 +1,83 @@
+/**
+ * Common UI helpers for Clack-based CLI
+ */
+import * as p from "@clack/prompts";
+import { loadKnowledge } from "../recall.js";
+import { VERSION } from "../config.js";
+
+// ============================================================================
+// CLACK SYMBOLS (no emoji for consistency)
+// ============================================================================
+
+export const ICONS = {
+    brain: "◆",
+    learn: "◆",
+    recall: "◇",
+    stats: "▣",
+    success: "✓",
+    error: "✖",
+    warning: "⚠",
+    info: "●"
+};
+
+// ============================================================================
+// SHARED FUNCTIONS
+// ============================================================================
+
+/**
+ * Show app header
+ */
+export function showHeader() {
+    p.intro(`${ICONS.brain} Agent Skill Kit v${VERSION}`);
+}
+
+/**
+ * Show outro message
+ * @param {string} message 
+ */
+export function showSuccess(message) {
+    p.outro(`${ICONS.success} ${message}`);
+}
+
+/**
+ * Show error and exit
+ * @param {string} message 
+ */
+export function showError(message) {
+    p.cancel(`${ICONS.error} ${message}`);
+    process.exit(1);
+}
+
+/**
+ * Handle user cancellation (CTRL+C)
+ * @param {any} value 
+ */
+export function handleCancel(value) {
+    if (p.isCancel(value)) {
+        p.cancel("Operation cancelled.");
+        process.exit(0);
+    }
+}
+
+/**
+ * Get knowledge base with error handling
+ * @returns {object}
+ */
+export function getKnowledge() {
+    try {
+        return loadKnowledge();
+    } catch (e) {
+        showError("Failed to load knowledge base");
+        return { lessons: [] };
+    }
+}
+
+/**
+ * Format horizontal line
+ * @param {number} width 
+ */
+export function line(width = 50) {
+    return "─".repeat(width);
+}
+
+export { p, VERSION };

package/lib/agent-cli/lib/ui/completion-ui.js

@@ -0,0 +1,126 @@
+/**
+ * Completion UI - Shell completion setup
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import fs from "fs";
+import path from "path";
+import os from "os";
+import {
+    getCompletionScript,
+    detectShell,
+    generatePowerShellCompletion,
+    generateBashCompletion,
+    generateZshCompletion
+} from "../completion.js";
+
+/**
+ * Interactive completion setup
+ */
+export async function runCompletionUI() {
+    p.intro("Shell Completion (Press ESC to exit)");
+
+    const action = await p.select({
+        message: "What would you like to do?",
+        options: [
+            { value: "install", label: "Install", hint: "Add shell completions" },
+            { value: "uninstall", label: "Uninstall", hint: "Remove completions" },
+            { value: "back", label: "← Back", hint: "Return to main menu" }
+        ]
+    });
+
+    if (p.isCancel(action) || action === "back") {
+        return;
+    }
+
+    const shell = await p.select({
+        message: "Select shell:",
+        options: [
+            { value: "powershell", label: "PowerShell", hint: "Windows default" },
+            { value: "bash", label: "Bash", hint: "Linux/macOS" },
+            { value: "zsh", label: "Zsh", hint: "macOS default" }
+        ],
+        initialValue: detectedShell
+    });
+
+    if (p.isCancel(shell)) return;
+
+    const { script } = getCompletionScript(shell);
+
+    if (action === "show") {
+        console.log("\n" + pc.dim("─".repeat(50)));
+        console.log(script);
+        console.log(pc.dim("─".repeat(50)) + "\n");
+
+        p.note(
+            `Copy the script above and add to your shell profile:\n` +
+            `• PowerShell: $PROFILE\n` +
+            `• Bash: ~/.bashrc\n` +
+            `• Zsh: ~/.zshrc`,
+            "Instructions"
+        );
+        return;
+    }
+
+    if (action === "install") {
+        const confirm = await p.confirm({
+            message: `Install completion for ${shell}?`
+        });
+
+        if (!confirm) return;
+
+        try {
+            let profilePath;
+
+            switch (shell) {
+                case "powershell": {
+                    // Get PowerShell profile path
+                    const psProfile = process.env.USERPROFILE
+                        ? path.join(process.env.USERPROFILE, "Documents", "PowerShell", "Microsoft.PowerShell_profile.ps1")
+                        : path.join(os.homedir(), "Documents", "PowerShell", "Microsoft.PowerShell_profile.ps1");
+
+                    profilePath = psProfile;
+                    break;
+                }
+                case "bash":
+                    profilePath = path.join(os.homedir(), ".bashrc");
+                    break;
+                case "zsh":
+                    profilePath = path.join(os.homedir(), ".zshrc");
+                    break;
+            }
+
+            // Ensure directory exists
+            fs.mkdirSync(path.dirname(profilePath), { recursive: true });
+
+            // Check if already installed
+            const existing = fs.existsSync(profilePath)
+                ? fs.readFileSync(profilePath, "utf8")
+                : "";
+
+            if (existing.includes("Agent Skill Kit")) {
+                p.note("Completion already installed!", pc.yellow("Skipped"));
+                return;
+            }
+
+            // Append to profile
+            fs.appendFileSync(profilePath, "\n" + script);
+
+            p.note(
+                `Completion installed to:\n${pc.cyan(profilePath)}\n\n` +
+                `Restart your terminal or run:\n` +
+                (shell === "powershell" ? `. $PROFILE` : `source ${profilePath}`),
+                pc.green("Installed")
+            );
+
+        } catch (e) {
+            p.note(
+                `Could not install automatically.\nError: ${e.message}\n\n` +
+                `Please manually add the script to your shell profile.`,
+                pc.red("Error")
+            );
+        }
+    }
+}
+
+export default runCompletionUI;

package/lib/agent-cli/lib/ui/custom-select.js

@@ -0,0 +1,69 @@
+/**
+ * Custom Select Component - Using @clack/prompts native select
+ * This fixes the Windows terminal rendering issues with @clack/core
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+
+// ============================================================================
+// CUSTOM ICONS
+// ============================================================================
+
+const ITEM_ICONS = {
+    routing: "◆",
+    learn: "◆",
+    recall: "◇",
+    stats: "▣",
+    settings: "◇",
+    backup: "◇",
+    export: "◇",
+    proposals: "◇",
+    completion: "◇",
+    init: "◇",
+    exit: "×"
+};
+
+const ITEM_COLORS = {
+    routing: pc.cyan,
+    learn: pc.green,
+    recall: pc.blue,
+    stats: pc.yellow,
+    settings: pc.cyan,
+    backup: pc.gray,
+    export: pc.gray,
+    proposals: pc.yellow,
+    completion: pc.gray,
+    init: pc.green,
+    exit: pc.red
+};
+
+// ============================================================================
+// CUSTOM SELECT - Using native @clack/prompts
+// ============================================================================
+
+/**
+ * Custom select with icons - uses native clack select to fix Windows rendering
+ * @param {object} config 
+ * @returns {Promise<string|symbol>}
+ */
+export async function customSelect(config) {
+    const { message, items } = config;
+
+    // Transform items to clack format - clean labels without icons
+    const options = items.map((item) => ({
+        value: item.value,
+        label: item.label,
+        hint: item.hint
+    }));
+
+    const result = await p.select({
+        message,
+        options,
+        initialValue: items[0]?.value
+    });
+
+    return result;
+}
+
+export { ITEM_ICONS, ITEM_COLORS, pc };
+export { isCancel } from "@clack/prompts";