Compare commits

..

16 Commits

Author SHA1 Message Date
Simos Mikelatos
ffc0cd7501 Improve Browser settings load and managed MCP display 2026-06-17 20:04:44 +00:00
Simos Mikelatos
59194d1502 Refine Browser naming and managed MCP UX
- Rename Browser Use surfaces to Browser
- Register Browser MCP under the new server name
- Mark CloudCLI-managed MCP servers read-only
- Adjust MCP stdio framing and sidebar footer sizing
2026-06-17 19:18:23 +00:00
Simos Mikelatos
9881e5e366 feat(browser-use): improve mobile monitoring ux 2026-06-17 18:19:12 +00:00
Simos Mikelatos
496a895e8a feat(browser-use): refine monitoring panel ux 2026-06-17 17:39:55 +00:00
Simos Mikelatos
086df034b4 feat(browser-use): simplify agent session monitoring 2026-06-17 17:04:11 +00:00
Simos Mikelatos
a0d56429a7 fix browser use 2026-06-17 15:43:21 +00:00
Simos Mikelatos
6af4afe6f2 Merge branch 'main' into browser-use 2026-06-16 19:02:36 +02:00
Simos Mikelatos
56532af33a feat: add browser use guide links 2026-06-15 21:22:49 +00:00
Simos Mikelatos
9438a365f2 feat: improve browser use session controls 2026-06-15 21:14:10 +00:00
Simos Mikelatos
e5c6e5e596 fix: hide browser use runtime mode 2026-06-15 20:20:44 +00:00
Simos Mikelatos
0426522406 feat: expose browser use to agents via MCP 2026-06-15 19:47:58 +00:00
Simos Mikelatos
6e7e2ff4c1 feat: make browser use opt-in 2026-06-15 18:12:27 +00:00
Simos Mikelatos
e6263dbd1f refactor: store browser use settings in database 2026-06-15 17:57:00 +00:00
Simos Mikelatos
260070bae0 feat: add browser use runtime setup settings 2026-06-15 17:52:27 +00:00
Simos Mikelatos
828d1a2302 Merge remote-tracking branch 'origin/feat/unify-websocket-2' into browser-use-independent 2026-06-15 16:12:10 +00:00
Simos Mikelatos
243e6cecd5 Add browser use workspace panel 2026-06-14 20:34:16 +00:00
34 changed files with 25 additions and 1698 deletions

View File

@@ -25,21 +25,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
private readonly provider = 'claude' as const;
private readonly claudeHome = path.join(os.homedir(), '.claude');
/**
* Returns true when a JSONL file is a subagent transcript rather than a
* top-level session.
*
* Claude stores subagent transcripts under a `subagents/` directory, e.g.
* `~/.claude/projects/<encoded-cwd>/<session-id>/subagents/agent-<id>.jsonl`.
* Those files repeat the parent session's `sessionId`, so indexing them as
* standalone sessions overwrites the parent row's `jsonl_path` and corrupts
* the main session record. The recursive scan in `synchronize()` reaches
* them, so both entry points must skip them.
*/
private isSubagentTranscript(filePath: string): boolean {
return path.normalize(filePath).split(path.sep).includes('subagents');
}
/**
* Scans ~/.claude/projects and upserts discovered sessions into DB.
*/
@@ -53,10 +38,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
let processed = 0;
for (const filePath of files) {
if (this.isSubagentTranscript(filePath)) {
continue;
}
const parsed = await this.processSessionFile(filePath, nameMap);
if (!parsed) {
continue;
@@ -85,9 +66,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
if (!filePath.endsWith('.jsonl')) {
return null;
}
if (this.isSubagentTranscript(filePath)) {
return null;
}
const nameMap = await buildLookupMap(path.join(this.claudeHome, 'history.jsonl'), 'sessionId', 'display');
const parsed = await this.processSessionFile(filePath, nameMap);

View File

@@ -99,14 +99,6 @@ 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);

View File

@@ -57,12 +57,4 @@ export class CodexSkillsProvider extends SkillsProvider {
return sources;
}
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
return {
scope: 'user',
rootDir: path.join(os.homedir(), '.agents', 'skills'),
commandPrefix: '$',
};
}
}

View File

@@ -28,12 +28,4 @@ export class CursorSkillsProvider extends SkillsProvider {
},
];
}
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
return {
scope: 'user',
rootDir: path.join(os.homedir(), '.cursor', 'skills'),
commandPrefix: '/',
};
}
}

View File

@@ -33,12 +33,4 @@ export class GeminiSkillsProvider extends SkillsProvider {
},
];
}
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
return {
scope: 'user',
rootDir: path.join(os.homedir(), '.gemini', 'skills'),
commandPrefix: '/',
};
}
}

View File

@@ -12,8 +12,6 @@ import type {
McpScope,
McpTransport,
ProviderChangeActiveModelInput,
ProviderSkillCreateFile,
ProviderSkillCreateInput,
UpsertProviderMcpServerInput,
} from '@/shared/types.js';
import { AppError, asyncHandler, createApiSuccessResponse } from '@/shared/utils.js';
@@ -181,103 +179,6 @@ 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 (
@@ -419,16 +320,6 @@ 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',

View File

@@ -1,9 +1,5 @@
import { providerRegistry } from '@/modules/providers/provider.registry.js';
import type {
ProviderSkill,
ProviderSkillCreateInput,
ProviderSkillListOptions,
} from '@/shared/types.js';
import type { ProviderSkill, ProviderSkillListOptions } from '@/shared/types.js';
export const providerSkillsService = {
/**
@@ -16,15 +12,4 @@ 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);
},
};

View File

@@ -1,75 +1,20 @@
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.
*/
@@ -115,109 +60,5 @@ 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;
}
}

View File

@@ -510,145 +510,3 @@ 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: [
{
directoryName: 'uploaded-codex-folder',
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', 'uploaded-codex-folder', '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,
);
});

View File

@@ -12,7 +12,6 @@ import type {
ProviderModelsDefinition,
ProviderMcpServer,
ProviderSessionActiveModelChange,
ProviderSkillCreateInput,
UpsertProviderMcpServerInput,
} from '@/shared/types.js';
@@ -102,15 +101,6 @@ 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[]>;
}
// ---------------------------

View File

@@ -320,47 +320,6 @@ 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.
*

View File

@@ -957,25 +957,9 @@ 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,

View File

@@ -11,7 +11,7 @@ export function decodeHtmlEntities(text: string) {
export function normalizeInlineCodeFences(text: string) {
if (!text || typeof text !== 'string') return text;
try {
return text.replace(/```[ \t]*([^\n\r]+?)[ \t]*```/g, '`$1`');
return text.replace(/```\s*([^\n\r]+?)\s*```/g, '`$1`');
} catch {
return text;
}

View File

@@ -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' | 'skills';
export type AgentCategory = 'account' | 'permissions' | 'mcp';
export type ProjectSortOrder = 'name' | 'date';
export type SaveStatus = 'success' | 'error' | null;
export type CodexPermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions';

View File

@@ -1,6 +1,5 @@
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';
@@ -102,12 +101,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
</div>
{/* Body: sidebar + content */}
<div className="flex min-h-0 min-w-0 flex-1 flex-col md:flex-row">
<div className="flex min-h-0 flex-1 flex-col md:flex-row">
<SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />
{/* Content */}
<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">
<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">
{activeTab === 'appearance' && (
<AppearanceSettingsTab
projectSortOrder={projectSortOrder}

View File

@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import type { AgentCategory, AgentProvider } from '../../../types/types';
@@ -22,11 +22,6 @@ 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'];
@@ -62,14 +57,8 @@ 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] min-w-0 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] flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
<AgentSelectorSection
agents={visibleAgents}
selectedAgent={selectedAgent}
@@ -77,10 +66,8 @@ export default function AgentsSettingsTab({
agentContextById={agentContextById}
/>
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
<div className="flex flex-1 flex-col overflow-hidden">
<AgentCategoryTabsSection
categories={visibleCategories}
selectedAgent={selectedAgent}
selectedCategory={selectedCategory}
onSelectCategory={setSelectedCategory}
/>

View File

@@ -1,8 +1,6 @@
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';
@@ -20,7 +18,7 @@ export default function AgentCategoryContentSection({
projects,
}: AgentCategoryContentSectionProps) {
return (
<div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-3 md:p-4">
<div className="flex-1 overflow-y-auto p-3 md:p-4">
{selectedCategory === 'account' && (
<AccountContent
agent={selectedAgent}
@@ -86,18 +84,6 @@ 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>
);
}

View File

@@ -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">
{categories.map((category) => (
{AGENT_CATEGORIES.map((category) => (
<button
key={category}
role="tab"
@@ -30,9 +30,6 @@ 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>

View File

@@ -32,8 +32,6 @@ export type AgentsSettingsTabProps = {
};
export type AgentCategoryTabsSectionProps = {
categories: AgentCategory[];
selectedAgent: AgentProvider;
selectedCategory: AgentCategory;
onSelectCategory: (category: AgentCategory) => void;
};

View File

@@ -1,344 +0,0 @@
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,
};
}

View File

@@ -1 +0,0 @@
export { default as ProviderSkills } from './view/ProviderSkills';

View File

@@ -1,60 +0,0 @@
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;

View File

@@ -1,628 +0,0 @@
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 & {
path?: string;
webkitRelativePath?: string;
};
return (
fileWithRelativePath.webkitRelativePath
|| fileWithRelativePath.path
|| file.name
)
.replace(/\\/g, '/')
.replace(/^\/+/, '');
};
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 queueSkillFolders = useCallback((selectedFiles: File[]) => {
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);
});
}, []);
const handleDrop = useCallback((files: File[]) => {
const includesDirectory = files.some((file) => getBrowserRelativePath(file).includes('/'));
if (includesDirectory) {
try {
queueSkillFolders(files);
setSubmitError(null);
} catch (error) {
setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
}
return;
}
const acceptedFiles = files
.filter((file) => file.name.toLowerCase().endsWith('.md'))
.slice(0, 20);
if (acceptedFiles.length === 0) {
setSubmitError('Drop one or more markdown files or a folder containing SKILL.md.');
return;
}
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);
}, [queueSkillFolders]);
const handleFolderSelection = useCallback((selectedFiles: File[]) => {
try {
queueSkillFolders(selectedFiles);
setSubmitError(null);
} catch (error) {
setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
}
}, [queueSkillFolders]);
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
maxFiles: MAX_SKILL_FOLDER_FILES,
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,
directoryName: queuedFile.kind === 'folder' ? queuedFile.name : undefined,
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 or skill folders 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">
Folder uploads keep the selected folder name; standalone files use the `name` 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>
);
}

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Projekt konnte nicht entfernt werden. Bitte erneut versuchen.",
"deleteProjectError": "Fehler beim Entfernen des Projekts. Bitte erneut versuchen.",
"createProjectFailed": "Projekt konnte nicht erstellt werden. Bitte erneut versuchen.",
"createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen.",
"updateProjectError": "Fehler beim Aktualisieren des Projekts. Bitte erneut versuchen.",
"refreshError": "Aktualisierung fehlgeschlagen. Bitte erneut versuchen.",
"restoreProjectFailed": "Projekt konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
"restoreProjectError": "Fehler beim Wiederherstellen des Projekts. Bitte erneut versuchen.",
"restoreSessionFailed": "Sitzung konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
"restoreSessionError": "Fehler beim Wiederherstellen der Sitzung. Bitte erneut versuchen."
"createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen."
},
"version": {
"updateAvailable": "Update verfügbar"

View File

@@ -4,7 +4,6 @@
"account": "Account",
"permissions": "Permissions",
"mcpServers": "MCP Servers",
"skills": "Skills",
"appearance": "Appearance"
},
"account": {

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Failed to remove project. Please try again.",
"deleteProjectError": "Error removing project. Please try again.",
"createProjectFailed": "Failed to create project. Please try again.",
"createProjectError": "Error creating project. Please try again.",
"updateProjectError": "Error updating project. Please try again.",
"refreshError": "Failed to refresh. Please try again.",
"restoreProjectFailed": "Failed to restore project. Please try again.",
"restoreProjectError": "Error restoring project. Please try again.",
"restoreSessionFailed": "Failed to restore session. Please try again.",
"restoreSessionError": "Error restoring session. Please try again."
"createProjectError": "Error creating project. Please try again."
},
"version": {
"updateAvailable": "Update available"

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Échec de la suppression du projet. Veuillez réessayer.",
"deleteProjectError": "Erreur lors de la suppression du projet. Veuillez réessayer.",
"createProjectFailed": "Échec de la création du projet. Veuillez réessayer.",
"createProjectError": "Erreur lors de la création du projet. Veuillez réessayer.",
"updateProjectError": "Erreur lors de la mise à jour du projet. Veuillez réessayer.",
"refreshError": "Échec de l'actualisation. Veuillez réessayer.",
"restoreProjectFailed": "Échec de la restauration du projet. Veuillez réessayer.",
"restoreProjectError": "Erreur lors de la restauration du projet. Veuillez réessayer.",
"restoreSessionFailed": "Échec de la restauration de la session. Veuillez réessayer.",
"restoreSessionError": "Erreur lors de la restauration de la session. Veuillez réessayer."
"createProjectError": "Erreur lors de la création du projet. Veuillez réessayer."
},
"version": {
"updateAvailable": "Mise à jour disponible"

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Impossibile rimuovere il progetto. Riprova.",
"deleteProjectError": "Errore durante la rimozione del progetto. Riprova.",
"createProjectFailed": "Impossibile creare il progetto. Riprova.",
"createProjectError": "Errore durante la creazione del progetto. Riprova.",
"updateProjectError": "Errore durante l'aggiornamento del progetto. Riprova.",
"refreshError": "Aggiornamento non riuscito. Riprova.",
"restoreProjectFailed": "Impossibile ripristinare il progetto. Riprova.",
"restoreProjectError": "Errore durante il ripristino del progetto. Riprova.",
"restoreSessionFailed": "Impossibile ripristinare la sessione. Riprova.",
"restoreSessionError": "Errore durante il ripristino della sessione. Riprova."
"createProjectError": "Errore durante la creazione del progetto. Riprova."
},
"version": {
"updateAvailable": "Aggiornamento disponibile"

View File

@@ -105,13 +105,7 @@
"deleteProjectFailed": "プロジェクトの除去に失敗しました。もう一度お試しください。",
"deleteProjectError": "プロジェクトの除去でエラーが発生しました。もう一度お試しください。",
"createProjectFailed": "プロジェクトの作成に失敗しました。もう一度お試しください。",
"createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。",
"updateProjectError": "プロジェクトの更新でエラーが発生しました。もう一度お試しください。",
"refreshError": "更新に失敗しました。もう一度お試しください。",
"restoreProjectFailed": "プロジェクトの復元に失敗しました。もう一度お試しください。",
"restoreProjectError": "プロジェクトの復元でエラーが発生しました。もう一度お試しください。",
"restoreSessionFailed": "セッションの復元に失敗しました。もう一度お試しください。",
"restoreSessionError": "セッションの復元でエラーが発生しました。もう一度お試しください。"
"createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。"
},
"version": {
"updateAvailable": "アップデートあり"

View File

@@ -105,13 +105,7 @@
"deleteProjectFailed": "프로젝트 제거 실패. 다시 시도해주세요.",
"deleteProjectError": "프로젝트 제거 오류. 다시 시도해주세요.",
"createProjectFailed": "프로젝트 생성 실패. 다시 시도해주세요.",
"createProjectError": "프로젝트 생성 오류. 다시 시도해주세요.",
"updateProjectError": "프로젝트 업데이트 오류. 다시 시도해주세요.",
"refreshError": "새로고침 실패. 다시 시도해주세요.",
"restoreProjectFailed": "프로젝트 복원 실패. 다시 시도해주세요.",
"restoreProjectError": "프로젝트 복원 오류. 다시 시도해주세요.",
"restoreSessionFailed": "세션 복원 실패. 다시 시도해주세요.",
"restoreSessionError": "세션 복원 오류. 다시 시도해주세요."
"createProjectError": "프로젝트 생성 오류. 다시 시도해주세요."
},
"version": {
"updateAvailable": "업데이트 가능"

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Не удалось убрать проект. Попробуйте снова.",
"deleteProjectError": "Ошибка при удалении проекта из списка. Попробуйте снова.",
"createProjectFailed": "Не удалось создать проект. Попробуйте снова.",
"createProjectError": "Ошибка при создании проекта. Попробуйте снова.",
"updateProjectError": "Ошибка при обновлении проекта. Попробуйте снова.",
"refreshError": "Не удалось обновить. Попробуйте снова.",
"restoreProjectFailed": "Не удалось восстановить проект. Попробуйте снова.",
"restoreProjectError": "Ошибка при восстановлении проекта. Попробуйте снова.",
"restoreSessionFailed": "Не удалось восстановить сеанс. Попробуйте снова.",
"restoreSessionError": "Ошибка при восстановлении сеанса. Попробуйте снова."
"createProjectError": "Ошибка при создании проекта. Попробуйте снова."
},
"version": {
"updateAvailable": "Доступно обновление"

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "Proje kaldırılamadı. Lütfen tekrar dene.",
"deleteProjectError": "Proje kaldırılırken hata oluştu. Lütfen tekrar dene.",
"createProjectFailed": "Proje oluşturulamadı. Lütfen tekrar dene.",
"createProjectError": "Proje oluşturulurken hata oluştu. Lütfen tekrar dene.",
"updateProjectError": "Proje güncellenirken hata oluştu. Lütfen tekrar dene.",
"refreshError": "Yenileme başarısız. Lütfen tekrar dene.",
"restoreProjectFailed": "Proje geri yüklenemedi. Lütfen tekrar dene.",
"restoreProjectError": "Proje geri yüklenirken hata oluştu. Lütfen tekrar dene.",
"restoreSessionFailed": "Oturum geri yüklenemedi. Lütfen tekrar dene.",
"restoreSessionError": "Oturum geri yüklenirken hata oluştu. Lütfen tekrar dene."
"createProjectError": "Proje oluşturulurken hata oluştu. Lütfen tekrar dene."
},
"version": {
"updateAvailable": "Güncelleme mevcut"

View File

@@ -106,13 +106,7 @@
"deleteProjectFailed": "移除项目失败,请重试。",
"deleteProjectError": "移除项目时出错,请重试。",
"createProjectFailed": "创建项目失败,请重试。",
"createProjectError": "创建项目时出错,请重试。",
"updateProjectError": "更新项目时出错,请重试。",
"refreshError": "刷新失败,请重试。",
"restoreProjectFailed": "恢复项目失败,请重试。",
"restoreProjectError": "恢复项目时出错,请重试。",
"restoreSessionFailed": "恢复会话失败,请重试。",
"restoreSessionError": "恢复会话时出错,请重试。"
"createProjectError": "创建项目时出错,请重试。"
},
"version": {
"updateAvailable": "有可用更新"

View File

@@ -105,13 +105,7 @@
"deleteProjectFailed": "移除專案失敗,請重試。",
"deleteProjectError": "移除專案時出錯,請重試。",
"createProjectFailed": "建立專案失敗,請重試。",
"createProjectError": "建立專案時出錯,請重試。",
"updateProjectError": "更新專案時出錯,請重試。",
"refreshError": "重新整理失敗,請重試。",
"restoreProjectFailed": "還原專案失敗,請重試。",
"restoreProjectError": "還原專案時出錯,請重試。",
"restoreSessionFailed": "還原工作階段失敗,請重試。",
"restoreSessionError": "還原工作階段時出錯,請重試。"
"createProjectError": "建立專案時出錯,請重試。"
},
"version": {
"updateAvailable": "有可用更新"