@agentskillkit/agent-skills 1.0.1 → 3.2.1

package/packages/cli/lib/ui/lessons-ui.js

@@ -0,0 +1,148 @@
+/**
+ * Lessons UI - View and manage learned lessons
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { loadKnowledge, saveKnowledge } from "../recall.js";
+
+/**
+ * Format relative time (e.g., "2 days ago")
+ */
+function formatRelativeTime(date) {
+    const now = new Date();
+    const diffMs = now - date;
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) return 'today';
+    if (diffDays === 1) return 'yesterday';
+    if (diffDays < 7) return `${diffDays} days ago`;
+    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+    return `${Math.floor(diffDays / 365)} years ago`;
+}
+
+/**
+ * Interactive lessons viewer
+ */
+export async function runLessonsUI() {
+    p.intro("Lessons Manager (Press ESC to exit)");
+
+    while (true) {
+        const db = loadKnowledge();
+
+        if (!db.lessons || db.lessons.length === 0) {
+            p.note("No lessons learned yet.\n\nUse Learn to add patterns.", "Lessons");
+            return;
+        }
+
+        // Build menu items from lessons with readable titles
+        const items = db.lessons.map(lesson => {
+            // Use message as title (human-readable)
+            const title = lesson.message.substring(0, 60);
+
+            // Visual differentiation: mistakes vs improvements
+            let icon, colorFn;
+            if (lesson.type === 'mistake') {
+                // Mistakes: red circle
+                icon = "🔴";
+                colorFn = pc.red;
+            } else if (lesson.type === 'improvement') {
+                // Improvements: green circle
+                icon = "🟢";
+                colorFn = pc.green;
+            } else {
+                // Fallback: severity-based
+                icon = lesson.severity === "ERROR" ? "🔴" : "⚠️";
+                colorFn = lesson.severity === "ERROR" ? pc.red : pc.yellow;
+            }
+
+            return {
+                value: lesson.id,
+                label: `${icon}  ${title}${lesson.message.length > 60 ? '...' : ''}`, // Added double space
+                hint: `${lesson.hitCount || 0} hits`
+            };
+        });
+
+        items.push({ value: "back", label: "← Back", hint: "Return to main menu" });
+
+        const selected = await p.select({
+            message: `${db.lessons.length} lesson(s) available:`,
+            options: items
+        });
+
+        if (p.isCancel(selected) || selected === "back") {
+            return;
+        }
+
+        // Find and display the selected lesson
+        const lesson = db.lessons.find(l => l.id === selected);
+        if (!lesson) continue;
+
+        // Determine lesson type and icon
+        const isMistake = lesson.severity && (lesson.severity === "ERROR" || lesson.severity === "WARNING");
+        const typeIcon = isMistake ? "❌" : "📝";
+        const typeLabel = isMistake ? "Mistake" : "Improvement";
+        const typeColor = isMistake ? pc.red : pc.green;
+
+        // Build user-friendly display
+        console.log(`\n${'─'.repeat(60)}`);
+        console.log(`${typeIcon} ${pc.bold(lesson.id)} ${pc.dim('│')} ${typeColor(typeLabel)}`);
+        console.log(`${'─'.repeat(60)}\n`);
+
+        // Main message (plain English)
+        console.log(pc.bold(lesson.message || 'No description'));
+        console.log('');
+
+        // Example code (if pattern suggests code)
+        if (lesson.pattern && !lesson.pattern.includes('TODO')) {
+            console.log(pc.dim('Pattern:'));
+            console.log(pc.yellow(`  ${lesson.pattern}`));
+            console.log('');
+        }
+
+        // Recommendation
+        if (lesson.recommendation) {
+            console.log(pc.dim('Recommendation:'));
+            console.log(pc.cyan(`  ${lesson.recommendation}`));
+            console.log('');
+        }
+
+        // Metrics in single line
+        const hits = lesson.hitCount || lesson.appliedCount || 0;
+        const dateStr = lesson.addedAt
+            ? formatRelativeTime(new Date(lesson.addedAt))
+            : 'Unknown';
+
+        console.log(
+            `${pc.green('✓')} Applied ${pc.bold(hits)} times  ${pc.dim('│')}  ` +
+            `Added ${pc.dim(dateStr)}  ${pc.dim('│')}  ` +
+            `${pc.dim(lesson.category || 'general')}`
+        );
+        console.log(`\n${'─'.repeat(60)}\n`);
+
+        // Actions
+        const action = await p.select({
+            message: "What would you like to do?",
+            options: [
+                { value: "back", label: "← Back", hint: "Return to list" },
+                { value: "delete", label: "Delete lesson", hint: "Remove this lesson" }
+            ]
+        });
+
+        if (p.isCancel(action) || action === "back") continue;
+
+        if (action === "delete") {
+            const confirm = await p.confirm({
+                message: `Delete lesson ${lesson.id}?`
+            });
+
+            if (confirm) {
+                db.lessons = db.lessons.filter(l => l.id !== lesson.id);
+                saveKnowledge(db);
+                p.log.success(`Deleted ${lesson.id}`);
+            }
+        }
+    }
+}
+
+export default runLessonsUI;

package/packages/cli/lib/ui/pretty.js

@@ -0,0 +1,145 @@
+/**
+ * @fileoverview Pretty output formatting for Agent Skill Kit
+ * Creates branded, friendly CLI messages
+ */
+
+import pc from "picocolors";
+import boxen from "boxen";
+import { VERSION } from "../config.js";
+
+// ============================================================================
+// BRANDING
+// ============================================================================
+
+/** Brand colors using picocolors */
+const brand = {
+    primary: pc.cyan,
+    success: pc.green,
+    warning: pc.yellow,
+    error: pc.red,
+    dim: pc.dim,
+    bold: pc.bold
+};
+
+/** Simple ASCII logo */
+const LOGO = `
+  ╭─────────────────────────╮
+  │  🧠 Agent Skill Kit     │
+  │     v${VERSION}             │
+  ╰─────────────────────────╯
+`;
+
+// ============================================================================
+// MESSAGE FORMATTERS
+// ============================================================================
+
+/**
+ * Show branded header
+ */
+export function showBrandHeader() {
+    console.log(brand.primary(LOGO));
+}
+
+/**
+ * Create a nice box message
+ * @param {string} message - Message content
+ * @param {object} options - Box options
+ */
+export function box(message, options = {}) {
+    return "\n" + boxen(message, {
+        padding: { top: 0, bottom: 0, left: 1, right: 1 },
+        margin: { top: 0, bottom: 1, left: 0, right: 0 },
+        borderStyle: "round",
+        borderColor: "cyan",
+        ...options
+    });
+}
+
+/**
+ * Format success message
+ * @param {string} message
+ */
+export function success(message) {
+    console.log(`${brand.success("✓")} ${message}`);
+}
+
+/**
+ * Format error message
+ * @param {string} message
+ */
+export function error(message) {
+    console.log(`${brand.error("✗")} ${message}`);
+}
+
+/**
+ * Format warning message
+ * @param {string} message
+ */
+export function warning(message) {
+    console.log(`${brand.warning("!")} ${message}`);
+}
+
+/**
+ * Format info message
+ * @param {string} message
+ */
+export function info(message) {
+    console.log(`${brand.dim("›")} ${message}`);
+}
+
+/**
+ * Show scan summary in a nice format
+ * @param {object} stats - { filesScanned, ignored, violations, errors, warnings }
+ */
+export function showScanSummary(stats) {
+    const lines = [];
+
+    if (stats.filesScanned !== undefined) {
+        lines.push(`  ${brand.success("✓")} ${stats.filesScanned} file(s) scanned`);
+    }
+
+    if (stats.ignored > 0) {
+        lines.push(`  ${brand.dim("›")} ${stats.ignored} paths ignored`);
+    }
+
+    if (stats.violations === 0) {
+        lines.push(`  ${brand.success("✓")} No violations found`);
+    } else {
+        lines.push(`  ${brand.error("✗")} ${stats.violations} violation(s)`);
+        if (stats.errors > 0) {
+            lines.push(`    ${brand.error(`${stats.errors} error(s)`)}`);
+        }
+        if (stats.warnings > 0) {
+            lines.push(`    ${brand.warning(`${stats.warnings} warning(s)`)}`);
+        }
+    }
+
+    console.log(lines.join("\n"));
+
+    // Final message with spacing
+    if (stats.violations === 0) {
+        console.log(`\n  ${brand.success(brand.bold("All clear!"))} Your code looks great. 🎉\n`);
+    } else {
+        console.log(`\n  ${brand.warning("Review the issues above before committing.")}\n`);
+    }
+}
+
+/**
+ * Show a friendly completion message
+ * @param {string} action - What was completed
+ */
+export function done(action) {
+    console.log(`\n${brand.success("Done!")} ${action}\n`);
+}
+
+export default {
+    showBrandHeader,
+    box,
+    success,
+    error,
+    warning,
+    info,
+    showScanSummary,
+    done,
+    brand
+};

package/packages/cli/lib/ui/proposals-ui.js

@@ -0,0 +1,99 @@
+/**
+ * Proposals UI - Review and apply AI agent proposals
+ */
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import {
+    getQualifyingLessons,
+    dismissProposal,
+    generateProposalMarkdown,
+    countPendingProposals
+} from "../proposals.js";
+
+/**
+ * Interactive proposals menu
+ */
+export async function runProposalsUI() {
+    p.intro("Skill Proposals (Press ESC to exit)");
+
+    while (true) {
+        const qualifying = getQualifyingLessons();
+
+        if (qualifying.length === 0) {
+            p.note(
+                "No lessons have reached the threshold yet.\nKeep using recall to track patterns!",
+                "No Proposals"
+            );
+            return;
+        }
+
+        // Build menu items
+        const items = qualifying.map(({ lesson }) => ({
+            value: lesson.id,
+            label: `[${lesson.id}] ${lesson.message.substring(0, 40)}...`,
+            hint: `${lesson.hitCount} hits`
+        }));
+
+        items.push({ value: "back", label: "← Back", hint: "Return to main menu" });
+
+        const selected = await p.select({
+            message: "Select a proposal to view:",
+            options: items
+        });
+
+        if (p.isCancel(selected) || selected === "back") {
+            return;
+        }
+
+        // Find the selected lesson
+        const found = qualifying.find(q => q.lesson.id === selected);
+        if (!found) continue;
+
+        // Show proposal
+        const markdown = generateProposalMarkdown(found.lesson);
+
+        console.log("\n" + pc.cyan("─".repeat(60)));
+        console.log(markdown);
+        console.log(pc.cyan("─".repeat(60)) + "\n");
+
+        // Actions
+        const action = await p.select({
+            message: "What would you like to do?",
+            options: [
+                { value: "copy", label: "Copy to clipboard", hint: "Ready to paste to AI agent" },
+                { value: "dismiss", label: "Dismiss", hint: "Don't show this again" },
+                { value: "back", label: "← Back", hint: "Return to proposals" }
+            ]
+        });
+
+        if (p.isCancel(action) || action === "back") continue;
+
+        switch (action) {
+            case "copy": {
+                // Use clipboardy for cross-platform clipboard
+                try {
+                    const clipboard = await import("clipboardy");
+                    await clipboard.default.write(markdown);
+                    p.note("Proposal copied! Paste to your AI agent.", pc.green("Copied"));
+                } catch (e) {
+                    p.note(`Could not copy automatically.\nPlease copy the text above manually.`, pc.yellow("Manual Copy"));
+                }
+                break;
+            }
+
+            case "dismiss": {
+                const confirm = await p.confirm({
+                    message: "Dismiss this proposal? It won't appear again."
+                });
+
+                if (confirm) {
+                    dismissProposal(found.lesson.id);
+                    p.note("Proposal dismissed.", pc.dim("✓"));
+                }
+                break;
+            }
+        }
+    }
+}
+
+export default runProposalsUI;