mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-14 18:37:22 +00:00
fix(plugins): prevent git arg injection, add repo URL detection
This commit is contained in:
@@ -61,7 +61,7 @@
|
|||||||
- **Git Explorer** - View, stage and commit your changes. You can also switch branches
|
- **Git Explorer** - View, stage and commit your changes. You can also switch branches
|
||||||
- **Session Management** - Resume conversations, manage multiple sessions, and track history
|
- **Session Management** - Resume conversations, manage multiple sessions, and track history
|
||||||
- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
|
- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
|
||||||
- **Model Compatibility** - Works with Claude Sonnet 4.5, Opus 4.5, GPT-5.2, and Gemini.
|
- **Model Compatibility** - Works with Claude, GPT, and Gemini model families (see [`shared/modelConstants.js`](shared/modelConstants.js) for the full list of supported models)
|
||||||
|
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|||||||
1
plugins/starter
Submodule
1
plugins/starter
Submodule
Submodule plugins/starter added at bfa6332810
@@ -89,6 +89,23 @@ export function scanPlugins() {
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Try to read git remote URL
|
||||||
|
let repoUrl = null;
|
||||||
|
try {
|
||||||
|
const gitConfigPath = path.join(pluginsDir, entry.name, '.git', 'config');
|
||||||
|
if (fs.existsSync(gitConfigPath)) {
|
||||||
|
const gitConfig = fs.readFileSync(gitConfigPath, 'utf-8');
|
||||||
|
const match = gitConfig.match(/url\s*=\s*(.+)/);
|
||||||
|
if (match) {
|
||||||
|
repoUrl = match[1].trim().replace(/\.git$/, '');
|
||||||
|
// Convert SSH URLs to HTTPS
|
||||||
|
if (repoUrl.startsWith('git@')) {
|
||||||
|
repoUrl = repoUrl.replace(/^git@([^:]+):/, 'https://$1/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
|
||||||
plugins.push({
|
plugins.push({
|
||||||
name: manifest.name,
|
name: manifest.name,
|
||||||
displayName: manifest.displayName,
|
displayName: manifest.displayName,
|
||||||
@@ -103,6 +120,7 @@ export function scanPlugins() {
|
|||||||
permissions: manifest.permissions || [],
|
permissions: manifest.permissions || [],
|
||||||
enabled: config[manifest.name]?.enabled !== false, // enabled by default
|
enabled: config[manifest.name]?.enabled !== false, // enabled by default
|
||||||
dirName: entry.name,
|
dirName: entry.name,
|
||||||
|
repoUrl,
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.warn(`[Plugins] Failed to read manifest for ${entry.name}:`, err.message);
|
console.warn(`[Plugins] Failed to read manifest for ${entry.name}:`, err.message);
|
||||||
@@ -137,6 +155,13 @@ export function resolvePluginAssetPath(name, assetPath) {
|
|||||||
|
|
||||||
export function installPluginFromGit(url) {
|
export function installPluginFromGit(url) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
if (typeof url !== 'string' || !url.trim()) {
|
||||||
|
return reject(new Error('Invalid URL: must be a non-empty string'));
|
||||||
|
}
|
||||||
|
if (url.startsWith('-')) {
|
||||||
|
return reject(new Error('Invalid URL: must not start with "-"'));
|
||||||
|
}
|
||||||
|
|
||||||
// Extract repo name from URL for directory name
|
// Extract repo name from URL for directory name
|
||||||
const urlClean = url.replace(/\.git$/, '').replace(/\/$/, '');
|
const urlClean = url.replace(/\.git$/, '').replace(/\/$/, '');
|
||||||
const repoName = urlClean.split('/').pop();
|
const repoName = urlClean.split('/').pop();
|
||||||
@@ -174,7 +199,7 @@ export function installPluginFromGit(url) {
|
|||||||
resolve(manifest);
|
resolve(manifest);
|
||||||
};
|
};
|
||||||
|
|
||||||
const gitProcess = spawn('git', ['clone', '--depth', '1', url, tempDir], {
|
const gitProcess = spawn('git', ['clone', '--depth', '1', '--', url, tempDir], {
|
||||||
stdio: ['ignore', 'pipe', 'pipe'],
|
stdio: ['ignore', 'pipe', 'pipe'],
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -249,7 +274,7 @@ export function updatePluginFromGit(name) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Only fast-forward to avoid silent divergence
|
// Only fast-forward to avoid silent divergence
|
||||||
const gitProcess = spawn('git', ['pull', '--ff-only'], {
|
const gitProcess = spawn('git', ['pull', '--ff-only', '--'], {
|
||||||
cwd: pluginDir,
|
cwd: pluginDir,
|
||||||
stdio: ['ignore', 'pipe', 'pipe'],
|
stdio: ['ignore', 'pipe', 'pipe'],
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Trash2, RefreshCw, GitBranch, Loader2, ServerCrash, ChevronRight, ShieldAlert, ExternalLink, BookOpen, Download, BarChart3 } from 'lucide-react';
|
import { Trash2, RefreshCw, GitBranch, Loader2, ServerCrash, ShieldAlert, ExternalLink, BookOpen, Download, BarChart3 } from 'lucide-react';
|
||||||
import { usePlugins } from '../../contexts/PluginsContext';
|
import { usePlugins } from '../../contexts/PluginsContext';
|
||||||
import PluginIcon from './PluginIcon';
|
import PluginIcon from './PluginIcon';
|
||||||
import type { Plugin } from '../../contexts/PluginsContext';
|
import type { Plugin } from '../../contexts/PluginsContext';
|
||||||
@@ -76,7 +76,7 @@ function PluginCard({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="relative flex rounded-md border border-border bg-card overflow-hidden transition-opacity duration-200"
|
className="relative flex rounded-lg border border-border bg-card overflow-hidden transition-opacity duration-200"
|
||||||
style={{
|
style={{
|
||||||
opacity: plugin.enabled ? 1 : 0.65,
|
opacity: plugin.enabled ? 1 : 0.65,
|
||||||
animationDelay: `${index * 40}ms`,
|
animationDelay: `${index * 40}ms`,
|
||||||
@@ -85,15 +85,15 @@ function PluginCard({
|
|||||||
{/* Left accent bar */}
|
{/* Left accent bar */}
|
||||||
<div className={`w-[3px] flex-shrink-0 ${accentColor} transition-colors duration-300`} />
|
<div className={`w-[3px] flex-shrink-0 ${accentColor} transition-colors duration-300`} />
|
||||||
|
|
||||||
<div className="flex-1 p-3.5 min-w-0">
|
<div className="flex-1 p-4 min-w-0">
|
||||||
{/* Header row */}
|
{/* Header row */}
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex items-center gap-2.5 min-w-0">
|
<div className="flex items-center gap-2.5 min-w-0">
|
||||||
<div className="flex-shrink-0 w-4 h-4 text-foreground/80">
|
<div className="flex-shrink-0 w-5 h-5 text-foreground/80">
|
||||||
<PluginIcon
|
<PluginIcon
|
||||||
pluginName={plugin.name}
|
pluginName={plugin.name}
|
||||||
iconFile={plugin.icon}
|
iconFile={plugin.icon}
|
||||||
className="w-4 h-4 [&>svg]:w-full [&>svg]:h-full"
|
className="w-5 h-5 [&>svg]:w-full [&>svg]:h-full"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
@@ -101,24 +101,39 @@ function PluginCard({
|
|||||||
<span className="font-semibold text-sm text-foreground leading-none">
|
<span className="font-semibold text-sm text-foreground leading-none">
|
||||||
{plugin.displayName}
|
{plugin.displayName}
|
||||||
</span>
|
</span>
|
||||||
<span className="font-mono text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
<span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||||||
v{plugin.version}
|
v{plugin.version}
|
||||||
</span>
|
</span>
|
||||||
<span className="font-mono text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
<span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||||||
{plugin.type}
|
{plugin.slot}
|
||||||
</span>
|
</span>
|
||||||
<ServerDot running={!!plugin.serverRunning} />
|
<ServerDot running={!!plugin.serverRunning} />
|
||||||
</div>
|
</div>
|
||||||
{plugin.description && (
|
{plugin.description && (
|
||||||
<p className="text-xs text-muted-foreground mt-1 leading-snug">
|
<p className="text-sm text-muted-foreground mt-1 leading-snug">
|
||||||
{plugin.description}
|
{plugin.description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{plugin.author && (
|
<div className="flex items-center gap-3 mt-1">
|
||||||
<p className="text-[10px] font-mono text-muted-foreground/60 mt-0.5">
|
{plugin.author && (
|
||||||
{plugin.author}
|
<span className="text-xs text-muted-foreground/60">
|
||||||
</p>
|
{plugin.author}
|
||||||
)}
|
</span>
|
||||||
|
)}
|
||||||
|
{plugin.repoUrl && (
|
||||||
|
<a
|
||||||
|
href={plugin.repoUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<GitBranch className="w-3 h-3" />
|
||||||
|
<span className="truncate max-w-[200px]">
|
||||||
|
{plugin.repoUrl.replace(/^https?:\/\/(www\.)?github\.com\//, '')}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -156,19 +171,19 @@ function PluginCard({
|
|||||||
{/* Confirm uninstall banner */}
|
{/* Confirm uninstall banner */}
|
||||||
{confirmingUninstall && (
|
{confirmingUninstall && (
|
||||||
<div className="mt-3 flex items-center justify-between gap-3 px-3 py-2 rounded bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
|
<div className="mt-3 flex items-center justify-between gap-3 px-3 py-2 rounded bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
|
||||||
<span className="text-xs text-red-600 dark:text-red-400">
|
<span className="text-sm text-red-600 dark:text-red-400">
|
||||||
Remove <span className="font-semibold">{plugin.displayName}</span>? This cannot be undone.
|
Remove <span className="font-semibold">{plugin.displayName}</span>? This cannot be undone.
|
||||||
</span>
|
</span>
|
||||||
<div className="flex gap-1.5">
|
<div className="flex gap-1.5">
|
||||||
<button
|
<button
|
||||||
onClick={onCancelUninstall}
|
onClick={onCancelUninstall}
|
||||||
className="text-xs px-2.5 py-1 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
className="text-sm px-2.5 py-1 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={onUninstall}
|
onClick={onUninstall}
|
||||||
className="text-xs px-2.5 py-1 rounded border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 font-medium transition-colors"
|
className="text-sm px-2.5 py-1 rounded border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 font-medium transition-colors"
|
||||||
>
|
>
|
||||||
Remove
|
Remove
|
||||||
</button>
|
</button>
|
||||||
@@ -178,8 +193,8 @@ function PluginCard({
|
|||||||
|
|
||||||
{/* Update error */}
|
{/* Update error */}
|
||||||
{updateError && (
|
{updateError && (
|
||||||
<div className="mt-2 flex items-center gap-1.5 text-xs text-red-500">
|
<div className="mt-2 flex items-center gap-1.5 text-sm text-red-500">
|
||||||
<ServerCrash className="w-3 h-3 flex-shrink-0" />
|
<ServerCrash className="w-3.5 h-3.5 flex-shrink-0" />
|
||||||
<span>{updateError}</span>
|
<span>{updateError}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -191,37 +206,49 @@ function PluginCard({
|
|||||||
/* ─── Starter Plugin Card ───────────────────────────────────────────────── */
|
/* ─── Starter Plugin Card ───────────────────────────────────────────────── */
|
||||||
function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
|
function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
|
||||||
return (
|
return (
|
||||||
<div className="relative flex rounded-md border border-dashed border-border/60 bg-card/50 overflow-hidden opacity-65 hover:opacity-80 transition-opacity duration-200">
|
<div className="relative flex rounded-lg border border-dashed border-border bg-card overflow-hidden transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
|
||||||
<div className="w-[3px] flex-shrink-0 bg-muted-foreground/10" />
|
<div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
|
||||||
<div className="flex-1 p-3.5 min-w-0">
|
<div className="flex-1 p-4 min-w-0">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex items-center gap-2.5 min-w-0">
|
<div className="flex items-center gap-2.5 min-w-0">
|
||||||
<div className="flex-shrink-0 w-4 h-4 text-muted-foreground/60">
|
<div className="flex-shrink-0 w-5 h-5 text-blue-500">
|
||||||
<BarChart3 className="w-4 h-4" />
|
<BarChart3 className="w-5 h-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
<span className="font-semibold text-sm text-foreground/70 leading-none">
|
<span className="font-semibold text-sm text-foreground leading-none">
|
||||||
Project Stats
|
Project Stats
|
||||||
</span>
|
</span>
|
||||||
<span className="font-mono text-[10px] text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded">
|
<span className="text-[10px] text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/50 px-1.5 py-0.5 rounded font-medium">
|
||||||
starter
|
starter
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||||||
|
tab
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-muted-foreground/60 mt-1 leading-snug">
|
<p className="text-sm text-muted-foreground mt-1 leading-snug">
|
||||||
File counts, lines of code, file-type breakdown, and recent activity for your project.
|
File counts, lines of code, file-type breakdown, and recent activity for your project.
|
||||||
</p>
|
</p>
|
||||||
|
<a
|
||||||
|
href={STARTER_PLUGIN_URL}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 hover:text-foreground transition-colors mt-1"
|
||||||
|
>
|
||||||
|
<GitBranch className="w-3 h-3" />
|
||||||
|
cloudcli-ai/cloudcli-plugin-starter
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={onInstall}
|
onClick={onInstall}
|
||||||
disabled={installing}
|
disabled={installing}
|
||||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-40 flex-shrink-0"
|
className="flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 transition-colors disabled:opacity-50 flex-shrink-0"
|
||||||
>
|
>
|
||||||
{installing ? (
|
{installing ? (
|
||||||
<Loader2 className="w-3 h-3 animate-spin" />
|
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<Download className="w-3 h-3" />
|
<Download className="w-3.5 h-3.5" />
|
||||||
)}
|
)}
|
||||||
{installing ? 'Installing…' : 'Install'}
|
{installing ? 'Installing…' : 'Install'}
|
||||||
</button>
|
</button>
|
||||||
@@ -231,25 +258,6 @@ function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; i
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Empty State ───────────────────────────────────────────────────────── */
|
|
||||||
function EmptyState() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
||||||
<div className="font-mono text-muted-foreground/30 text-xs leading-relaxed mb-4 select-none">
|
|
||||||
<div>~/.claude-code-ui/plugins/</div>
|
|
||||||
<div className="flex items-center justify-center gap-1 mt-1">
|
|
||||||
<ChevronRight className="w-3 h-3" />
|
|
||||||
<span>(empty)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground">No plugins installed</p>
|
|
||||||
<p className="text-xs text-muted-foreground/60 mt-1">
|
|
||||||
Install from git or drop a folder in the plugins directory
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Main Component ────────────────────────────────────────────────────── */
|
/* ─── Main Component ────────────────────────────────────────────────────── */
|
||||||
export default function PluginSettingsTab() {
|
export default function PluginSettingsTab() {
|
||||||
const { plugins, loading, installPlugin, uninstallPlugin, updatePlugin, togglePlugin } =
|
const { plugins, loading, installPlugin, uninstallPlugin, updatePlugin, togglePlugin } =
|
||||||
@@ -308,35 +316,28 @@ export default function PluginSettingsTab() {
|
|||||||
const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
|
const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<div className="space-y-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-baseline justify-between">
|
<div>
|
||||||
<div>
|
<h3 className="text-base font-semibold text-foreground mb-1">
|
||||||
<h3 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground/60 mb-1">
|
Plugins
|
||||||
Plugins
|
</h3>
|
||||||
</h3>
|
<p className="text-sm text-muted-foreground">
|
||||||
<p className="text-xs text-muted-foreground">
|
Extend the interface with custom plugins. Install from{' '}
|
||||||
Extend the interface with custom plugins. Install from{' '}
|
<code className="text-xs bg-muted px-1.5 py-0.5 rounded font-semibold">
|
||||||
<code className="font-mono text-[10px] bg-muted px-1.5 py-0.5 rounded font-semibold">
|
git
|
||||||
git
|
</code>{' '}
|
||||||
</code>{' '}
|
or drop a folder in{' '}
|
||||||
or drop a folder in{' '}
|
<code className="text-xs bg-muted px-1.5 py-0.5 rounded font-semibold">
|
||||||
<code className="font-mono text-[10px] bg-muted px-1.5 py-0.5 rounded font-semibold">
|
~/.claude-code-ui/plugins/
|
||||||
~/.claude-code-ui/plugins/
|
</code>
|
||||||
</code>
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{!loading && plugins.length > 0 && (
|
|
||||||
<span className="font-mono text-xs text-muted-foreground/50 tabular-nums">
|
|
||||||
{plugins.filter((p) => p.enabled).length}/{plugins.length}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Install from Git — compact */}
|
{/* Install from Git — compact */}
|
||||||
<div className="flex items-center gap-0 rounded-md border border-border bg-card overflow-hidden">
|
<div className="flex items-center gap-0 rounded-lg border border-border bg-card overflow-hidden">
|
||||||
<span className="flex-shrink-0 pl-3 pr-1 text-muted-foreground/40">
|
<span className="flex-shrink-0 pl-3 pr-1 text-muted-foreground/40">
|
||||||
<GitBranch className="w-3 h-3" />
|
<GitBranch className="w-3.5 h-3.5" />
|
||||||
</span>
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -346,7 +347,7 @@ export default function PluginSettingsTab() {
|
|||||||
setInstallError(null);
|
setInstallError(null);
|
||||||
}}
|
}}
|
||||||
placeholder="https://github.com/user/my-plugin"
|
placeholder="https://github.com/user/my-plugin"
|
||||||
className="flex-1 px-2 py-2 text-xs font-mono bg-transparent text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
|
className="flex-1 px-2 py-2.5 text-sm bg-transparent text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (e.key === 'Enter') void handleInstall();
|
if (e.key === 'Enter') void handleInstall();
|
||||||
}}
|
}}
|
||||||
@@ -354,10 +355,10 @@ export default function PluginSettingsTab() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleInstall}
|
onClick={handleInstall}
|
||||||
disabled={installing || !gitUrl.trim()}
|
disabled={installing || !gitUrl.trim()}
|
||||||
className="flex-shrink-0 px-3.5 py-2 text-xs font-medium bg-foreground text-background hover:opacity-90 disabled:opacity-30 transition-opacity border-l border-border"
|
className="flex-shrink-0 px-4 py-2.5 text-sm font-medium bg-foreground text-background hover:opacity-90 disabled:opacity-30 transition-opacity border-l border-border"
|
||||||
>
|
>
|
||||||
{installing ? (
|
{installing ? (
|
||||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
'Install'
|
'Install'
|
||||||
)}
|
)}
|
||||||
@@ -365,27 +366,34 @@ export default function PluginSettingsTab() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{installError && (
|
{installError && (
|
||||||
<p className="text-xs font-mono text-red-500 -mt-3">{installError}</p>
|
<p className="text-sm text-red-500 -mt-4">{installError}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<p className="flex items-start gap-1.5 text-[11px] text-muted-foreground/50 leading-snug -mt-3">
|
<p className="flex items-start gap-1.5 text-xs text-muted-foreground/50 leading-snug -mt-4">
|
||||||
<ShieldAlert className="w-3 h-3 mt-px flex-shrink-0" />
|
<ShieldAlert className="w-3 h-3 mt-px flex-shrink-0" />
|
||||||
<span>
|
<span>
|
||||||
Only install plugins whose source code you have reviewed or from authors you trust.
|
Only install plugins whose source code you have reviewed or from authors you trust.
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{/* Starter plugin suggestion — above the list */}
|
||||||
|
{!loading && !hasStarterInstalled && (
|
||||||
|
<StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Plugin List */}
|
{/* Plugin List */}
|
||||||
<div className="space-y-2">
|
{loading ? (
|
||||||
{loading ? (
|
<div className="flex items-center gap-2 justify-center py-10 text-sm text-muted-foreground">
|
||||||
<div className="flex items-center gap-2 justify-center py-10 text-xs text-muted-foreground font-mono">
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
Scanning plugins…
|
||||||
scanning plugins…
|
</div>
|
||||||
</div>
|
) : plugins.length === 0 && hasStarterInstalled ? (
|
||||||
) : plugins.length === 0 ? (
|
<p className="text-sm text-muted-foreground text-center py-8">No plugins installed</p>
|
||||||
<EmptyState />
|
) : plugins.length === 0 ? (
|
||||||
) : (
|
<p className="text-sm text-muted-foreground text-center py-8">No plugins installed</p>
|
||||||
plugins.map((plugin, index) => (
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{plugins.map((plugin, index) => (
|
||||||
<PluginCard
|
<PluginCard
|
||||||
key={plugin.name}
|
key={plugin.name}
|
||||||
plugin={plugin}
|
plugin={plugin}
|
||||||
@@ -398,29 +406,24 @@ export default function PluginSettingsTab() {
|
|||||||
onCancelUninstall={() => setConfirmUninstall(null)}
|
onCancelUninstall={() => setConfirmUninstall(null)}
|
||||||
updateError={updateErrors[plugin.name] ?? null}
|
updateError={updateErrors[plugin.name] ?? null}
|
||||||
/>
|
/>
|
||||||
))
|
))}
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
{/* Starter plugin suggestion */}
|
|
||||||
{!loading && !hasStarterInstalled && (
|
|
||||||
<StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Build your own */}
|
{/* Build your own */}
|
||||||
<div className="flex items-center justify-between gap-4 pt-1">
|
<div className="flex items-center justify-between gap-4 pt-2 border-t border-border/50">
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
<BookOpen className="w-3.5 h-3.5 text-muted-foreground/40 flex-shrink-0" />
|
<BookOpen className="w-3.5 h-3.5 text-muted-foreground/40 flex-shrink-0" />
|
||||||
<span className="text-[11px] text-muted-foreground/60">
|
<span className="text-xs text-muted-foreground/60">
|
||||||
Build your own plugin
|
Build your own plugin
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 flex-shrink-0">
|
<div className="flex items-center gap-3 flex-shrink-0">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/cloudcli-ai/cloudcli-plugin-starter"
|
href={STARTER_PLUGIN_URL}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="inline-flex items-center gap-1 text-[11px] text-muted-foreground/60 hover:text-foreground transition-colors"
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
Starter <ExternalLink className="w-2.5 h-2.5" />
|
Starter <ExternalLink className="w-2.5 h-2.5" />
|
||||||
</a>
|
</a>
|
||||||
@@ -429,7 +432,7 @@ export default function PluginSettingsTab() {
|
|||||||
href="https://cloudcli.ai/docs/plugin-overview"
|
href="https://cloudcli.ai/docs/plugin-overview"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="inline-flex items-center gap-1 text-[11px] text-muted-foreground/60 hover:text-foreground transition-colors"
|
className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
Docs <ExternalLink className="w-2.5 h-2.5" />
|
Docs <ExternalLink className="w-2.5 h-2.5" />
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ export type Plugin = {
|
|||||||
enabled: boolean;
|
enabled: boolean;
|
||||||
serverRunning: boolean;
|
serverRunning: boolean;
|
||||||
dirName: string;
|
dirName: string;
|
||||||
|
repoUrl: string | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
type PluginsContextValue = {
|
type PluginsContextValue = {
|
||||||
|
|||||||
Reference in New Issue
Block a user