mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-22 01:01:56 +08:00
feat(skills): add provider skill management
Users need one settings surface to discover and install skills without manually navigating provider-specific directories. Add provider-backed global skill installation for Claude, Codex, Gemini, and Cursor, while keeping OpenCode read-only because it reuses other providers' skill locations. Add a responsive Skills settings tab with scoped discovery, search, refresh controls, markdown and folder uploads, upload feedback, and overflow-safe layouts. Validate bundled skill files and paths before writing them, preserve scripts and assets, and cover provider discovery and installation behavior with tests.
This commit is contained in:
Haileyesus
@@ -99,6 +99,14 @@ export class ClaudeSkillsProvider extends SkillsProvider {
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(getClaudeHomePath(), 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
|
||||
private async listPluginSkills(claudeHomePath: string): Promise<ProviderSkill[]> {
|
||||
const settings = await readJsonConfig(path.join(claudeHomePath, 'settings.json'));
|
||||
const enabledPlugins = readObjectRecord(settings.enabledPlugins);
|
||||
|
||||
@@ -57,4 +57,12 @@ export class CodexSkillsProvider extends SkillsProvider {
|
||||
|
||||
return sources;
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.agents', 'skills'),
|
||||
commandPrefix: '$',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,4 +28,12 @@ export class CursorSkillsProvider extends SkillsProvider {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.cursor', 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,4 +33,12 @@ export class GeminiSkillsProvider extends SkillsProvider {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.gemini', 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,8 @@ import type {
|
||||
McpScope,
|
||||
McpTransport,
|
||||
ProviderChangeActiveModelInput,
|
||||
ProviderSkillCreateFile,
|
||||
ProviderSkillCreateInput,
|
||||
UpsertProviderMcpServerInput,
|
||||
} from '@/shared/types.js';
|
||||
import { AppError, asyncHandler, createApiSuccessResponse } from '@/shared/utils.js';
|
||||
@@ -179,6 +181,103 @@ const parseMcpUpsertPayload = (payload: unknown): UpsertProviderMcpServerInput =
|
||||
};
|
||||
};
|
||||
|
||||
const parseProviderSkillCreatePayload = (payload: unknown): ProviderSkillCreateInput => {
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
throw new AppError('Request body must be an object.', {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const body = payload as Record<string, unknown>;
|
||||
const rawEntries = Array.isArray(body.entries)
|
||||
? body.entries
|
||||
: typeof body.content === 'string'
|
||||
? [{
|
||||
content: body.content,
|
||||
directoryName: body.directoryName,
|
||||
fileName: body.fileName,
|
||||
}]
|
||||
: null;
|
||||
|
||||
if (!rawEntries || rawEntries.length === 0) {
|
||||
throw new AppError('At least one skill entry is required.', {
|
||||
code: 'PROVIDER_SKILLS_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const entries = rawEntries.map((entry, index) => {
|
||||
if (!entry || typeof entry !== 'object') {
|
||||
throw new AppError(`Skill entry ${index + 1} must be an object.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const record = entry as Record<string, unknown>;
|
||||
const content = typeof record.content === 'string' ? record.content : '';
|
||||
const directoryName = readOptionalQueryString(record.directoryName);
|
||||
const fileName = readOptionalQueryString(record.fileName);
|
||||
const rawFiles = record.files;
|
||||
|
||||
if (!content.trim()) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
|
||||
code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
if (rawFiles !== undefined && !Array.isArray(rawFiles)) {
|
||||
throw new AppError(`Skill entry ${index + 1} files must be an array.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const files: ProviderSkillCreateFile[] | undefined = rawFiles?.map((file, fileIndex) => {
|
||||
if (!file || typeof file !== 'object') {
|
||||
throw new AppError(`Skill entry ${index + 1} file ${fileIndex + 1} must be an object.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const fileRecord = file as Record<string, unknown>;
|
||||
const relativePath = readOptionalQueryString(fileRecord.relativePath);
|
||||
const fileContent = typeof fileRecord.content === 'string' ? fileRecord.content : null;
|
||||
const encoding = fileRecord.encoding === 'utf8' || fileRecord.encoding === 'base64'
|
||||
? fileRecord.encoding
|
||||
: null;
|
||||
|
||||
if (!relativePath || fileContent === null || !encoding) {
|
||||
throw new AppError(
|
||||
`Skill entry ${index + 1} file ${fileIndex + 1} requires relativePath, content, and encoding.`,
|
||||
{
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
relativePath,
|
||||
content: fileContent,
|
||||
encoding,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
content,
|
||||
directoryName,
|
||||
fileName,
|
||||
files,
|
||||
};
|
||||
});
|
||||
|
||||
return { entries };
|
||||
};
|
||||
|
||||
const parseProvider = (value: unknown): LLMProvider => {
|
||||
const normalized = normalizeProviderParam(value);
|
||||
if (
|
||||
@@ -320,6 +419,16 @@ router.get(
|
||||
}),
|
||||
);
|
||||
|
||||
router.post(
|
||||
'/:provider/skills',
|
||||
asyncHandler(async (req: Request, res: Response) => {
|
||||
const provider = parseProvider(req.params.provider);
|
||||
const input = parseProviderSkillCreatePayload(req.body);
|
||||
const skills = await providerSkillsService.addProviderSkills(provider, input);
|
||||
res.json(createApiSuccessResponse({ provider, skills }));
|
||||
}),
|
||||
);
|
||||
|
||||
// ----------------- MCP routes -----------------
|
||||
router.get(
|
||||
'/:provider/mcp/servers',
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { providerRegistry } from '@/modules/providers/provider.registry.js';
|
||||
import type { ProviderSkill, ProviderSkillListOptions } from '@/shared/types.js';
|
||||
import type {
|
||||
ProviderSkill,
|
||||
ProviderSkillCreateInput,
|
||||
ProviderSkillListOptions,
|
||||
} from '@/shared/types.js';
|
||||
|
||||
export const providerSkillsService = {
|
||||
/**
|
||||
@@ -12,4 +16,15 @@ export const providerSkillsService = {
|
||||
const provider = providerRegistry.resolveProvider(providerName);
|
||||
return provider.skills.listSkills(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* Writes one or more global skills for one provider.
|
||||
*/
|
||||
async addProviderSkills(
|
||||
providerName: string,
|
||||
input: ProviderSkillCreateInput,
|
||||
): Promise<ProviderSkill[]> {
|
||||
const provider = providerRegistry.resolveProvider(providerName);
|
||||
return provider.skills.addSkills(input);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,20 +1,75 @@
|
||||
import path from 'node:path';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
|
||||
import type { IProviderSkills } from '@/shared/interfaces.js';
|
||||
import type {
|
||||
LLMProvider,
|
||||
ProviderSkillCreateInput,
|
||||
ProviderSkill,
|
||||
ProviderSkillListOptions,
|
||||
ProviderSkillSource,
|
||||
} from '@/shared/types.js';
|
||||
import {
|
||||
findProviderSkillMarkdownFiles,
|
||||
readOptionalString,
|
||||
readProviderSkillMarkdownDefinitionFromContent,
|
||||
readProviderSkillMarkdownDefinition,
|
||||
AppError,
|
||||
} from '@/shared/utils.js';
|
||||
|
||||
const resolveWorkspacePath = (workspacePath?: string): string =>
|
||||
path.resolve(workspacePath ?? process.cwd());
|
||||
|
||||
const stripMarkdownExtension = (value: string): string => value.replace(/\.md$/i, '');
|
||||
|
||||
const normalizeSkillDirectoryName = (value: string): string => (
|
||||
value
|
||||
.trim()
|
||||
.replace(/[\\/]+/g, '-')
|
||||
.replace(/[<>:"|?*\x00-\x1F]/g, '-')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^\.+|\.+$/g, '')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
);
|
||||
|
||||
const resolveSkillSupportingFilePath = (
|
||||
skillDirectoryPath: string,
|
||||
relativePath: string,
|
||||
entryIndex: number,
|
||||
): string => {
|
||||
const normalizedRelativePath = relativePath.trim().replace(/\\/g, '/');
|
||||
const pathSegments = normalizedRelativePath.split('/');
|
||||
if (
|
||||
!normalizedRelativePath
|
||||
|| path.isAbsolute(normalizedRelativePath)
|
||||
|| pathSegments.some((segment) => !segment || segment === '.' || segment === '..')
|
||||
|| normalizedRelativePath.toLowerCase() === 'skill.md'
|
||||
) {
|
||||
throw new AppError(
|
||||
`Skill entry ${entryIndex + 1} includes an invalid supporting file path "${relativePath}".`,
|
||||
{
|
||||
code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const resolvedSkillDirectoryPath = path.resolve(skillDirectoryPath);
|
||||
const resolvedFilePath = path.resolve(resolvedSkillDirectoryPath, ...pathSegments);
|
||||
if (!resolvedFilePath.startsWith(`${resolvedSkillDirectoryPath}${path.sep}`)) {
|
||||
throw new AppError(
|
||||
`Skill entry ${entryIndex + 1} supporting files must stay inside the skill directory.`,
|
||||
{
|
||||
code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return resolvedFilePath;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared skills provider for provider-specific skill source discovery.
|
||||
*/
|
||||
@@ -60,5 +115,109 @@ export abstract class SkillsProvider implements IProviderSkills {
|
||||
return skills;
|
||||
}
|
||||
|
||||
async addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]> {
|
||||
const globalSkillSource = await this.getGlobalSkillSource();
|
||||
if (!globalSkillSource) {
|
||||
throw new AppError(`${this.provider} does not support managed global skills.`, {
|
||||
code: 'PROVIDER_SKILLS_WRITE_UNSUPPORTED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
if (!Array.isArray(input.entries) || input.entries.length === 0) {
|
||||
throw new AppError('At least one skill entry is required.', {
|
||||
code: 'PROVIDER_SKILLS_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
await mkdir(globalSkillSource.rootDir, { recursive: true });
|
||||
|
||||
const createdSkills: ProviderSkill[] = [];
|
||||
const seenSkillPaths = new Set<string>();
|
||||
|
||||
for (const [index, entry] of input.entries.entries()) {
|
||||
const content = typeof entry.content === 'string' ? entry.content.trim() : '';
|
||||
if (!content) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
|
||||
code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const fileNameFallback = readOptionalString(entry.fileName);
|
||||
const requestedDirectoryName = readOptionalString(entry.directoryName);
|
||||
const fallbackSkillName = requestedDirectoryName
|
||||
?? (fileNameFallback ? stripMarkdownExtension(fileNameFallback) : `skill-${index + 1}`);
|
||||
const definition = readProviderSkillMarkdownDefinitionFromContent(content, fallbackSkillName);
|
||||
const resolvedDirectoryName = normalizeSkillDirectoryName(
|
||||
requestedDirectoryName ?? definition.name,
|
||||
);
|
||||
|
||||
if (!resolvedDirectoryName) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include a valid skill name.`, {
|
||||
code: 'PROVIDER_SKILL_NAME_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const skillDirectoryPath = path.join(globalSkillSource.rootDir, resolvedDirectoryName);
|
||||
const skillPath = path.join(skillDirectoryPath, 'SKILL.md');
|
||||
const normalizedSkillPath = path.resolve(skillPath);
|
||||
if (seenSkillPaths.has(normalizedSkillPath)) {
|
||||
throw new AppError(`Duplicate skill target "${resolvedDirectoryName}" in one request.`, {
|
||||
code: 'PROVIDER_SKILL_DUPLICATE_TARGET',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
seenSkillPaths.add(normalizedSkillPath);
|
||||
const supportingFiles = (entry.files ?? []).map((file) => ({
|
||||
targetPath: resolveSkillSupportingFilePath(skillDirectoryPath, file.relativePath, index),
|
||||
content: file.encoding === 'base64'
|
||||
? Buffer.from(file.content, 'base64')
|
||||
: file.content,
|
||||
}));
|
||||
const seenSupportingPaths = new Set<string>();
|
||||
for (const file of supportingFiles) {
|
||||
if (seenSupportingPaths.has(file.targetPath)) {
|
||||
throw new AppError(`Skill entry ${index + 1} includes a duplicate supporting file path.`, {
|
||||
code: 'PROVIDER_SKILL_DUPLICATE_FILE',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
seenSupportingPaths.add(file.targetPath);
|
||||
}
|
||||
|
||||
await mkdir(skillDirectoryPath, { recursive: true });
|
||||
await writeFile(skillPath, `${content}\n`, 'utf8');
|
||||
for (const file of supportingFiles) {
|
||||
await mkdir(path.dirname(file.targetPath), { recursive: true });
|
||||
await writeFile(file.targetPath, file.content);
|
||||
}
|
||||
|
||||
const command = globalSkillSource.commandForSkill
|
||||
? globalSkillSource.commandForSkill(definition.name)
|
||||
: `${globalSkillSource.commandPrefix ?? '/'}${definition.name}`;
|
||||
|
||||
createdSkills.push({
|
||||
provider: this.provider,
|
||||
name: definition.name,
|
||||
description: definition.description,
|
||||
command,
|
||||
scope: globalSkillSource.scope,
|
||||
sourcePath: skillPath,
|
||||
pluginName: globalSkillSource.pluginName,
|
||||
pluginId: globalSkillSource.pluginId,
|
||||
});
|
||||
}
|
||||
|
||||
return createdSkills;
|
||||
}
|
||||
|
||||
protected abstract getSkillSources(workspacePath: string): Promise<ProviderSkillSource[]>;
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource | null> {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -510,3 +510,144 @@ test('providerSkillsService lists gemini and cursor skills from their configured
|
||||
await fs.rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* This test covers managed global skill creation for providers that own a
|
||||
* writable user skill directory.
|
||||
*/
|
||||
test('providerSkillsService adds global skills for claude, codex, gemini, and cursor', { concurrency: false }, async () => {
|
||||
const tempRoot = await fs.mkdtemp(path.join(os.tmpdir(), 'llm-skills-create-'));
|
||||
const restoreHomeDir = patchHomeDir(tempRoot);
|
||||
|
||||
try {
|
||||
const createdClaudeSkills = await providerSkillsService.addProviderSkills('claude', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'claude-global-dir',
|
||||
content: '---\nname: claude-global\ndescription: Claude global skill\n---\n\nClaude body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdClaudeSkill = createdClaudeSkills[0];
|
||||
assert.ok(createdClaudeSkill);
|
||||
assert.equal(createdClaudeSkill.command, '/claude-global');
|
||||
assert.equal(
|
||||
createdClaudeSkill.sourcePath.endsWith(path.join('.claude', 'skills', 'claude-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
assert.match(
|
||||
await fs.readFile(createdClaudeSkill.sourcePath, 'utf8'),
|
||||
/Claude body\./,
|
||||
);
|
||||
|
||||
const createdCodexSkills = await providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
fileName: 'SKILL.md',
|
||||
content: '---\nname: codex-global\ndescription: Codex global skill\n---\n\nCodex body.\n',
|
||||
files: [
|
||||
{
|
||||
relativePath: 'scripts/run.js',
|
||||
content: Buffer.from('console.log("codex skill");\n').toString('base64'),
|
||||
encoding: 'base64',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdCodexSkill = createdCodexSkills[0];
|
||||
assert.ok(createdCodexSkill);
|
||||
assert.equal(createdCodexSkill.command, '$codex-global');
|
||||
assert.equal(
|
||||
createdCodexSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'codex-global', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
assert.equal(
|
||||
await fs.readFile(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js'), 'utf8'),
|
||||
'console.log("codex skill");\n',
|
||||
);
|
||||
|
||||
const createdGeminiSkills = await providerSkillsService.addProviderSkills('gemini', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'gemini-global-dir',
|
||||
content: '---\nname: gemini-global\ndescription: Gemini global skill\n---\n\nGemini body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdGeminiSkill = createdGeminiSkills[0];
|
||||
assert.ok(createdGeminiSkill);
|
||||
assert.equal(createdGeminiSkill.command, '/gemini-global');
|
||||
assert.equal(
|
||||
createdGeminiSkill.sourcePath.endsWith(path.join('.gemini', 'skills', 'gemini-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
|
||||
const createdCursorSkills = await providerSkillsService.addProviderSkills('cursor', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'cursor-global-dir',
|
||||
content: '---\nname: cursor-global\ndescription: Cursor global skill\n---\n\nCursor body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdCursorSkill = createdCursorSkills[0];
|
||||
assert.ok(createdCursorSkill);
|
||||
assert.equal(createdCursorSkill.command, '/cursor-global');
|
||||
assert.equal(
|
||||
createdCursorSkill.sourcePath.endsWith(path.join('.cursor', 'skills', 'cursor-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
|
||||
const listedClaudeSkills = await providerSkillsService.listProviderSkills('claude');
|
||||
assert.equal(listedClaudeSkills.some((skill) => skill.name === 'claude-global'), true);
|
||||
|
||||
const listedCodexSkills = await providerSkillsService.listProviderSkills('codex');
|
||||
assert.equal(listedCodexSkills.some((skill) => skill.name === 'codex-global'), true);
|
||||
|
||||
const listedGeminiSkills = await providerSkillsService.listProviderSkills('gemini');
|
||||
assert.equal(listedGeminiSkills.some((skill) => skill.name === 'gemini-global'), true);
|
||||
|
||||
const listedCursorSkills = await providerSkillsService.listProviderSkills('cursor');
|
||||
assert.equal(listedCursorSkills.some((skill) => skill.name === 'cursor-global'), true);
|
||||
|
||||
await assert.rejects(
|
||||
providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
content: '---\nname: unsafe-skill\n---\n',
|
||||
files: [
|
||||
{
|
||||
relativePath: '../outside.js',
|
||||
content: '',
|
||||
encoding: 'utf8',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
/invalid supporting file path/i,
|
||||
);
|
||||
} finally {
|
||||
restoreHomeDir();
|
||||
await fs.rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* OpenCode reuses other providers' skill folders, so it should not accept
|
||||
* direct skill writes through the managed provider endpoint.
|
||||
*/
|
||||
test('providerSkillsService rejects managed skill creation for opencode', { concurrency: false }, async () => {
|
||||
await assert.rejects(
|
||||
providerSkillsService.addProviderSkills('opencode', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'opencode-global-dir',
|
||||
content: '---\nname: opencode-global\ndescription: Unsupported skill\n---\n\nOpenCode body.\n',
|
||||
},
|
||||
],
|
||||
}),
|
||||
/does not support managed global skills/i,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
ProviderModelsDefinition,
|
||||
ProviderMcpServer,
|
||||
ProviderSessionActiveModelChange,
|
||||
ProviderSkillCreateInput,
|
||||
UpsertProviderMcpServerInput,
|
||||
} from '@/shared/types.js';
|
||||
|
||||
@@ -101,6 +102,15 @@ export interface IProviderSkills {
|
||||
* Lists all skills visible to this provider for the optional workspace.
|
||||
*/
|
||||
listSkills(options?: ProviderSkillListOptions): Promise<ProviderSkill[]>;
|
||||
|
||||
/**
|
||||
* Writes one or more global user-scoped skills for this provider.
|
||||
*
|
||||
* Implementations should install the supplied markdown entries into the
|
||||
* provider's writable user skill folder and return the normalized skill
|
||||
* records that were written.
|
||||
*/
|
||||
addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]>;
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
|
||||
@@ -320,6 +320,47 @@ export type ProviderSkillListOptions = {
|
||||
workspacePath?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* One supporting file bundled with an uploaded provider skill.
|
||||
*
|
||||
* `relativePath` is resolved below the installed skill directory and must never
|
||||
* be absolute or contain traversal segments. Text files may use `utf8`; binary
|
||||
* scripts and assets should use `base64` so JSON transport does not corrupt
|
||||
* their bytes.
|
||||
*/
|
||||
export type ProviderSkillCreateFile = {
|
||||
relativePath: string;
|
||||
content: string;
|
||||
encoding: 'utf8' | 'base64';
|
||||
};
|
||||
|
||||
/**
|
||||
* One skill markdown payload submitted for provider-managed installation.
|
||||
*
|
||||
* `content` is the raw markdown body that will be written to `SKILL.md`.
|
||||
* `directoryName` lets callers control the target folder name explicitly when
|
||||
* they want stable filesystem paths that differ from the markdown front matter
|
||||
* `name` field. `fileName` is optional upload metadata used only as a final
|
||||
* fallback when no directory name or front matter name is present. `files`
|
||||
* carries scripts, references, and other files from a complete skill folder.
|
||||
*/
|
||||
export type ProviderSkillCreateEntry = {
|
||||
content: string;
|
||||
directoryName?: string;
|
||||
fileName?: string;
|
||||
files?: ProviderSkillCreateFile[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared input accepted by provider skill creation operations.
|
||||
*
|
||||
* The service layer batches multiple skill definitions in one request. Each
|
||||
* entry can contain only markdown or a complete skill folder.
|
||||
*/
|
||||
export type ProviderSkillCreateInput = {
|
||||
entries: ProviderSkillCreateEntry[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Normalized skill record returned by provider skill adapters.
|
||||
*
|
||||
|
||||
@@ -957,9 +957,25 @@ export async function readProviderSkillMarkdownDefinition(
|
||||
skillPath: string,
|
||||
): Promise<{ name: string; description: string }> {
|
||||
const content = await readFile(skillPath, 'utf8');
|
||||
return readProviderSkillMarkdownDefinitionFromContent(
|
||||
content,
|
||||
path.basename(path.dirname(skillPath)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the `name` and `description` fields from raw skill markdown content.
|
||||
*
|
||||
* This keeps filesystem discovery and newly uploaded skill creation aligned on
|
||||
* the same front matter parsing rules. `fallbackName` is used when the markdown
|
||||
* omits a `name` field so callers still get a stable, non-empty skill id.
|
||||
*/
|
||||
export function readProviderSkillMarkdownDefinitionFromContent(
|
||||
content: string,
|
||||
fallbackName: string,
|
||||
): { name: string; description: string } {
|
||||
const parsed = parseFrontMatter(content);
|
||||
const data = readObjectRecord(parsed.data) ?? {};
|
||||
const fallbackName = path.basename(path.dirname(skillPath));
|
||||
|
||||
return {
|
||||
name: readOptionalString(data.name) ?? fallbackName,
|
||||
|
||||
@@ -5,7 +5,7 @@ import type { ProviderAuthStatus } from '../../provider-auth/types';
|
||||
|
||||
export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
|
||||
export type AgentProvider = LLMProvider;
|
||||
export type AgentCategory = 'account' | 'permissions' | 'mcp';
|
||||
export type AgentCategory = 'account' | 'permissions' | 'mcp' | 'skills';
|
||||
export type ProjectSortOrder = 'name' | 'date';
|
||||
export type SaveStatus = 'success' | 'error' | null;
|
||||
export type CodexPermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
|
||||
import { Button } from '../../../shared/view/ui';
|
||||
import SettingsSidebar from '../view/SettingsSidebar';
|
||||
@@ -101,12 +102,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
|
||||
</div>
|
||||
|
||||
{/* Body: sidebar + content */}
|
||||
<div className="flex min-h-0 flex-1 flex-col md:flex-row">
|
||||
<div className="flex min-h-0 min-w-0 flex-1 flex-col md:flex-row">
|
||||
<SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />
|
||||
|
||||
{/* Content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<div key={activeTab} className="settings-content-enter space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
|
||||
<main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<div key={activeTab} className="settings-content-enter min-w-0 space-y-6 overflow-x-hidden p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
|
||||
{activeTab === 'appearance' && (
|
||||
<AppearanceSettingsTab
|
||||
projectSortOrder={projectSortOrder}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import type { AgentCategory, AgentProvider } from '../../../types/types';
|
||||
|
||||
@@ -22,6 +22,11 @@ export default function AgentsSettingsTab({
|
||||
}: AgentsSettingsTabProps) {
|
||||
const [selectedAgent, setSelectedAgent] = useState<AgentProvider>('claude');
|
||||
const [selectedCategory, setSelectedCategory] = useState<AgentCategory>('account');
|
||||
const visibleCategories = useMemo<AgentCategory[]>(() => (
|
||||
selectedAgent === 'opencode'
|
||||
? ['account', 'permissions', 'mcp']
|
||||
: ['account', 'permissions', 'mcp', 'skills']
|
||||
), [selectedAgent]);
|
||||
|
||||
const visibleAgents = useMemo<AgentProvider[]>(() => {
|
||||
return ['claude', 'cursor', 'codex', 'gemini', 'opencode'];
|
||||
@@ -57,8 +62,14 @@ export default function AgentsSettingsTab({
|
||||
providerAuthStatus.opencode,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visibleCategories.includes(selectedCategory)) {
|
||||
setSelectedCategory(visibleCategories[0] ?? 'account');
|
||||
}
|
||||
}, [selectedCategory, visibleCategories]);
|
||||
|
||||
return (
|
||||
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
|
||||
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] min-w-0 flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
|
||||
<AgentSelectorSection
|
||||
agents={visibleAgents}
|
||||
selectedAgent={selectedAgent}
|
||||
@@ -66,8 +77,10 @@ export default function AgentsSettingsTab({
|
||||
agentContextById={agentContextById}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<AgentCategoryTabsSection
|
||||
categories={visibleCategories}
|
||||
selectedAgent={selectedAgent}
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={setSelectedCategory}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import type { AgentCategoryContentSectionProps } from '../types';
|
||||
import type { McpProject } from '../../../../../mcp/types';
|
||||
import { McpServers } from '../../../../../mcp';
|
||||
import type { SkillsProject } from '../../../../../skills/types';
|
||||
import { ProviderSkills } from '../../../../../skills';
|
||||
|
||||
import AccountContent from './content/AccountContent';
|
||||
import PermissionsContent from './content/PermissionsContent';
|
||||
@@ -18,7 +20,7 @@ export default function AgentCategoryContentSection({
|
||||
projects,
|
||||
}: AgentCategoryContentSectionProps) {
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto p-3 md:p-4">
|
||||
<div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-3 md:p-4">
|
||||
{selectedCategory === 'account' && (
|
||||
<AccountContent
|
||||
agent={selectedAgent}
|
||||
@@ -84,6 +86,18 @@ export default function AgentCategoryContentSection({
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCategory === 'skills' && selectedAgent !== 'opencode' && (
|
||||
<ProviderSkills
|
||||
selectedProvider={selectedAgent}
|
||||
currentProjects={projects.map<SkillsProject>((project) => ({
|
||||
projectId: project.name,
|
||||
displayName: project.displayName,
|
||||
fullPath: project.fullPath,
|
||||
path: project.path,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { cn } from '../../../../../../lib/utils';
|
||||
import type { AgentCategory } from '../../../../types/types';
|
||||
import type { AgentCategoryTabsSectionProps } from '../types';
|
||||
|
||||
const AGENT_CATEGORIES: AgentCategory[] = ['account', 'permissions', 'mcp'];
|
||||
|
||||
export default function AgentCategoryTabsSection({
|
||||
categories,
|
||||
selectedAgent,
|
||||
selectedCategory,
|
||||
onSelectCategory,
|
||||
}: AgentCategoryTabsSectionProps) {
|
||||
@@ -14,7 +14,7 @@ export default function AgentCategoryTabsSection({
|
||||
return (
|
||||
<div className="flex-shrink-0 border-b border-border">
|
||||
<div role="tablist" className="flex overflow-x-auto px-2 md:px-4">
|
||||
{AGENT_CATEGORIES.map((category) => (
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
role="tab"
|
||||
@@ -30,6 +30,9 @@ export default function AgentCategoryTabsSection({
|
||||
{category === 'account' && t('tabs.account')}
|
||||
{category === 'permissions' && t('tabs.permissions')}
|
||||
{category === 'mcp' && t('tabs.mcpServers')}
|
||||
{category === 'skills' && t('tabs.skills', {
|
||||
defaultValue: selectedAgent === 'opencode' ? 'Shared Skills' : 'Skills',
|
||||
})}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,8 @@ export type AgentsSettingsTabProps = {
|
||||
};
|
||||
|
||||
export type AgentCategoryTabsSectionProps = {
|
||||
categories: AgentCategory[];
|
||||
selectedAgent: AgentProvider;
|
||||
selectedCategory: AgentCategory;
|
||||
onSelectCategory: (category: AgentCategory) => void;
|
||||
};
|
||||
|
||||
344
src/components/skills/hooks/useProviderSkills.ts
Normal file
344
src/components/skills/hooks/useProviderSkills.ts
Normal file
@@ -0,0 +1,344 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import type {
|
||||
ApiResponse,
|
||||
ProviderSkill,
|
||||
ProviderSkillCreatePayload,
|
||||
ProviderSkillsResponse,
|
||||
SkillsProject,
|
||||
SkillsProvider,
|
||||
SkillsScope,
|
||||
} from '../types';
|
||||
|
||||
type SkillsCacheEntry = {
|
||||
skills: ProviderSkill[];
|
||||
updatedAt: number;
|
||||
};
|
||||
|
||||
type ProjectTarget = {
|
||||
projectId: string;
|
||||
displayName: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
const SKILLS_CACHE_TTL_MS = 5 * 60_000;
|
||||
const skillsCache = new Map<string, SkillsCacheEntry>();
|
||||
|
||||
const SKILL_SCOPE_ORDER: Record<SkillsScope, number> = {
|
||||
user: 0,
|
||||
plugin: 1,
|
||||
repo: 2,
|
||||
project: 3,
|
||||
admin: 4,
|
||||
system: 5,
|
||||
};
|
||||
|
||||
const toResponseJson = async <T>(response: Response): Promise<T> => response.json() as Promise<T>;
|
||||
|
||||
const getApiErrorMessage = (payload: unknown, fallback: string): string => {
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const record = payload as Record<string, unknown>;
|
||||
const error = record.error;
|
||||
if (error && typeof error === 'object') {
|
||||
const message = (error as Record<string, unknown>).message;
|
||||
if (typeof message === 'string' && message.trim()) {
|
||||
return message;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof error === 'string' && error.trim()) {
|
||||
return error;
|
||||
}
|
||||
|
||||
const details = record.details;
|
||||
if (typeof details === 'string' && details.trim()) {
|
||||
return details;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const isSkillsScope = (value: unknown): value is SkillsScope => (
|
||||
value === 'user'
|
||||
|| value === 'project'
|
||||
|| value === 'plugin'
|
||||
|| value === 'repo'
|
||||
|| value === 'admin'
|
||||
|| value === 'system'
|
||||
);
|
||||
|
||||
const normalizeScope = (value: unknown): SkillsScope => (
|
||||
isSkillsScope(value) ? value : 'user'
|
||||
);
|
||||
|
||||
const createProjectTargets = (projects: SkillsProject[]): ProjectTarget[] => {
|
||||
const seenPaths = new Set<string>();
|
||||
|
||||
return projects.reduce<ProjectTarget[]>((acc, project) => {
|
||||
const projectPath = project.fullPath || project.path || '';
|
||||
if (!projectPath || seenPaths.has(projectPath)) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
seenPaths.add(projectPath);
|
||||
acc.push({
|
||||
projectId: project.projectId,
|
||||
displayName: project.displayName || project.projectId,
|
||||
path: projectPath,
|
||||
});
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const normalizeSkill = (
|
||||
provider: SkillsProvider,
|
||||
skill: Partial<ProviderSkill>,
|
||||
project?: ProjectTarget,
|
||||
): ProviderSkill => {
|
||||
const scope = normalizeScope(skill.scope);
|
||||
const shouldAttachProject = scope === 'project' || scope === 'repo';
|
||||
|
||||
return {
|
||||
provider,
|
||||
name: String(skill.name ?? ''),
|
||||
description: String(skill.description ?? ''),
|
||||
command: String(skill.command ?? ''),
|
||||
scope,
|
||||
sourcePath: String(skill.sourcePath ?? ''),
|
||||
pluginName: typeof skill.pluginName === 'string' ? skill.pluginName : undefined,
|
||||
pluginId: typeof skill.pluginId === 'string' ? skill.pluginId : undefined,
|
||||
projectDisplayName: shouldAttachProject ? project?.displayName : undefined,
|
||||
projectPath: shouldAttachProject ? project?.path : undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const getSkillIdentity = (skill: ProviderSkill): string => (
|
||||
[
|
||||
skill.provider,
|
||||
skill.scope,
|
||||
skill.command,
|
||||
skill.sourcePath || 'no-source-path',
|
||||
skill.projectPath || 'global',
|
||||
].join(':')
|
||||
);
|
||||
|
||||
const sortSkills = (skills: ProviderSkill[]): ProviderSkill[] => (
|
||||
[...skills].sort((left, right) => {
|
||||
const scopeDelta = SKILL_SCOPE_ORDER[left.scope] - SKILL_SCOPE_ORDER[right.scope];
|
||||
if (scopeDelta !== 0) {
|
||||
return scopeDelta;
|
||||
}
|
||||
|
||||
const projectDelta = (left.projectDisplayName || '').localeCompare(right.projectDisplayName || '');
|
||||
if (projectDelta !== 0) {
|
||||
return projectDelta;
|
||||
}
|
||||
|
||||
return left.command.localeCompare(right.command);
|
||||
})
|
||||
);
|
||||
|
||||
const mergeSkills = (
|
||||
existingSkills: ProviderSkill[],
|
||||
incomingSkills: ProviderSkill[],
|
||||
): ProviderSkill[] => {
|
||||
const skillsById = new Map<string, ProviderSkill>();
|
||||
existingSkills.forEach((skill) => {
|
||||
skillsById.set(getSkillIdentity(skill), skill);
|
||||
});
|
||||
incomingSkills.forEach((skill) => {
|
||||
skillsById.set(getSkillIdentity(skill), skill);
|
||||
});
|
||||
|
||||
return sortSkills([...skillsById.values()]);
|
||||
};
|
||||
|
||||
const fetchProviderSkills = async (
|
||||
provider: SkillsProvider,
|
||||
project?: ProjectTarget,
|
||||
): Promise<ProviderSkill[]> => {
|
||||
const params = new URLSearchParams();
|
||||
if (project?.path) {
|
||||
params.set('workspacePath', project.path);
|
||||
}
|
||||
|
||||
const response = await authenticatedFetch(
|
||||
`/api/providers/${provider}/skills${params.toString() ? `?${params.toString()}` : ''}`,
|
||||
);
|
||||
const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(getApiErrorMessage(data, `Failed to load ${provider} skills`));
|
||||
}
|
||||
|
||||
return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill, project));
|
||||
};
|
||||
|
||||
const saveProviderSkills = async (
|
||||
provider: SkillsProvider,
|
||||
payload: ProviderSkillCreatePayload,
|
||||
): Promise<ProviderSkill[]> => {
|
||||
const response = await authenticatedFetch(`/api/providers/${provider}/skills`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(getApiErrorMessage(data, 'Failed to save skills'));
|
||||
}
|
||||
|
||||
return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill));
|
||||
};
|
||||
|
||||
const getCacheKey = (provider: SkillsProvider, projects: ProjectTarget[]): string => {
|
||||
const projectKey = projects.map((project) => project.path).sort().join('|');
|
||||
return `${provider}:${projectKey}`;
|
||||
};
|
||||
|
||||
const clearProviderSkillCache = (provider: SkillsProvider): void => {
|
||||
for (const cacheKey of [...skillsCache.keys()]) {
|
||||
if (cacheKey.startsWith(`${provider}:`)) {
|
||||
skillsCache.delete(cacheKey);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
type UseProviderSkillsArgs = {
|
||||
selectedProvider: SkillsProvider;
|
||||
currentProjects: SkillsProject[];
|
||||
};
|
||||
|
||||
export function useProviderSkills({ selectedProvider, currentProjects }: UseProviderSkillsArgs) {
|
||||
const [skills, setSkills] = useState<ProviderSkill[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingProjectScopes, setIsLoadingProjectScopes] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [saveStatus, setSaveStatus] = useState<'success' | 'error' | null>(null);
|
||||
const activeLoadIdRef = useRef(0);
|
||||
|
||||
const projectTargets = useMemo(() => createProjectTargets(currentProjects), [currentProjects]);
|
||||
const cacheKey = useMemo(() => getCacheKey(selectedProvider, projectTargets), [projectTargets, selectedProvider]);
|
||||
|
||||
const refreshSkills = useCallback(async (options: { force?: boolean } = {}) => {
|
||||
const loadId = activeLoadIdRef.current + 1;
|
||||
activeLoadIdRef.current = loadId;
|
||||
|
||||
const cachedEntry = skillsCache.get(cacheKey);
|
||||
const canUseCache = !options.force && cachedEntry && Date.now() - cachedEntry.updatedAt < SKILLS_CACHE_TTL_MS;
|
||||
if (canUseCache) {
|
||||
setSkills(cachedEntry.skills);
|
||||
setIsLoading(false);
|
||||
setIsLoadingProjectScopes(false);
|
||||
setLoadError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (cachedEntry && !options.force) {
|
||||
setSkills(cachedEntry.skills);
|
||||
} else {
|
||||
setSkills([]);
|
||||
}
|
||||
|
||||
setIsLoading(!cachedEntry);
|
||||
setIsLoadingProjectScopes(false);
|
||||
setLoadError(null);
|
||||
|
||||
let nextSkills = cachedEntry && !options.force ? cachedEntry.skills : [];
|
||||
let firstError: string | null = null;
|
||||
|
||||
try {
|
||||
const globalSkills = await fetchProviderSkills(selectedProvider);
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
nextSkills = mergeSkills(nextSkills, globalSkills);
|
||||
setSkills(nextSkills);
|
||||
} catch (error) {
|
||||
firstError = error instanceof Error ? error.message : 'Failed to load skills';
|
||||
}
|
||||
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
if (projectTargets.length === 0) {
|
||||
const finalSkills = sortSkills(nextSkills);
|
||||
skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
|
||||
setSkills(finalSkills);
|
||||
setLoadError(firstError);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoadingProjectScopes(true);
|
||||
|
||||
await Promise.all(projectTargets.map(async (project) => {
|
||||
try {
|
||||
const projectSkills = await fetchProviderSkills(selectedProvider, project);
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
nextSkills = mergeSkills(nextSkills, projectSkills);
|
||||
setSkills(nextSkills);
|
||||
} catch (error) {
|
||||
firstError = firstError || (error instanceof Error ? error.message : 'Failed to load skills');
|
||||
}
|
||||
}));
|
||||
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const finalSkills = sortSkills(nextSkills);
|
||||
skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
|
||||
setSkills(finalSkills);
|
||||
setLoadError(firstError);
|
||||
setIsLoadingProjectScopes(false);
|
||||
}, [cacheKey, projectTargets, selectedProvider]);
|
||||
|
||||
const addSkills = useCallback(async (payload: ProviderSkillCreatePayload) => {
|
||||
try {
|
||||
const createdSkills = await saveProviderSkills(selectedProvider, payload);
|
||||
clearProviderSkillCache(selectedProvider);
|
||||
await refreshSkills({ force: true });
|
||||
setSaveStatus('success');
|
||||
return createdSkills;
|
||||
} catch (error) {
|
||||
setSaveStatus('error');
|
||||
throw error;
|
||||
}
|
||||
}, [refreshSkills, selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshSkills();
|
||||
}, [refreshSkills]);
|
||||
|
||||
useEffect(() => {
|
||||
setSaveStatus(null);
|
||||
}, [selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
if (saveStatus === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = window.setTimeout(() => setSaveStatus(null), 6000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [saveStatus]);
|
||||
|
||||
return {
|
||||
skills,
|
||||
isLoading,
|
||||
isLoadingProjectScopes,
|
||||
loadError,
|
||||
saveStatus,
|
||||
addSkills,
|
||||
refreshSkills,
|
||||
};
|
||||
}
|
||||
1
src/components/skills/index.ts
Normal file
1
src/components/skills/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as ProviderSkills } from './view/ProviderSkills';
|
||||
60
src/components/skills/types.ts
Normal file
60
src/components/skills/types.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import type { LLMProvider } from '../../types/app';
|
||||
|
||||
export type SkillsProvider = LLMProvider;
|
||||
export type SkillsScope = 'user' | 'project' | 'plugin' | 'repo' | 'admin' | 'system';
|
||||
|
||||
export type SkillsProject = {
|
||||
projectId: string;
|
||||
displayName?: string;
|
||||
fullPath?: string;
|
||||
path?: string;
|
||||
};
|
||||
|
||||
export type ProviderSkill = {
|
||||
provider: SkillsProvider;
|
||||
name: string;
|
||||
description: string;
|
||||
command: string;
|
||||
scope: SkillsScope;
|
||||
sourcePath: string;
|
||||
pluginName?: string;
|
||||
pluginId?: string;
|
||||
projectDisplayName?: string;
|
||||
projectPath?: string;
|
||||
};
|
||||
|
||||
export type ProviderSkillCreateEntryPayload = {
|
||||
content: string;
|
||||
directoryName?: string;
|
||||
fileName?: string;
|
||||
files?: Array<{
|
||||
relativePath: string;
|
||||
content: string;
|
||||
encoding: 'base64';
|
||||
}>;
|
||||
};
|
||||
|
||||
export type ProviderSkillCreatePayload = {
|
||||
entries: ProviderSkillCreateEntryPayload[];
|
||||
};
|
||||
|
||||
export type ProviderSkillsResponse = {
|
||||
provider: SkillsProvider;
|
||||
skills: Array<Partial<ProviderSkill>>;
|
||||
};
|
||||
|
||||
export type ApiSuccessResponse<T> = {
|
||||
success: true;
|
||||
data: T;
|
||||
};
|
||||
|
||||
export type ApiErrorResponse = {
|
||||
success: false;
|
||||
error?: {
|
||||
code?: string;
|
||||
message?: string;
|
||||
details?: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
export type ApiResponse<T> = ApiSuccessResponse<T> | ApiErrorResponse;
|
||||
602
src/components/skills/view/ProviderSkills.tsx
Normal file
602
src/components/skills/view/ProviderSkills.tsx
Normal file
@@ -0,0 +1,602 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import {
|
||||
CheckCircle2,
|
||||
FileCode2,
|
||||
FileText,
|
||||
FileUp,
|
||||
FolderUp,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Upload,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Input,
|
||||
} from '../../../shared/view/ui';
|
||||
import { useProviderSkills } from '../hooks/useProviderSkills';
|
||||
import type {
|
||||
ProviderSkill,
|
||||
ProviderSkillCreateEntryPayload,
|
||||
SkillsProject,
|
||||
SkillsProvider,
|
||||
SkillsScope,
|
||||
} from '../types';
|
||||
|
||||
type ProviderSkillsProps = {
|
||||
selectedProvider: SkillsProvider;
|
||||
currentProjects: SkillsProject[];
|
||||
};
|
||||
|
||||
type QueuedSkillSourceFile = {
|
||||
file: File;
|
||||
relativePath: string;
|
||||
};
|
||||
|
||||
type QueuedSkillFile = {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;
|
||||
kind: 'markdown' | 'folder';
|
||||
skillFile: File;
|
||||
files: QueuedSkillSourceFile[];
|
||||
};
|
||||
|
||||
const MAX_SKILL_FOLDER_FILES = 500;
|
||||
const MAX_SKILL_FOLDER_BYTES = 30 * 1024 * 1024;
|
||||
|
||||
const PROVIDER_NAMES: Record<SkillsProvider, string> = {
|
||||
claude: 'Claude',
|
||||
codex: 'Codex',
|
||||
cursor: 'Cursor',
|
||||
gemini: 'Gemini',
|
||||
opencode: 'OpenCode',
|
||||
};
|
||||
|
||||
const PROVIDER_SKILL_PATHS: Record<Exclude<SkillsProvider, 'opencode'>, string> = {
|
||||
claude: '~/.claude/skills/<skill-name>/SKILL.md',
|
||||
codex: '~/.agents/skills/<skill-name>/SKILL.md',
|
||||
cursor: '~/.cursor/skills/<skill-name>/SKILL.md',
|
||||
gemini: '~/.gemini/skills/<skill-name>/SKILL.md',
|
||||
};
|
||||
|
||||
const SCOPE_LABELS: Record<SkillsScope, string> = {
|
||||
user: 'User',
|
||||
plugin: 'Plugin',
|
||||
repo: 'Repo',
|
||||
project: 'Project',
|
||||
admin: 'Admin',
|
||||
system: 'System',
|
||||
};
|
||||
|
||||
const SCOPE_BADGE_CLASSES: Record<SkillsScope, string> = {
|
||||
user: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
|
||||
plugin: 'border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300',
|
||||
repo: 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300',
|
||||
project: 'border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-300',
|
||||
admin: 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300',
|
||||
system: 'border-slate-500/30 bg-slate-500/10 text-slate-700 dark:text-slate-300',
|
||||
};
|
||||
|
||||
const SCOPE_ORDER: SkillsScope[] = ['user', 'plugin', 'repo', 'project', 'admin', 'system'];
|
||||
|
||||
const groupSkillsByScope = (skills: ProviderSkill[]): Array<{ scope: SkillsScope; skills: ProviderSkill[] }> => (
|
||||
SCOPE_ORDER
|
||||
.map((scope) => ({ scope, skills: skills.filter((skill) => skill.scope === scope) }))
|
||||
.filter((group) => group.skills.length > 0)
|
||||
);
|
||||
|
||||
const formatFileSize = (size: number): string => {
|
||||
if (size < 1024) {
|
||||
return `${size} B`;
|
||||
}
|
||||
|
||||
if (size < 1024 * 1024) {
|
||||
return `${(size / 1024).toFixed(1)} KB`;
|
||||
}
|
||||
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const getBrowserRelativePath = (file: File): string => {
|
||||
const fileWithRelativePath = file as File & { webkitRelativePath?: string };
|
||||
return (fileWithRelativePath.webkitRelativePath || file.name).replace(/\\/g, '/');
|
||||
};
|
||||
|
||||
const getParentPath = (filePath: string): string => {
|
||||
const separatorIndex = filePath.lastIndexOf('/');
|
||||
return separatorIndex >= 0 ? filePath.slice(0, separatorIndex) : '';
|
||||
};
|
||||
|
||||
const getBaseName = (filePath: string): string => {
|
||||
const segments = filePath.split('/').filter(Boolean);
|
||||
return segments.at(-1) || 'skill';
|
||||
};
|
||||
|
||||
const readFileAsBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||
const separatorIndex = result.indexOf(',');
|
||||
resolve(separatorIndex >= 0 ? result.slice(separatorIndex + 1) : result);
|
||||
};
|
||||
reader.onerror = () => reject(reader.error ?? new Error(`Failed to read ${file.name}`));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
const buildQueuedSkillFolders = (selectedFiles: File[]): QueuedSkillFile[] => {
|
||||
if (selectedFiles.length > MAX_SKILL_FOLDER_FILES) {
|
||||
throw new Error(`A skill folder can contain up to ${MAX_SKILL_FOLDER_FILES} files.`);
|
||||
}
|
||||
|
||||
const totalSize = selectedFiles.reduce((size, file) => size + file.size, 0);
|
||||
if (totalSize > MAX_SKILL_FOLDER_BYTES) {
|
||||
throw new Error('Selected skill folders must be smaller than 30 MB in total.');
|
||||
}
|
||||
|
||||
const files = selectedFiles.map((file) => ({
|
||||
file,
|
||||
relativePath: getBrowserRelativePath(file),
|
||||
}));
|
||||
const skillRoots = files
|
||||
.filter(({ relativePath }) => getBaseName(relativePath).toLowerCase() === 'skill.md')
|
||||
.map(({ relativePath }) => getParentPath(relativePath))
|
||||
.sort((left, right) => right.length - left.length);
|
||||
|
||||
if (skillRoots.length === 0) {
|
||||
throw new Error('The selected folder does not contain a SKILL.md file.');
|
||||
}
|
||||
|
||||
return skillRoots.map((skillRoot) => {
|
||||
const skillFiles = files.filter(({ relativePath }) => {
|
||||
const owningRoot = skillRoots.find((candidateRoot) => (
|
||||
relativePath === `${candidateRoot}/SKILL.md`
|
||||
|| relativePath.startsWith(`${candidateRoot}/`)
|
||||
));
|
||||
return owningRoot === skillRoot;
|
||||
});
|
||||
const skillSourceFile = skillFiles.find(
|
||||
({ relativePath }) => relativePath === `${skillRoot}/SKILL.md`,
|
||||
);
|
||||
if (!skillSourceFile) {
|
||||
throw new Error(`Could not read SKILL.md from ${getBaseName(skillRoot)}.`);
|
||||
}
|
||||
|
||||
return {
|
||||
id: `folder:${skillRoot}:${skillFiles.map(({ file }) => file.lastModified).join(':')}`,
|
||||
name: getBaseName(skillRoot),
|
||||
size: skillFiles.reduce((size, { file }) => size + file.size, 0),
|
||||
kind: 'folder' as const,
|
||||
skillFile: skillSourceFile.file,
|
||||
files: skillFiles.map(({ file, relativePath }) => ({
|
||||
file,
|
||||
relativePath: skillRoot ? relativePath.slice(skillRoot.length + 1) : relativePath,
|
||||
})),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export default function ProviderSkills({ selectedProvider, currentProjects }: ProviderSkillsProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
const {
|
||||
skills,
|
||||
isLoading,
|
||||
isLoadingProjectScopes,
|
||||
loadError,
|
||||
saveStatus,
|
||||
addSkills,
|
||||
refreshSkills,
|
||||
} = useProviderSkills({ selectedProvider, currentProjects });
|
||||
const [queuedFiles, setQueuedFiles] = useState<QueuedSkillFile[]>([]);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const providerName = PROVIDER_NAMES[selectedProvider];
|
||||
const providerPath = selectedProvider === 'opencode' ? null : PROVIDER_SKILL_PATHS[selectedProvider];
|
||||
|
||||
useEffect(() => {
|
||||
setQueuedFiles([]);
|
||||
setSubmitError(null);
|
||||
setIsSubmitting(false);
|
||||
setSearchQuery('');
|
||||
}, [selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
folderInputRef.current?.setAttribute('webkitdirectory', '');
|
||||
folderInputRef.current?.setAttribute('directory', '');
|
||||
}, []);
|
||||
|
||||
const filteredSkills = useMemo(() => {
|
||||
const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return skills;
|
||||
}
|
||||
|
||||
return skills.filter((skill) => (
|
||||
[
|
||||
skill.command,
|
||||
skill.name,
|
||||
skill.description,
|
||||
skill.scope,
|
||||
skill.pluginName,
|
||||
skill.projectDisplayName,
|
||||
skill.sourcePath,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.some((value) => value?.toLocaleLowerCase().includes(normalizedQuery))
|
||||
));
|
||||
}, [searchQuery, skills]);
|
||||
|
||||
const groupedSkills = useMemo(() => groupSkillsByScope(filteredSkills), [filteredSkills]);
|
||||
|
||||
const handleDrop = useCallback((files: File[]) => {
|
||||
const acceptedFiles = files
|
||||
.filter((file) => file.name.toLowerCase().endsWith('.md'))
|
||||
.slice(0, 20);
|
||||
|
||||
setQueuedFiles((previous) => {
|
||||
const nextMap = new Map(previous.map((file) => [file.id, file]));
|
||||
acceptedFiles.forEach((file) => {
|
||||
const id = `${file.name}:${file.size}:${file.lastModified}`;
|
||||
nextMap.set(id, {
|
||||
id,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
kind: 'markdown',
|
||||
skillFile: file,
|
||||
files: [{ file, relativePath: 'SKILL.md' }],
|
||||
});
|
||||
});
|
||||
|
||||
return [...nextMap.values()].slice(0, 20);
|
||||
});
|
||||
setSubmitError(null);
|
||||
}, []);
|
||||
|
||||
const handleFolderSelection = useCallback((selectedFiles: File[]) => {
|
||||
try {
|
||||
const queuedFolders = buildQueuedSkillFolders(selectedFiles);
|
||||
setQueuedFiles((previous) => {
|
||||
const nextMap = new Map(previous.map((file) => [file.id, file]));
|
||||
queuedFolders.forEach((folder) => nextMap.set(folder.id, folder));
|
||||
return [...nextMap.values()].slice(0, 20);
|
||||
});
|
||||
setSubmitError(null);
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
|
||||
accept: {
|
||||
'text/markdown': ['.md'],
|
||||
'text/plain': ['.md'],
|
||||
},
|
||||
maxFiles: 20,
|
||||
noClick: true,
|
||||
noKeyboard: true,
|
||||
onDrop: handleDrop,
|
||||
});
|
||||
|
||||
const handleUploadInstall = useCallback(async () => {
|
||||
if (queuedFiles.length === 0) {
|
||||
setSubmitError('Add one or more markdown files first.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setSubmitError(null);
|
||||
|
||||
try {
|
||||
const entries = await Promise.all<ProviderSkillCreateEntryPayload>(queuedFiles.map(async (queuedFile) => ({
|
||||
fileName: queuedFile.kind === 'folder' ? `${queuedFile.name}.md` : queuedFile.name,
|
||||
content: await queuedFile.skillFile.text(),
|
||||
files: queuedFile.kind === 'folder'
|
||||
? await Promise.all(
|
||||
queuedFile.files
|
||||
.filter(({ relativePath }) => relativePath.toLowerCase() !== 'skill.md')
|
||||
.map(async ({ file, relativePath }) => ({
|
||||
relativePath,
|
||||
content: await readFileAsBase64(file),
|
||||
encoding: 'base64' as const,
|
||||
})),
|
||||
)
|
||||
: undefined,
|
||||
})));
|
||||
await addSkills({ entries });
|
||||
setQueuedFiles([]);
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'Failed to import skills');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [addSkills, queuedFiles]);
|
||||
|
||||
return (
|
||||
<div className="min-w-0 space-y-4 overflow-x-hidden">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
|
||||
<FileCode2 className="h-4 w-4" strokeWidth={1.7} />
|
||||
</div>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<h3 className="text-lg font-medium text-foreground">{t('tabs.skills', { defaultValue: 'Skills' })}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Install global {providerName} skills from `.md` files or complete skill folders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => void refreshSkills({ force: true })}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
disabled={isLoading || isLoadingProjectScopes}
|
||||
>
|
||||
<RefreshCw className={cn('h-4 w-4', (isLoading || isLoadingProjectScopes) && 'animate-spin')} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="min-w-0 overflow-hidden border-border/70 bg-background shadow-sm">
|
||||
<CardHeader className="space-y-3 border-b border-border/60 bg-muted/20">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<div className="text-sm font-medium text-foreground">Upload Skills</div>
|
||||
<div className="min-w-0 rounded-2xl border border-border/60 bg-background/70 p-3">
|
||||
<div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Install Path</div>
|
||||
<code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{providerPath}</code>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4 p-4">
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={cn(
|
||||
'rounded-3xl border border-dashed p-4 transition-colors sm:p-5',
|
||||
isDragActive
|
||||
? 'border-foreground/40 bg-muted/35'
|
||||
: 'border-border/70 bg-muted/15 hover:border-foreground/25 hover:bg-muted/25',
|
||||
)}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<input
|
||||
ref={folderInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
handleFolderSelection(Array.from(event.target.files ?? []));
|
||||
event.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center gap-3 py-4 text-center sm:py-6">
|
||||
<FileUp className="h-7 w-7 text-muted-foreground" strokeWidth={1.5} />
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium text-foreground">Drop `.md` files here</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Upload standalone definitions or choose a full folder to include its scripts, references, and assets.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
|
||||
<Button type="button" variant="outline" size="sm" onClick={open} className="w-full sm:w-auto">
|
||||
<FileUp className="h-4 w-4" />
|
||||
Choose Files
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => folderInputRef.current?.click()}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<FolderUp className="h-4 w-4" />
|
||||
Choose Folder
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{queuedFiles.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-foreground">Queued Files</div>
|
||||
<div className="grid gap-2">
|
||||
{queuedFiles.map((queuedFile) => (
|
||||
<div
|
||||
key={queuedFile.id}
|
||||
className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/70 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium text-foreground">{queuedFile.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{queuedFile.kind === 'folder'
|
||||
? `${queuedFile.files.length} files`
|
||||
: 'Markdown file'}
|
||||
{' · '}
|
||||
{formatFileSize(queuedFile.size)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => {
|
||||
setQueuedFiles((previous) => previous.filter((file) => file.id !== queuedFile.id));
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => void handleUploadInstall()}
|
||||
disabled={isSubmitting}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
|
||||
Install {queuedFiles.length > 0 ? `${queuedFiles.length} Skill${queuedFiles.length === 1 ? '' : 's'}` : 'Skills'}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
The skill folder name is taken from the `name` field in `SKILL.md`.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(submitError || loadError) && (
|
||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200">
|
||||
{submitError || loadError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{saveStatus === 'success' && (
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
Skills saved successfully.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0 border-border/70 bg-background/80 shadow-sm">
|
||||
<CardHeader className="border-b border-border/60">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="min-w-0">
|
||||
<CardTitle>Visible Skills</CardTitle>
|
||||
<CardDescription>
|
||||
The list below comes from the provider skill discovery API and includes global and project-aware locations.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="relative w-full lg:w-72">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="Search skills..."
|
||||
aria-label="Search visible skills"
|
||||
className="h-9 w-full pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
aria-label="Clear skill search"
|
||||
className="absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isLoadingProjectScopes && (
|
||||
<div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
Scanning project skills…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-5 p-4">
|
||||
{isLoading && skills.length === 0 && (
|
||||
<div className="flex min-h-[180px] items-center justify-center text-sm text-muted-foreground">
|
||||
Loading {providerName} skills…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && skills.length === 0 && (
|
||||
<div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-muted-foreground">
|
||||
<FileText className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-4 text-sm font-medium text-foreground">No skills discovered yet</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
Add a global skill above or create project-specific skill folders in your workspace.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && skills.length > 0 && filteredSkills.length === 0 && (
|
||||
<div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
|
||||
<Search className="mx-auto h-6 w-6 text-muted-foreground" />
|
||||
<div className="mt-3 text-sm font-medium text-foreground">No matching skills</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
Try a different command, name, scope, project, or source path.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupedSkills.map((group) => (
|
||||
<section key={group.scope} className="min-w-0 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className={cn('rounded-full px-2.5 py-1 text-xs', SCOPE_BADGE_CLASSES[group.scope])}>
|
||||
{SCOPE_LABELS[group.scope]}
|
||||
</Badge>
|
||||
<span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{group.skills.length} skill{group.skills.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid min-w-0 gap-3 lg:grid-cols-2">
|
||||
{group.skills.map((skill) => (
|
||||
<div
|
||||
key={`${skill.command}:${skill.sourcePath}:${skill.projectPath || 'global'}`}
|
||||
className="min-w-0 rounded-3xl border border-border/70 bg-gradient-to-br from-background via-background to-muted/25 p-4 shadow-sm"
|
||||
>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="break-all font-mono text-sm font-semibold text-foreground">{skill.command}</div>
|
||||
<div className="text-sm text-muted-foreground">{skill.name}</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
||||
{skill.description || 'No description provided in the skill front matter.'}
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
{skill.pluginName && (
|
||||
<Badge variant="outline" className="rounded-full bg-background/70">
|
||||
Plugin: {skill.pluginName}
|
||||
</Badge>
|
||||
)}
|
||||
{skill.projectDisplayName && (
|
||||
<Badge variant="outline" className="rounded-full bg-background/70">
|
||||
Project: {skill.projectDisplayName}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 min-w-0 rounded-2xl border border-border/60 bg-muted/20 px-3 py-2">
|
||||
<div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Source</div>
|
||||
<code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{skill.sourcePath}</code>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
"account": "Account",
|
||||
"permissions": "Permissions",
|
||||
"mcpServers": "MCP Servers",
|
||||
"skills": "Skills",
|
||||
"appearance": "Appearance"
|
||||
},
|
||||
"account": {
|
||||
|
||||
Reference in New Issue
Block a user