feat: plugin settings (#1375)
* feat(settings): add opencode plugins page Manage opencode `plugin` array entries (npm, scoped npm, versioned, local paths) and auto-loaded plugin files in `~/.config/opencode/plugins/` and `<project>/.opencode/plugins/`. Mirrors MCP CRUD pattern. - Server: `plugins.js` data layer + `plugin-routes.js` REST routes - UI: PluginsSidebar / PluginsPage / AddPluginDialog - Store: usePluginsStore (cache TTL, in-flight dedup, narrow selectors) - i18n: 41 keys across 7 locales Whitelist /api/config/plugins in JSON body-parser so POST/PATCH bodies parse; opencode plugin specs runtime-resolve OPENCODE_CONFIG dir so parallel test files do not cross-pollute module-frozen consts. * feat(settings/plugins): hook npm registry for update + invalid-version detection Plugins page now consults registry.npmjs.org with a 1h server cache. Sidebar rows show an update badge with the latest version, group headers show how many updates are available, the kebab adds an "Update to latest" action that reuses the existing PATCH+restart flow, and the editor surfaces a banner for update-available / missing-version / missing-package / malformed / missing-path / unreadable-path / offline-registry states. A refresh button in the sidebar header forces a cache bypass. - Server: `npm-registry.js` (cache + in-flight dedup + 5s timeout, 404 cached, network failures NOT cached) + `plugin-spec.js` (parser + exact semver detection) + `GET /api/config/plugins/registry?specs=...&refresh=` - Routes accept up to 100 specs/request, dedup by npm package name before fetching, classify each result by kind, never propagate network failure as 500. - Client: `registryInfo` slice + `loadRegistryInfo` (fire-and-forget after loadPlugins, refreshes on mutations) + `updateToLatest(id)`. - UI: `RegistryBadge` per-row + `RegistryBanner` per-entry editor, both use theme tokens (text-only color, no new bg/border tokens) and the shared Icon sprite. Per-spec subscriptions only. - i18n: 24 new keys (incl. split singular/plural for "N update(s) available" because the runtime does not parse ICU plural format). * fix(settings/plugins): keep registry badge visible for long specs Sidebar entry row used `inline-flex` with `truncate` only on the spec text. With long npm specs the badge could be pushed past the row edge and clipped by the parent overflow. Switch to `flex` with spec `flex-1 min-w-0 truncate` and add `shrink-0` to the badge wrapper so the update indicator stays anchored to the right of the row. * fix(settings/plugins): use code-box icon to distinguish from MCP Plugins nav entry used 'plug' which is visually too close to MCP's 'plug-2' icon. Swap to 'code-box' for clearer differentiation in the Settings nav list. * Update packages/ui/src/components/sections/plugins/PluginsPage.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Signed-off-by: Quat3rnion <81202811+Quat3rnion@users.noreply.github.com> * Update packages/ui/src/stores/usePluginsStore.ts Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Signed-off-by: Quat3rnion <81202811+Quat3rnion@users.noreply.github.com> * fix(settings/plugins): validate registry directory + surface save errors - registry endpoint: return 400 on invalid directory query (was silently falling back to homedir, breaking relative path specs) - save failure toast: prefer result.message over generic 'Reload failed' * fix(settings/plugins): address review follow-ups --------- Signed-off-by: Quat3rnion <81202811+Quat3rnion@users.noreply.github.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Quat3rnion
committed by
GitHub
GitHub
co-authored by
Bohdan Triapitsyn
Bohdan Triapitsyn
parent
a25e64099c
commit
2b47d899c6
@@ -0,0 +1,304 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Radio } from '@/components/ui/radio';
|
||||
import { toast } from '@/components/ui';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { SortableTabsStrip, type SortableTabsStripItem } from '@/components/ui/sortable-tabs-strip';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { usePluginsStore, type PluginScope } from '@/stores/usePluginsStore';
|
||||
|
||||
type TabKey = 'npm' | 'path' | 'file';
|
||||
|
||||
interface AddPluginDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
defaultScope?: PluginScope;
|
||||
}
|
||||
|
||||
const FILENAME_PATTERN = /^[a-z0-9][a-z0-9-_.]*\.(js|ts|mjs|cjs)$/;
|
||||
|
||||
function parseOptions(raw: string): { ok: true; value?: Record<string, unknown> } | { ok: false } {
|
||||
const trimmed = raw.trim();
|
||||
if (trimmed === '') return { ok: true, value: undefined };
|
||||
try {
|
||||
const parsed = JSON.parse(trimmed) as unknown;
|
||||
if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
|
||||
return { ok: false };
|
||||
}
|
||||
return { ok: true, value: parsed as Record<string, unknown> };
|
||||
} catch {
|
||||
return { ok: false };
|
||||
}
|
||||
}
|
||||
|
||||
export const AddPluginDialog: React.FC<AddPluginDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
defaultScope = 'user',
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const createEntry = usePluginsStore((s) => s.createEntry);
|
||||
const createFile = usePluginsStore((s) => s.createFile);
|
||||
|
||||
const [tab, setTab] = React.useState<TabKey>('npm');
|
||||
const [spec, setSpec] = React.useState('');
|
||||
const [optionsJson, setOptionsJson] = React.useState('');
|
||||
const [fileName, setFileName] = React.useState('');
|
||||
const [content, setContent] = React.useState('');
|
||||
const [scope, setScope] = React.useState<PluginScope>(defaultScope);
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
|
||||
const resetForm = React.useCallback(() => {
|
||||
setSpec('');
|
||||
setOptionsJson('');
|
||||
setFileName('');
|
||||
setContent('');
|
||||
setScope(defaultScope);
|
||||
}, [defaultScope]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setTab('npm');
|
||||
resetForm();
|
||||
}
|
||||
}, [open, resetForm]);
|
||||
|
||||
const handleTabChange = (next: TabKey) => {
|
||||
if (next === tab) return;
|
||||
setTab(next);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const optionsResult = React.useMemo(() => parseOptions(optionsJson), [optionsJson]);
|
||||
const optionsInvalid = !optionsResult.ok;
|
||||
const fileNameInvalid = tab === 'file' && fileName.trim() !== '' && !FILENAME_PATTERN.test(fileName.trim());
|
||||
const specEmpty = (tab === 'npm' || tab === 'path') && spec.trim() === '';
|
||||
const contentEmpty = tab === 'file' && content.trim() === '';
|
||||
const fileNameEmpty = tab === 'file' && fileName.trim() === '';
|
||||
|
||||
const submitDisabled =
|
||||
submitting ||
|
||||
optionsInvalid ||
|
||||
(tab === 'npm' && specEmpty) ||
|
||||
(tab === 'path' && specEmpty) ||
|
||||
(tab === 'file' && (fileNameEmpty || fileNameInvalid || contentEmpty));
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (submitDisabled) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
let result;
|
||||
if (tab === 'file') {
|
||||
result = await createFile({ fileName: fileName.trim(), content, scope });
|
||||
} else {
|
||||
result = await createEntry({
|
||||
spec: spec.trim(),
|
||||
options: optionsResult.ok ? optionsResult.value : undefined,
|
||||
scope,
|
||||
});
|
||||
}
|
||||
if (result.ok) {
|
||||
toast.success(result.message || t('settings.plugins.toast.created'));
|
||||
if (result.reloadFailed) {
|
||||
toast.warning(t('settings.plugins.toast.reloadFailed'));
|
||||
}
|
||||
onOpenChange(false);
|
||||
} else {
|
||||
toast.error(result.message || t('settings.plugins.sidebar.toast.deleteFailed'));
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tabs = React.useMemo<SortableTabsStripItem[]>(() => [
|
||||
{ id: 'npm', label: t('settings.plugins.dialog.add.tab.npm') },
|
||||
{ id: 'path', label: t('settings.plugins.dialog.add.tab.path') },
|
||||
{ id: 'file', label: t('settings.plugins.dialog.add.tab.file') },
|
||||
], [t]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(next) => {
|
||||
if (!next && submitting) return;
|
||||
onOpenChange(next);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('settings.plugins.dialog.add.title')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('settings.plugins.sidebar.empty.description')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<SortableTabsStrip
|
||||
items={tabs}
|
||||
activeId={tab}
|
||||
onSelect={(id) => handleTabChange(id as TabKey)}
|
||||
layoutMode="fit"
|
||||
variant="active-pill"
|
||||
activePillLowercase={false}
|
||||
className="h-10"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{(tab === 'npm' || tab === 'path') && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-spec" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.spec')}
|
||||
</label>
|
||||
<Input
|
||||
id="plugin-spec"
|
||||
value={spec}
|
||||
onChange={(e) => setSpec(e.target.value)}
|
||||
placeholder={t('settings.plugins.page.field.spec.placeholder')}
|
||||
aria-invalid={specEmpty ? false : undefined}
|
||||
disabled={submitting}
|
||||
/>
|
||||
{specEmpty && (
|
||||
<p className="typography-meta text-muted-foreground">
|
||||
{t('settings.plugins.validation.specRequired')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-options" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.options')}
|
||||
</label>
|
||||
<Textarea
|
||||
id="plugin-options"
|
||||
value={optionsJson}
|
||||
onChange={(e) => setOptionsJson(e.target.value)}
|
||||
rows={5}
|
||||
className="font-mono"
|
||||
hasError={optionsInvalid}
|
||||
disabled={submitting}
|
||||
/>
|
||||
{optionsInvalid && (
|
||||
<p className="typography-meta text-[var(--status-error)]">
|
||||
{t('settings.plugins.page.field.options.invalidJson')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'file' && (
|
||||
<>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-filename" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.fileName')}
|
||||
</label>
|
||||
<Input
|
||||
id="plugin-filename"
|
||||
value={fileName}
|
||||
onChange={(e) => setFileName(e.target.value)}
|
||||
placeholder="my-plugin.ts"
|
||||
aria-invalid={fileNameInvalid || undefined}
|
||||
disabled={submitting}
|
||||
/>
|
||||
{fileNameInvalid && (
|
||||
<p className="typography-meta text-[var(--status-error)]">
|
||||
{t('settings.plugins.validation.fileName')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="plugin-content" className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.content')}
|
||||
</label>
|
||||
<Textarea
|
||||
id="plugin-content"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
rows={16}
|
||||
className="font-mono"
|
||||
disabled={submitting}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="typography-ui-label text-foreground">
|
||||
{t('settings.plugins.page.field.scope')}
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
{(['user', 'project'] as const).map((value) => {
|
||||
const selected = scope === value;
|
||||
const label =
|
||||
value === 'user'
|
||||
? t('settings.plugins.scope.user')
|
||||
: t('settings.plugins.scope.project');
|
||||
return (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => setScope(value)}
|
||||
disabled={submitting}
|
||||
className="flex items-center gap-2 py-1 text-left disabled:opacity-50"
|
||||
>
|
||||
<Radio
|
||||
checked={selected}
|
||||
onChange={() => setScope(value)}
|
||||
ariaLabel={label}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'typography-ui-label font-normal',
|
||||
selected ? 'text-foreground' : 'text-foreground/60',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={submitting}
|
||||
>
|
||||
{t('settings.plugins.dialog.add.action.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
void handleSubmit();
|
||||
}}
|
||||
disabled={submitDisabled}
|
||||
>
|
||||
{submitting ? (
|
||||
<Icon name="loader-4" className="h-3.5 w-3.5 animate-spin" />
|
||||
) : null}
|
||||
{t('settings.plugins.dialog.add.action.submit')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddPluginDialog;
|
||||
Reference in New Issue
Block a user