cc-haha/desktop/src/stores/pluginStore.ts
程序员阿江(Relakkes) 375d587ed1 Expose desktop plugin management through first-class APIs
The desktop app could read plugin-produced skills and agents, but it had no
plugin control plane of its own. This adds a dedicated Settings tab backed by
server-side plugin APIs so installed plugins can be inspected, enabled,
disabled, updated, reloaded, and uninstalled from the WebUI.

The implementation also teaches browser-based desktop dev sessions to honor a
custom backend URL, which made it possible to run isolated worktree ports for
real UI automation. During verification, the long-lived desktop server kept a
stale installed-plugin snapshot after external CLI mutations, so cache clearing
now resets that session-level plugin installation state as well.

Constraint: Desktop WebUI needed an isolated backend URL instead of the hard-coded 127.0.0.1:3456 fallback
Constraint: Reuse existing plugin operations and loaders instead of rebuilding plugin lifecycle logic in the desktop layer
Rejected: Fold plugin management into Skills or Adapters | mixed unrelated lifecycles and hid plugin-specific health/actions
Rejected: Expose only read-only plugin status in desktop | did not satisfy enable-disable-reload-uninstall verification needs
Confidence: high
Scope-risk: moderate
Reversibility: clean
Directive: Keep desktop plugin actions routed through the shared plugin operation layer and clear installed-plugin session caches when plugin state changes externally
Tested: cd desktop && bun run lint
Tested: cd desktop && bun run test -- src/__tests__/pluginsSettings.test.tsx
Tested: bun test src/server/__tests__/plugins.test.ts src/server/__tests__/skills.test.ts
Tested: Browser automation against isolated ports 15120/38456 covering discord plugin list/detail/disable/apply/enable/update/uninstall flows
Not-tested: Full desktop session runtime parity with CLI /reload-plugins AppState refresh beyond the new desktop API path
2026-04-21 23:21:16 +08:00

158 lines
4.1 KiB
TypeScript

import { create } from 'zustand'
import { pluginsApi } from '../api/plugins'
import type {
PluginDetail,
PluginListResponse,
PluginReloadSummary,
PluginScope,
PluginSummary,
} from '../types/plugin'
type PluginStore = {
plugins: PluginSummary[]
marketplaces: PluginListResponse['marketplaces']
summary: PluginListResponse['summary'] | null
selectedPlugin: PluginDetail | null
lastReloadSummary: PluginReloadSummary | null
isLoading: boolean
isDetailLoading: boolean
isApplying: boolean
error: string | null
fetchPlugins: (cwd?: string) => Promise<void>
fetchPluginDetail: (id: string, cwd?: string) => Promise<void>
reloadPlugins: (cwd?: string) => Promise<PluginReloadSummary>
enablePlugin: (id: string, scope?: PluginScope, cwd?: string) => Promise<string>
disablePlugin: (id: string, scope?: PluginScope, cwd?: string) => Promise<string>
updatePlugin: (id: string, scope?: PluginScope, cwd?: string) => Promise<string>
uninstallPlugin: (id: string, scope?: PluginScope, keepData?: boolean, cwd?: string) => Promise<string>
clearSelection: () => void
}
export const usePluginStore = create<PluginStore>((set, get) => ({
plugins: [],
marketplaces: [],
summary: null,
selectedPlugin: null,
lastReloadSummary: null,
isLoading: false,
isDetailLoading: false,
isApplying: false,
error: null,
fetchPlugins: async (cwd) => {
set({ isLoading: true, error: null })
try {
const data = await pluginsApi.list(cwd)
set({
plugins: data.plugins,
marketplaces: data.marketplaces,
summary: data.summary,
isLoading: false,
})
} catch (err) {
set({
isLoading: false,
error: err instanceof Error ? err.message : String(err),
})
}
},
fetchPluginDetail: async (id, cwd) => {
set({ isDetailLoading: true, error: null })
try {
const { detail } = await pluginsApi.detail(id, cwd)
set({ selectedPlugin: detail, isDetailLoading: false })
} catch (err) {
set({
isDetailLoading: false,
error: err instanceof Error ? err.message : String(err),
})
}
},
reloadPlugins: async (cwd) => {
set({ isApplying: true, error: null })
try {
const { summary } = await pluginsApi.reload(cwd)
await get().fetchPlugins(cwd)
const selected = get().selectedPlugin
if (selected) {
await get().fetchPluginDetail(selected.id, cwd)
}
set({ isApplying: false, lastReloadSummary: summary })
return summary
} catch (err) {
const message = err instanceof Error ? err.message : String(err)
set({ isApplying: false, error: message })
throw err
}
},
enablePlugin: async (id, scope, cwd) => {
return runAction(
() => pluginsApi.enable({ id, scope }),
set,
get,
cwd,
)
},
disablePlugin: async (id, scope, cwd) => {
return runAction(
() => pluginsApi.disable({ id, scope }),
set,
get,
cwd,
)
},
updatePlugin: async (id, scope, cwd) => {
return runAction(
() => pluginsApi.update({ id, scope }),
set,
get,
cwd,
)
},
uninstallPlugin: async (id, scope, keepData = false, cwd) => {
return runAction(
() => pluginsApi.uninstall({ id, scope, keepData }),
set,
get,
cwd,
true,
)
},
clearSelection: () => set({ selectedPlugin: null }),
}))
async function runAction(
action: () => Promise<{ ok: true; message: string }>,
set: (updater: Partial<PluginStore>) => void,
get: () => PluginStore,
cwd?: string,
clearSelection = false,
): Promise<string> {
set({ isApplying: true, error: null })
try {
const { message } = await action()
await get().fetchPlugins(cwd)
const selected = get().selectedPlugin
if (clearSelection) {
set({ selectedPlugin: null })
} else if (selected) {
await get().fetchPluginDetail(selected.id, cwd)
}
set({ isApplying: false })
return message
} catch (err) {
set({
isApplying: false,
error: err instanceof Error ? err.message : String(err),
})
throw err
}
}