fix(voice): expose TTS format in user settings

guard on the recorder's own state instead of react state, so a double tap or
the mic and send buttons both firing won't call stop() on an already-inactive
MediaRecorder.

server/index.js

@@ -61,6 +61,7 @@ import userRoutes from './routes/user.js';
 import geminiRoutes from './routes/gemini.js';
 import pluginsRoutes from './routes/plugins.js';
 import providerRoutes from './modules/providers/provider.routes.js';
+import voiceRoutes from './voice-proxy.js';
 import browserUseRoutes from './modules/browser-use/browser-use.routes.js';
 import browserUseMcpRoutes from './modules/browser-use/browser-use-mcp.routes.js';
 import { browserUseService } from './modules/browser-use/browser-use.service.js';
@@ -208,6 +209,8 @@ app.use('/api/providers', authenticateToken, providerRoutes);
 // Agent API Routes (uses API key authentication)
 app.use('/api/agent', agentRoutes);
 
+app.use('/api/voice', authenticateToken, voiceRoutes);
+
 // Serve public files (like api-docs.html)
 app.use(express.static(path.join(APP_ROOT, 'public')));
 

server/modules/providers/list/claude/claude-skills.provider.ts

@@ -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);

server/modules/providers/list/codex/codex-skills.provider.ts

@@ -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: '$',
-    };
-  }
 }

server/modules/providers/list/cursor/cursor-skills.provider.ts

@@ -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: '/',
-    };
-  }
 }

server/modules/providers/list/gemini/gemini-skills.provider.ts

@@ -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: '/',
-    };
-  }
 }

server/modules/providers/provider.routes.ts

@@ -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,104 +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,
-          files: body.files,
-        }]
-      : 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 (
@@ -420,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',

server/modules/providers/services/skills.service.ts

@@ -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);
-  },
 };

server/modules/providers/shared/skills/skills.provider.ts

@@ -1,86 +1,20 @@
 import path from 'node:path';
-import { mkdir, rm, 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, '')
-);
-
-type PendingSkillInstall = {
-  skillDirectoryPath: string;
-  skillPath: string;
-  content: string;
-  supportingFiles: Array<{
-    targetPath: string;
-    content: string | Buffer;
-  }>;
-  skill: ProviderSkill;
-};
-
-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.
  */
@@ -126,119 +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,
-      });
-    }
-
-    const seenSkillPaths = new Set<string>();
-    const pendingInstalls: PendingSkillInstall[] = [];
-
-    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 = normalizeSkillDirectoryName(
-        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);
-      }
-
-      const command = globalSkillSource.commandForSkill
-        ? globalSkillSource.commandForSkill(definition.name)
-        : `${globalSkillSource.commandPrefix ?? '/'}${definition.name}`;
-
-      pendingInstalls.push({
-        skillDirectoryPath,
-        skillPath,
-        content,
-        supportingFiles,
-        skill: {
-          provider: this.provider,
-          name: definition.name,
-          description: definition.description,
-          command,
-          scope: globalSkillSource.scope,
-          sourcePath: skillPath,
-          pluginName: globalSkillSource.pluginName,
-          pluginId: globalSkillSource.pluginId,
-        },
-      });
-    }
-
-    for (const install of pendingInstalls) {
-      // Replace the complete skill directory so removed scripts or assets do not remain stale.
-      await rm(install.skillDirectoryPath, { recursive: true, force: true });
-      await mkdir(install.skillDirectoryPath, { recursive: true });
-      await writeFile(install.skillPath, `${install.content}\n`, 'utf8');
-      for (const file of install.supportingFiles) {
-        await mkdir(path.dirname(file.targetPath), { recursive: true });
-        await writeFile(file.targetPath, file.content);
-      }
-    }
-
-    return pendingInstalls.map((install) => install.skill);
-  }
-
   protected abstract getSkillSources(workspacePath: string): Promise<ProviderSkillSource[]>;
-
-  protected async getGlobalSkillSource(): Promise<ProviderSkillSource | null> {
-    return null;
-  }
 }

server/modules/providers/tests/skills.test.ts

@@ -510,195 +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 fallbackNamedSkills = await providerSkillsService.addProviderSkills('codex', {
-      entries: [
-        {
-          fileName: 'fallback / skill.md',
-          content: '---\ndescription: Normalized fallback skill\n---\n\nFallback body.\n',
-        },
-      ],
-    });
-    const fallbackNamedSkill = fallbackNamedSkills[0];
-    assert.ok(fallbackNamedSkill);
-    assert.equal(fallbackNamedSkill.name, 'fallback-skill');
-    assert.equal(fallbackNamedSkill.command, '$fallback-skill');
-    assert.equal(
-      fallbackNamedSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'fallback-skill', 'SKILL.md')),
-      true,
-    );
-
-    const replacedCodexSkills = await providerSkillsService.addProviderSkills('codex', {
-      entries: [
-        {
-          directoryName: 'uploaded-codex-folder',
-          content: '---\nname: replacement\ndescription: Replacement skill\n---\n\nReplacement body.\n',
-        },
-      ],
-    });
-    assert.equal(replacedCodexSkills[0]?.command, '$replacement');
-    assert.match(await fs.readFile(createdCodexSkill.sourcePath, 'utf8'), /Replacement body\./);
-    await assert.rejects(
-      fs.stat(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js')),
-      { code: 'ENOENT' },
-    );
-
-    const pendingBatchSkillPath = path.join(tempRoot, '.agents', 'skills', 'pending-batch', 'SKILL.md');
-    await assert.rejects(
-      providerSkillsService.addProviderSkills('codex', {
-        entries: [
-          {
-            directoryName: 'pending-batch',
-            content: '---\nname: pending-batch\n---\n\nPending body.\n',
-          },
-          {
-            directoryName: 'pending-batch',
-            content: '---\nname: duplicate-batch\n---\n\nDuplicate body.\n',
-          },
-        ],
-      }),
-      /duplicate skill target/i,
-    );
-    await assert.rejects(fs.stat(pendingBatchSkillPath), { code: 'ENOENT' });
-
-    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 === 'replacement'), 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,
-  );
-});

server/shared/interfaces.ts

@@ -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[]>;
 }
 
 // ---------------------------

server/shared/types.ts

@@ -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.
  *

server/shared/utils.ts

@@ -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,

server/voice-proxy.js

@@ -0,0 +1,215 @@
+// Optional voice proxy — forwards STT/TTS to an OpenAI-compatible audio backend.
+//
+// The backend is whatever the user points at: OpenAI, Groq, or a local server
+// (LocalAI / Speaches / Kokoro-FastAPI / openedai-speech / etc.). It must expose the
+// standard OpenAI audio endpoints:
+//     POST {base}/audio/transcriptions   (multipart 'file' + 'model')      -> { text }
+//     POST {base}/audio/speech           ({ model, voice, input })         -> audio bytes
+//
+// Config is resolved per-request from headers (set by the client's voice settings),
+// falling back to server env defaults. Mounted at /api/voice behind authenticateToken.
+import express from 'express';
+
+const ENV = {
+  baseUrl: (process.env.VOICE_API_BASE_URL || '').replace(/\/$/, ''),
+  apiKey: process.env.VOICE_API_KEY || '',
+  sttModel: process.env.VOICE_STT_MODEL || 'whisper-1',
+  ttsModel: process.env.VOICE_TTS_MODEL || 'tts-1',
+  ttsVoice: process.env.VOICE_TTS_VOICE || 'alloy',
+};
+
+/**
+ * Resolve the voice backend config for a request. Client headers (set from the
+ * user's in-app voice settings) take precedence over the server env defaults.
+ * @param {import('express').Request} req
+ * @returns {{baseUrl: string, apiKey: string, sttModel: string, ttsModel: string, ttsVoice: string, ttsFormat: string}}
+ */
+function resolveConfig(req) {
+  const h = req.headers;
+  return {
+    baseUrl: (String(h['x-voice-base-url'] || '') || ENV.baseUrl).replace(/\/$/, ''),
+    apiKey: String(h['x-voice-api-key'] || '') || ENV.apiKey,
+    sttModel: String(h['x-voice-stt-model'] || '') || ENV.sttModel,
+    ttsModel: String(h['x-voice-tts-model'] || '') || ENV.ttsModel,
+    ttsVoice: String(h['x-voice-tts-voice'] || '') || ENV.ttsVoice,
+    ttsFormat: String(h['x-voice-tts-format'] || ''),
+  };
+}
+
+const router = express.Router();
+
+// Generous by default — local TTS can synthesize long messages at ~real-time on CPU.
+// Guard against a non-numeric/zero override that would make setTimeout fire immediately.
+const DEFAULT_VOICE_TIMEOUT_MS = 300000;
+const _parsedTimeout = Number(process.env.VOICE_TIMEOUT_MS);
+const VOICE_TIMEOUT_MS = Number.isFinite(_parsedTimeout) && _parsedTimeout > 0
+  ? _parsedTimeout
+  : DEFAULT_VOICE_TIMEOUT_MS;
+
+/**
+ * fetch() with an AbortController timeout so a stalled backend can't hold the
+ * request open indefinitely. Aborts after VOICE_TIMEOUT_MS.
+ * @param {string} url
+ * @param {RequestInit} [options]
+ * @returns {Promise<Response>}
+ */
+async function fetchWithTimeout(url, options = {}) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), VOICE_TIMEOUT_MS);
+  try {
+    return await fetch(url, { ...options, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * Turn a backend fetch failure into a clear, actionable client response:
+ * 504 on timeout (AbortError), 502 otherwise.
+ * @param {import('express').Response} res
+ * @param {Error} e
+ */
+function backendError(res, e) {
+  if (e && e.name === 'AbortError') {
+    return res.status(504).json({
+      error: `Voice backend timed out after ${Math.round(VOICE_TIMEOUT_MS / 1000)}s. Check your voice backend.`,
+    });
+  }
+  return res.status(502).json({ error: `Voice backend unreachable: ${e.message}` });
+}
+
+/**
+ * SSRF guard for the user-configurable backend URL: allow http/https only and
+ * block the link-local / cloud-metadata range (169.254.x). localhost and private
+ * ranges are allowed on purpose so users can point at a local voice server
+ * (LocalAI, Speaches, Kokoro-FastAPI, etc.).
+ * @param {string} raw
+ * @returns {boolean}
+ */
+function isAllowedBackendUrl(raw) {
+  let u;
+  try {
+    u = new URL(raw);
+  } catch {
+    return false;
+  }
+  if (u.protocol !== 'http:' && u.protocol !== 'https:') return false;
+  if (u.hostname === '169.254.169.254' || u.hostname.startsWith('169.254.')) return false;
+  return true;
+}
+
+/**
+ * Relay an upstream (backend) error to the client without making an upstream
+ * 401/403 look like the user's own app login failed.
+ * @param {import('express').Response} res
+ * @param {number} status
+ * @param {string} [text]
+ */
+function upstreamError(res, status, text) {
+  if (status === 401 || status === 403) {
+    return res.status(502).json({ error: 'Voice backend rejected the request (check the API key).' });
+  }
+  return res.status(status).json({ error: text || 'voice backend error' });
+}
+
+let _upload = null;
+/**
+ * Lazily build a memory-storage multer instance (25 MB cap) for audio uploads,
+ * so multer is only imported when the voice feature is actually used.
+ * @returns {Promise<import('multer').Multer>}
+ */
+async function getUpload() {
+  if (!_upload) {
+    const multer = (await import('multer')).default;
+    _upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 25 * 1024 * 1024 } });
+  }
+  return _upload;
+}
+
+/**
+ * Build the Authorization header for the backend, or an empty object when no
+ * key is configured (e.g. a local server that needs none).
+ * @param {string} apiKey
+ * @returns {Record<string, string>}
+ */
+function authHeader(apiKey) {
+  return apiKey ? { Authorization: `Bearer ${apiKey}` } : {};
+}
+
+/**
+ * GET /api/voice/health -> { configured } (true when a backend base URL is set).
+ */
+router.get('/health', (req, res) => {
+  res.json({ configured: Boolean(resolveConfig(req).baseUrl) });
+});
+
+/**
+ * POST /api/voice/transcribe (multipart 'audio') -> { text }.
+ * Forwards the uploaded audio to the backend's /audio/transcriptions endpoint.
+ */
+router.post('/transcribe', async (req, res) => {
+  const cfg = resolveConfig(req);
+  if (!cfg.baseUrl) return res.status(503).json({ error: 'No voice backend configured' });
+  if (!isAllowedBackendUrl(cfg.baseUrl)) return res.status(400).json({ error: 'Invalid voice backend URL.' });
+  const upload = await getUpload();
+  upload.single('audio')(req, res, async (err) => {
+    if (err) return res.status(400).json({ error: err.message });
+    if (!req.file) return res.status(400).json({ error: 'No audio uploaded' });
+    try {
+      const fd = new FormData();
+      fd.append(
+        'file',
+        new Blob([req.file.buffer], { type: req.file.mimetype || 'audio/webm' }),
+        req.file.originalname || 'recording.webm',
+      );
+      fd.append('model', cfg.sttModel);
+      const r = await fetchWithTimeout(`${cfg.baseUrl}/audio/transcriptions`, {
+        method: 'POST',
+        headers: authHeader(cfg.apiKey),
+        body: fd,
+      });
+      const text = await r.text();
+      if (!r.ok) return upstreamError(res, r.status, text);
+      let data;
+      try { data = JSON.parse(text); } catch { data = { text }; }
+      res.json({ text: data.text ?? '' });
+    } catch (e) {
+      backendError(res, e);
+    }
+  });
+});
+
+/**
+ * POST /api/voice/tts { text } -> audio bytes.
+ * Forwards the text to the backend's /audio/speech endpoint and streams the audio back.
+ */
+router.post('/tts', async (req, res) => {
+  const cfg = resolveConfig(req);
+  if (!cfg.baseUrl) return res.status(503).json({ error: 'No voice backend configured' });
+  if (!isAllowedBackendUrl(cfg.baseUrl)) return res.status(400).json({ error: 'Invalid voice backend URL.' });
+  const text = req.body?.text;
+  if (typeof text !== 'string' || !text.trim()) return res.status(400).json({ error: 'text required' });
+  try {
+    const r = await fetchWithTimeout(`${cfg.baseUrl}/audio/speech`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...authHeader(cfg.apiKey) },
+      body: JSON.stringify({
+        model: cfg.ttsModel,
+        voice: cfg.ttsVoice,
+        input: text,
+        ...(cfg.ttsFormat ? { response_format: cfg.ttsFormat } : {}),
+      }),
+    });
+    if (!r.ok) {
+      const errText = await r.text().catch(() => 'tts failed');
+      return upstreamError(res, r.status, errText);
+    }
+    res.setHeader('Content-Type', r.headers.get('content-type') || 'audio/mpeg');
+    res.setHeader('Cache-Control', 'no-store');
+    res.send(Buffer.from(await r.arrayBuffer()));
+  } catch (e) {
+    backendError(res, e);
+  }
+});
+
+export default router;

src/components/chat/hooks/useChatComposerState.ts

@@ -775,6 +775,17 @@ export function useChatComposerState({
     handleSubmitRef.current = handleSubmit;
   }, [handleSubmit]);
 
+  // A voice transcript either fills the input (to edit before sending) or, when the
+  // user tapped "stop and send", is submitted straight away. Mirror the value into
+  // inputValueRef synchronously so handleSubmit reads the new text, not the stale state.
+  const handleVoiceTranscript = useCallback((text: string, send?: boolean) => {
+    const base = inputValueRef.current.trim();
+    const next = base ? `${base} ${text}` : text;
+    setInput(next);
+    inputValueRef.current = next;
+    if (send) handleSubmitRef.current?.(createFakeSubmitEvent());
+  }, [setInput]);
+
   useEffect(() => {
     inputValueRef.current = input;
   }, [input]);
@@ -1013,6 +1024,7 @@ export function useChatComposerState({
     isDragActive,
     openImagePicker: open,
     handleSubmit,
+    handleVoiceTranscript,
     handleInputChange,
     handleKeyDown,
     handlePaste,

src/components/chat/hooks/useTts.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import { voicePlayer, voiceId, type VoiceSnapshot } from '../../../lib/voicePlayer';
+
+export type TtsState = VoiceSnapshot['state'];
+
+/**
+ * Thin adapter over the app-level voicePlayer. Playback lives outside React (see
+ * lib/voicePlayer), so switching chats or re-rendering a message no longer cuts the
+ * audio off. This hook just reflects the player's state for one message and forwards taps.
+ */
+export function useTts(getText: () => string) {
+  const content = getText();
+  const id = voiceId(content);
+
+  const [snap, setSnap] = useState<VoiceSnapshot>(() => voicePlayer.getSnapshot(id));
+
+  useEffect(() => {
+    const update = () =>
+      setSnap((prev) => {
+        const next = voicePlayer.getSnapshot(id);
+        return prev.state === next.state && prev.error === next.error ? prev : next;
+      });
+    update();
+    return voicePlayer.subscribe(update);
+  }, [id]);
+
+  const toggle = useCallback(() => {
+    voicePlayer.unlock(); // synchronous, within the click gesture (iOS)
+    voicePlayer.toggle(content);
+  }, [content]);
+
+  return { state: snap.state, toggle, error: snap.error };
+}

src/components/chat/hooks/useVoiceAvailable.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+// Voice UI is gated on the `voiceEnabled` UI preference (toggled in Quick Settings /
+// the Settings modal). This is a lightweight read-only view of that preference so the
+// mic/speak controls can hide themselves, kept in sync via the same events
+// useUiPreferences emits. No server probe.
+const STORAGE_KEY = 'uiPreferences';
+const SYNC_EVENT = 'ui-preferences:sync';
+
+function readVoiceEnabled(): boolean {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return false;
+    const parsed = JSON.parse(raw);
+    return parsed?.voiceEnabled === true || parsed?.voiceEnabled === 'true';
+  } catch {
+    return false;
+  }
+}
+
+export function useVoiceAvailable(): boolean {
+  const [enabled, setEnabled] = useState<boolean>(() =>
+    typeof window === 'undefined' ? false : readVoiceEnabled(),
+  );
+
+  useEffect(() => {
+    const update = () => setEnabled(readVoiceEnabled());
+    window.addEventListener('storage', update);
+    window.addEventListener(SYNC_EVENT, update as EventListener);
+    return () => {
+      window.removeEventListener('storage', update);
+      window.removeEventListener(SYNC_EVENT, update as EventListener);
+    };
+  }, []);
+
+  return enabled;
+}

src/components/chat/hooks/useVoiceInput.ts

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
+import { voiceConfigHeaders } from '../../../hooks/useVoiceConfig';
+
+// Mobile-safe recording: iOS Safari 18.4+ supports webm/opus; older iOS needs mp4.
+const MIME_CANDIDATES = [
+  'audio/webm;codecs=opus',
+  'audio/webm',
+  'audio/mp4',
+  'audio/ogg;codecs=opus',
+  'audio/ogg',
+];
+
+function pickMime(): string {
+  for (const t of MIME_CANDIDATES) {
+    try {
+      if (typeof MediaRecorder !== 'undefined' && MediaRecorder.isTypeSupported(t)) return t;
+    } catch {
+      /* isTypeSupported can throw on some iOS versions */
+    }
+  }
+  return '';
+}
+
+export type VoiceInputState = 'idle' | 'recording' | 'transcribing';
+
+/**
+ * Push-to-talk dictation. Records the mic, uploads to /api/voice/transcribe
+ * (an OpenAI-compatible speech-to-text backend via the Express proxy), and
+ * returns the transcript through onTranscript.
+ */
+export function useVoiceInput(
+  onTranscript: (text: string, send?: boolean) => void,
+  onError?: (msg: string) => void,
+) {
+  const [state, setState] = useState<VoiceInputState>('idle');
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const streamRef = useRef<MediaStream | null>(null);
+  // Whether the in-progress stop should auto-send the transcript (vs just fill the box).
+  const sendRef = useRef(false);
+
+  const stopTracks = () => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  };
+
+  // Stop the mic if the component unmounts mid-recording.
+  useEffect(() => {
+    return () => {
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+      recorderRef.current = null;
+    };
+  }, []);
+
+  const start = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true },
+      });
+      streamRef.current = stream;
+      const mimeType = pickMime();
+      const rec = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+      recorderRef.current = rec;
+      chunksRef.current = [];
+
+      rec.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+
+      rec.onstop = async () => {
+        stopTracks();
+        // Capture and clear the send intent for this stop before any async work.
+        const shouldSend = sendRef.current;
+        sendRef.current = false;
+        const type = rec.mimeType || 'audio/webm';
+        const blob = new Blob(chunksRef.current, { type });
+        if (blob.size < 800) {
+          setState('idle');
+          onError?.('Recording too short');
+          return;
+        }
+        setState('transcribing');
+        try {
+          const ext = type.includes('mp4') ? 'm4a' : type.includes('ogg') ? 'ogg' : 'webm';
+          const fd = new FormData();
+          fd.append('audio', blob, `recording.${ext}`);
+          const res = await authenticatedFetch('/api/voice/transcribe', {
+            method: 'POST',
+            body: fd,
+            headers: voiceConfigHeaders(),
+          });
+          if (!res.ok) throw new Error(`transcribe ${res.status}`);
+          const data = await res.json();
+          const text = String(data?.text || '').trim();
+          if (text) onTranscript(text, shouldSend);
+          else onError?.('No speech detected');
+        } catch (e) {
+          onError?.(`Transcription failed: ${e instanceof Error ? e.message : String(e)}`);
+        } finally {
+          setState('idle');
+        }
+      };
+
+      rec.start();
+      setState('recording');
+    } catch (e) {
+      const err = e as { name?: string; message?: string };
+      let msg = `Mic error: ${err?.message || e}`;
+      if (err?.name === 'NotAllowedError') msg = 'Microphone access denied.';
+      else if (err?.name === 'NotFoundError') msg = 'No microphone found.';
+      onError?.(msg);
+      setState('idle');
+    }
+  }, [onTranscript, onError]);
+
+  // Stop recording. Pass { send: true } to auto-send the transcript once it's ready.
+  // Guard on the recorder's own state (not React state) so a double tap, or the mic
+  // and Send buttons both firing, can't call stop() on an already-inactive recorder.
+  const stop = useCallback((opts?: { send?: boolean }) => {
+    const rec = recorderRef.current;
+    if (rec && rec.state !== 'inactive') {
+      sendRef.current = opts?.send ?? false;
+      rec.stop();
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    if (state === 'recording') stop();
+    else if (state === 'idle') start();
+  }, [state, start, stop]);
+
+  return { state, toggle, stop };
+}

src/components/chat/view/ChatInterface.tsx

@@ -173,6 +173,7 @@ function ChatInterface({
     isDragActive,
     openImagePicker,
     handleSubmit,
+    handleVoiceTranscript,
     handleInputChange,
     handleKeyDown,
     handlePaste,
@@ -405,6 +406,7 @@ function ChatInterface({
           renderInputWithMentions={renderInputWithMentions}
           textareaRef={textareaRef}
           input={input}
+          onVoiceTranscript={handleVoiceTranscript}
           onInputChange={handleInputChange}
           onTextareaClick={handleTextareaClick}
           onTextareaKeyDown={handleKeyDown}

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   ChangeEvent,
   ClipboardEvent,
@@ -9,8 +10,10 @@ import type {
   RefObject,
   TouchEvent,
 } from 'react';
-import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon } from 'lucide-react';
+import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon, Loader2 } from 'lucide-react';
 
+import { useVoiceInput } from '../../hooks/useVoiceInput';
+import { useVoiceAvailable } from '../../hooks/useVoiceAvailable';
 import type { SessionActivity } from '../../../../hooks/useSessionProtection';
 import type { PendingPermissionRequest, PermissionMode } from '../../types/types';
 import {
@@ -27,6 +30,7 @@ import {
 import CommandMenu from './CommandMenu';
 import ActivityIndicator from './ActivityIndicator';
 import ImageAttachment from './ImageAttachment';
+import VoiceInputButton from './VoiceInputButton';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
 import TokenUsageSummary from './TokenUsageSummary';
 
@@ -89,6 +93,7 @@ interface ChatComposerProps {
   renderInputWithMentions: (text: string) => ReactNode;
   textareaRef: RefObject<HTMLTextAreaElement>;
   input: string;
+  onVoiceTranscript?: (text: string, send?: boolean) => void;
   onInputChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   onTextareaClick: (event: MouseEvent<HTMLTextAreaElement>) => void;
   onTextareaKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
@@ -142,6 +147,7 @@ export default function ChatComposer({
   renderInputWithMentions,
   textareaRef,
   input,
+  onVoiceTranscript,
   onInputChange,
   onTextareaClick,
   onTextareaKeyDown,
@@ -154,6 +160,28 @@ export default function ChatComposer({
   sendByCtrlEnter,
 }: ChatComposerProps) {
   const { t } = useTranslation('chat');
+
+  // Voice state is hosted here (not in the mic button) so the main Send button can stop
+  // recording and send the transcript in one tap, the way the mic button drops it in the box.
+  const voiceAvailable = useVoiceAvailable();
+  const [voiceError, setVoiceError] = useState<string | null>(null);
+  const voiceErrorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleVoiceError = useCallback((msg: string) => {
+    setVoiceError(msg);
+    if (voiceErrorTimer.current) clearTimeout(voiceErrorTimer.current);
+    voiceErrorTimer.current = setTimeout(() => setVoiceError(null), 4000);
+  }, []);
+  useEffect(() => () => {
+    if (voiceErrorTimer.current) clearTimeout(voiceErrorTimer.current);
+  }, []);
+  const noopTranscript = useCallback(() => {}, []);
+  const { state: voiceState, toggle: voiceToggle, stop: voiceStop } = useVoiceInput(
+    onVoiceTranscript ?? noopTranscript,
+    handleVoiceError,
+  );
+  const isRecording = voiceState === 'recording';
+  const isTranscribing = voiceState === 'transcribing';
+
   const textareaRect = textareaRef.current?.getBoundingClientRect();
   const commandMenuPosition = {
     top: textareaRect ? Math.max(16, textareaRect.top - 316) : 0,
@@ -309,6 +337,10 @@ export default function ChatComposer({
               <ImageIcon />
             </PromptInputButton>
 
+            {onVoiceTranscript && voiceAvailable && (
+              <VoiceInputButton state={voiceState} onToggle={voiceToggle} errorMsg={voiceError} />
+            )}
+
             <button
               type="button"
               onClick={onModeSwitch}
@@ -387,10 +419,21 @@ export default function ChatComposer({
               {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
             </div>
             <PromptInputSubmit
-              onClick={isLoading ? onAbortSession : undefined}
-              disabled={!isLoading && !input.trim()}
+              onClick={
+                isLoading
+                  ? onAbortSession
+                  : isRecording
+                    ? (e: MouseEvent<HTMLButtonElement>) => {
+                        e.preventDefault();
+                        voiceStop({ send: true });
+                      }
+                    : undefined
+              }
+              disabled={isLoading ? false : isRecording ? false : isTranscribing ? true : !input.trim()}
               className="h-10 w-10 sm:h-10 sm:w-10"
-            />
+            >
+              {isTranscribing ? <Loader2 className="h-4 w-4 animate-spin" /> : undefined}
+            </PromptInputSubmit>
           </div>
         </PromptInputFooter>
       </PromptInput>

src/components/chat/view/subcomponents/MessageComponent.tsx

@@ -15,6 +15,7 @@ import { Reasoning, ReasoningTrigger, ReasoningContent } from '../../../../share
 
 import { Markdown } from './Markdown';
 import MessageCopyControl from './MessageCopyControl';
+import MessageSpeakControl from './MessageSpeakControl';
 
 type DiffLine = {
   type: string;
@@ -415,6 +416,9 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, a
                 {shouldShowAssistantCopyControl && (
                   <MessageCopyControl content={assistantCopyContent} messageType="assistant" />
                 )}
+                {shouldShowAssistantCopyControl && (
+                  <MessageSpeakControl content={assistantCopyContent} />
+                )}
                 {!isGrouped && <span>{formattedTime}</span>}
               </div>
             )}

src/components/chat/view/subcomponents/MessageSpeakControl.tsx

@@ -0,0 +1,44 @@
+import { Volume2, Loader2, Square } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useTts } from '../../hooks/useTts';
+import { useVoiceAvailable } from '../../hooks/useVoiceAvailable';
+
+// Tap-to-speak button beside the copy control on assistant messages.
+// Renders nothing unless the optional voice feature is enabled.
+const MessageSpeakControl = ({ content }: { content: string }) => {
+  const { t } = useTranslation('chat');
+  const available = useVoiceAvailable();
+  const { state, toggle, error } = useTts(() => content);
+
+  if (!available) return null;
+
+  const title =
+    state === 'playing' ? t('voice.stopSpeaking') : state === 'loading' ? t('voice.loading') : t('voice.speak');
+
+  return (
+    <span className="relative inline-flex">
+      {error && (
+        <span className="absolute bottom-full left-1/2 z-10 mb-1 max-w-[240px] -translate-x-1/2 whitespace-normal rounded bg-red-600 px-2 py-1 text-center text-xs text-white shadow-lg">
+          {error}
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={toggle}
+        title={title}
+        aria-label={title}
+        className="inline-flex items-center gap-1 rounded px-1 py-0.5 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+      >
+        {state === 'playing' ? (
+          <Square className="h-3.5 w-3.5" />
+        ) : state === 'loading' ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Volume2 className="h-3.5 w-3.5" />
+        )}
+      </button>
+    </span>
+  );
+};
+
+export default MessageSpeakControl;

src/components/chat/view/subcomponents/VoiceInputButton.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+import { Mic, Square, Loader2 } from 'lucide-react';
+
+import { PromptInputButton } from '../../../../shared/view/ui';
+import type { VoiceInputState } from '../../hooks/useVoiceInput';
+
+type Props = {
+  state: VoiceInputState;
+  onToggle: () => void;
+  errorMsg?: string | null;
+};
+
+// Push-to-talk mic button (presentational). Recording state and the stop-and-send action
+// are owned by the composer so the main Send button can drive them too. This button just
+// starts recording and, while recording, stops and drops the transcript into the input box.
+export default function VoiceInputButton({ state, onToggle, errorMsg }: Props) {
+  const { t } = useTranslation('chat');
+
+  const icon =
+    state === 'recording' ? (
+      <Square className="text-red-500" />
+    ) : state === 'transcribing' ? (
+      <Loader2 className="animate-spin" />
+    ) : (
+      <Mic />
+    );
+
+  return (
+    <span className="relative inline-flex">
+      {errorMsg && (
+        <span className="absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap rounded bg-red-600 px-2 py-1 text-xs text-white shadow-lg">
+          {errorMsg}
+        </span>
+      )}
+      <PromptInputButton
+        tooltip={{ content: state === 'recording' ? t('voice.stopRecording') : t('voice.input') }}
+        onClick={(e: { preventDefault: () => void }) => {
+          e.preventDefault();
+          onToggle();
+        }}
+      >
+        {icon}
+      </PromptInputButton>
+    </span>
+  );
+}

src/components/quick-settings-panel/constants.ts

@@ -4,6 +4,7 @@ import {
   Eye,
   Languages,
   Maximize2,
+  Mic,
 } from 'lucide-react';
 import type { PreferenceToggleItem } from './types';
 
@@ -54,4 +55,9 @@ export const INPUT_SETTING_TOGGLES: PreferenceToggleItem[] = [
     labelKey: 'quickSettings.sendByCtrlEnter',
     icon: Languages,
   },
+  {
+    key: 'voiceEnabled',
+    labelKey: 'quickSettings.voiceEnabled',
+    icon: Mic,
+  },
 ];

src/components/quick-settings-panel/types.ts

@@ -6,7 +6,8 @@ export type PreferenceToggleKey =
   | 'showRawParameters'
   | 'showThinking'
   | 'autoScrollToBottom'
-  | 'sendByCtrlEnter';
+  | 'sendByCtrlEnter'
+  | 'voiceEnabled';
 
 export type QuickSettingsPreferences = Record<PreferenceToggleKey, boolean>;
 

src/components/quick-settings-panel/view/QuickSettingsPanelView.tsx

@@ -27,12 +27,14 @@ export default function QuickSettingsPanelView() {
     showThinking: preferences.showThinking,
     autoScrollToBottom: preferences.autoScrollToBottom,
     sendByCtrlEnter: preferences.sendByCtrlEnter,
+    voiceEnabled: preferences.voiceEnabled,
   }), [
     preferences.autoExpandTools,
     preferences.autoScrollToBottom,
     preferences.sendByCtrlEnter,
     preferences.showRawParameters,
     preferences.showThinking,
+    preferences.voiceEnabled,
   ]);
 
   const handlePreferenceChange = useCallback(

src/components/settings/types/types.ts

@@ -3,9 +3,9 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import type { ProviderAuthStatus } from '../../provider-auth/types';
 
-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'voice' | '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';

src/components/settings/view/Settings.tsx

@@ -1,12 +1,12 @@
 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';
 import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
 import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
+import VoiceSettingsTab from '../view/tabs/VoiceSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
 import BrowserUseSettingsTab from '../view/tabs/browser-use-settings/BrowserUseSettingsTab';
 import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
@@ -102,12 +102,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}
@@ -157,6 +157,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
 
               {activeTab === 'api' && <CredentialsSettingsTab />}
 
+              {activeTab === 'voice' && <VoiceSettingsTab />}
+
               {activeTab === 'plugins' && <PluginSettingsTab />}
 
               {activeTab === 'about' && <AboutTab />}

src/components/settings/view/SettingsSidebar.tsx

@@ -1,5 +1,6 @@
-import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorPlay, Palette, Puzzle } from 'lucide-react';
+import { Bell, Bot, GitBranch, Info, Key, ListChecks, Mic, MonitorPlay, Palette, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+
 import { cn } from '../../../lib/utils';
 import { PillBar, Pill } from '../../../shared/view/ui';
 import type { SettingsMainTab } from '../types/types';
@@ -20,6 +21,7 @@ const NAV_ITEMS: NavItem[] = [
   { id: 'appearance', labelKey: 'mainTabs.appearance', icon: Palette },
   { id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
   { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
+  { id: 'voice', labelKey: 'mainTabs.voice', icon: Mic },
   { id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
   { id: 'browser', labelKey: 'mainTabs.browser', icon: MonitorPlay },
   { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },

src/components/settings/view/tabs/VoiceSettingsTab.tsx

@@ -0,0 +1,88 @@
+import type { InputHTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+import SettingsSection from '../SettingsSection';
+import SettingsToggle from '../SettingsToggle';
+import { useUiPreferences } from '../../../../hooks/useUiPreferences';
+import { useVoiceConfig } from '../../../../hooks/useVoiceConfig';
+
+const inputClass =
+  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring';
+
+function Field({ label, ...props }: { label: string } & InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <label className="block space-y-1">
+      <span className="text-sm font-medium text-foreground">{label}</span>
+      <input className={inputClass} {...props} />
+    </label>
+  );
+}
+
+export default function VoiceSettingsTab() {
+  const { t } = useTranslation('settings');
+  const { preferences, setPreference } = useUiPreferences();
+  const { config, update } = useVoiceConfig();
+
+  return (
+    <div className="space-y-8">
+      <SettingsSection title={t('voiceSettings.title')} description={t('voiceSettings.description')}>
+        <div className="flex items-center justify-between rounded-lg border border-border p-3">
+          <div className="pr-3">
+            <div className="text-sm font-medium text-foreground">{t('voiceSettings.enable')}</div>
+            <div className="text-xs text-muted-foreground">{t('voiceSettings.enableDescription')}</div>
+          </div>
+          <SettingsToggle
+            checked={preferences.voiceEnabled}
+            onChange={(v) => setPreference('voiceEnabled', v)}
+            ariaLabel={t('voiceSettings.enable')}
+          />
+        </div>
+      </SettingsSection>
+
+      <SettingsSection title={t('voiceSettings.backendTitle')} description={t('voiceSettings.backendDescription')}>
+        <div className="space-y-4">
+          <Field
+            label={t('voiceSettings.baseUrl')}
+            placeholder="https://api.openai.com/v1"
+            value={config.baseUrl}
+            onChange={(e) => update({ baseUrl: e.target.value })}
+          />
+          <Field
+            label={t('voiceSettings.apiKey')}
+            type="password"
+            autoComplete="off"
+            placeholder="sk-…"
+            value={config.apiKey}
+            onChange={(e) => update({ apiKey: e.target.value })}
+          />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
+            <Field
+              label={t('voiceSettings.sttModel')}
+              placeholder="whisper-1"
+              value={config.sttModel}
+              onChange={(e) => update({ sttModel: e.target.value })}
+            />
+            <Field
+              label={t('voiceSettings.ttsModel')}
+              placeholder="tts-1"
+              value={config.ttsModel}
+              onChange={(e) => update({ ttsModel: e.target.value })}
+            />
+            <Field
+              label={t('voiceSettings.voice')}
+              placeholder="alloy"
+              value={config.ttsVoice}
+              onChange={(e) => update({ ttsVoice: e.target.value })}
+            />
+            <Field
+              label={t('voiceSettings.format')}
+              placeholder="mp3"
+              value={config.ttsFormat}
+              onChange={(e) => update({ ttsFormat: e.target.value })}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">{t('voiceSettings.note')}</p>
+        </div>
+      </SettingsSection>
+    </div>
+  );
+}

src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx

@@ -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}
         />

src/components/settings/view/tabs/agents-settings/sections/AgentCategoryContentSection.tsx

@@ -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>
   );
 }

src/components/settings/view/tabs/agents-settings/sections/AgentCategoryTabsSection.tsx

@@ -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>

src/components/settings/view/tabs/agents-settings/types.ts

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

src/components/skills/hooks/useProviderSkills.ts

@@ -1,348 +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 ?? skill.projectDisplayName
-      : skill.projectDisplayName,
-    projectPath: shouldAttachProject
-      ? project?.path ?? skill.projectPath
-      : skill.projectPath,
-  };
-};
-
-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,
-  };
-}

src/components/skills/index.ts

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

src/components/skills/types.ts

@@ -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;

src/components/skills/view/ProviderSkills.tsx

@@ -1,654 +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(/^\.\/+/, '')
-    .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) => {
-        const normalizedRelativePath = relativePath.toLowerCase();
-        const normalizedSkillPath = `${candidateRoot}/skill.md`.toLowerCase();
-        return normalizedRelativePath === normalizedSkillPath
-          || relativePath.startsWith(`${candidateRoot}/`);
-      });
-      return owningRoot === skillRoot;
-    });
-    const skillSourceFile = skillFiles.find(
-      ({ relativePath }) => (
-        relativePath.toLowerCase() === `${skillRoot}/skill.md`.toLowerCase()
-      ),
-    );
-    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 fileInputRef = useRef<HTMLInputElement>(null);
-  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[]) => {
-    if (selectedFiles.length === 0) {
-      return;
-    }
-
-    try {
-      queueSkillFolders(selectedFiles);
-      setSubmitError(null);
-    } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
-    }
-  }, [queueSkillFolders]);
-
-  const { getRootProps, isDragActive } = 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
-                ref={fileInputRef}
-                type="file"
-                accept=".md,text/markdown"
-                multiple
-                className="hidden"
-                onChange={(event) => {
-                  handleDrop(Array.from(event.target.files ?? []));
-                  event.target.value = '';
-                }}
-              />
-              <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={() => fileInputRef.current?.click()}
-                    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>
-  );
-}

src/hooks/useUiPreferences.ts

@@ -7,6 +7,7 @@ type UiPreferences = {
   autoScrollToBottom: boolean;
   sendByCtrlEnter: boolean;
   sidebarVisible: boolean;
+  voiceEnabled: boolean;
 };
 
 type UiPreferenceKey = keyof UiPreferences;
@@ -39,6 +40,7 @@ const DEFAULTS: UiPreferences = {
   autoScrollToBottom: true,
   sendByCtrlEnter: false,
   sidebarVisible: true,
+  voiceEnabled: false,
 };
 
 const PREFERENCE_KEYS = Object.keys(DEFAULTS) as UiPreferenceKey[];

src/hooks/useVoiceConfig.ts

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+export type VoiceConfig = {
+  baseUrl: string;
+  apiKey: string;
+  sttModel: string;
+  ttsModel: string;
+  ttsVoice: string;
+  ttsFormat: string;
+};
+
+const STORAGE_KEY = 'voiceConfig';
+const DEFAULTS: VoiceConfig = { baseUrl: '', apiKey: '', sttModel: '', ttsModel: '', ttsVoice: '', ttsFormat: 'mp3' };
+
+function read(): VoiceConfig {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { ...DEFAULTS };
+    const parsed = JSON.parse(raw);
+    const next = { ...DEFAULTS, ...(parsed && typeof parsed === 'object' ? parsed : {}) };
+    if (!next.ttsFormat) next.ttsFormat = DEFAULTS.ttsFormat;
+    return next;
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+
+// Headers the voice proxy reads to target a per-user OpenAI-compatible backend.
+// Empty fields are omitted so the server's env defaults apply.
+export function voiceConfigHeaders(): Record<string, string> {
+  if (typeof window === 'undefined') return {};
+  const c = read();
+  const h: Record<string, string> = {};
+  if (c.baseUrl) h['x-voice-base-url'] = c.baseUrl;
+  if (c.apiKey) h['x-voice-api-key'] = c.apiKey;
+  if (c.sttModel) h['x-voice-stt-model'] = c.sttModel;
+  if (c.ttsModel) h['x-voice-tts-model'] = c.ttsModel;
+  if (c.ttsVoice) h['x-voice-tts-voice'] = c.ttsVoice;
+  if (c.ttsFormat) h['x-voice-tts-format'] = c.ttsFormat;
+  return h;
+}
+
+export function useVoiceConfig() {
+  const [config, setConfig] = useState<VoiceConfig>(() =>
+    typeof window === 'undefined' ? { ...DEFAULTS } : read(),
+  );
+
+  const update = (patch: Partial<VoiceConfig>) => {
+    setConfig((prev) => {
+      const next = { ...prev, ...patch };
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      } catch {
+        /* ignore persistence errors */
+      }
+      return next;
+    });
+  };
+
+  return { config, update };
+}

src/i18n/locales/en/chat.json

@@ -122,6 +122,14 @@
       }
     }
   },
+  "voice": {
+    "input": "Voice input",
+    "stopRecording": "Stop recording",
+    "transcribing": "Transcribing…",
+    "speak": "Read aloud",
+    "stopSpeaking": "Stop",
+    "loading": "Loading…"
+  },
   "input": {
     "placeholder": "Type / for commands, @ for files, or ask {{provider}} anything...",
     "placeholderDefault": "Type your message...",

src/i18n/locales/en/settings.json

@@ -4,7 +4,6 @@
     "account": "Account",
     "permissions": "Permissions",
     "mcpServers": "MCP Servers",
-    "skills": "Skills",
     "appearance": "Appearance"
   },
   "account": {
@@ -50,6 +49,21 @@
     "resetToDefaults": "Reset to Defaults",
     "cancelChanges": "Cancel Changes"
   },
+  "voiceSettings": {
+    "title": "Voice",
+    "description": "Speech-to-text input and read-aloud, via an OpenAI-compatible audio backend.",
+    "enable": "Enable voice",
+    "enableDescription": "Show the mic button and the read-aloud button on messages.",
+    "backendTitle": "Backend",
+    "backendDescription": "Point at OpenAI, Groq, or a local server (LocalAI, Speaches, Kokoro-FastAPI). Leave blank to use the server default.",
+    "baseUrl": "Base URL",
+    "apiKey": "API key",
+    "sttModel": "Speech-to-text model",
+    "ttsModel": "Text-to-speech model",
+    "voice": "Voice",
+    "format": "Audio format",
+    "note": "The shown defaults work with OpenAI once you add a key. For other providers, set the base URL, model names, and audio format to match."
+  },
   "quickSettings": {
     "title": "Quick Settings",
     "sections": {
@@ -64,6 +78,7 @@
     "showThinking": "Show thinking",
     "autoScrollToBottom": "Auto-scroll to bottom",
     "sendByCtrlEnter": "Send by Ctrl+Enter",
+    "voiceEnabled": "Voice (mic + read aloud)",
     "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.",
     "dragHandle": {
       "dragging": "Dragging handle",
@@ -94,6 +109,7 @@
     "appearance": "Appearance",
     "git": "Git",
     "apiTokens": "API & Tokens",
+    "voice": "Voice",
     "tasks": "Tasks",
     "browser": "Browser",
     "notifications": "Notifications",

src/lib/voicePlayer.ts

@@ -0,0 +1,201 @@
+import { authenticatedFetch } from '../utils/api';
+import { voiceConfigHeaders } from '../hooks/useVoiceConfig';
+
+// A single app-level audio player for read-aloud. It owns one <audio> element, lives
+// outside the React tree, and caches generated audio by content. Because playback is not
+// tied to a component, switching chats or re-rendering a message can't revoke the blob URL
+// out from under it (the cause of mid-play cutoffs). v1 plays one message at a time
+// (a new play replaces the current one); the design leaves room for a queue later.
+
+export type VoicePlayState = 'idle' | 'loading' | 'playing';
+
+export type VoiceSnapshot = { state: VoicePlayState; error: string | null };
+
+const IDLE: VoiceSnapshot = { state: 'idle', error: null };
+const CACHE_MAX = 24;
+const CLIENT_TIMEOUT_MS = 330000; // backstop; the server proxy already times out at 5 min
+
+// Stable id / cache key from a message's text (djb2).
+export function voiceId(content: string): string {
+  let h = 5381;
+  for (let i = 0; i < content.length; i++) h = (((h << 5) + h) + content.charCodeAt(i)) | 0;
+  return (h >>> 0).toString(36);
+}
+
+class VoicePlayer {
+  private audio: HTMLAudioElement | null = null;
+  private unlocked = false;
+  private cache = new Map<string, string>(); // id -> blob URL (insertion order = LRU)
+  private currentId: string | null = null;
+  private state: VoicePlayState = 'idle';
+  private errorId: string | null = null;
+  private errorMsg: string | null = null;
+  private token = 0; // bumps to ignore stale in-flight results
+  private activeController: AbortController | null = null; // aborts the in-flight TTS fetch
+  private errorTimer: ReturnType<typeof setTimeout> | null = null;
+  private listeners = new Set<() => void>();
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private emit() {
+    this.listeners.forEach((l) => l());
+  }
+
+  getSnapshot(id: string): VoiceSnapshot {
+    const state = this.currentId === id ? this.state : 'idle';
+    const error = this.errorId === id ? this.errorMsg : null;
+    if (state === 'idle' && error === null) return IDLE;
+    return { state, error };
+  }
+
+  private ensureAudio(): HTMLAudioElement {
+    if (!this.audio) {
+      const audio = new Audio();
+      audio.addEventListener('ended', () => this.onEnded());
+      audio.addEventListener('error', () => {
+        // Only meaningful while we believe we're playing.
+        if (this.state === 'playing') this.onEnded();
+      });
+      this.audio = audio;
+    }
+    return this.audio;
+  }
+
+  // Call synchronously from the click handler so iOS grants the (reused) element playback.
+  unlock() {
+    if (this.unlocked) return;
+    const audio = this.ensureAudio();
+    try {
+      const p = audio.play();
+      if (p && typeof p.catch === 'function') p.catch(() => {});
+      audio.pause();
+    } catch {
+      /* priming attempt; ignore */
+    }
+    this.unlocked = true;
+  }
+
+  toggle(content: string) {
+    const id = voiceId(content);
+    if (this.currentId === id && (this.state === 'playing' || this.state === 'loading')) {
+      this.stop();
+      return;
+    }
+    void this.play(id, content);
+  }
+
+  stop() {
+    this.token++; // ignore any stale in-flight result
+    this.abortActive(); // and actually cancel the network request
+    if (this.audio) this.audio.pause();
+    this.state = 'idle';
+    this.currentId = null;
+    this.emit();
+  }
+
+  private abortActive() {
+    if (this.activeController) {
+      this.activeController.abort();
+      this.activeController = null;
+    }
+  }
+
+  private onEnded() {
+    this.state = 'idle';
+    this.currentId = null;
+    this.emit();
+    // (queue auto-advance would hook in here)
+  }
+
+  private setError(id: string, msg: string) {
+    this.state = 'idle';
+    this.currentId = id;
+    this.errorId = id;
+    this.errorMsg = msg;
+    this.emit();
+    if (this.errorTimer) clearTimeout(this.errorTimer);
+    this.errorTimer = setTimeout(() => {
+      if (this.errorId === id) {
+        this.errorId = null;
+        this.errorMsg = null;
+        if (this.currentId === id) this.currentId = null;
+        this.emit();
+      }
+    }, 6000);
+  }
+
+  private async play(id: string, content: string) {
+    const audio = this.ensureAudio();
+    audio.pause();
+    this.currentId = id;
+    this.errorId = null;
+    this.errorMsg = null;
+    this.state = 'loading';
+    this.emit();
+
+    const myToken = ++this.token;
+    this.abortActive(); // cancel any request this play supersedes
+
+    try {
+      let url = this.cache.get(id);
+      if (!url) {
+        const controller = new AbortController();
+        this.activeController = controller;
+        const timer = setTimeout(() => controller.abort(), CLIENT_TIMEOUT_MS);
+        const res = await authenticatedFetch('/api/voice/tts', {
+          method: 'POST',
+          body: JSON.stringify({ text: content }),
+          headers: voiceConfigHeaders(),
+          signal: controller.signal,
+        }).finally(() => {
+          clearTimeout(timer);
+          if (this.activeController === controller) this.activeController = null;
+        });
+        if (myToken !== this.token) return; // superseded by another play/stop
+        if (!res.ok) {
+          let msg = `Read-aloud failed (${res.status})`;
+          try {
+            const j = await res.json();
+            if (j?.error) msg = String(j.error);
+          } catch {
+            /* non-JSON error body */
+          }
+          throw new Error(msg);
+        }
+        const blob = await res.blob();
+        if (myToken !== this.token) return;
+        url = URL.createObjectURL(blob);
+        this.cacheSet(id, url);
+      }
+      if (myToken !== this.token) return;
+      audio.src = url;
+      audio.load();
+      await audio.play();
+      if (myToken !== this.token) return;
+      this.state = 'playing';
+      this.emit();
+    } catch (e) {
+      if (myToken !== this.token) return;
+      const aborted = e instanceof Error && e.name === 'AbortError';
+      this.setError(id, aborted ? 'Read-aloud timed out.' : e instanceof Error ? e.message : 'Read-aloud failed');
+    }
+  }
+
+  private cacheSet(id: string, url: string) {
+    this.cache.set(id, url);
+    while (this.cache.size > CACHE_MAX) {
+      const oldest = this.cache.keys().next().value as string | undefined;
+      if (oldest === undefined) break;
+      const oldUrl = this.cache.get(oldest);
+      this.cache.delete(oldest);
+      if (oldUrl && oldUrl !== this.audio?.src) URL.revokeObjectURL(oldUrl);
+    }
+  }
+}
+
+export const voicePlayer = new VoicePlayer();