fix(plugins): prevent git arg injection, add repo URL detection

This commit is contained in:
simosmik
2026-03-06 12:09:25 +00:00
parent 1d62df68d6
commit e80fd4b09b
5 changed files with 134 additions and 104 deletions

View File

@@ -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

Submodule plugins/starter added at bfa6332810

View File

@@ -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'],
}); });

View File

@@ -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>

View File

@@ -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 = {