feat: new plugin system (#489)

* feat: new plugin system * Potential fix for code scanning alert no. 312: Uncontrolled data used in path expression Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Update manifest.json * feat(plugins): add SVG icon support with authenticated inline rendering * fix: coderabbit changes and new plugin name & repo * fix: design changes to plugins settings tab * fix(plugins): prevent git arg injection, add repo URL detection * fix: lint errors and deleting plugin error on windows * fix: coderabbit nitpick comments * fix(plugins): harden path traversal and respect enabled state Use realpathSync to canonicalize paths before the plugin asset boundary check, preventing symlink-based traversal bypasses that could escape the plugin directory. PluginTabContent now guards on plugin.enabled before mounting the plugin module, and re-mounts when the enabled state changes so toggling a plugin takes effect without a page reload. PluginIcon safely handles a missing iconFile prop and skips processing non-OK fetch responses instead of attempting to parse error bodies as SVG. Register 'plugins' as a known main tab so the settings router preserves the tab on navigation. * fix(plugins): support concurrent plugin updates Replace single updatingPlugin string state with a Set to allow multiple plugins to update simultaneously. Also disable the update button and show a descriptive tooltip when a plugin has no git remote configured. * fix(plugins): async shutdown and asset/RPC fixes Await stopPluginServer/stopAllPlugins in signal handlers and route handlers so process exit and state transitions wait for clean plugin shutdown instead of racing ahead. Validate asset paths are regular files before streaming to prevent directory traversal returning unexpected content; add a stream error handler to avoid unhandled crashes on read failures. Fix RPC proxy body detection to use the content-length header instead of Object.keys, so falsy but valid JSON payloads (null, false, 0, {}) are forwarded correctly to plugin servers. Track in-flight start operations via a startingPlugins map to prevent duplicate concurrent plugin starts. * refactor(git-panel): simplify setCommitMessage with plain function * fix(plugins): harden input validation and scan reliability - Validate plugin names against [a-zA-Z0-9_-] allowlist in manifest and asset routes to prevent path traversal via URL - Strip embedded credentials (user:pass@) from git remote URLs before exposing them to the client - Skip .tmp-* directories during scan to avoid partial installs from in-progress updates appearing as broken plugins - Deduplicate plugins sharing the same manifest name to prevent ambiguous state - Guard RPC proxy error handler against writing to an already-sent response, preventing uncaught exceptions on aborted requests * fix(git-panel): reset changes view on project switch * refactor: move plugin content to /view folder * fix: resolve type error in MobileNav and PluginTabContent components --------- Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Haileyesus <118998054+blackmammoth@users.noreply.github.com> Co-authored-by: Haileyesus <something@gmail.com>
2026-03-14 02:17:27 +00:00 · 2026-03-09 11:00:52 +01:00
parent bc164140e0
commit 8afb46af2e
32 changed files with 2013 additions and 123 deletions
--- a/src/components/app/MobileNav.tsx
+++ b/src/components/app/MobileNav.tsx
@@ -1,8 +1,35 @@
-import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
-import { Dispatch, SetStateAction } from 'react';
+import { useState, useRef, useEffect, type Dispatch, type SetStateAction } from 'react';
+import {
+  MessageSquare,
+  Folder,
+  Terminal,
+  GitBranch,
+  ClipboardCheck,
+  Ellipsis,
+  Puzzle,
+  Box,
+  Database,
+  Globe,
+  Wrench,
+  Zap,
+  BarChart3,
+  type LucideIcon,
+} from 'lucide-react';
 import { useTasksSettings } from '../../contexts/TasksSettingsContext';
+import { usePlugins } from '../../contexts/PluginsContext';
 import { AppTab } from '../../types/app';

+const PLUGIN_ICON_MAP: Record<string, LucideIcon> = {
+  Puzzle, Box, Database, Globe, Terminal, Wrench, Zap, BarChart3, Folder, MessageSquare, GitBranch,
+};
+
+type CoreTabId = Exclude<AppTab, `plugin:${string}` | 'preview'>;
+type CoreNavItem = {
+  id: CoreTabId;
+  icon: LucideIcon;
+  label: string;
+};
+
 type MobileNavProps = {
  activeTab: AppTab;
  setActiveTab: Dispatch<SetStateAction<AppTab>>;
@@ -12,39 +39,43 @@ type MobileNavProps = {
 export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: MobileNavProps) {
  const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
  const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
+  const { plugins } = usePlugins();
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement | null>(null);

-  const navItems = [
-    {
-      id: 'chat',
-      icon: MessageSquare,
-      label: 'Chat',
-      onClick: () => setActiveTab('chat')
-    },
-    {
-      id: 'shell',
-      icon: Terminal,
-      label: 'Shell',
-      onClick: () => setActiveTab('shell')
-    },
-    {
-      id: 'files',
-      icon: Folder,
-      label: 'Files',
-      onClick: () => setActiveTab('files')
-    },
-    {
-      id: 'git',
-      icon: GitBranch,
-      label: 'Git',
-      onClick: () => setActiveTab('git')
-    },
-    ...(shouldShowTasksTab ? [{
-      id: 'tasks',
-      icon: ClipboardCheck,
-      label: 'Tasks',
-      onClick: () => setActiveTab('tasks')
-    }] : [])
+  const enabledPlugins = plugins.filter((p) => p.enabled);
+  const hasPlugins = enabledPlugins.length > 0;
+  const isPluginActive = activeTab.startsWith('plugin:');
+
+  // Close the menu on outside tap
+  useEffect(() => {
+    if (!moreOpen) return;
+    const handleTap = (e: PointerEvent) => {
+      const target = e.target;
+      if (moreRef.current && target instanceof Node && !moreRef.current.contains(target)) {
+        setMoreOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', handleTap);
+    return () => document.removeEventListener('pointerdown', handleTap);
+  }, [moreOpen]);
+
+  // Close menu when a plugin tab is selected
+  const selectPlugin = (name: string) => {
+    const pluginTab = `plugin:${name}` as AppTab;
+    setActiveTab(pluginTab);
+    setMoreOpen(false);
+  };
+
+  const baseCoreItems: CoreNavItem[] = [
+    { id: 'chat', icon: MessageSquare, label: 'Chat' },
+    { id: 'shell', icon: Terminal, label: 'Shell' },
+    { id: 'files', icon: Folder, label: 'Files' },
+    { id: 'git', icon: GitBranch, label: 'Git' },
  ];
+  const coreItems: CoreNavItem[] = shouldShowTasksTab
+    ? [...baseCoreItems, { id: 'tasks', icon: ClipboardCheck, label: 'Tasks' }]
+    : baseCoreItems;

  return (
    <div
@@ -53,17 +84,17 @@ export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: M
    >
      <div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
        <div className="flex items-center justify-around gap-0.5 px-1 py-1.5">
-          {navItems.map((item) => {
+          {coreItems.map((item) => {
            const Icon = item.icon;
            const isActive = activeTab === item.id;

            return (
              <button
                key={item.id}
-                onClick={item.onClick}
+                onClick={() => setActiveTab(item.id)}
                onTouchStart={(e) => {
                  e.preventDefault();
-                  item.onClick();
+                  setActiveTab(item.id);
                }}
                className={`relative flex flex-1 touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${isActive
                  ? 'text-primary'
@@ -85,6 +116,62 @@ export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: M
              </button>
            );
          })}
+
+          {/* "More" button — only shown when there are enabled plugins */}
+          {hasPlugins && (
+            <div ref={moreRef} className="relative flex-1">
+              <button
+                onClick={() => setMoreOpen((v) => !v)}
+                onTouchStart={(e) => {
+                  e.preventDefault();
+                  setMoreOpen((v) => !v);
+                }}
+                className={`relative flex w-full touch-manipulation flex-col items-center justify-center gap-0.5 rounded-xl px-3 py-2 transition-all duration-200 active:scale-95 ${
+                  isPluginActive || moreOpen
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+                aria-label="More plugins"
+                aria-expanded={moreOpen}
+              >
+                {(isPluginActive && !moreOpen) && (
+                  <div className="bg-primary/8 dark:bg-primary/12 absolute inset-0 rounded-xl" />
+                )}
+                <Ellipsis
+                  className={`relative z-10 transition-all duration-200 ${isPluginActive ? 'h-5 w-5' : 'h-[18px] w-[18px]'}`}
+                  strokeWidth={isPluginActive ? 2.4 : 1.8}
+                />
+                <span className={`relative z-10 text-[10px] font-medium transition-all duration-200 ${isPluginActive || moreOpen ? 'opacity-100' : 'opacity-60'}`}>
+                  More
+                </span>
+              </button>
+
+              {/* Popover menu */}
+              {moreOpen && (
+                <div className="animate-in fade-in slide-in-from-bottom-2 absolute bottom-full right-0 z-[60] mb-2 min-w-[180px] rounded-xl border border-border/40 bg-popover py-1.5 shadow-lg duration-150">
+                  {enabledPlugins.map((p) => {
+                    const Icon = PLUGIN_ICON_MAP[p.icon] || Puzzle;
+                    const isActive = activeTab === `plugin:${p.name}`;
+
+                    return (
+                      <button
+                        key={p.name}
+                        onClick={() => selectPlugin(p.name)}
+                        className={`flex w-full items-center gap-2.5 px-3.5 py-2.5 text-sm transition-colors ${
+                          isActive
+                            ? 'bg-primary/8 text-primary'
+                            : 'text-foreground hover:bg-muted/60'
+                        }`}
+                      >
+                        <Icon className="h-4 w-4 flex-shrink-0" strokeWidth={isActive ? 2.2 : 1.8} />
+                        <span className="truncate">{p.displayName}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
        </div>
      </div>
    </div>
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -61,20 +61,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
  isSubagentContainer,
  subagentState
 }) => {
-  // Route subagent containers to dedicated component
-  if (isSubagentContainer && subagentState) {
-    if (mode === 'result') {
-      return null;
-    }
-    return (
-      <SubagentContainer
-        toolInput={toolInput}
-        toolResult={toolResult}
-        subagentState={subagentState}
-      />
-    );
-  }
-
  const config = getToolConfig(toolName);
  const displayConfig: any = mode === 'input' ? config.input : config.result;

@@ -94,7 +80,20 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
    }
  }, [displayConfig, parsedData, onFileOpen]);

-  // Keep hooks above this guard so hook call order stays stable across renders.
+  // Route subagent containers to dedicated component (after hooks to keep call order stable)
+  if (isSubagentContainer && subagentState) {
+    if (mode === 'result') {
+      return null;
+    }
+    return (
+      <SubagentContainer
+        toolInput={toolInput}
+        toolResult={toolResult}
+        subagentState={subagentState}
+      />
+    );
+  }
+
  if (!displayConfig) return null;

  if (displayConfig.type === 'one-line') {
--- a/src/components/git-panel/view/GitPanel.tsx
+++ b/src/components/git-panel/view/GitPanel.tsx
@@ -107,7 +107,9 @@ export default function GitPanel({ selectedProject, isMobile = false, onFileOpen

          {activeView === 'changes' && (
            <ChangesView
+              key={selectedProject.fullPath}
              isMobile={isMobile}
+              projectPath={selectedProject.fullPath}
              gitStatus={gitStatus}
              gitDiff={gitDiff}
              isLoading={isLoading}
--- a/src/components/git-panel/view/changes/ChangesView.tsx
+++ b/src/components/git-panel/view/changes/ChangesView.tsx
@@ -9,6 +9,7 @@ import FileStatusLegend from './FileStatusLegend';

 type ChangesViewProps = {
  isMobile: boolean;
+  projectPath: string;
  gitStatus: GitStatusResponse | null;
  gitDiff: GitDiffMap;
  isLoading: boolean;
@@ -27,6 +28,7 @@ type ChangesViewProps = {

 export default function ChangesView({
  isMobile,
+  projectPath,
  gitStatus,
  gitDiff,
  isLoading,
@@ -131,6 +133,7 @@ export default function ChangesView({
    <>
      <CommitComposer
        isMobile={isMobile}
+        projectPath={projectPath}
        selectedFileCount={selectedFiles.size}
        isHidden={hasExpandedFiles}
        onCommit={commitSelectedFiles}
--- a/src/components/git-panel/view/changes/CommitComposer.tsx
+++ b/src/components/git-panel/view/changes/CommitComposer.tsx
@@ -3,8 +3,12 @@ import { useState } from 'react';
 import MicButton from '../../../mic-button/view/MicButton';
 import type { ConfirmationRequest } from '../../types/types';

+// Persists commit messages across unmount/remount, keyed by project path
+const commitMessageCache = new Map<string, string>();
+
 type CommitComposerProps = {
  isMobile: boolean;
+  projectPath: string;
  selectedFileCount: number;
  isHidden: boolean;
  onCommit: (message: string) => Promise<boolean>;
@@ -14,13 +18,24 @@ type CommitComposerProps = {

 export default function CommitComposer({
  isMobile,
+  projectPath,
  selectedFileCount,
  isHidden,
  onCommit,
  onGenerateMessage,
  onRequestConfirmation,
 }: CommitComposerProps) {
-  const [commitMessage, setCommitMessage] = useState('');
+  const [commitMessage, setCommitMessageRaw] = useState(() => commitMessageCache.get(projectPath) ?? '');
+
+  const setCommitMessage = (msg: string) => {
+    setCommitMessageRaw(msg);
+    if (msg) {
+      commitMessageCache.set(projectPath, msg);
+    } else {
+      commitMessageCache.delete(projectPath);
+    }
+  };
+
  const [isCommitting, setIsCommitting] = useState(false);
  const [isGeneratingMessage, setIsGeneratingMessage] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(isMobile);
--- a/src/components/main-content/view/MainContent.tsx
+++ b/src/components/main-content/view/MainContent.tsx
@@ -3,6 +3,7 @@ import ChatInterface from '../../chat/view/ChatInterface';
 import FileTree from '../../file-tree/view/FileTree';
 import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
 import GitPanel from '../../git-panel/view/GitPanel';
+import PluginTabContent from '../../plugins/view/PluginTabContent';
 import type { MainContentProps } from '../types/types';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
@@ -158,6 +159,16 @@ function MainContent({
          {shouldShowTasksTab && <TaskMasterPanel isVisible={activeTab === 'tasks'} />}

          <div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`} />
+
+          {activeTab.startsWith('plugin:') && (
+            <div className="h-full overflow-hidden">
+              <PluginTabContent
+                pluginName={activeTab.replace('plugin:', '')}
+                selectedProject={selectedProject}
+                selectedSession={selectedSession}
+              />
+            </div>
+          )}
        </div>

        <EditorSidebar
--- a/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
@@ -3,6 +3,8 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from '../../../../shared/view/ui';
 import type { AppTab } from '../../../../types/app';
+import { usePlugins } from '../../../../contexts/PluginsContext';
+import PluginIcon from '../../../plugins/view/PluginIcon';

 type MainContentTabSwitcherProps = {
  activeTab: AppTab;
@@ -10,20 +12,32 @@ type MainContentTabSwitcherProps = {
  shouldShowTasksTab: boolean;
 };

-type TabDefinition = {
+type BuiltInTab = {
+  kind: 'builtin';
  id: AppTab;
  labelKey: string;
  icon: LucideIcon;
 };

-const BASE_TABS: TabDefinition[] = [
-  { id: 'chat', labelKey: 'tabs.chat', icon: MessageSquare },
-  { id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
-  { id: 'files', labelKey: 'tabs.files', icon: Folder },
-  { id: 'git', labelKey: 'tabs.git', icon: GitBranch },
+type PluginTab = {
+  kind: 'plugin';
+  id: AppTab;
+  label: string;
+  pluginName: string;
+  iconFile: string;
+};
+
+type TabDefinition = BuiltInTab | PluginTab;
+
+const BASE_TABS: BuiltInTab[] = [
+  { kind: 'builtin', id: 'chat',  labelKey: 'tabs.chat',  icon: MessageSquare },
+  { kind: 'builtin', id: 'shell', labelKey: 'tabs.shell', icon: Terminal },
+  { kind: 'builtin', id: 'files', labelKey: 'tabs.files', icon: Folder },
+  { kind: 'builtin', id: 'git',   labelKey: 'tabs.git',   icon: GitBranch },
 ];

-const TASKS_TAB: TabDefinition = {
+const TASKS_TAB: BuiltInTab = {
+  kind: 'builtin',
  id: 'tasks',
  labelKey: 'tabs.tasks',
  icon: ClipboardCheck,
@@ -35,17 +49,30 @@ export default function MainContentTabSwitcher({
  shouldShowTasksTab,
 }: MainContentTabSwitcherProps) {
  const { t } = useTranslation();
+  const { plugins } = usePlugins();

-  const tabs = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
+  const builtInTabs: BuiltInTab[] = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
+
+  const pluginTabs: PluginTab[] = plugins
+    .filter((p) => p.enabled)
+    .map((p) => ({
+      kind: 'plugin',
+      id: `plugin:${p.name}` as AppTab,
+      label: p.displayName,
+      pluginName: p.name,
+      iconFile: p.icon,
+    }));
+
+  const tabs: TabDefinition[] = [...builtInTabs, ...pluginTabs];

  return (
    <div className="inline-flex items-center gap-[2px] rounded-lg bg-muted/60 p-[3px]">
      {tabs.map((tab) => {
-        const Icon = tab.icon;
        const isActive = tab.id === activeTab;
+        const displayLabel = tab.kind === 'builtin' ? t(tab.labelKey) : tab.label;

        return (
-          <Tooltip key={tab.id} content={t(tab.labelKey)} position="bottom">
+          <Tooltip key={tab.id} content={displayLabel} position="bottom">
            <button
              onClick={() => setActiveTab(tab.id)}
              className={`relative flex items-center gap-1.5 rounded-md px-2.5 py-[5px] text-sm font-medium transition-all duration-150 ${
@@ -54,8 +81,16 @@ export default function MainContentTabSwitcher({
                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
-              <Icon className="h-3.5 w-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
-              <span className="hidden lg:inline">{t(tab.labelKey)}</span>
+              {tab.kind === 'builtin' ? (
+                <tab.icon className="h-3.5 w-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
+              ) : (
+                <PluginIcon
+                  pluginName={tab.pluginName}
+                  iconFile={tab.iconFile}
+                  className="flex h-3.5 w-3.5 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                />
+              )}
+              <span className="hidden lg:inline">{displayLabel}</span>
            </button>
          </Tooltip>
        );
--- a/src/components/main-content/view/subcomponents/MainContentTitle.tsx
+++ b/src/components/main-content/view/subcomponents/MainContentTitle.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
 import type { AppTab, Project, ProjectSession } from '../../../../types/app';
+import { usePlugins } from '../../../../contexts/PluginsContext';

 type MainContentTitleProps = {
  activeTab: AppTab;
@@ -9,7 +10,11 @@ type MainContentTitleProps = {
  shouldShowTasksTab: boolean;
 };

-function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: string) => string) {
+function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: string) => string, pluginDisplayName?: string) {
+  if (activeTab.startsWith('plugin:') && pluginDisplayName) {
+    return pluginDisplayName;
+  }
+
  if (activeTab === 'files') {
    return t('mainContent.projectFiles');
  }
@@ -40,6 +45,11 @@ export default function MainContentTitle({
  shouldShowTasksTab,
 }: MainContentTitleProps) {
  const { t } = useTranslation();
+  const { plugins } = usePlugins();
+
+  const pluginDisplayName = activeTab.startsWith('plugin:')
+    ? plugins.find((p) => p.name === activeTab.replace('plugin:', ''))?.displayName
+    : undefined;

  const showSessionIcon = activeTab === 'chat' && Boolean(selectedSession);
  const showChatNewSession = activeTab === 'chat' && !selectedSession;
@@ -68,7 +78,7 @@ export default function MainContentTitle({
        ) : (
          <div className="min-w-0">
            <h2 className="text-sm font-semibold leading-tight text-foreground">
-              {getTabTitle(activeTab, shouldShowTasksTab, t)}
+              {getTabTitle(activeTab, shouldShowTasksTab, t, pluginDisplayName)}
            </h2>
            <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
          </div>
--- a/src/components/plugins/view/PluginIcon.tsx
+++ b/src/components/plugins/view/PluginIcon.tsx
@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
+
+type Props = {
+  pluginName: string;
+  iconFile: string;
+  className?: string;
+};
+
+// Module-level cache so repeated renders don't re-fetch
+const svgCache = new Map<string, string>();
+
+export default function PluginIcon({ pluginName, iconFile, className }: Props) {
+  const url = iconFile
+    ? `/api/plugins/${encodeURIComponent(pluginName)}/assets/${encodeURIComponent(iconFile)}`
+    : '';
+  const [svg, setSvg] = useState<string | null>(url ? (svgCache.get(url) ?? null) : null);
+
+  useEffect(() => {
+    if (!url || svgCache.has(url)) return;
+    authenticatedFetch(url)
+      .then((r) => {
+        if (!r.ok) return;
+        return r.text();
+      })
+      .then((text) => {
+        if (text && text.trimStart().startsWith('<svg')) {
+          svgCache.set(url, text);
+          setSvg(text);
+        }
+      })
+      .catch(() => {});
+  }, [url]);
+
+  if (!svg) return <span className={className} />;
+
+  return (
+    <span
+      className={className}
+      // SVG is fetched from the user's own installed plugin — same trust level as the plugin code itself
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
--- a/src/components/plugins/view/PluginSettingsTab.tsx
+++ b/src/components/plugins/view/PluginSettingsTab.tsx
@@ -0,0 +1,450 @@
+import { useState } from 'react';
+import { Trash2, RefreshCw, GitBranch, Loader2, ServerCrash, ShieldAlert, ExternalLink, BookOpen, Download, BarChart3 } from 'lucide-react';
+import { usePlugins } from '../../../contexts/PluginsContext';
+import type { Plugin } from '../../../contexts/PluginsContext';
+import PluginIcon from './PluginIcon';
+
+const STARTER_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-starter';
+
+/* ─── Toggle Switch ─────────────────────────────────────────────────────── */
+function ToggleSwitch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) {
+  return (
+    <label className="relative inline-flex cursor-pointer select-none items-center">
+      <input
+        type="checkbox"
+        className="peer sr-only"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        aria-label={ariaLabel}
+      />
+      <div
+        className={`
+          relative h-5 w-9 rounded-full bg-muted transition-colors
+          duration-200 after:absolute
+          after:left-[2px] after:top-[2px] after:h-4 after:w-4
+          after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200
+          after:content-[''] peer-checked:bg-emerald-500
+          peer-checked:after:translate-x-4
+        `}
+      />
+    </label>
+  );
+}
+
+/* ─── Server Dot ────────────────────────────────────────────────────────── */
+function ServerDot({ running }: { running: boolean }) {
+  if (!running) return null;
+  return (
+    <span className="relative flex items-center gap-1.5">
+      <span className="relative flex h-1.5 w-1.5">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+      </span>
+      <span className="font-mono text-[10px] uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
+        running
+      </span>
+    </span>
+  );
+}
+
+/* ─── Plugin Card ───────────────────────────────────────────────────────── */
+type PluginCardProps = {
+  plugin: Plugin;
+  index: number;
+  onToggle: (enabled: boolean) => void;
+  onUpdate: () => void;
+  onUninstall: () => void;
+  updating: boolean;
+  confirmingUninstall: boolean;
+  onCancelUninstall: () => void;
+  updateError: string | null;
+};
+
+function PluginCard({
+  plugin,
+  index,
+  onToggle,
+  onUpdate,
+  onUninstall,
+  updating,
+  confirmingUninstall,
+  onCancelUninstall,
+  updateError,
+}: PluginCardProps) {
+  const accentColor = plugin.enabled
+    ? 'bg-emerald-500'
+    : 'bg-muted-foreground/20';
+
+  return (
+    <div
+      className="relative flex overflow-hidden rounded-lg border border-border bg-card transition-opacity duration-200"
+      style={{
+        opacity: plugin.enabled ? 1 : 0.65,
+        animationDelay: `${index * 40}ms`,
+      }}
+    >
+      {/* Left accent bar */}
+      <div className={`w-[3px] flex-shrink-0 ${accentColor} transition-colors duration-300`} />
+
+      <div className="min-w-0 flex-1 p-4">
+        {/* Header row */}
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <div className="h-5 w-5 flex-shrink-0 text-foreground/80">
+              <PluginIcon
+                pluginName={plugin.name}
+                iconFile={plugin.icon}
+                className="h-5 w-5 [&>svg]:h-full [&>svg]:w-full"
+              />
+            </div>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold leading-none text-foreground">
+                  {plugin.displayName}
+                </span>
+                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  v{plugin.version}
+                </span>
+                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  {plugin.slot}
+                </span>
+                <ServerDot running={!!plugin.serverRunning} />
+              </div>
+              {plugin.description && (
+                <p className="mt-1 text-sm leading-snug text-muted-foreground">
+                  {plugin.description}
+                </p>
+              )}
+              <div className="mt-1 flex items-center gap-3">
+                {plugin.author && (
+                  <span className="text-xs text-muted-foreground/60">
+                    {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 transition-colors hover:text-foreground"
+                  >
+                    <GitBranch className="h-3 w-3" />
+                    <span className="max-w-[200px] truncate">
+                      {plugin.repoUrl.replace(/^https?:\/\/(www\.)?github\.com\//, '')}
+                    </span>
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Controls */}
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <button
+              onClick={onUpdate}
+              disabled={updating || !plugin.repoUrl}
+              title={plugin.repoUrl ? 'Pull latest from git' : 'No git remote — update not available'}
+              aria-label={`Update ${plugin.displayName}`}
+              className="rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40"
+            >
+              {updating ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <RefreshCw className="h-3.5 w-3.5" />
+              )}
+            </button>
+
+            <button
+              onClick={onUninstall}
+              title={confirmingUninstall ? 'Click again to confirm' : 'Uninstall plugin'}
+              aria-label={`Uninstall ${plugin.displayName}`}
+              className={`rounded p-1.5 transition-colors ${
+                confirmingUninstall
+                  ? 'bg-red-50 text-red-500 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/30'
+                  : 'text-muted-foreground hover:bg-muted hover:text-red-500'
+              }`}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+
+            <ToggleSwitch checked={plugin.enabled} onChange={onToggle} ariaLabel={`${plugin.enabled ? 'Disable' : 'Enable'} ${plugin.displayName}`} />
+          </div>
+        </div>
+
+        {/* Confirm uninstall banner */}
+        {confirmingUninstall && (
+          <div className="mt-3 flex items-center justify-between gap-3 rounded border border-red-200 bg-red-50 px-3 py-2 dark:border-red-800/50 dark:bg-red-950/30">
+            <span className="text-sm text-red-600 dark:text-red-400">
+              Remove <span className="font-semibold">{plugin.displayName}</span>? This cannot be undone.
+            </span>
+            <div className="flex gap-1.5">
+              <button
+                onClick={onCancelUninstall}
+                className="rounded border border-border px-2.5 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onUninstall}
+                className="rounded border border-red-300 px-2.5 py-1 text-sm font-medium text-red-600 transition-colors hover:bg-red-100 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/30"
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Update error */}
+        {updateError && (
+          <div className="mt-2 flex items-center gap-1.5 text-sm text-red-500">
+            <ServerCrash className="h-3.5 w-3.5 flex-shrink-0" />
+            <span>{updateError}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Starter Plugin Card ───────────────────────────────────────────────── */
+function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
+  return (
+    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
+      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
+      <div className="min-w-0 flex-1 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
+              <BarChart3 className="h-5 w-5" />
+            </div>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold leading-none text-foreground">
+                  Project Stats
+                </span>
+                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
+                  starter
+                </span>
+                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  tab
+                </span>
+              </div>
+              <p className="mt-1 text-sm leading-snug text-muted-foreground">
+                File counts, lines of code, file-type breakdown, and recent activity for your project.
+              </p>
+              <a
+                href={STARTER_PLUGIN_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+              >
+                <GitBranch className="h-3 w-3" />
+                cloudcli-ai/cloudcli-plugin-starter
+              </a>
+            </div>
+          </div>
+          <button
+            onClick={onInstall}
+            disabled={installing}
+            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+          >
+            {installing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Download className="h-3.5 w-3.5" />
+            )}
+            {installing ? 'Installing…' : 'Install'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Main Component ────────────────────────────────────────────────────── */
+export default function PluginSettingsTab() {
+  const { plugins, loading, installPlugin, uninstallPlugin, updatePlugin, togglePlugin } =
+    usePlugins();
+
+  const [gitUrl, setGitUrl] = useState('');
+  const [installing, setInstalling] = useState(false);
+  const [installingStarter, setInstallingStarter] = useState(false);
+  const [installError, setInstallError] = useState<string | null>(null);
+  const [confirmUninstall, setConfirmUninstall] = useState<string | null>(null);
+  const [updatingPlugins, setUpdatingPlugins] = useState<Set<string>>(new Set());
+  const [updateErrors, setUpdateErrors] = useState<Record<string, string>>({});
+
+  const handleUpdate = async (name: string) => {
+    setUpdatingPlugins((prev) => new Set(prev).add(name));
+    setUpdateErrors((prev) => { const next = { ...prev }; delete next[name]; return next; });
+    const result = await updatePlugin(name);
+    if (!result.success) {
+      setUpdateErrors((prev) => ({ ...prev, [name]: result.error || 'Update failed' }));
+    }
+    setUpdatingPlugins((prev) => { const next = new Set(prev); next.delete(name); return next; });
+  };
+
+  const handleInstall = async () => {
+    if (!gitUrl.trim()) return;
+    setInstalling(true);
+    setInstallError(null);
+    const result = await installPlugin(gitUrl.trim());
+    if (result.success) {
+      setGitUrl('');
+    } else {
+      setInstallError(result.error || 'Installation failed');
+    }
+    setInstalling(false);
+  };
+
+  const handleInstallStarter = async () => {
+    setInstallingStarter(true);
+    setInstallError(null);
+    const result = await installPlugin(STARTER_PLUGIN_URL);
+    if (!result.success) {
+      setInstallError(result.error || 'Installation failed');
+    }
+    setInstallingStarter(false);
+  };
+
+  const handleUninstall = async (name: string) => {
+    if (confirmUninstall !== name) {
+      setConfirmUninstall(name);
+      return;
+    }
+    const result = await uninstallPlugin(name);
+    if (result.success) {
+      setConfirmUninstall(null);
+    } else {
+      setInstallError(result.error || 'Uninstall failed');
+      setConfirmUninstall(null);
+    }
+  };
+
+  const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h3 className="mb-1 text-base font-semibold text-foreground">
+          Plugins
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          Extend the interface with custom plugins. Install from{' '}
+          <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-semibold">
+            git
+          </code>{' '}
+          or drop a folder in{' '}
+          <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-semibold">
+            ~/.claude-code-ui/plugins/
+          </code>
+        </p>
+      </div>
+
+      {/* Install from Git — compact */}
+      <div className="flex items-center gap-0 overflow-hidden rounded-lg border border-border bg-card">
+        <span className="flex-shrink-0 pl-3 pr-1 text-muted-foreground/40">
+          <GitBranch className="h-3.5 w-3.5" />
+        </span>
+        <input
+          type="text"
+          value={gitUrl}
+          onChange={(e) => {
+            setGitUrl(e.target.value);
+            setInstallError(null);
+          }}
+          placeholder="https://github.com/user/my-plugin"
+          aria-label="Plugin git repository URL"
+          className="flex-1 bg-transparent px-2 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/40 focus:outline-none"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') void handleInstall();
+          }}
+        />
+        <button
+          onClick={handleInstall}
+          disabled={installing || !gitUrl.trim()}
+          className="flex-shrink-0 border-l border-border bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-30"
+        >
+          {installing ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            'Install'
+          )}
+        </button>
+      </div>
+
+      {installError && (
+        <p className="-mt-4 text-sm text-red-500">{installError}</p>
+      )}
+
+      <p className="-mt-4 flex items-start gap-1.5 text-xs leading-snug text-muted-foreground/50">
+        <ShieldAlert className="mt-px h-3 w-3 flex-shrink-0" />
+        <span>
+          Only install plugins whose source code you have reviewed or from authors you trust.
+        </span>
+      </p>
+
+      {/* Starter plugin suggestion — above the list */}
+      {!loading && !hasStarterInstalled && (
+        <StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
+      )}
+
+      {/* Plugin List */}
+      {loading ? (
+        <div className="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Scanning plugins…
+        </div>
+      ) : plugins.length === 0 ? (
+        <p className="py-8 text-center text-sm text-muted-foreground">No plugins installed</p>
+      ) : (
+        <div className="space-y-2">
+          {plugins.map((plugin, index) => (
+            <PluginCard
+              key={plugin.name}
+              plugin={plugin}
+              index={index}
+              onToggle={(enabled) => void togglePlugin(plugin.name, enabled).then(r => { if (!r.success) setInstallError(r.error || 'Toggle failed'); })}
+              onUpdate={() => void handleUpdate(plugin.name)}
+              onUninstall={() => void handleUninstall(plugin.name)}
+              updating={updatingPlugins.has(plugin.name)}
+              confirmingUninstall={confirmUninstall === plugin.name}
+              onCancelUninstall={() => setConfirmUninstall(null)}
+              updateError={updateErrors[plugin.name] ?? null}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Build your own */}
+      <div className="flex items-center justify-between gap-4 border-t border-border/50 pt-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <BookOpen className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground/40" />
+          <span className="text-xs text-muted-foreground/60">
+            Build your own plugin
+          </span>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-3">
+          <a
+            href={STARTER_PLUGIN_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+          >
+            Starter <ExternalLink className="h-2.5 w-2.5" />
+          </a>
+          <span className="text-muted-foreground/20">·</span>
+          <a
+            href="https://cloudcli.ai/docs/plugin-overview"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
+          >
+            Docs <ExternalLink className="h-2.5 w-2.5" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/plugins/view/PluginTabContent.tsx
+++ b/src/components/plugins/view/PluginTabContent.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef } from 'react';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { authenticatedFetch } from '../../../utils/api';
+import { usePlugins } from '../../../contexts/PluginsContext';
+import type { Project, ProjectSession } from '../../../types/app';
+
+type PluginTabContentProps = {
+  pluginName: string;
+  selectedProject: Project | null;
+  selectedSession: ProjectSession | null;
+};
+
+type PluginContext = {
+  theme: 'dark' | 'light';
+  project: { name: string; path: string } | null;
+  session: { id: string; title: string } | null;
+};
+
+function buildContext(
+  isDarkMode: boolean,
+  selectedProject: Project | null,
+  selectedSession: ProjectSession | null,
+): PluginContext {
+  return {
+    theme: isDarkMode ? 'dark' : 'light',
+    project: selectedProject
+      ? {
+        name: selectedProject.name,
+        path: selectedProject.fullPath || selectedProject.path || '',
+      }
+      : null,
+    session: selectedSession
+      ? {
+        id: selectedSession.id,
+        title: selectedSession.title || selectedSession.name || selectedSession.id,
+      }
+      : null,
+  };
+}
+
+export default function PluginTabContent({
+  pluginName,
+  selectedProject,
+  selectedSession,
+}: PluginTabContentProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { isDarkMode } = useTheme();
+  const { plugins } = usePlugins();
+
+  // Stable refs so effects don't need context values in their dep arrays
+  const contextRef = useRef<PluginContext>(buildContext(isDarkMode, selectedProject, selectedSession));
+  const contextCallbacksRef = useRef<Set<(ctx: PluginContext) => void>>(new Set());
+
+  const moduleRef = useRef<any>(null);
+
+  const plugin = plugins.find(p => p.name === pluginName);
+
+  // Keep contextRef current and notify the mounted plugin on every context change
+  useEffect(() => {
+    const ctx = buildContext(isDarkMode, selectedProject, selectedSession);
+    contextRef.current = ctx;
+
+    for (const cb of contextCallbacksRef.current) {
+      try { cb(ctx); } catch { /* plugin error — ignore */ }
+    }
+  }, [isDarkMode, selectedProject, selectedSession]);
+
+  useEffect(() => {
+    if (!containerRef.current || !plugin?.enabled) return;
+
+    let active = true;
+    const container = containerRef.current;
+    const entryFile = plugin?.entry ?? 'index.js';
+    const contextCallbacks = contextCallbacksRef.current;
+
+    (async () => {
+      try {
+        // Fetch the plugin JS with auth headers (Cloudflare Worker requires auth on all routes).
+        // Then import it via a Blob URL so the browser never makes an unauthenticated request.
+        const assetUrl = `/api/plugins/${encodeURIComponent(pluginName)}/assets/${encodeURIComponent(entryFile)}`;
+        const res = await authenticatedFetch(assetUrl);
+        if (!res.ok) throw new Error(`Failed to fetch plugin (HTTP ${res.status})`);
+        const jsText = await res.text();
+        const blob = new Blob([jsText], { type: 'application/javascript' });
+        const blobUrl = URL.createObjectURL(blob);
+        // @vite-ignore
+        const mod = await import(/* @vite-ignore */ blobUrl).finally(() => URL.revokeObjectURL(blobUrl));
+        if (!active || !containerRef.current) return;
+
+        moduleRef.current = mod;
+
+        const api = {
+          get context(): PluginContext { return contextRef.current; },
+
+          onContextChange(cb: (ctx: PluginContext) => void): () => void {
+            contextCallbacks.add(cb);
+            return () => contextCallbacks.delete(cb);
+          },
+
+          async rpc(method: string, path: string, body?: unknown): Promise<unknown> {
+            const cleanPath = String(path).replace(/^\//, '');
+            const res = await authenticatedFetch(
+              `/api/plugins/${encodeURIComponent(pluginName)}/rpc/${cleanPath}`,
+              {
+                method: method || 'GET',
+                ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+              },
+            );
+            if (!res.ok) throw new Error(`RPC error ${res.status}`);
+            return res.json();
+          },
+        };
+
+        await mod.mount?.(container, api);
+        if (!active) {
+          try { mod.unmount?.(container); } catch { /* ignore */ }
+          moduleRef.current = null;
+          return;
+        }
+      } catch (err) {
+        if (!active) return;
+        console.error(`[Plugin:${pluginName}] Failed to load:`, err);
+        if (containerRef.current) {
+          const errDiv = document.createElement('div');
+          errDiv.style.cssText = 'padding:16px;font-size:13px;color:#dc2626';
+          errDiv.textContent = `Plugin failed to load: ${String(err)}`;
+          containerRef.current.replaceChildren(errDiv);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+      try { moduleRef.current?.unmount?.(container); } catch { /* ignore */ }
+      contextCallbacks.clear();
+      moduleRef.current = null;
+    };
+  }, [pluginName, plugin?.entry, plugin?.enabled]); // re-mount when plugin or enabled state changes
+
+  return <div ref={containerRef} className="h-full w-full overflow-auto" />;
+}
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -98,7 +98,7 @@ type CodexSettingsStorage = {

 type ActiveLoginProvider = AgentProvider | '';

-const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks'];
+const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'plugins'];

 const normalizeMainTab = (tab: string): SettingsMainTab => {
  // Keep backwards compatibility with older callers that still pass "tools".
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from 'react';

-export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks';
+export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'plugins';
 export type AgentProvider = 'claude' | 'cursor' | 'codex' | 'gemini';
 export type AgentCategory = 'account' | 'permissions' | 'mcp';
 export type ProjectSortOrder = 'name' | 'date';
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -10,6 +10,7 @@ import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
 import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
 import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
+import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
 import { useSettingsController } from '../hooks/useSettingsController';
 import type { SettingsProps } from '../types/types';

@@ -165,6 +166,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
                <CredentialsSettingsTab />
              </div>
            )}
+
+            {activeTab === 'plugins' && (
+              <div className="space-y-6 md:space-y-8">
+                <PluginSettingsTab />
+              </div>
+            )}
          </div>
        </div>

--- a/src/components/settings/view/SettingsMainTabs.tsx
+++ b/src/components/settings/view/SettingsMainTabs.tsx
@@ -1,4 +1,4 @@
-import { GitBranch, Key } from 'lucide-react';
+import { GitBranch, Key, Puzzle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { SettingsMainTab } from '../types/types';

@@ -9,7 +9,8 @@ type SettingsMainTabsProps = {

 type MainTabConfig = {
  id: SettingsMainTab;
-  labelKey: string;
+  labelKey?: string;
+  label?: string;
  icon?: typeof GitBranch;
 };

@@ -19,6 +20,7 @@ const TAB_CONFIG: MainTabConfig[] = [
  { id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
  { id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
  { id: 'tasks', labelKey: 'mainTabs.tasks' },
+  { id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
 ];

 export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTabsProps) {
@@ -44,7 +46,7 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
              }`}
            >
              {Icon && <Icon className="mr-2 inline h-4 w-4" />}
-              {t(tab.labelKey)}
+              {tab.labelKey ? t(tab.labelKey) : tab.label}
            </button>
          );
        })}
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -4,10 +4,10 @@ import type { TFunction } from 'i18next';
 import { ScrollArea } from '../../../../shared/view/ui';
 import type { Project } from '../../../../types/app';
 import type { ReleaseInfo } from '../../../../types/sharedTypes';
+import type { ConversationSearchResults, SearchProgress } from '../../hooks/useSidebarController';
 import SidebarFooter from './SidebarFooter';
 import SidebarHeader from './SidebarHeader';
 import SidebarProjectList, { type SidebarProjectListProps } from './SidebarProjectList';
-import type { ConversationSearchResults, SearchProgress } from '../../hooks/useSidebarController';

 type SearchMode = 'projects' | 'conversations';

@@ -19,7 +19,7 @@ function HighlightedSnippet({ snippet, highlights }: { snippet: string; highligh
      parts.push(snippet.slice(cursor, h.start));
    }
    parts.push(
-      <mark key={h.start} className="bg-yellow-200 dark:bg-yellow-800 text-foreground rounded-sm px-0.5">
+      <mark key={h.start} className="rounded-sm bg-yellow-200 px-0.5 text-foreground dark:bg-yellow-800">
        {snippet.slice(h.start, h.end)}
      </mark>
    );
@@ -29,7 +29,7 @@ function HighlightedSnippet({ snippet, highlights }: { snippet: string; highligh
    parts.push(snippet.slice(cursor));
  }
  return (
-    <span className="text-xs text-muted-foreground leading-relaxed">
+    <span className="text-xs leading-relaxed text-muted-foreground">
      {parts}
    </span>
  );
@@ -116,23 +116,23 @@ export default function SidebarContent({
      <ScrollArea className="flex-1 overflow-y-auto overscroll-contain md:px-1.5 md:py-2">
        {showConversationSearch ? (
          isSearching && !hasPartialResults ? (
-            <div className="text-center py-12 md:py-8 px-4">
-              <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
-                <div className="w-6 h-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+            <div className="px-4 py-12 text-center md:py-8">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted md:mb-3">
+                <div className="h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
              </div>
              <p className="text-sm text-muted-foreground">{t('search.searching')}</p>
              {searchProgress && (
-                <p className="text-xs text-muted-foreground/60 mt-1">
+                <p className="mt-1 text-xs text-muted-foreground/60">
                  {t('search.projectsScanned', { count: searchProgress.scannedProjects })}/{searchProgress.totalProjects}
                </p>
              )}
            </div>
          ) : !isSearching && conversationResults && conversationResults.results.length === 0 ? (
-            <div className="text-center py-12 md:py-8 px-4">
-              <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
-                <Search className="w-6 h-6 text-muted-foreground" />
+            <div className="px-4 py-12 text-center md:py-8">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-muted md:mb-3">
+                <Search className="h-6 w-6 text-muted-foreground" />
              </div>
-              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('search.noResults')}</h3>
+              <h3 className="mb-2 text-base font-medium text-foreground md:mb-1">{t('search.noResults')}</h3>
              <p className="text-sm text-muted-foreground">{t('search.tryDifferentQuery')}</p>
            </div>
          ) : hasPartialResults ? (
@@ -143,7 +143,7 @@ export default function SidebarContent({
                </p>
                {isSearching && searchProgress && (
                  <div className="flex items-center gap-1.5">
-                    <div className="w-3 h-3 animate-spin rounded-full border-[1.5px] border-muted-foreground/40 border-t-primary" />
+                    <div className="h-3 w-3 animate-spin rounded-full border-[1.5px] border-muted-foreground/40 border-t-primary" />
                    <p className="text-[10px] text-muted-foreground/60">
                      {searchProgress.scannedProjects}/{searchProgress.totalProjects}
                    </p>
@@ -151,9 +151,9 @@ export default function SidebarContent({
                )}
              </div>
              {isSearching && searchProgress && (
-                <div className="mx-1 h-0.5 bg-muted rounded-full overflow-hidden">
+                <div className="mx-1 h-0.5 overflow-hidden rounded-full bg-muted">
                  <div
-                    className="h-full bg-primary/60 rounded-full transition-all duration-300"
+                    className="h-full rounded-full bg-primary/60 transition-all duration-300"
                    style={{ width: `${Math.round((searchProgress.scannedProjects / searchProgress.totalProjects) * 100)}%` }}
                  />
                </div>
@@ -161,15 +161,15 @@ export default function SidebarContent({
              {conversationResults.results.map((projectResult) => (
                <div key={projectResult.projectName} className="space-y-1">
                  <div className="flex items-center gap-1.5 px-1 py-1">
-                    <Folder className="w-3 h-3 text-muted-foreground flex-shrink-0" />
-                    <span className="text-xs font-medium text-foreground truncate">
+                    <Folder className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                    <span className="truncate text-xs font-medium text-foreground">
                      {projectResult.projectDisplayName}
                    </span>
                  </div>
                  {projectResult.sessions.map((session) => (
                    <button
                      key={`${projectResult.projectName}-${session.sessionId}`}
-                      className="w-full text-left rounded-md px-2 py-2 hover:bg-accent/50 transition-colors"
+                      className="w-full rounded-md px-2 py-2 text-left transition-colors hover:bg-accent/50"
                      onClick={() => onConversationResultClick(
                        projectResult.projectName,
                        session.sessionId,
@@ -178,13 +178,13 @@ export default function SidebarContent({
                        session.matches[0]?.snippet
                      )}
                    >
-                      <div className="flex items-center gap-1.5 mb-1">
-                        <MessageSquare className="w-3 h-3 text-primary flex-shrink-0" />
-                        <span className="text-xs font-medium text-foreground truncate">
+                      <div className="mb-1 flex items-center gap-1.5">
+                        <MessageSquare className="h-3 w-3 flex-shrink-0 text-primary" />
+                        <span className="truncate text-xs font-medium text-foreground">
                          {session.sessionSummary}
                        </span>
                        {session.provider && session.provider !== 'claude' && (
-                          <span className="text-[9px] px-1 py-0.5 rounded bg-muted text-muted-foreground uppercase flex-shrink-0">
+                          <span className="flex-shrink-0 rounded bg-muted px-1 py-0.5 text-[9px] uppercase text-muted-foreground">
                            {session.provider}
                          </span>
                        )}
@@ -192,7 +192,7 @@ export default function SidebarContent({
                      <div className="space-y-1 pl-4">
                        {session.matches.map((match, idx) => (
                          <div key={idx} className="flex items-start gap-1">
-                            <span className="text-[10px] text-muted-foreground/60 font-medium uppercase flex-shrink-0 mt-0.5">
+                            <span className="mt-0.5 flex-shrink-0 text-[10px] font-medium uppercase text-muted-foreground/60">
                              {match.role === 'user' ? 'U' : 'A'}
                            </span>
                            <HighlightedSnippet
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -121,7 +121,7 @@ export default function SidebarHeader({
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
-                <Folder className="w-3 h-3" />
+                <Folder className="h-3 w-3" />
                {t('search.modeProjects')}
              </button>
              <button
@@ -134,26 +134,26 @@ export default function SidebarHeader({
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
-                <MessageSquare className="w-3 h-3" />
+                <MessageSquare className="h-3 w-3" />
                {t('search.modeConversations')}
              </button>
            </div>
            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/50 pointer-events-none" />
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/50" />
              <Input
                type="text"
                placeholder={searchMode === 'conversations' ? t('search.conversationsPlaceholder') : t('projects.searchPlaceholder')}
                value={searchFilter}
                onChange={(event) => onSearchFilterChange(event.target.value)}
-                className="nav-search-input pl-9 pr-8 h-9 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
+                className="nav-search-input h-9 rounded-xl border-0 pl-9 pr-8 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
              />
              {searchFilter && (
                <button
                  onClick={onClearSearchFilter}
                  aria-label={t('tooltips.clearSearch')}
-                  className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 hover:bg-accent rounded-md"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-0.5 hover:bg-accent"
                >
-                  <X className="w-3 h-3 text-muted-foreground" />
+                  <X className="h-3 w-3 text-muted-foreground" />
                </button>
              )}
            </div>
@@ -213,7 +213,7 @@ export default function SidebarHeader({
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
-                <Folder className="w-3 h-3" />
+                <Folder className="h-3 w-3" />
                {t('search.modeProjects')}
              </button>
              <button
@@ -226,26 +226,26 @@ export default function SidebarHeader({
                    : "text-muted-foreground hover:text-foreground"
                )}
              >
-                <MessageSquare className="w-3 h-3" />
+                <MessageSquare className="h-3 w-3" />
                {t('search.modeConversations')}
              </button>
            </div>
            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 pointer-events-none" />
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/50" />
              <Input
                type="text"
                placeholder={searchMode === 'conversations' ? t('search.conversationsPlaceholder') : t('projects.searchPlaceholder')}
                value={searchFilter}
                onChange={(event) => onSearchFilterChange(event.target.value)}
-                className="nav-search-input pl-10 pr-9 h-10 text-sm rounded-xl border-0 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all duration-200"
+                className="nav-search-input h-10 rounded-xl border-0 pl-10 pr-9 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
              />
              {searchFilter && (
                <button
                  onClick={onClearSearchFilter}
                  aria-label={t('tooltips.clearSearch')}
-                  className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1 hover:bg-accent rounded-md"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-1 hover:bg-accent"
                >
-                  <X className="w-3.5 h-3.5 text-muted-foreground" />
+                  <X className="h-3.5 w-3.5 text-muted-foreground" />
                </button>
              )}
            </div>