diff --git a/src/components/plugins/view/PluginSettingsTab.tsx b/src/components/plugins/view/PluginSettingsTab.tsx index 81d947a0..a411b94c 100644 --- a/src/components/plugins/view/PluginSettingsTab.tsx +++ b/src/components/plugins/view/PluginSettingsTab.tsx @@ -6,6 +6,7 @@ import type { Plugin } from '../../../contexts/PluginsContext'; import PluginIcon from './PluginIcon'; const STARTER_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-starter'; +const TERMINAL_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-terminal'; /* ─── Toggle Switch ─────────────────────────────────────────────────────── */ function ToggleSwitch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) { @@ -264,6 +265,67 @@ function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; i ); } +/* ─── Terminal Plugin Card ──────────────────────────────────────────────── */ +function TerminalPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) { + const { t } = useTranslation('settings'); + + return ( +
+
+
+
+
+
+ + + + + +
+
+
+ + {t('pluginSettings.terminalPlugin.name')} + + + {t('pluginSettings.terminalPlugin.badge')} + + + {t('pluginSettings.tab')} + +
+

+ {t('pluginSettings.terminalPlugin.description')} +

+ + + cloudcli-ai/cloudcli-plugin-terminal + +
+
+ +
+
+
+ ); +} + /* ─── Main Component ────────────────────────────────────────────────────── */ export default function PluginSettingsTab() { const { t } = useTranslation('settings'); @@ -273,6 +335,7 @@ export default function PluginSettingsTab() { const [gitUrl, setGitUrl] = useState(''); const [installing, setInstalling] = useState(false); const [installingStarter, setInstallingStarter] = useState(false); + const [installingTerminal, setInstallingTerminal] = useState(false); const [installError, setInstallError] = useState(null); const [confirmUninstall, setConfirmUninstall] = useState(null); const [updatingPlugins, setUpdatingPlugins] = useState>(new Set()); @@ -311,6 +374,16 @@ export default function PluginSettingsTab() { setInstallingStarter(false); }; + const handleInstallTerminal = async () => { + setInstallingTerminal(true); + setInstallError(null); + const result = await installPlugin(TERMINAL_PLUGIN_URL); + if (!result.success) { + setInstallError(result.error || t('pluginSettings.installFailed')); + } + setInstallingTerminal(false); + }; + const handleUninstall = async (name: string) => { if (confirmUninstall !== name) { setConfirmUninstall(name); @@ -326,6 +399,7 @@ export default function PluginSettingsTab() { }; const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats'); + const hasTerminalInstalled = plugins.some((p) => p.name === 'web-terminal'); return (
@@ -382,9 +456,16 @@ export default function PluginSettingsTab() {

- {/* Starter plugin suggestion — above the list */} - {!loading && !hasStarterInstalled && ( - + {/* Official plugin suggestions — above the list */} + {!loading && (!hasStarterInstalled || !hasTerminalInstalled) && ( +
+ {!hasStarterInstalled && ( + + )} + {!hasTerminalInstalled && ( + + )} +
)} {/* Plugin List */} @@ -423,33 +504,30 @@ export default function PluginSettingsTab() {
)} - {/* Build your own */} -
-
- - - {t('pluginSettings.buildYourOwn')} - -
- + {/* Starter plugin */} +
+ + + {t('pluginSettings.starterPluginLabel')} + + · + + {t('pluginSettings.starter')} + + · + + {t('pluginSettings.docs')} +
); diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json index fcd1c728..8596e045 100644 --- a/src/i18n/locales/en/settings.json +++ b/src/i18n/locales/en/settings.json @@ -476,7 +476,7 @@ "installFailed": "Installation failed", "uninstallFailed": "Uninstall failed", "toggleFailed": "Toggle failed", - "buildYourOwn": "Build your own plugin", + "starterPluginLabel": "Starter Plugin", "starter": "Starter", "docs": "Docs", "starterPlugin": { @@ -485,6 +485,12 @@ "description": "File counts, lines of code, file-type breakdown, and recent activity for your project.", "install": "Install" }, + "terminalPlugin": { + "name": "Terminal", + "badge": "official", + "description": "Integrated terminal with full shell access directly within the interface.", + "install": "Install" + }, "morePlugins": "More", "enable": "Enable", "disable": "Disable",