feat(ui): plugin manager modal for adding/removing OpenCode plugins#589
Closed
ashutoshsinghpr7 wants to merge 2 commits into
Closed
feat(ui): plugin manager modal for adding/removing OpenCode plugins#589ashutoshsinghpr7 wants to merge 2 commits into
ashutoshsinghpr7 wants to merge 2 commits into
Conversation
Add a PluginManagerModal component that allows users to manage their OpenCode plugins directly from the CodeNomad UI. Previously, plugins were only displayed as a read-only list in the Status tab - users had to edit opencode.json manually to add or remove plugins. The modal provides: - List of currently configured plugins with their enabled state - Text input to add new plugins (npm packages, file:// paths, or URLs) - Remove button for each plugin with confirmation - Error handling for load, add, and remove operations - Loading and empty states matching existing patterns - Restart notice since plugin changes require workspace restart Implementation follows the existing ProviderManagerModal pattern: - Uses @kobalte/core Dialog for accessible modal - Calls (client as any).config.update() to persist changes - Reads plugin config via client.config.get() - Handles both string and [spec, opts] tuple plugin formats - Reuses existing CSS classes (providers-manager-modal, providers-card, etc.) A "Manage" button is added to the Plugins section heading in the Status tab (InstanceServiceStatus), opening the modal with the current instance ID. i18n keys added for English with English-language stubs in all 8 other supported locales (es, fr, de, ru, ja, he, ne, zh-Hans). Addresses the plugin management gap identified in issue NeuralNomadsAI#193 (Plugin System Architecture).
|
PR builds are available as GitHub Actions artifacts: https://github.com/NeuralNomadsAI/CodeNomad/actions/runs/29314070823 Artifacts expire in 7 days. |
The Manage button was conditionally rendered inside showHeadings() which is false when InstanceServiceStatus is used inside the Status tab accordion. This commit adds a fallback render path that always shows the Manage button in the plugins content area. TypeScript typecheck passes clean.
|
PR builds are available as GitHub Actions artifacts: https://github.com/NeuralNomadsAI/CodeNomad/actions/runs/29315577709 Artifacts expire in 7 days.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Plugin Manager modal that lets users add and remove OpenCode plugins directly from the CodeNomad UI — no more manual
opencode.jsonediting.Before this PR, plugins were only shown as a read-only list in the Status tab. Users had to open config files or use the CLI to install plugins. This PR adds a "Manage" button next to the Plugins heading that opens a full management modal.
Changes
New file
packages/ui/src/components/provider-auth/plugin-manager-modal.tsx— PluginManagerModal componentModified files
packages/ui/src/components/instance-service-status.tsx— Adds "Manage" button to plugins section heading, embeds the modalpackages/ui/src/lib/i18n/messages/*/settings.ts— i18n keys (English + stubs in 8 locales)How it works
config.pluginfromclient.config.get(), handles both string and[spec, opts]tuple formatsnpm:pkg,file:///path, etc.) + Enter support, callsclient.config.update()to persistUI
ProviderManagerModal(Kobalte Dialog, same CSS classes)providers-cardstyle with remove actioni18n
All 16 new keys added to English settings; English-language stubs in es, fr, de, ru, ja, he, ne, zh-Hans.
Related
Testing
npm run typecheck --workspace @codenomad/uipasses with no errorstsc --noEmitclean on the UI package