mirror of
https://github.com/NanmiCoder/claude-code-haha.git
synced 2026-10-10 20:03:13 +08:00
feat(connectors): add Remotion skill plugin
This commit is contained in:
程序员阿江(Relakkes)
@@ -53,3 +53,4 @@ Firecrawl exception: official favicon https://www.firecrawl.dev/favicon.png (not
|
||||
- drawio: official draw.io source, https://raw.githubusercontent.com/jgraph/drawio-mcp/14b318b19cc37b159f841227b9d11fbd18ce18ea/plugins/codex/drawio/assets/drawio-logo.svg
|
||||
- obsidian: https://registry.npmjs.org/simple-icons/-/simple-icons-16.31.0.tgz (icons/obsidian.svg; CC0 silhouette, purple presentation fill).
|
||||
- frontend-design, canvas-design, algorithmic-art, webapp-testing, mcp-builder: original neutral tool glyphs created for this application. These are category illustrations, not Anthropic brand marks.
|
||||
- remotion: official Remotion composer icon, https://github.com/remotion-dev/codex-plugin/blob/0e97f3ec3f52692460f3a57d0e3babcfc86f64d5/assets/composer-icon.svg (MIT). Removed its OS dark-mode override so the blue mark stays visible in the application's independently selected themes.
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="26 33 358 358">
|
||||
<path fill="#0B84F3" d="M141.332 92.4681C136.307 92.7408 132.259 93.5379 128.179 95.0902C126.144 95.8559 122.809 97.5236 120.973 98.6774C113.295 103.492 107.443 110.729 104.391 119.151C103.782 120.819 102.136 126.137 101.076 129.797C94.0174 154.267 90.0107 181.023 89.1506 209.343C89.0143 213.853 89.0143 224.593 89.1506 229.03C89.7275 247.804 91.5211 264.754 94.7725 282.039C96.0941 289.035 98.2128 298.433 99.44 302.702C101.947 311.376 107.065 318.76 114.344 324.172C119.221 327.801 124.759 330.235 130.895 331.43C133.853 332.007 137.755 332.269 140.629 332.081C144.604 331.818 152.491 330.759 158.9 329.616C187.786 324.466 214.469 315.246 238.666 302.052C253.99 293.692 267.09 284.641 279.729 273.659C292.326 262.73 303.066 250.972 312.516 237.777C314.708 234.725 315.81 232.942 316.911 230.698C319.743 224.908 321.075 219.15 321.064 212.71C321.064 206.71 319.932 201.382 317.488 195.928C316.313 193.295 315.191 191.407 312.674 187.82C303.402 174.615 293.112 163.109 280.568 151.928C261.122 134.601 238.026 120.389 212.235 109.869C206.644 107.593 201.138 105.589 194.509 103.418C180.475 98.8347 163.106 94.8595 148.411 92.8771C146.104 92.5625 142.968 92.3842 141.332 92.4681Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -9,8 +9,8 @@ import { ALL_CONNECTORS } from '../../../../src/services/connectors/catalog'
|
||||
// Catalog definitions contain only data; no adapter or user-state access runs here.
|
||||
const connectorIds = ALL_CONNECTORS.map(item => item.id)
|
||||
|
||||
it('translates all 54 services and skill plugins in all five locales, including legal search', () => {
|
||||
expect(connectorIds).toHaveLength(54)
|
||||
it('translates all 55 services and skill plugins in all five locales, including Remotion', () => {
|
||||
expect(connectorIds).toHaveLength(55)
|
||||
for (const id of connectorIds) {
|
||||
for (const field of ['name', 'description', 'example', 'requirements']) {
|
||||
const key = `connectors.${id}.${field}`
|
||||
|
||||
@@ -163,6 +163,10 @@ export const en = {
|
||||
"connectors.qveris.example": "Find company research tools in QVeris and explain parameters and costs without running them.",
|
||||
"connectors.qveris.name": "QVeris",
|
||||
"connectors.qveris.requirements": "Requires a QVeris API Key. Available tools and costs are provider-controlled. Reconnect after changing the key.",
|
||||
"connectors.remotion.name": "Remotion",
|
||||
"connectors.remotion.description": "Create programmatic videos with React, including animation, audio, captions and rendering.",
|
||||
"connectors.remotion.example": "Make a 20-second Remotion product video with captions and music.",
|
||||
"connectors.remotion.requirements": "Installs 12 official Remotion skills and references, not the runtime or renderer. Creating and rendering videos needs project dependencies, Node.js and a browser. The Remotion runtime has separate license terms.",
|
||||
"connectors.render.description": "Review deployed services, databases, logs and metrics.",
|
||||
"connectors.render.example": "Review recent Render service logs and summarize errors.",
|
||||
"connectors.render.name": "Render",
|
||||
|
||||
@@ -165,6 +165,10 @@ export const jp: Record<TranslationKey, string> = {
|
||||
"connectors.qveris.example": "QVeris を使い、次の作業を手伝ってください：情報調査に使えるデータツールを検索します。",
|
||||
"connectors.qveris.name": "QVeris",
|
||||
"connectors.qveris.requirements": "QVeris API Key が必要です。ツール範囲と料金は提供元が決定します。キー変更後は再接続してください。",
|
||||
"connectors.remotion.name": "Remotion",
|
||||
"connectors.remotion.description": "React でアニメーション、音声、字幕を含むプログラム動画を制作します。",
|
||||
"connectors.remotion.example": "Remotion で字幕と音楽付きの 20 秒の製品紹介動画を作成して。",
|
||||
"connectors.remotion.requirements": "Remotion 公式の 12 種類のスキルと参考資料のみをインストールします。動画の制作とレンダリングにはプロジェクトの依存関係、Node.js とブラウザーが必要です。Remotion 本体には別のライセンス条件が適用されます。",
|
||||
"connectors.render.description": "デプロイ済みサービス、データベース、ログ、指標を確認します。",
|
||||
"connectors.render.example": "Render を使い、次の作業を手伝ってください：デプロイ済みサービス、データベース、ログ、指標を確認します。",
|
||||
"connectors.render.name": "Render",
|
||||
|
||||
@@ -167,6 +167,10 @@ export const kr: Record<TranslationKey, string> = {
|
||||
"connectors.qveris.example": "QVeris에서 다음 작업을 도와주세요: 정보 조사에 사용할 데이터 도구를 검색합니다.",
|
||||
"connectors.qveris.name": "QVeris",
|
||||
"connectors.qveris.requirements": "QVeris API Key가 필요합니다. 도구 범위와 비용은 제공사가 정합니다. 키를 변경하면 다시 연결해야 합니다.",
|
||||
"connectors.remotion.name": "Remotion",
|
||||
"connectors.remotion.description": "React로 애니메이션, 오디오, 자막이 포함된 프로그래밍 방식의 영상을 만듭니다.",
|
||||
"connectors.remotion.example": "Remotion으로 자막과 음악이 있는 20초 제품 소개 영상을 만들어 주세요.",
|
||||
"connectors.remotion.requirements": "Remotion 공식 스킬 12개와 참고 자료만 설치합니다. 영상 제작과 렌더링에는 프로젝트 의존성, Node.js 및 브라우저가 필요합니다. Remotion 런타임에는 별도의 라이선스 조건이 적용됩니다.",
|
||||
"connectors.render.description": "배포된 서비스, 데이터베이스, 로그와 지표를 살펴봅니다.",
|
||||
"connectors.render.example": "Render에서 다음 작업을 도와주세요: 배포된 서비스, 데이터베이스, 로그와 지표를 살펴봅니다.",
|
||||
"connectors.render.name": "Render",
|
||||
|
||||
@@ -165,6 +165,10 @@ export const zh: Record<TranslationKey, string> = {
|
||||
"connectors.qveris.example": "查找 QVeris 中適合企業資料檢索的工具，並說明所需參數和費用條件，暫不執行。",
|
||||
"connectors.qveris.name": "QVeris",
|
||||
"connectors.qveris.requirements": "需要 QVeris API Key；工具範圍與調用費用由服務商決定，更換密鑰後需重新建立連接。",
|
||||
"connectors.remotion.name": "Remotion",
|
||||
"connectors.remotion.description": "用 React 製作程式化影片，涵蓋動畫、音訊、字幕與渲染。",
|
||||
"connectors.remotion.example": "用 Remotion 製作一段附字幕和配樂的 20 秒產品介紹影片。",
|
||||
"connectors.remotion.requirements": "安裝 Remotion 官方的 12 項技能及參考資料，不安裝執行環境或渲染器。製作及渲染影片需要專案相依套件、Node.js 與瀏覽器；Remotion 執行環境適用獨立授權條款。",
|
||||
"connectors.render.description": "查看部署服務、數據庫、運行日誌與指標。",
|
||||
"connectors.render.example": "查看 Render 服務最近的運行日誌並總結異常。",
|
||||
"connectors.render.name": "Render",
|
||||
|
||||
@@ -165,6 +165,10 @@ export const zh: Record<TranslationKey, string> = {
|
||||
"connectors.qveris.example": "查找 QVeris 中适合企业资料检索的工具，并说明所需参数和费用条件，暂不执行。",
|
||||
"connectors.qveris.name": "QVeris",
|
||||
"connectors.qveris.requirements": "需要 QVeris API Key；工具范围与调用费用由服务商决定，更换密钥后需重新建立连接。",
|
||||
"connectors.remotion.name": "Remotion",
|
||||
"connectors.remotion.description": "用 React 制作程序化视频，涵盖动画、音频、字幕和渲染。",
|
||||
"connectors.remotion.example": "用 Remotion 制作一段带字幕和配乐的 20 秒产品介绍视频。",
|
||||
"connectors.remotion.requirements": "安装 Remotion 官方的 12 项技能及参考资料，不安装运行库或渲染器。创建和渲染视频需要项目依赖、Node.js 与浏览器；Remotion 运行库适用单独的许可条款。",
|
||||
"connectors.render.description": "查看部署服务、数据库、运行日志与指标。",
|
||||
"connectors.render.example": "查看 Render 服务最近的运行日志并总结异常。",
|
||||
"connectors.render.name": "Render",
|
||||
|
||||
@@ -273,11 +273,12 @@ it('shows loaded skills and prepares an unsent ordinary task for tool plugins',
|
||||
expect(mocks.draft).toHaveBeenCalledWith('skill-task', { input: 'Use this skill', attachments: [] })
|
||||
})
|
||||
|
||||
it('renders the complete catalog as 49 plugins and five pure skills without duplicated tool packages', () => {
|
||||
it('renders Remotion in the plugin catalog without duplicating it among pure skills', () => {
|
||||
useConnectorStore.setState({ items: ALL_CONNECTORS.map(definition => ({ ...definition, supported: true, installed: false, enabled: false, connection: 'disconnected', runtime: 'missing', status: 'not-installed' })) })
|
||||
const view = render(<Connectors />)
|
||||
const rows = () => view.container.querySelectorAll('img').length
|
||||
expect(rows()).toBe(49)
|
||||
expect(rows()).toBe(50)
|
||||
expect(screen.getByRole('button', { name: 'Remotion' })).toBeInTheDocument()
|
||||
fireEvent.click(screen.getByRole('button', { name: 'extensions.filter' }))
|
||||
fireEvent.change(screen.getByRole('combobox', { name: 'connectors.region' }), { target: { value: 'china' } })
|
||||
expect(rows()).toBe(22)
|
||||
@@ -285,6 +286,7 @@ it('renders the complete catalog as 49 plugins and five pure skills without dupl
|
||||
expect(rows()).toBe(24)
|
||||
view.rerender(<Connectors mode="skills" />)
|
||||
expect(rows()).toBe(5)
|
||||
expect(screen.queryByRole('button', { name: 'Remotion' })).not.toBeInTheDocument()
|
||||
for (const category of ['development', 'design']) expect(screen.getByRole('option', { name: `connectors.category.${category}` })).toBeInTheDocument()
|
||||
for (const category of ['office', 'search', 'maps', 'data', 'finance', 'legal', 'productivity']) expect(screen.queryByRole('option', { name: `connectors.category.${category}` })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -34,7 +34,7 @@ const PHASE_KEYS: Record<string, TranslationKey> = {
|
||||
check: 'connectors.action.check', deactivate: 'connectors.action.deactivate', remove: 'connectors.action.remove',
|
||||
}
|
||||
|
||||
const TOOL_PLUGIN_IDS = new Set(['hyperframes', 'obsidian', 'drawio'])
|
||||
const TOOL_PLUGIN_IDS = new Set(['hyperframes', 'obsidian', 'drawio', 'remotion'])
|
||||
|
||||
export function Connectors({ mode = 'plugins', embedded = false, externalQuery, installedFilter = 'all', management = false }: { mode?: 'plugins' | 'skills', embedded?: boolean, externalQuery?: string, installedFilter?: 'all' | 'installed' | 'installable', management?: boolean } = {}) {
|
||||
const t = useTranslation()
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Desktop office connectors
|
||||
|
||||
The application ships 54 entries: 46 service connectors and 8 skill tool bundles.
|
||||
The application ships 55 entries: 46 service connectors and 9 skill tool bundles.
|
||||
Service connectors use either a pinned native CLI or an official remote MCP
|
||||
endpoint. Tool bundles contain pinned upstream skills and supporting files.
|
||||
`pluginBridge.ts` reuses plugin caching, marketplace registration, enablement,
|
||||
@@ -189,13 +189,13 @@ asset provenance is recorded in desktop/public/connectors/SOURCES.md.
|
||||
|
||||
## 2026-09-14：服务与工具目录
|
||||
|
||||
当前内置 54 项：22 个国内服务、24 个全球服务，以及 8 个技能工具包（其中 3 个在插件目录展示，5 个在技能目录展示）。此轮增加 30 项，按供应商和工作流归类，不把同一家数据平台的多个子接口重复计为多家服务。
|
||||
当前内置 55 项：22 个国内服务、24 个全球服务，以及 9 个技能工具包（其中 4 个在插件目录展示，5 个在技能目录展示）。此前增补的服务按供应商和工作流归类，不把同一家数据平台的多个子接口重复计为多家服务。
|
||||
|
||||
目录是随应用发布的只读定义：
|
||||
|
||||
- `catalog.ts`：汇总及原三家 CLI。
|
||||
- `remoteCatalog.ts`、`domesticCatalog.ts`、`globalCatalog.ts`：服务展示与执行配方，仍只有一份 endpoint/auth 来源。
|
||||
- `skillCatalog.ts`、`skillBundles.lock.json`：工具介绍、公开仓库固定 commit、许可及逐文件 SHA-256。HyperFrames 使用完整 v0.4.0 五技能包，避免复制 Codex 私有宿主能力。
|
||||
- `skillCatalog.ts`、`skillBundles.lock.json`：工具介绍、公开仓库固定 commit、许可及逐文件 SHA-256。HyperFrames 使用完整 v0.4.0 五技能包；Remotion 使用其官方 MIT 许可的 Codex 插件技能树，均由本应用的 Claude 插件桥接加载。
|
||||
- `desktop/public/connectors/`：本地图标及来源记录。
|
||||
|
||||
添加后的状态继续由 `<Claude 配置目录>/connectors/state.json` 管理，插件注册与启用沿用现有插件设置；密钥沿用敏感配置存储，OAuth 沿用现有 OAuth 存储。目录扩展和 UI 筛选不写用户状态，也没有向共享 settings.json 增加全局 schema 字段。此轮没有更改持久化形状。
|
||||
|
||||
@@ -45,12 +45,12 @@ const officialEndpoints: Record<string, string> = {
|
||||
figma: 'https://mcp.figma.com/mcp', stripe: 'https://mcp.stripe.com',
|
||||
}
|
||||
|
||||
test('all 54 services and tool packages have unique plugin identities and packaged icons', () => {
|
||||
test('all 55 services and tool packages have unique plugin identities and packaged icons', () => {
|
||||
expect(CONNECTORS).toHaveLength(3)
|
||||
expect(REMOTE_CONNECTORS).toHaveLength(43)
|
||||
expect(ALL_CONNECTORS).toHaveLength(54)
|
||||
expect(new Set(ALL_CONNECTORS.map(item => item.id)).size).toBe(54)
|
||||
expect(new Set(ALL_CONNECTORS.map(item => item.pluginId)).size).toBe(54)
|
||||
expect(ALL_CONNECTORS).toHaveLength(55)
|
||||
expect(new Set(ALL_CONNECTORS.map(item => item.id)).size).toBe(55)
|
||||
expect(new Set(ALL_CONNECTORS.map(item => item.pluginId)).size).toBe(55)
|
||||
for (const def of ALL_CONNECTORS) {
|
||||
expect(getConnectorDefinition(def.id)).toEqual(def)
|
||||
expect(def.pluginId).toBe(`office-${def.id}@haha-connectors`)
|
||||
|
||||
@@ -106,7 +106,11 @@ HyperFrames 选官方 v0.4.0 的完整历史包而非裁断最新 router：最
|
||||
|
||||
### 本机 Codex 缓存核验与未直接搬运的插件
|
||||
|
||||
已只读检查 `/Users/nanmi/.codex/plugins/cache/openai-curated-remote/*/*/.codex-plugin/plugin.json`。本机 HyperFrames 0.1.2 manifest 指向 HeyGen 上游、Apache-2.0、skills 目录，证明其本身是技能包；本批以公开固定 commit 构建，不复制本机缓存。缓存中 Remotion 1.0.7 manifest 声明 MIT，但其公开 `remotion-dev/skills` 当前仓库未找到独立 LICENSE，且 runtime 另有许可条件，因此不据缓存声明直接分发公开仓库文件。
|
||||
已只读检查 `/Users/nanmi/.codex/plugins/cache/openai-curated-remote/*/*/.codex-plugin/plugin.json`。本机 HyperFrames 0.1.2 manifest 指向 HeyGen 上游、Apache-2.0、skills 目录，证明其本身是技能包；本批以公开固定 commit 构建，不复制本机缓存。缓存中 Remotion 1.0.7 manifest 声明 MIT，但当时公开 `remotion-dev/skills` 仓库未找到独立 LICENSE，且 runtime 另有许可条件，因此当时未据缓存声明直接分发其文件。
|
||||
|
||||
### Remotion 增补（2026-09-25）
|
||||
|
||||
Remotion 官方已发布带 MIT LICENSE 的 [Codex 插件独立仓库](https://github.com/remotion-dev/codex-plugin/tree/0e97f3ec3f52692460f3a57d0e3babcfc86f64d5)。本目录固定该提交的 `skills/` 完整子树（12 项技能、255 个文件）及根 LICENSE，共 256 个文件，逐文件 SHA-256 见 lock。Codex 当前插件是纯技能包，未声明 MCP 或服务授权；本应用同样作为插件展示，安装技能资料，不安装 Remotion runtime，不声称已具备视频渲染环境。Remotion runtime 的[单独许可](https://www.remotion.dev/docs/license/)由实际项目使用者按其场景判断。
|
||||
|
||||
Vercel 公共插件 [固定 commit](https://github.com/vercel/vercel-plugin/tree/df0f55213f7b8db23a3ee7f27511ed344cdb2c74) 的 LICENSE 正文为 Apache-2.0，可作为后续候选；Codex 包附 `.app.json`，移植应使用上游 Claude 包并单独处理 Vercel 登录。Superpowers [6.3.0 固定 commit](https://github.com/obra/superpowers/tree/b36e0829c6d0140e93cfef2ca599b1b07d4a7797) 为 MIT 且有 Claude plugin，但包含会改变全局工作方式的 hook 与流程，本批不为了数量默认接入。
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,11 +2,11 @@ import { expect, test } from 'bun:test'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { SKILL_CONNECTORS, SKILL_RECIPES, getSkillRecipe } from './skillCatalog.js'
|
||||
|
||||
const expectedFiles: Record<string, number> = { hyperframes: 61, obsidian: 12, drawio: 2, 'frontend-design': 2, 'canvas-design': 83, 'algorithmic-art': 4, 'webapp-testing': 6, 'mcp-builder': 10 }
|
||||
const expectedFiles: Record<string, number> = { hyperframes: 61, obsidian: 12, drawio: 2, 'frontend-design': 2, 'canvas-design': 83, 'algorithmic-art': 4, 'webapp-testing': 6, 'mcp-builder': 10, remotion: 256 }
|
||||
|
||||
test('skill bundles use fixed commits, unique safe file mappings and complete upstream payloads', () => {
|
||||
expect(SKILL_RECIPES).toHaveLength(8)
|
||||
expect(SKILL_CONNECTORS).toHaveLength(8)
|
||||
expect(SKILL_RECIPES).toHaveLength(9)
|
||||
expect(SKILL_CONNECTORS).toHaveLength(9)
|
||||
for (const recipe of SKILL_RECIPES) {
|
||||
expect(recipe.files).toHaveLength(expectedFiles[recipe.id]!)
|
||||
expect(recipe.commit).toMatch(/^[a-f0-9]{40}$/)
|
||||
@@ -38,6 +38,8 @@ test('skill bundles use fixed commits, unique safe file mappings and complete up
|
||||
test('skill bundles retain cross-skill routes, examples, scripts and font licenses', () => {
|
||||
const paths = (id: string) => getSkillRecipe(id)!.files.map(file => file.target)
|
||||
for (const name of ['hyperframes', 'hyperframes-cli', 'hyperframes-registry', 'gsap', 'website-to-hyperframes']) expect(paths('hyperframes')).toContain(`skills/${name}/SKILL.md`)
|
||||
for (const name of ['remotion-best-practices', 'remotion-captions', 'remotion-create', 'remotion-docs', 'remotion-interactivity', 'remotion-maps', 'remotion-markup', 'remotion-multimedia', 'remotion-render', 'remotion-saas', 'remotion-studio', 'remotion-upgrade']) expect(paths('remotion')).toContain(`skills/${name}/SKILL.md`)
|
||||
expect(paths('remotion')).toContain('LICENSE')
|
||||
for (let step = 1; step <= 7; step++) expect(paths('hyperframes').some(path => path.startsWith(`skills/website-to-hyperframes/references/step-${step}-`))).toBe(true)
|
||||
expect(paths('algorithmic-art')).toContain('skills/algorithmic-art/templates/viewer.html')
|
||||
expect(paths('algorithmic-art')).toContain('skills/algorithmic-art/templates/generator_template.js')
|
||||
|
||||
@@ -14,6 +14,7 @@ const details: Array<{ id: string, name: string, category: ConnectorCategory, de
|
||||
{ id: 'algorithmic-art', name: '生成式艺术', category: 'design', description: '用 p5.js 创建可调参数的算法艺术与交互画面。', example: '制作一个可调整颜色与密度的流场艺术页面。', requirements: '包含示例模板和参考代码。预览需要浏览器及 p5.js 资源；安装不执行脚本，也不调用生成模型。' },
|
||||
{ id: 'webapp-testing', name: '网页测试工具包', category: 'development', description: '使用 Playwright 检查本地网页、交互行为与截图。', example: '检查本地应用的登录表单校验和页面布局。', requirements: '包含测试技能、Python 辅助脚本及示例。实际运行需要 Python、Playwright 和浏览器，以及待测应用；安装不会自动下载浏览器。' },
|
||||
{ id: 'mcp-builder', name: 'MCP 开发工具包', category: 'development', description: '构建与评估 MCP 服务，提供 TypeScript 和 Python 参考。', example: '为我们的内部知识库设计一个 MCP 服务。', requirements: '包含协议设计参考和评估脚本。开发需 Node.js 或 Python 及 MCP SDK；模型评估、第三方 API 使用需用户自行配置凭据，可能产生费用。' },
|
||||
{ id: 'remotion', name: 'Remotion', category: 'design', description: '用 React 制作程序化视频，涵盖动画、音频、字幕和渲染。', example: '用 Remotion 制作一段带字幕和配乐的 20 秒产品介绍视频。', requirements: '安装 Remotion 官方的 12 项技能及参考资料，不安装 Remotion 运行库或渲染器。创建和渲染视频需要目标项目依赖、Node.js 与浏览器；Remotion 运行库适用单独的许可条款。' },
|
||||
]
|
||||
|
||||
export const SKILL_CONNECTORS: ConnectorDefinition[] = details.map(item => {
|
||||
|
||||
Reference in New Issue
Block a user