@shepai/cli 1.59.0 → 1.60.0

package/dist/src/presentation/web/components/features/skills/skills-page-client.stories.js

@@ -0,0 +1,186 @@
+import { SkillsPageClient } from './skills-page-client.js';
+const meta = {
+    title: 'Features/SkillsPageClient',
+    component: SkillsPageClient,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+const sampleSkills = [
+    {
+        name: 'shep-kit:implement',
+        displayName: 'implement',
+        description: 'Validate specs and autonomously execute implementation tasks with status tracking.',
+        category: 'Workflow',
+        source: 'project',
+        body: '## Usage\n\nRun /shep-kit:implement after planning is complete.',
+        resources: [],
+    },
+    {
+        name: 'shep-kit:plan',
+        displayName: 'plan',
+        description: 'Create implementation plan and task breakdown.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shep-kit:research',
+        displayName: 'research',
+        description: 'Analyze technical approach, evaluate libraries, document decisions.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shep:ui-component',
+        displayName: 'ui-component',
+        description: 'Use when creating, modifying, or reviewing web UI components.',
+        context: 'fork',
+        allowedTools: 'Read, Write, Bash, Edit, Glob',
+        category: 'Code Generation',
+        source: 'project',
+        body: '',
+        resources: [
+            { name: 'references', fileCount: 7 },
+            { name: 'templates', fileCount: 3 },
+        ],
+    },
+    {
+        name: 'architecture-reviewer',
+        displayName: 'architecture-reviewer',
+        description: 'Use when making architectural decisions, planning features, or reviewing PRs.',
+        context: 'fork',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'cross-validate-artifacts',
+        displayName: 'cross-validate-artifacts',
+        description: 'Cross-validate documentation and artifacts for consistency.',
+        category: 'Analysis',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shadcn-ui',
+        displayName: 'shadcn-ui',
+        description: 'Complete shadcn/ui component library patterns and implementation.',
+        category: 'Reference',
+        source: 'project',
+        body: '',
+        resources: [{ name: 'references', fileCount: 3 }],
+    },
+    {
+        name: 'vercel-react-best-practices',
+        displayName: 'vercel-react-best-practices',
+        description: 'React and Next.js performance optimization guidelines from Vercel Engineering.',
+        category: 'Reference',
+        source: 'global',
+        body: '',
+        resources: [{ name: 'references', fileCount: 4 }],
+    },
+];
+const manySkills = [
+    ...sampleSkills,
+    {
+        name: 'shep-kit:commit-pr',
+        displayName: 'commit-pr',
+        description: 'Use when ready to commit, push, and create a PR with CI verification.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shep-kit:new-feature',
+        displayName: 'new-feature',
+        description: 'Use when starting any new feature, functionality, or enhancement.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shep-kit:new-feature-fast',
+        displayName: 'new-feature-fast',
+        description: 'Fast-track feature creation that collapses new-feature, research, and planning.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'shep-kit:merged',
+        displayName: 'merged',
+        description: 'Use after a PR has been merged to clean up branches.',
+        category: 'Workflow',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'mermaid-diagrams',
+        displayName: 'mermaid-diagrams',
+        description: 'Comprehensive guide for creating software diagrams using Mermaid syntax.',
+        category: 'Reference',
+        source: 'project',
+        body: '',
+        resources: [{ name: 'references', fileCount: 2 }],
+    },
+    {
+        name: 'react-flow',
+        displayName: 'react-flow',
+        description: 'React Flow for workflow visualization with custom nodes and edges.',
+        category: 'Reference',
+        source: 'project',
+        body: '',
+        resources: [],
+    },
+    {
+        name: 'tsp-model',
+        displayName: 'tsp-model',
+        description: 'Use when creating, modifying, or documenting TypeSpec domain models.',
+        category: 'Reference',
+        source: 'project',
+        body: '',
+        resources: [{ name: 'references', fileCount: 5 }],
+    },
+    {
+        name: 'find-skills',
+        displayName: 'find-skills',
+        description: 'Helps users discover and install agent skills.',
+        category: 'Reference',
+        source: 'global',
+        body: '',
+        resources: [],
+    },
+];
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+export const Default = {
+    args: {
+        skills: sampleSkills,
+    },
+};
+export const Empty = {
+    args: {
+        skills: [],
+    },
+};
+export const ManySkills = {
+    args: {
+        skills: manySkills,
+    },
+};

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAG/E,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,qBAAqB,EACrB,mBAAmB,GACpB,EAAE,eAAe,2CA+FjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,qBAAqB,EACrB,mBAAmB,GACpB,EAAE,eAAe,2CAuGjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'next/navigation';
-import { Home, Wrench, Plus } from 'lucide-react';
+import { Home, Wrench, Puzzle, Plus } from 'lucide-react';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
@@ -12,6 +12,7 @@ import { FeatureStatusGroup } from '../../common/feature-status-group/index.js';
 import { SidebarSectionHeader } from '../../common/sidebar-section-header/index.js';
 import { featureStatusConfig, featureStatusOrder } from '../../common/feature-status-config.js';
 import { useDeferredMount } from '../../../hooks/use-deferred-mount.js';
+import { featureFlags } from '../../../lib/feature-flags.js';
 export function AppSidebar({ features, onNewFeature, onFeatureClick, onFeaturesFolderClick, onFeaturesMenuClick, }) {
     const pathname = usePathname();
     const { state } = useSidebar();
@@ -26,7 +27,7 @@ export function AppSidebar({ features, onNewFeature, onFeatureClick, onFeaturesF
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20 }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20 }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                         'min-w-0 overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',

package/dist/src/presentation/web/lib/feature-flags.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Feature flags for the web UI.
+ *
+ * Toggle via environment variables (NEXT_PUBLIC_ prefix for client access).
+ * All flags default to **off** unless explicitly set to "true" or "1".
+ */
+export declare const featureFlags: {
+    readonly skills: boolean;
+};
+//# sourceMappingURL=feature-flags.d.ts.map

package/dist/src/presentation/web/lib/feature-flags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/feature-flags.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,eAAO,MAAM,YAAY;;CAEf,CAAC"}

package/dist/src/presentation/web/lib/feature-flags.js

@@ -0,0 +1,12 @@
+/**
+ * Feature flags for the web UI.
+ *
+ * Toggle via environment variables (NEXT_PUBLIC_ prefix for client access).
+ * All flags default to **off** unless explicitly set to "true" or "1".
+ */
+function isEnabled(envVar) {
+    return envVar === 'true' || envVar === '1';
+}
+export const featureFlags = {
+    skills: isEnabled(process.env.NEXT_PUBLIC_FLAG_SKILLS),
+};

package/dist/src/presentation/web/lib/skills.d.ts

@@ -0,0 +1,30 @@
+export type SkillCategory = 'Workflow' | 'Code Generation' | 'Analysis' | 'Reference';
+export type SkillSource = 'project' | 'global';
+export interface SkillResource {
+    name: string;
+    fileCount: number;
+}
+export interface SkillData {
+    name: string;
+    displayName: string;
+    description: string;
+    context?: string;
+    allowedTools?: string;
+    category: SkillCategory;
+    source: SkillSource;
+    body: string;
+    resources: SkillResource[];
+}
+export declare function deriveCategory(name: string): SkillCategory;
+export declare function getDisplayName(name: string): string;
+interface FrontmatterResult {
+    name: string;
+    description: string;
+    context?: string;
+    allowedTools?: string;
+    body: string;
+}
+export declare function parseFrontmatter(content: string): FrontmatterResult | null;
+export declare function getSkills(projectRoot?: string, homeDir?: string): Promise<SkillData[]>;
+export {};
+//# sourceMappingURL=skills.d.ts.map

package/dist/src/presentation/web/lib/skills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skills.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/skills.ts"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,iBAAiB,GAAG,UAAU,GAAG,WAAW,CAAC;AACtF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,aAAa,EAAE,CAAC;CAC5B;AAUD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAK1D;AAMD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAKnD;AAID,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAiC1E;AA0ED,wBAAsB,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC,CAiB5F"}

package/dist/src/presentation/web/lib/skills.js

@@ -0,0 +1,137 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { homedir } from 'node:os';
+import yaml from 'js-yaml';
+// ── Category Derivation ──────────────────────────────────────────────────────
+const CATEGORY_RULES = [
+    { test: (name) => name.startsWith('shep-kit:'), category: 'Workflow' },
+    { test: (name) => name.startsWith('shep:'), category: 'Code Generation' },
+    { test: (name) => /(?:review|validate|cross-validate)/.test(name), category: 'Analysis' },
+];
+export function deriveCategory(name) {
+    for (const rule of CATEGORY_RULES) {
+        if (rule.test(name))
+            return rule.category;
+    }
+    return 'Reference';
+}
+// ── Display Name ─────────────────────────────────────────────────────────────
+const DISPLAY_NAME_PREFIXES = ['shep-kit:', 'shep:'];
+export function getDisplayName(name) {
+    for (const prefix of DISPLAY_NAME_PREFIXES) {
+        if (name.startsWith(prefix))
+            return name.slice(prefix.length);
+    }
+    return name;
+}
+export function parseFrontmatter(content) {
+    const delimiterPattern = /^---\s*$/m;
+    const firstMatch = content.match(delimiterPattern);
+    if (firstMatch?.index === undefined)
+        return null;
+    const afterFirst = firstMatch.index + firstMatch[0].length;
+    const rest = content.slice(afterFirst);
+    const secondMatch = rest.match(delimiterPattern);
+    if (secondMatch?.index === undefined)
+        return null;
+    const yamlContent = rest.slice(0, secondMatch.index);
+    const body = rest.slice(secondMatch.index + secondMatch[0].length).trim();
+    let parsed;
+    try {
+        parsed = yaml.load(yamlContent);
+    }
+    catch {
+        return null;
+    }
+    if (!parsed || typeof parsed !== 'object')
+        return null;
+    const name = parsed['name'];
+    const description = parsed['description'];
+    if (typeof name !== 'string' || typeof description !== 'string')
+        return null;
+    return {
+        name,
+        description,
+        context: typeof parsed['context'] === 'string' ? parsed['context'] : undefined,
+        allowedTools: typeof parsed['allowed-tools'] === 'string' ? parsed['allowed-tools'] : undefined,
+        body,
+    };
+}
+// ── Resource Detection ───────────────────────────────────────────────────────
+const KNOWN_RESOURCE_DIRS = [
+    'references',
+    'examples',
+    'templates',
+    'scripts',
+    'validation',
+    'rules',
+];
+async function detectResources(skillDir) {
+    const resources = [];
+    for (const dirName of KNOWN_RESOURCE_DIRS) {
+        try {
+            const entries = await readdir(join(skillDir, dirName));
+            resources.push({ name: dirName, fileCount: entries.length });
+        }
+        catch {
+            // Directory doesn't exist — skip
+        }
+    }
+    return resources;
+}
+// ── Skill Directory Reader ───────────────────────────────────────────────────
+async function getSkillsFromDirectory(dirPath, source) {
+    let entries;
+    try {
+        const dirEntries = await readdir(dirPath, { withFileTypes: true });
+        entries = dirEntries.filter((e) => e.isDirectory()).map((e) => e.name);
+    }
+    catch {
+        return [];
+    }
+    const skills = [];
+    for (const entry of entries) {
+        const skillDir = join(dirPath, entry);
+        const skillMdPath = join(skillDir, 'SKILL.md');
+        let content;
+        try {
+            content = await readFile(skillMdPath, 'utf-8');
+        }
+        catch {
+            continue;
+        }
+        const frontmatter = parseFrontmatter(content);
+        if (!frontmatter) {
+            // eslint-disable-next-line no-console
+            console.warn(`Skipping skill "${entry}": invalid or missing frontmatter in SKILL.md`);
+            continue;
+        }
+        const resources = await detectResources(skillDir);
+        skills.push({
+            name: frontmatter.name,
+            displayName: getDisplayName(frontmatter.name),
+            description: frontmatter.description,
+            context: frontmatter.context,
+            allowedTools: frontmatter.allowedTools,
+            category: deriveCategory(frontmatter.name),
+            source,
+            body: frontmatter.body,
+            resources,
+        });
+    }
+    return skills;
+}
+export async function getSkills(projectRoot, homeDir) {
+    const root = projectRoot ?? process.cwd();
+    const home = homeDir ?? homedir();
+    const projectDir = join(root, '.claude', 'skills');
+    const globalDir = join(home, '.claude', 'skills');
+    const [projectSkills, globalSkills] = await Promise.all([
+        getSkillsFromDirectory(projectDir, 'project'),
+        getSkillsFromDirectory(globalDir, 'global'),
+    ]);
+    // Deduplicate by name — project skills take precedence over global skills
+    const seen = new Set(projectSkills.map((s) => s.name));
+    const uniqueGlobalSkills = globalSkills.filter((s) => !seen.has(s.name));
+    return [...projectSkills, ...uniqueGlobalSkills].sort((a, b) => a.name.localeCompare(b.name));
+}