fix: resolve type error in MobileNav and PluginTabContent components

refactor: move plugin content to /view folder
fix(git-panel): reset changes view on project switch
2026-03-11 17:07:40 +00:00 · 2026-03-09 12:59:52 +03:00 · 2026-03-09 12:51:48 +03:00 · 2026-03-09 08:18:58 +00:00 · 2026-03-09 07:59:46 +00:00 · 2026-03-09 07:47:17 +00:00
47 changed files with 3391 additions and 139 deletions
--- a/.gitmodules
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "plugins/starter"]
+	path = plugins/starter
+	url = https://github.com/cloudcli-ai/cloudcli-plugin-starter.git
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,6 +1,6 @@
 {
  "git": {
-    "commitMessage": "Release ${version}",
+    "commitMessage": "chore(release): v${version}",
    "tagName": "v${version}",
    "requireBranch": "main",
    "requireCleanWorkingDir": true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,30 @@
 All notable changes to CloudCLI UI will be documented in this file.


+## [1.23.2](https://github.com/siteboon/claudecodeui/compare/v1.22.1...v1.23.2) (2026-03-06)
+
+### New Features
+
+* add clickable overlay buttons for CLI prompts in Shell terminal ([#480](https://github.com/siteboon/claudecodeui/issues/480)) ([2444209](https://github.com/siteboon/claudecodeui/commit/2444209723701dda2b881cea2501b239e64e51c1)), closes [#427](https://github.com/siteboon/claudecodeui/issues/427)
+* add terminal shortcuts panel for mobile ([#411](https://github.com/siteboon/claudecodeui/issues/411)) ([b0a3fdf](https://github.com/siteboon/claudecodeui/commit/b0a3fdf95ffdb961261194d10400267251e42f17))
+* implement session rename with SQLite storage ([#413](https://github.com/siteboon/claudecodeui/issues/413)) ([198e3da](https://github.com/siteboon/claudecodeui/commit/198e3da89b353780f53a91888384da9118995e81)), closes [#72](https://github.com/siteboon/claudecodeui/issues/72) [#358](https://github.com/siteboon/claudecodeui/issues/358)
+
+### Bug Fixes
+
+* **chat:** finalize terminal lifecycle to prevent stuck processing/thinking UI ([#483](https://github.com/siteboon/claudecodeui/issues/483)) ([0590c5c](https://github.com/siteboon/claudecodeui/commit/0590c5c178f4791e2b039d525ecca4d220c3dcae))
+* **codex-history:** prevent AGENTS.md/internal prompt leakage when reloading Codex sessions ([#488](https://github.com/siteboon/claudecodeui/issues/488)) ([64a96b2](https://github.com/siteboon/claudecodeui/commit/64a96b24f853acb802f700810b302f0f5cf00898))
+* preserve pending permission requests across WebSocket reconnections ([#462](https://github.com/siteboon/claudecodeui/issues/462)) ([4ee88f0](https://github.com/siteboon/claudecodeui/commit/4ee88f0eb0c648b54b05f006c6796fb7b09b0fae))
+* prevent React 18 batching from losing messages during session sync ([#461](https://github.com/siteboon/claudecodeui/issues/461)) ([688d734](https://github.com/siteboon/claudecodeui/commit/688d73477a50773e43c85addc96212aa6290aea5))
+* release it script ([dcea8a3](https://github.com/siteboon/claudecodeui/commit/dcea8a329c7d68437e1e72c8c766cf33c74637e9))
+
+### Styling
+
+* improve UI for processing banner ([#477](https://github.com/siteboon/claudecodeui/issues/477)) ([2320e1d](https://github.com/siteboon/claudecodeui/commit/2320e1d74b59c65b5b7fc4fa8b05fd9208f4898c))
+
+### Maintenance
+
+* remove logging of received WebSocket messages in production ([#487](https://github.com/siteboon/claudecodeui/issues/487)) ([9193feb](https://github.com/siteboon/claudecodeui/commit/9193feb6dc83041f3c365204648a88468bdc001b))
+
 ## [1.22.0](https://github.com/siteboon/claudecodeui/compare/v1.21.0...v1.22.0) (2026-03-03)

 ### New Features
--- a/README.md
+++ b/README.md
@@ -1,22 +1,24 @@
 <div align="center">
  <img src="public/logo.svg" alt="CloudCLI UI" width="64" height="64">
  <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <p>A desktop and mobile UI for <a href="https://docs.anthropic.com/en/docs/claude-code">Claude Code</a>, <a href="https://docs.cursor.com/en/cli/overview">Cursor CLI</a>, <a href="https://developers.openai.com/codex">Codex</a>, and <a href="https://geminicli.com/">Gemini-CLI</a>.<br>Use it locally or remotely to view your active projects and sessions from everywhere.</p>
 </div>

-
-A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), [Codex](https://developers.openai.com/codex), and [Gemini-CLI](https://geminicli.com/). You can use it locally or remotely to view your active projects and sessions and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere.
-
 <p align="center">
-  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
+  <a href="https://cloudcli.ai">CloudCLI Cloud</a> · <a href="https://cloudcli.ai/docs">Documentation</a> · <a href="https://discord.gg/buxwujPNRE">Discord</a> · <a href="https://github.com/siteboon/claudecodeui/issues">Bug Reports</a> · <a href="CONTRIBUTING.md">Contributing</a>
 </p>

 <p align="center">
-  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <a href="https://cloudcli.ai"><img src="https://img.shields.io/badge/☁️_CloudCLI_Cloud-Try_Now-0066FF?style=for-the-badge" alt="CloudCLI Cloud"></a>
+  <a href="https://discord.gg/buxwujPNRE"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Join our Discord"></a>
+  <br><br>
  <a href="https://trendshift.io/repositories/15586" target="_blank"><img src="https://trendshift.io/api/badge/repositories/15586" alt="siteboon%2Fclaudecodeui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>

 <div align="right"><i><b>English</b> · <a href="./README.ko.md">한국어</a> · <a href="./README.zh-CN.md">中文</a> · <a href="./README.ja.md">日本語</a></i></div>

+---
+
 ## Screenshots

 <div align="center">
@@ -59,7 +61,7 @@ A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/cla
 - **Git Explorer** - View, stage and commit your changes. You can also switch branches 
 - **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
- **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
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.22.0",
+  "version": "1.23.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@siteboon/claude-code-ui",
-      "version": "1.22.0",
+      "version": "1.23.2",
      "hasInstallScript": true,
      "license": "GPL-3.0",
      "dependencies": {
@@ -1909,7 +1909,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -1926,7 +1925,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@siteboon/claude-code-ui",
-  "version": "1.22.0",
+  "version": "1.23.2",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
  "main": "server/index.js",
--- a/plugins/starter
+++ b/plugins/starter
--- a/server/index.js
+++ b/server/index.js
@@ -44,7 +44,7 @@ import pty from 'node-pty';
 import fetch from 'node-fetch';
 import mime from 'mime-types';

-import { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually, extractProjectDirectory, clearProjectDirectoryCache } from './projects.js';
+import { getProjects, getSessions, getSessionMessages, renameProject, deleteSession, deleteProject, addProjectManually, extractProjectDirectory, clearProjectDirectoryCache, searchConversations } from './projects.js';
 import { queryClaudeSDK, abortClaudeSDKSession, isClaudeSDKSessionActive, getActiveClaudeSDKSessions, resolveToolApproval, getPendingApprovalsForSession, reconnectSessionWriter } from './claude-sdk.js';
 import { spawnCursor, abortCursorSession, isCursorSessionActive, getActiveCursorSessions } from './cursor-cli.js';
 import { queryCodex, abortCodexSession, isCodexSessionActive, getActiveCodexSessions } from './openai-codex.js';
@@ -64,6 +64,8 @@ import cliAuthRoutes from './routes/cli-auth.js';
 import userRoutes from './routes/user.js';
 import codexRoutes from './routes/codex.js';
 import geminiRoutes from './routes/gemini.js';
+import pluginsRoutes from './routes/plugins.js';
+import { startEnabledPluginServers, stopAllPlugins } from './utils/plugin-process-manager.js';
 import { initializeDatabase, sessionNamesDb, applyCustomSessionNames } from './database/db.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
 import { IS_PLATFORM } from './constants/config.js';
@@ -389,6 +391,9 @@ app.use('/api/codex', authenticateToken, codexRoutes);
 // Gemini API Routes (protected)
 app.use('/api/gemini', authenticateToken, geminiRoutes);

+// Plugins API Routes (protected)
+app.use('/api/plugins', authenticateToken, pluginsRoutes);
+
 // Agent API Routes (uses API key authentication)
 app.use('/api/agent', agentRoutes);

@@ -608,6 +613,51 @@ app.post('/api/projects/create', authenticateToken, async (req, res) => {
    }
 });

+// Search conversations content (SSE streaming)
+app.get('/api/search/conversations', authenticateToken, async (req, res) => {
+    const query = typeof req.query.q === 'string' ? req.query.q.trim() : '';
+    const parsedLimit = Number.parseInt(String(req.query.limit), 10);
+    const limit = Number.isNaN(parsedLimit) ? 50 : Math.max(1, Math.min(parsedLimit, 100));
+
+    if (query.length < 2) {
+        return res.status(400).json({ error: 'Query must be at least 2 characters' });
+    }
+
+    res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+        'X-Accel-Buffering': 'no',
+    });
+
+    let closed = false;
+    const abortController = new AbortController();
+    req.on('close', () => { closed = true; abortController.abort(); });
+
+    try {
+        await searchConversations(query, limit, ({ projectResult, totalMatches, scannedProjects, totalProjects }) => {
+            if (closed) return;
+            if (projectResult) {
+                res.write(`event: result\ndata: ${JSON.stringify({ projectResult, totalMatches, scannedProjects, totalProjects })}\n\n`);
+            } else {
+                res.write(`event: progress\ndata: ${JSON.stringify({ totalMatches, scannedProjects, totalProjects })}\n\n`);
+            }
+        }, abortController.signal);
+        if (!closed) {
+            res.write(`event: done\ndata: {}\n\n`);
+        }
+    } catch (error) {
+        console.error('Error searching conversations:', error);
+        if (!closed) {
+            res.write(`event: error\ndata: ${JSON.stringify({ error: 'Search failed' })}\n\n`);
+        }
+    } finally {
+        if (!closed) {
+            res.end();
+        }
+    }
+});
+
 const expandWorkspacePath = (inputPath) => {
    if (!inputPath) return inputPath;
    if (inputPath === '~') {
@@ -2487,7 +2537,20 @@ async function startServer() {

            // Start watching the projects folder for changes
            await setupProjectsWatcher();
+
+            // Start server-side plugin processes for enabled plugins
+            startEnabledPluginServers().catch(err => {
+                console.error('[Plugins] Error during startup:', err.message);
+            });
        });
+
+        // Clean up plugin processes on shutdown
+        const shutdownPlugins = async () => {
+            await stopAllPlugins();
+            process.exit(0);
+        };
+        process.on('SIGTERM', () => void shutdownPlugins());
+        process.on('SIGINT', () => void shutdownPlugins());
    } catch (error) {
        console.error('[ERROR] Failed to start server:', error);
        process.exit(1);
--- a/server/projects.js
+++ b/server/projects.js
@@ -481,9 +481,13 @@ async function getProjects(progressCallback = null) {
      }
      applyCustomSessionNames(project.codexSessions, 'codex');

-      // Also fetch Gemini sessions for this project
+      // Also fetch Gemini sessions for this project (UI + CLI)
      try {
-        project.geminiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const uiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const cliSessions = await getGeminiCliSessions(actualProjectDir);
+        const uiIds = new Set(uiSessions.map(s => s.id));
+        const mergedGemini = [...uiSessions, ...cliSessions.filter(s => !uiIds.has(s.id))];
+        project.geminiSessions = mergedGemini;
      } catch (e) {
        console.warn(`Could not load Gemini sessions for project ${entry.name}:`, e.message);
        project.geminiSessions = [];
@@ -584,9 +588,12 @@ async function getProjects(progressCallback = null) {
      }
      applyCustomSessionNames(project.codexSessions, 'codex');

-      // Try to fetch Gemini sessions for manual projects too
+      // Try to fetch Gemini sessions for manual projects too (UI + CLI)
      try {
-        project.geminiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const uiSessions = sessionManager.getProjectSessions(actualProjectDir) || [];
+        const cliSessions = await getGeminiCliSessions(actualProjectDir);
+        const uiIds = new Set(uiSessions.map(s => s.id));
+        project.geminiSessions = [...uiSessions, ...cliSessions.filter(s => !uiIds.has(s.id))];
      } catch (e) {
        console.warn(`Could not load Gemini sessions for manual project ${projectName}:`, e.message);
      }
@@ -1862,6 +1869,675 @@ async function deleteCodexSession(sessionId) {
  }
 }

+async function searchConversations(query, limit = 50, onProjectResult = null, signal = null) {
+  const safeQuery = typeof query === 'string' ? query.trim() : '';
+  const safeLimit = Math.max(1, Math.min(Number.isFinite(limit) ? limit : 50, 200));
+  const claudeDir = path.join(os.homedir(), '.claude', 'projects');
+  const config = await loadProjectConfig();
+  const results = [];
+  let totalMatches = 0;
+  const words = safeQuery.toLowerCase().split(/\s+/).filter(w => w.length > 0);
+  if (words.length === 0) return { results: [], totalMatches: 0, query: safeQuery };
+
+  const isAborted = () => signal?.aborted === true;
+
+  const isSystemMessage = (textContent) => {
+    return typeof textContent === 'string' && (
+      textContent.startsWith('<command-name>') ||
+      textContent.startsWith('<command-message>') ||
+      textContent.startsWith('<command-args>') ||
+      textContent.startsWith('<local-command-stdout>') ||
+      textContent.startsWith('<system-reminder>') ||
+      textContent.startsWith('Caveat:') ||
+      textContent.startsWith('This session is being continued from a previous') ||
+      textContent.startsWith('Invalid API key') ||
+      textContent.includes('{"subtasks":') ||
+      textContent.includes('CRITICAL: You MUST respond with ONLY a JSON') ||
+      textContent === 'Warmup'
+    );
+  };
+
+  const extractText = (content) => {
+    if (typeof content === 'string') return content;
+    if (Array.isArray(content)) {
+      return content
+        .filter(part => part.type === 'text' && part.text)
+        .map(part => part.text)
+        .join(' ');
+    }
+    return '';
+  };
+
+  const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const wordPatterns = words.map(w => new RegExp(`(?<!\\p{L})${escapeRegex(w)}(?!\\p{L})`, 'u'));
+  const allWordsMatch = (textLower) => {
+    return wordPatterns.every(p => p.test(textLower));
+  };
+
+  const buildSnippet = (text, textLower, snippetLen = 150) => {
+    let firstIndex = -1;
+    let firstWordLen = 0;
+    for (const w of words) {
+      const re = new RegExp(`(?<!\\p{L})${escapeRegex(w)}(?!\\p{L})`, 'u');
+      const m = re.exec(textLower);
+      if (m && (firstIndex === -1 || m.index < firstIndex)) {
+        firstIndex = m.index;
+        firstWordLen = w.length;
+      }
+    }
+    if (firstIndex === -1) firstIndex = 0;
+    const halfLen = Math.floor(snippetLen / 2);
+    let start = Math.max(0, firstIndex - halfLen);
+    let end = Math.min(text.length, firstIndex + halfLen + firstWordLen);
+    let snippet = text.slice(start, end).replace(/\n/g, ' ');
+    const prefix = start > 0 ? '...' : '';
+    const suffix = end < text.length ? '...' : '';
+    snippet = prefix + snippet + suffix;
+    const snippetLower = snippet.toLowerCase();
+    const highlights = [];
+    for (const word of words) {
+      const re = new RegExp(`(?<!\\p{L})${escapeRegex(word)}(?!\\p{L})`, 'gu');
+      let match;
+      while ((match = re.exec(snippetLower)) !== null) {
+        highlights.push({ start: match.index, end: match.index + word.length });
+      }
+    }
+    highlights.sort((a, b) => a.start - b.start);
+    const merged = [];
+    for (const h of highlights) {
+      const last = merged[merged.length - 1];
+      if (last && h.start <= last.end) {
+        last.end = Math.max(last.end, h.end);
+      } else {
+        merged.push({ ...h });
+      }
+    }
+    return { snippet, highlights: merged };
+  };
+
+  try {
+    await fs.access(claudeDir);
+    const entries = await fs.readdir(claudeDir, { withFileTypes: true });
+    const projectDirs = entries.filter(e => e.isDirectory());
+    let scannedProjects = 0;
+    const totalProjects = projectDirs.length;
+
+    for (const projectEntry of projectDirs) {
+      if (totalMatches >= safeLimit || isAborted()) break;
+
+      const projectName = projectEntry.name;
+      const projectDir = path.join(claudeDir, projectName);
+      const displayName = config[projectName]?.displayName
+        || await generateDisplayName(projectName);
+
+      let files;
+      try {
+        files = await fs.readdir(projectDir);
+      } catch {
+        continue;
+      }
+
+      const jsonlFiles = files.filter(
+        file => file.endsWith('.jsonl') && !file.startsWith('agent-')
+      );
+
+      const projectResult = {
+        projectName,
+        projectDisplayName: displayName,
+        sessions: []
+      };
+
+      for (const file of jsonlFiles) {
+        if (totalMatches >= safeLimit || isAborted()) break;
+
+        const filePath = path.join(projectDir, file);
+        const sessionMatches = new Map();
+        const sessionSummaries = new Map();
+        const pendingSummaries = new Map();
+        const sessionLastMessages = new Map();
+        let currentSessionId = null;
+
+        try {
+          const fileStream = fsSync.createReadStream(filePath);
+          const rl = readline.createInterface({
+            input: fileStream,
+            crlfDelay: Infinity
+          });
+
+          for await (const line of rl) {
+            if (totalMatches >= safeLimit || isAborted()) break;
+            if (!line.trim()) continue;
+
+            let entry;
+            try {
+              entry = JSON.parse(line);
+            } catch {
+              continue;
+            }
+
+            if (entry.sessionId) {
+              currentSessionId = entry.sessionId;
+            }
+            if (entry.type === 'summary' && entry.summary) {
+              const sid = entry.sessionId || currentSessionId;
+              if (sid) {
+                sessionSummaries.set(sid, entry.summary);
+              } else if (entry.leafUuid) {
+                pendingSummaries.set(entry.leafUuid, entry.summary);
+              }
+            }
+
+            // Apply pending summary via parentUuid
+            if (entry.parentUuid && currentSessionId && !sessionSummaries.has(currentSessionId)) {
+              const pending = pendingSummaries.get(entry.parentUuid);
+              if (pending) sessionSummaries.set(currentSessionId, pending);
+            }
+
+            // Track last user/assistant message for fallback title
+            if (entry.message?.content && currentSessionId && !entry.isApiErrorMessage) {
+              const role = entry.message.role;
+              if (role === 'user' || role === 'assistant') {
+                const text = extractText(entry.message.content);
+                if (text && !isSystemMessage(text)) {
+                  if (!sessionLastMessages.has(currentSessionId)) {
+                    sessionLastMessages.set(currentSessionId, {});
+                  }
+                  const msgs = sessionLastMessages.get(currentSessionId);
+                  if (role === 'user') msgs.user = text;
+                  else msgs.assistant = text;
+                }
+              }
+            }
+
+            if (!entry.message?.content) continue;
+            if (entry.message.role !== 'user' && entry.message.role !== 'assistant') continue;
+            if (entry.isApiErrorMessage) continue;
+
+            const text = extractText(entry.message.content);
+            if (!text || isSystemMessage(text)) continue;
+
+            const textLower = text.toLowerCase();
+            if (!allWordsMatch(textLower)) continue;
+
+            const sessionId = entry.sessionId || currentSessionId || file.replace('.jsonl', '');
+            if (!sessionMatches.has(sessionId)) {
+              sessionMatches.set(sessionId, []);
+            }
+
+            const matches = sessionMatches.get(sessionId);
+            if (matches.length < 2) {
+              const { snippet, highlights } = buildSnippet(text, textLower);
+              matches.push({
+                role: entry.message.role,
+                snippet,
+                highlights,
+                timestamp: entry.timestamp || null,
+                provider: 'claude',
+                messageUuid: entry.uuid || null
+              });
+              totalMatches++;
+            }
+          }
+        } catch {
+          continue;
+        }
+
+        for (const [sessionId, matches] of sessionMatches) {
+          projectResult.sessions.push({
+            sessionId,
+            provider: 'claude',
+            sessionSummary: sessionSummaries.get(sessionId) || (() => {
+              const msgs = sessionLastMessages.get(sessionId);
+              const lastMsg = msgs?.user || msgs?.assistant;
+              return lastMsg ? (lastMsg.length > 50 ? lastMsg.substring(0, 50) + '...' : lastMsg) : 'New Session';
+            })(),
+            matches
+          });
+        }
+      }
+
+      // Search Codex sessions for this project
+      try {
+        const actualProjectDir = await extractProjectDirectory(projectName);
+        if (actualProjectDir && !isAborted() && totalMatches < safeLimit) {
+          await searchCodexSessionsForProject(
+            actualProjectDir, projectResult, words, allWordsMatch, extractText, isSystemMessage,
+            buildSnippet, safeLimit, () => totalMatches, (n) => { totalMatches += n; }, isAborted
+          );
+        }
+      } catch {
+        // Skip codex search errors
+      }
+
+      // Search Gemini sessions for this project
+      try {
+        const actualProjectDir = await extractProjectDirectory(projectName);
+        if (actualProjectDir && !isAborted() && totalMatches < safeLimit) {
+          await searchGeminiSessionsForProject(
+            actualProjectDir, projectResult, words, allWordsMatch,
+            buildSnippet, safeLimit, () => totalMatches, (n) => { totalMatches += n; }
+          );
+        }
+      } catch {
+        // Skip gemini search errors
+      }
+
+      scannedProjects++;
+      if (projectResult.sessions.length > 0) {
+        results.push(projectResult);
+        if (onProjectResult) {
+          onProjectResult({ projectResult, totalMatches, scannedProjects, totalProjects });
+        }
+      } else if (onProjectResult && scannedProjects % 10 === 0) {
+        onProjectResult({ projectResult: null, totalMatches, scannedProjects, totalProjects });
+      }
+    }
+  } catch {
+    // claudeDir doesn't exist
+  }
+
+  return { results, totalMatches, query: safeQuery };
+}
+
+async function searchCodexSessionsForProject(
+  projectPath, projectResult, words, allWordsMatch, extractText, isSystemMessage,
+  buildSnippet, limit, getTotalMatches, addMatches, isAborted
+) {
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return;
+  const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
+  try {
+    await fs.access(codexSessionsDir);
+  } catch {
+    return;
+  }
+
+  const jsonlFiles = await findCodexJsonlFiles(codexSessionsDir);
+
+  for (const filePath of jsonlFiles) {
+    if (getTotalMatches() >= limit || isAborted()) break;
+
+    try {
+      const fileStream = fsSync.createReadStream(filePath);
+      const rl = readline.createInterface({ input: fileStream, crlfDelay: Infinity });
+
+      // First pass: read session_meta to check project path match
+      let sessionMeta = null;
+      for await (const line of rl) {
+        if (!line.trim()) continue;
+        try {
+          const entry = JSON.parse(line);
+          if (entry.type === 'session_meta' && entry.payload) {
+            sessionMeta = entry.payload;
+            break;
+          }
+        } catch { continue; }
+      }
+
+      // Skip sessions that don't belong to this project
+      if (!sessionMeta) continue;
+      const sessionProjectPath = normalizeComparablePath(sessionMeta.cwd);
+      if (sessionProjectPath !== normalizedProjectPath) continue;
+
+      // Second pass: re-read file to find matching messages
+      const fileStream2 = fsSync.createReadStream(filePath);
+      const rl2 = readline.createInterface({ input: fileStream2, crlfDelay: Infinity });
+      let lastUserMessage = null;
+      const matches = [];
+
+      for await (const line of rl2) {
+        if (getTotalMatches() >= limit || isAborted()) break;
+        if (!line.trim()) continue;
+
+        let entry;
+        try { entry = JSON.parse(line); } catch { continue; }
+
+        let text = null;
+        let role = null;
+
+        if (entry.type === 'event_msg' && entry.payload?.type === 'user_message' && entry.payload.message) {
+          text = entry.payload.message;
+          role = 'user';
+          lastUserMessage = text;
+        } else if (entry.type === 'response_item' && entry.payload?.type === 'message') {
+          const contentParts = entry.payload.content || [];
+          if (entry.payload.role === 'user') {
+            text = contentParts
+              .filter(p => p.type === 'input_text' && p.text)
+              .map(p => p.text)
+              .join(' ');
+            role = 'user';
+            if (text) lastUserMessage = text;
+          } else if (entry.payload.role === 'assistant') {
+            text = contentParts
+              .filter(p => p.type === 'output_text' && p.text)
+              .map(p => p.text)
+              .join(' ');
+            role = 'assistant';
+          }
+        }
+
+        if (!text || !role) continue;
+        const textLower = text.toLowerCase();
+        if (!allWordsMatch(textLower)) continue;
+
+        if (matches.length < 2) {
+          const { snippet, highlights } = buildSnippet(text, textLower);
+          matches.push({ role, snippet, highlights, timestamp: entry.timestamp || null, provider: 'codex' });
+          addMatches(1);
+        }
+      }
+
+      if (matches.length > 0) {
+        projectResult.sessions.push({
+          sessionId: sessionMeta.id,
+          provider: 'codex',
+          sessionSummary: lastUserMessage
+            ? (lastUserMessage.length > 50 ? lastUserMessage.substring(0, 50) + '...' : lastUserMessage)
+            : 'Codex Session',
+          matches
+        });
+      }
+    } catch {
+      continue;
+    }
+  }
+}
+
+async function searchGeminiSessionsForProject(
+  projectPath, projectResult, words, allWordsMatch,
+  buildSnippet, limit, getTotalMatches, addMatches
+) {
+  // 1) Search in-memory sessions (created via UI)
+  for (const [sessionId, session] of sessionManager.sessions) {
+    if (getTotalMatches() >= limit) break;
+    if (session.projectPath !== projectPath) continue;
+
+    const matches = [];
+    for (const msg of session.messages) {
+      if (getTotalMatches() >= limit) break;
+      if (msg.role !== 'user' && msg.role !== 'assistant') continue;
+
+      const text = typeof msg.content === 'string' ? msg.content
+        : Array.isArray(msg.content) ? msg.content.filter(p => p.type === 'text').map(p => p.text).join(' ')
+        : '';
+      if (!text) continue;
+
+      const textLower = text.toLowerCase();
+      if (!allWordsMatch(textLower)) continue;
+
+      if (matches.length < 2) {
+        const { snippet, highlights } = buildSnippet(text, textLower);
+        matches.push({
+          role: msg.role, snippet, highlights,
+          timestamp: msg.timestamp ? msg.timestamp.toISOString() : null,
+          provider: 'gemini'
+        });
+        addMatches(1);
+      }
+    }
+
+    if (matches.length > 0) {
+      const firstUserMsg = session.messages.find(m => m.role === 'user');
+      const summary = firstUserMsg?.content
+        ? (typeof firstUserMsg.content === 'string'
+          ? (firstUserMsg.content.length > 50 ? firstUserMsg.content.substring(0, 50) + '...' : firstUserMsg.content)
+          : 'Gemini Session')
+        : 'Gemini Session';
+
+      projectResult.sessions.push({
+        sessionId,
+        provider: 'gemini',
+        sessionSummary: summary,
+        matches
+      });
+    }
+  }
+
+  // 2) Search Gemini CLI sessions on disk (~/.gemini/tmp/<project>/chats/*.json)
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return;
+
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  try {
+    await fs.access(geminiTmpDir);
+  } catch {
+    return;
+  }
+
+  const trackedSessionIds = new Set();
+  for (const [sid] of sessionManager.sessions) {
+    trackedSessionIds.add(sid);
+  }
+
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return;
+  }
+
+  for (const projectDir of projectDirs) {
+    if (getTotalMatches() >= limit) break;
+
+    const projectRootFile = path.join(geminiTmpDir, projectDir, '.project_root');
+    let projectRoot;
+    try {
+      projectRoot = (await fs.readFile(projectRootFile, 'utf8')).trim();
+    } catch {
+      continue;
+    }
+
+    if (normalizeComparablePath(projectRoot) !== normalizedProjectPath) continue;
+
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (getTotalMatches() >= limit) break;
+      if (!chatFile.endsWith('.json')) continue;
+
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        if (!session.messages || !Array.isArray(session.messages)) continue;
+
+        const cliSessionId = session.sessionId || chatFile.replace('.json', '');
+        if (trackedSessionIds.has(cliSessionId)) continue;
+
+        const matches = [];
+        let firstUserText = null;
+
+        for (const msg of session.messages) {
+          if (getTotalMatches() >= limit) break;
+
+          const role = msg.type === 'user' ? 'user'
+            : (msg.type === 'gemini' || msg.type === 'assistant') ? 'assistant'
+            : null;
+          if (!role) continue;
+
+          let text = '';
+          if (typeof msg.content === 'string') {
+            text = msg.content;
+          } else if (Array.isArray(msg.content)) {
+            text = msg.content
+              .filter(p => p.text)
+              .map(p => p.text)
+              .join(' ');
+          }
+          if (!text) continue;
+
+          if (role === 'user' && !firstUserText) firstUserText = text;
+
+          const textLower = text.toLowerCase();
+          if (!allWordsMatch(textLower)) continue;
+
+          if (matches.length < 2) {
+            const { snippet, highlights } = buildSnippet(text, textLower);
+            matches.push({
+              role, snippet, highlights,
+              timestamp: msg.timestamp || null,
+              provider: 'gemini'
+            });
+            addMatches(1);
+          }
+        }
+
+        if (matches.length > 0) {
+          const summary = firstUserText
+            ? (firstUserText.length > 50 ? firstUserText.substring(0, 50) + '...' : firstUserText)
+            : 'Gemini CLI Session';
+
+          projectResult.sessions.push({
+            sessionId: cliSessionId,
+            provider: 'gemini',
+            sessionSummary: summary,
+            matches
+          });
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
+}
+
+async function getGeminiCliSessions(projectPath) {
+  const normalizedProjectPath = normalizeComparablePath(projectPath);
+  if (!normalizedProjectPath) return [];
+
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  try {
+    await fs.access(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  const sessions = [];
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  for (const projectDir of projectDirs) {
+    const projectRootFile = path.join(geminiTmpDir, projectDir, '.project_root');
+    let projectRoot;
+    try {
+      projectRoot = (await fs.readFile(projectRootFile, 'utf8')).trim();
+    } catch {
+      continue;
+    }
+
+    if (normalizeComparablePath(projectRoot) !== normalizedProjectPath) continue;
+
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (!chatFile.endsWith('.json')) continue;
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        if (!session.messages || !Array.isArray(session.messages)) continue;
+
+        const sessionId = session.sessionId || chatFile.replace('.json', '');
+        const firstUserMsg = session.messages.find(m => m.type === 'user');
+        let summary = 'Gemini CLI Session';
+        if (firstUserMsg) {
+          const text = Array.isArray(firstUserMsg.content)
+            ? firstUserMsg.content.filter(p => p.text).map(p => p.text).join(' ')
+            : (typeof firstUserMsg.content === 'string' ? firstUserMsg.content : '');
+          if (text) {
+            summary = text.length > 50 ? text.substring(0, 50) + '...' : text;
+          }
+        }
+
+        sessions.push({
+          id: sessionId,
+          summary,
+          messageCount: session.messages.length,
+          lastActivity: session.lastUpdated || session.startTime || null,
+          provider: 'gemini'
+        });
+      } catch {
+        continue;
+      }
+    }
+  }
+
+  return sessions.sort((a, b) =>
+    new Date(b.lastActivity || 0) - new Date(a.lastActivity || 0)
+  );
+}
+
+async function getGeminiCliSessionMessages(sessionId) {
+  const geminiTmpDir = path.join(os.homedir(), '.gemini', 'tmp');
+  let projectDirs;
+  try {
+    projectDirs = await fs.readdir(geminiTmpDir);
+  } catch {
+    return [];
+  }
+
+  for (const projectDir of projectDirs) {
+    const chatsDir = path.join(geminiTmpDir, projectDir, 'chats');
+    let chatFiles;
+    try {
+      chatFiles = await fs.readdir(chatsDir);
+    } catch {
+      continue;
+    }
+
+    for (const chatFile of chatFiles) {
+      if (!chatFile.endsWith('.json')) continue;
+      try {
+        const filePath = path.join(chatsDir, chatFile);
+        const data = await fs.readFile(filePath, 'utf8');
+        const session = JSON.parse(data);
+        const fileSessionId = session.sessionId || chatFile.replace('.json', '');
+        if (fileSessionId !== sessionId) continue;
+
+        return (session.messages || []).map(msg => {
+          const role = msg.type === 'user' ? 'user'
+            : (msg.type === 'gemini' || msg.type === 'assistant') ? 'assistant'
+            : msg.type;
+
+          let content = '';
+          if (typeof msg.content === 'string') {
+            content = msg.content;
+          } else if (Array.isArray(msg.content)) {
+            content = msg.content.filter(p => p.text).map(p => p.text).join('\n');
+          }
+
+          return {
+            type: 'message',
+            message: { role, content },
+            timestamp: msg.timestamp || null
+          };
+        });
+      } catch {
+        continue;
+      }
+    }
+  }
+
+  return [];
+}
+
 export {
  getProjects,
  getSessions,
@@ -1878,5 +2554,8 @@ export {
  clearProjectDirectoryCache,
  getCodexSessions,
  getCodexSessionMessages,
-  deleteCodexSession
+  deleteCodexSession,
+  getGeminiCliSessions,
+  getGeminiCliSessionMessages,
+  searchConversations
 };
--- a/server/routes/gemini.js
+++ b/server/routes/gemini.js
@@ -1,6 +1,7 @@
 import express from 'express';
 import sessionManager from '../sessionManager.js';
 import { sessionNamesDb } from '../database/db.js';
+import { getGeminiCliSessionMessages } from '../projects.js';

 const router = express.Router();

@@ -12,7 +13,12 @@ router.get('/sessions/:sessionId/messages', async (req, res) => {
            return res.status(400).json({ success: false, error: 'Invalid session ID format' });
        }

-        const messages = sessionManager.getSessionMessages(sessionId);
+        let messages = sessionManager.getSessionMessages(sessionId);
+
+        // Fallback to Gemini CLI sessions on disk
+        if (messages.length === 0) {
+            messages = await getGeminiCliSessionMessages(sessionId);
+        }

        res.json({
            success: true,
--- a/server/routes/plugins.js
+++ b/server/routes/plugins.js
@@ -0,0 +1,303 @@
+import express from 'express';
+import path from 'path';
+import http from 'http';
+import mime from 'mime-types';
+import fs from 'fs';
+import {
+  scanPlugins,
+  getPluginsConfig,
+  getPluginsDir,
+  savePluginsConfig,
+  getPluginDir,
+  resolvePluginAssetPath,
+  installPluginFromGit,
+  updatePluginFromGit,
+  uninstallPlugin,
+} from '../utils/plugin-loader.js';
+import {
+  startPluginServer,
+  stopPluginServer,
+  getPluginPort,
+  isPluginRunning,
+} from '../utils/plugin-process-manager.js';
+
+const router = express.Router();
+
+// GET / — List all installed plugins (includes server running status)
+router.get('/', (req, res) => {
+  try {
+    const plugins = scanPlugins().map(p => ({
+      ...p,
+      serverRunning: p.server ? isPluginRunning(p.name) : false,
+    }));
+    res.json({ plugins });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to scan plugins', details: err.message });
+  }
+});
+
+// GET /:name/manifest — Get single plugin manifest
+router.get('/:name/manifest', (req, res) => {
+  try {
+    if (!/^[a-zA-Z0-9_-]+$/.test(req.params.name)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === req.params.name);
+    if (!plugin) {
+      return res.status(404).json({ error: 'Plugin not found' });
+    }
+    res.json(plugin);
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to read plugin manifest', details: err.message });
+  }
+});
+
+// GET /:name/assets/* — Serve plugin static files
+router.get('/:name/assets/*', (req, res) => {
+  const pluginName = req.params.name;
+  if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+    return res.status(400).json({ error: 'Invalid plugin name' });
+  }
+  const assetPath = req.params[0];
+
+  if (!assetPath) {
+    return res.status(400).json({ error: 'No asset path specified' });
+  }
+
+  const resolvedPath = resolvePluginAssetPath(pluginName, assetPath);
+  if (!resolvedPath) {
+    return res.status(404).json({ error: 'Asset not found' });
+  }
+
+  try {
+    const stat = fs.statSync(resolvedPath);
+    if (!stat.isFile()) {
+      return res.status(404).json({ error: 'Asset not found' });
+    }
+  } catch {
+    return res.status(404).json({ error: 'Asset not found' });
+  }
+
+  const contentType = mime.lookup(resolvedPath) || 'application/octet-stream';
+  res.setHeader('Content-Type', contentType);
+  const stream = fs.createReadStream(resolvedPath);
+  stream.on('error', () => {
+    if (!res.headersSent) {
+      res.status(500).json({ error: 'Failed to read asset' });
+    } else {
+      res.end();
+    }
+  });
+  stream.pipe(res);
+});
+
+// PUT /:name/enable — Toggle plugin enabled/disabled (starts/stops server if applicable)
+router.put('/:name/enable', async (req, res) => {
+  try {
+    const { enabled } = req.body;
+    if (typeof enabled !== 'boolean') {
+      return res.status(400).json({ error: '"enabled" must be a boolean' });
+    }
+
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === req.params.name);
+    if (!plugin) {
+      return res.status(404).json({ error: 'Plugin not found' });
+    }
+
+    const config = getPluginsConfig();
+    config[req.params.name] = { ...config[req.params.name], enabled };
+    savePluginsConfig(config);
+
+    // Start or stop the plugin server as needed
+    if (plugin.server) {
+      if (enabled && !isPluginRunning(plugin.name)) {
+        const pluginDir = getPluginDir(plugin.name);
+        if (pluginDir) {
+          try {
+            await startPluginServer(plugin.name, pluginDir, plugin.server);
+          } catch (err) {
+            console.error(`[Plugins] Failed to start server for "${plugin.name}":`, err.message);
+          }
+        }
+      } else if (!enabled && isPluginRunning(plugin.name)) {
+        await stopPluginServer(plugin.name);
+      }
+    }
+
+    res.json({ success: true, name: req.params.name, enabled });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to update plugin', details: err.message });
+  }
+});
+
+// POST /install — Install plugin from git URL
+router.post('/install', async (req, res) => {
+  try {
+    const { url } = req.body;
+    if (!url || typeof url !== 'string') {
+      return res.status(400).json({ error: '"url" is required and must be a string' });
+    }
+
+    // Basic URL validation
+    if (!url.startsWith('https://') && !url.startsWith('git@')) {
+      return res.status(400).json({ error: 'URL must start with https:// or git@' });
+    }
+
+    const manifest = await installPluginFromGit(url);
+
+    // Auto-start the server if the plugin has one (enabled by default)
+    if (manifest.server) {
+      const pluginDir = getPluginDir(manifest.name);
+      if (pluginDir) {
+        try {
+          await startPluginServer(manifest.name, pluginDir, manifest.server);
+        } catch (err) {
+          console.error(`[Plugins] Failed to start server for "${manifest.name}":`, err.message);
+        }
+      }
+    }
+
+    res.json({ success: true, plugin: manifest });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to install plugin', details: err.message });
+  }
+});
+
+// POST /:name/update — Pull latest from git (restarts server if running)
+router.post('/:name/update', async (req, res) => {
+  try {
+    const pluginName = req.params.name;
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+
+    const wasRunning = isPluginRunning(pluginName);
+    if (wasRunning) {
+      await stopPluginServer(pluginName);
+    }
+
+    const manifest = await updatePluginFromGit(pluginName);
+
+    // Restart server if it was running before the update
+    if (wasRunning && manifest.server) {
+      const pluginDir = getPluginDir(pluginName);
+      if (pluginDir) {
+        try {
+          await startPluginServer(pluginName, pluginDir, manifest.server);
+        } catch (err) {
+          console.error(`[Plugins] Failed to restart server for "${pluginName}":`, err.message);
+        }
+      }
+    }
+
+    res.json({ success: true, plugin: manifest });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to update plugin', details: err.message });
+  }
+});
+
+// ALL /:name/rpc/* — Proxy requests to plugin's server subprocess
+router.all('/:name/rpc/*', async (req, res) => {
+  const pluginName = req.params.name;
+  const rpcPath = req.params[0] || '';
+
+  if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+    return res.status(400).json({ error: 'Invalid plugin name' });
+  }
+
+  let port = getPluginPort(pluginName);
+  if (!port) {
+    // Lazily start the plugin server if it exists and is enabled
+    const plugins = scanPlugins();
+    const plugin = plugins.find(p => p.name === pluginName);
+    if (!plugin || !plugin.server) {
+      return res.status(503).json({ error: 'Plugin server is not running' });
+    }
+    if (!plugin.enabled) {
+      return res.status(503).json({ error: 'Plugin is disabled' });
+    }
+    const pluginDir = path.join(getPluginsDir(), plugin.dirName);
+    try {
+      port = await startPluginServer(pluginName, pluginDir, plugin.server);
+    } catch (err) {
+      return res.status(503).json({ error: 'Plugin server failed to start', details: err.message });
+    }
+  }
+
+  // Inject configured secrets as headers
+  const config = getPluginsConfig();
+  const pluginConfig = config[pluginName] || {};
+  const secrets = pluginConfig.secrets || {};
+
+  const headers = {
+    'content-type': req.headers['content-type'] || 'application/json',
+  };
+
+  // Add per-plugin secrets as X-Plugin-Secret-* headers
+  for (const [key, value] of Object.entries(secrets)) {
+    headers[`x-plugin-secret-${key.toLowerCase()}`] = String(value);
+  }
+
+  // Reconstruct query string
+  const qs = req.url.includes('?') ? '?' + req.url.split('?').slice(1).join('?') : '';
+
+  const options = {
+    hostname: '127.0.0.1',
+    port,
+    path: `/${rpcPath}${qs}`,
+    method: req.method,
+    headers,
+  };
+
+  const proxyReq = http.request(options, (proxyRes) => {
+    res.writeHead(proxyRes.statusCode, proxyRes.headers);
+    proxyRes.pipe(res);
+  });
+
+  proxyReq.on('error', (err) => {
+    if (!res.headersSent) {
+      res.status(502).json({ error: 'Plugin server error', details: err.message });
+    } else {
+      res.end();
+    }
+  });
+
+  // Forward body (already parsed by express JSON middleware, so re-stringify).
+  // Check content-length to detect whether a body was actually sent, since
+  // req.body can be falsy for valid payloads like 0, false, null, or {}.
+  const hasBody = req.headers['content-length'] && parseInt(req.headers['content-length'], 10) > 0;
+  if (hasBody && req.body !== undefined) {
+    const bodyStr = JSON.stringify(req.body);
+    proxyReq.setHeader('content-length', Buffer.byteLength(bodyStr));
+    proxyReq.write(bodyStr);
+  }
+
+  proxyReq.end();
+});
+
+// DELETE /:name — Uninstall plugin (stops server first)
+router.delete('/:name', async (req, res) => {
+  try {
+    const pluginName = req.params.name;
+
+    // Validate name format to prevent path traversal
+    if (!/^[a-zA-Z0-9_-]+$/.test(pluginName)) {
+      return res.status(400).json({ error: 'Invalid plugin name' });
+    }
+
+    // Stop server and wait for the process to fully exit before deleting files
+    if (isPluginRunning(pluginName)) {
+      await stopPluginServer(pluginName);
+    }
+
+    await uninstallPlugin(pluginName);
+    res.json({ success: true, name: pluginName });
+  } catch (err) {
+    res.status(400).json({ error: 'Failed to uninstall plugin', details: err.message });
+  }
+});
+
+export default router;
--- a/server/utils/plugin-loader.js
+++ b/server/utils/plugin-loader.js
@@ -0,0 +1,408 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import { spawn } from 'child_process';
+
+const PLUGINS_DIR = path.join(os.homedir(), '.claude-code-ui', 'plugins');
+const PLUGINS_CONFIG_PATH = path.join(os.homedir(), '.claude-code-ui', 'plugins.json');
+
+const REQUIRED_MANIFEST_FIELDS = ['name', 'displayName', 'entry'];
+
+/** Strip embedded credentials from a repo URL before exposing it to the client. */
+function sanitizeRepoUrl(raw) {
+  try {
+    const u = new URL(raw);
+    u.username = '';
+    u.password = '';
+    return u.toString().replace(/\/$/, '');
+  } catch {
+    // Not a parseable URL (e.g. SSH shorthand) — strip user:pass@ segment
+    return raw.replace(/\/\/[^@/]+@/, '//');
+  }
+}
+const ALLOWED_TYPES = ['react', 'module'];
+const ALLOWED_SLOTS = ['tab'];
+
+export function getPluginsDir() {
+  if (!fs.existsSync(PLUGINS_DIR)) {
+    fs.mkdirSync(PLUGINS_DIR, { recursive: true });
+  }
+  return PLUGINS_DIR;
+}
+
+export function getPluginsConfig() {
+  try {
+    if (fs.existsSync(PLUGINS_CONFIG_PATH)) {
+      return JSON.parse(fs.readFileSync(PLUGINS_CONFIG_PATH, 'utf-8'));
+    }
+  } catch {
+    // Corrupted config, start fresh
+  }
+  return {};
+}
+
+export function savePluginsConfig(config) {
+  const dir = path.dirname(PLUGINS_CONFIG_PATH);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+  }
+  fs.writeFileSync(PLUGINS_CONFIG_PATH, JSON.stringify(config, null, 2), { mode: 0o600 });
+}
+
+export function validateManifest(manifest) {
+  if (!manifest || typeof manifest !== 'object') {
+    return { valid: false, error: 'Manifest must be a JSON object' };
+  }
+
+  for (const field of REQUIRED_MANIFEST_FIELDS) {
+    if (!manifest[field] || typeof manifest[field] !== 'string') {
+      return { valid: false, error: `Missing or invalid required field: ${field}` };
+    }
+  }
+
+  // Sanitize name — only allow alphanumeric, hyphens, underscores
+  if (!/^[a-zA-Z0-9_-]+$/.test(manifest.name)) {
+    return { valid: false, error: 'Plugin name must only contain letters, numbers, hyphens, and underscores' };
+  }
+
+  if (manifest.type && !ALLOWED_TYPES.includes(manifest.type)) {
+    return { valid: false, error: `Invalid plugin type: ${manifest.type}. Must be one of: ${ALLOWED_TYPES.join(', ')}` };
+  }
+
+  if (manifest.slot && !ALLOWED_SLOTS.includes(manifest.slot)) {
+    return { valid: false, error: `Invalid plugin slot: ${manifest.slot}. Must be one of: ${ALLOWED_SLOTS.join(', ')}` };
+  }
+
+  // Validate entry is a relative path without traversal
+  if (manifest.entry.includes('..') || path.isAbsolute(manifest.entry)) {
+    return { valid: false, error: 'Entry must be a relative path without ".."' };
+  }
+
+  if (manifest.server !== undefined && manifest.server !== null) {
+    if (typeof manifest.server !== 'string' || manifest.server.includes('..') || path.isAbsolute(manifest.server)) {
+      return { valid: false, error: 'Server entry must be a relative path string without ".."' };
+    }
+  }
+
+  if (manifest.permissions !== undefined) {
+    if (!Array.isArray(manifest.permissions) || !manifest.permissions.every(p => typeof p === 'string')) {
+      return { valid: false, error: 'Permissions must be an array of strings' };
+    }
+  }
+
+  return { valid: true };
+}
+
+export function scanPlugins() {
+  const pluginsDir = getPluginsDir();
+  const config = getPluginsConfig();
+  const plugins = [];
+
+  let entries;
+  try {
+    entries = fs.readdirSync(pluginsDir, { withFileTypes: true });
+  } catch {
+    return plugins;
+  }
+
+  const seenNames = new Set();
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    // Skip transient temp directories from in-progress installs
+    if (entry.name.startsWith('.tmp-')) continue;
+
+    const manifestPath = path.join(pluginsDir, entry.name, 'manifest.json');
+    if (!fs.existsSync(manifestPath)) continue;
+
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        console.warn(`[Plugins] Skipping ${entry.name}: ${validation.error}`);
+        continue;
+      }
+
+      // Skip duplicate manifest names
+      if (seenNames.has(manifest.name)) {
+        console.warn(`[Plugins] Skipping ${entry.name}: duplicate plugin name "${manifest.name}"`);
+        continue;
+      }
+      seenNames.add(manifest.name);
+
+      // 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/');
+            }
+            // Strip embedded credentials (e.g. https://user:pass@host/...)
+            repoUrl = sanitizeRepoUrl(repoUrl);
+          }
+        }
+      } catch { /* ignore */ }
+
+      plugins.push({
+        name: manifest.name,
+        displayName: manifest.displayName,
+        version: manifest.version || '0.0.0',
+        description: manifest.description || '',
+        author: manifest.author || '',
+        icon: manifest.icon || 'Puzzle',
+        type: manifest.type || 'module',
+        slot: manifest.slot || 'tab',
+        entry: manifest.entry,
+        server: manifest.server || null,
+        permissions: manifest.permissions || [],
+        enabled: config[manifest.name]?.enabled !== false, // enabled by default
+        dirName: entry.name,
+        repoUrl,
+      });
+    } catch (err) {
+      console.warn(`[Plugins] Failed to read manifest for ${entry.name}:`, err.message);
+    }
+  }
+
+  return plugins;
+}
+
+export function getPluginDir(name) {
+  const plugins = scanPlugins();
+  const plugin = plugins.find(p => p.name === name);
+  if (!plugin) return null;
+  return path.join(getPluginsDir(), plugin.dirName);
+}
+
+export function resolvePluginAssetPath(name, assetPath) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) return null;
+
+  const resolved = path.resolve(pluginDir, assetPath);
+
+  // Prevent path traversal — canonicalize via realpath to defeat symlink bypasses
+  if (!fs.existsSync(resolved)) return null;
+
+  const realResolved = fs.realpathSync(resolved);
+  const realPluginDir = fs.realpathSync(pluginDir);
+  if (!realResolved.startsWith(realPluginDir + path.sep) && realResolved !== realPluginDir) {
+    return null;
+  }
+
+  return realResolved;
+}
+
+export function installPluginFromGit(url) {
+  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
+    const urlClean = url.replace(/\.git$/, '').replace(/\/$/, '');
+    const repoName = urlClean.split('/').pop();
+
+    if (!repoName || !/^[a-zA-Z0-9_.-]+$/.test(repoName)) {
+      return reject(new Error('Could not determine a valid directory name from the URL'));
+    }
+
+    const pluginsDir = getPluginsDir();
+    const targetDir = path.resolve(pluginsDir, repoName);
+
+    // Ensure the resolved target directory stays within the plugins directory
+    if (!targetDir.startsWith(pluginsDir + path.sep)) {
+      return reject(new Error('Invalid plugin directory path'));
+    }
+
+    if (fs.existsSync(targetDir)) {
+      return reject(new Error(`Plugin directory "${repoName}" already exists`));
+    }
+
+    // Clone into a temp directory so scanPlugins() never sees a partially-installed plugin
+    const tempDir = fs.mkdtempSync(path.join(pluginsDir, `.tmp-${repoName}-`));
+
+    const cleanupTemp = () => {
+      try { fs.rmSync(tempDir, { recursive: true, force: true }); } catch {}
+    };
+
+    const finalize = (manifest) => {
+      try {
+        fs.renameSync(tempDir, targetDir);
+      } catch (err) {
+        cleanupTemp();
+        return reject(new Error(`Failed to move plugin into place: ${err.message}`));
+      }
+      resolve(manifest);
+    };
+
+    const gitProcess = spawn('git', ['clone', '--depth', '1', '--', url, tempDir], {
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        cleanupTemp();
+        return reject(new Error(`git clone failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Validate manifest exists
+      const manifestPath = path.join(tempDir, 'manifest.json');
+      if (!fs.existsSync(manifestPath)) {
+        cleanupTemp();
+        return reject(new Error('Cloned repository does not contain a manifest.json'));
+      }
+
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        cleanupTemp();
+        return reject(new Error('manifest.json is not valid JSON'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        cleanupTemp();
+        return reject(new Error(`Invalid manifest: ${validation.error}`));
+      }
+
+      // Reject if another installed plugin already uses this name
+      const existing = scanPlugins().find(p => p.name === manifest.name);
+      if (existing) {
+        cleanupTemp();
+        return reject(new Error(`A plugin named "${manifest.name}" is already installed (in "${existing.dirName}")`));
+      }
+
+      // Run npm install if package.json exists.
+      // --ignore-scripts prevents postinstall hooks from executing arbitrary code.
+      const packageJsonPath = path.join(tempDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--production', '--ignore-scripts'], {
+          cwd: tempDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            cleanupTemp();
+            return reject(new Error(`npm install for ${repoName} failed (exit code ${npmCode})`));
+          }
+          finalize(manifest);
+        });
+
+        npmProcess.on('error', (err) => {
+          cleanupTemp();
+          reject(err);
+        });
+      } else {
+        finalize(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      cleanupTemp();
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export function updatePluginFromGit(name) {
+  return new Promise((resolve, reject) => {
+    const pluginDir = getPluginDir(name);
+    if (!pluginDir) {
+      return reject(new Error(`Plugin "${name}" not found`));
+    }
+
+    // Only fast-forward to avoid silent divergence
+    const gitProcess = spawn('git', ['pull', '--ff-only', '--'], {
+      cwd: pluginDir,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let stderr = '';
+    gitProcess.stderr.on('data', (data) => { stderr += data.toString(); });
+
+    gitProcess.on('close', (code) => {
+      if (code !== 0) {
+        return reject(new Error(`git pull failed (exit code ${code}): ${stderr.trim()}`));
+      }
+
+      // Re-validate manifest after update
+      const manifestPath = path.join(pluginDir, 'manifest.json');
+      let manifest;
+      try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+      } catch {
+        return reject(new Error('manifest.json is not valid JSON after update'));
+      }
+
+      const validation = validateManifest(manifest);
+      if (!validation.valid) {
+        return reject(new Error(`Invalid manifest after update: ${validation.error}`));
+      }
+
+      // Re-run npm install if package.json exists
+      const packageJsonPath = path.join(pluginDir, 'package.json');
+      if (fs.existsSync(packageJsonPath)) {
+        const npmProcess = spawn('npm', ['install', '--production', '--ignore-scripts'], {
+          cwd: pluginDir,
+          stdio: ['ignore', 'pipe', 'pipe'],
+        });
+        npmProcess.on('close', (npmCode) => {
+          if (npmCode !== 0) {
+            return reject(new Error(`npm install for ${name} failed (exit code ${npmCode})`));
+          }
+          resolve(manifest);
+        });
+        npmProcess.on('error', (err) => reject(err));
+      } else {
+        resolve(manifest);
+      }
+    });
+
+    gitProcess.on('error', (err) => {
+      reject(new Error(`Failed to spawn git: ${err.message}`));
+    });
+  });
+}
+
+export async function uninstallPlugin(name) {
+  const pluginDir = getPluginDir(name);
+  if (!pluginDir) {
+    throw new Error(`Plugin "${name}" not found`);
+  }
+
+  // On Windows, file handles may be released slightly after process exit.
+  // Retry a few times with a short delay before giving up.
+  const MAX_RETRIES = 5;
+  const RETRY_DELAY_MS = 500;
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      fs.rmSync(pluginDir, { recursive: true, force: true });
+      break;
+    } catch (err) {
+      if (err.code === 'EBUSY' && attempt < MAX_RETRIES) {
+        await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
+      } else {
+        throw err;
+      }
+    }
+  }
+
+  // Remove from config
+  const config = getPluginsConfig();
+  delete config[name];
+  savePluginsConfig(config);
+}
--- a/server/utils/plugin-process-manager.js
+++ b/server/utils/plugin-process-manager.js
@@ -0,0 +1,184 @@
+import { spawn } from 'child_process';
+import path from 'path';
+import { scanPlugins, getPluginsConfig, getPluginDir } from './plugin-loader.js';
+
+// Map<pluginName, { process, port }>
+const runningPlugins = new Map();
+// Map<pluginName, Promise<port>> — in-flight start operations
+const startingPlugins = new Map();
+
+/**
+ * Start a plugin's server subprocess.
+ * The plugin's server entry must print a JSON line with { ready: true, port: <number> }
+ * to stdout within 10 seconds.
+ */
+export function startPluginServer(name, pluginDir, serverEntry) {
+  if (runningPlugins.has(name)) {
+    return Promise.resolve(runningPlugins.get(name).port);
+  }
+
+  // Coalesce concurrent starts for the same plugin
+  if (startingPlugins.has(name)) {
+    return startingPlugins.get(name);
+  }
+
+  const startPromise = new Promise((resolve, reject) => {
+
+    const serverPath = path.join(pluginDir, serverEntry);
+
+    // Restricted env — only essentials, no host secrets
+    const pluginProcess = spawn('node', [serverPath], {
+      cwd: pluginDir,
+      env: {
+        PATH: process.env.PATH,
+        HOME: process.env.HOME,
+        NODE_ENV: process.env.NODE_ENV || 'production',
+        PLUGIN_NAME: name,
+      },
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    let resolved = false;
+    let stdout = '';
+
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        pluginProcess.kill();
+        reject(new Error('Plugin server did not report ready within 10 seconds'));
+      }
+    }, 10000);
+
+    pluginProcess.stdout.on('data', (data) => {
+      if (resolved) return;
+      stdout += data.toString();
+
+      // Look for the JSON ready line
+      const lines = stdout.split('\n');
+      for (const line of lines) {
+        try {
+          const msg = JSON.parse(line.trim());
+          if (msg.ready && typeof msg.port === 'number') {
+            clearTimeout(timeout);
+            resolved = true;
+            runningPlugins.set(name, { process: pluginProcess, port: msg.port });
+
+            pluginProcess.on('exit', () => {
+              runningPlugins.delete(name);
+            });
+
+            console.log(`[Plugins] Server started for "${name}" on port ${msg.port}`);
+            resolve(msg.port);
+          }
+        } catch {
+          // Not JSON yet, keep buffering
+        }
+      }
+    });
+
+    pluginProcess.stderr.on('data', (data) => {
+      console.warn(`[Plugin:${name}] ${data.toString().trim()}`);
+    });
+
+    pluginProcess.on('error', (err) => {
+      clearTimeout(timeout);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Failed to start plugin server: ${err.message}`));
+      }
+    });
+
+    pluginProcess.on('exit', (code) => {
+      clearTimeout(timeout);
+      runningPlugins.delete(name);
+      if (!resolved) {
+        resolved = true;
+        reject(new Error(`Plugin server exited with code ${code} before reporting ready`));
+      }
+    });
+  }).finally(() => {
+    startingPlugins.delete(name);
+  });
+
+  startingPlugins.set(name, startPromise);
+  return startPromise;
+}
+
+/**
+ * Stop a plugin's server subprocess.
+ * Returns a Promise that resolves when the process has fully exited.
+ */
+export function stopPluginServer(name) {
+  const entry = runningPlugins.get(name);
+  if (!entry) return Promise.resolve();
+
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      clearTimeout(forceKillTimer);
+      runningPlugins.delete(name);
+      resolve();
+    };
+
+    entry.process.once('exit', cleanup);
+
+    entry.process.kill('SIGTERM');
+
+    // Force kill after 5 seconds if still running
+    const forceKillTimer = setTimeout(() => {
+      if (runningPlugins.has(name)) {
+        entry.process.kill('SIGKILL');
+        cleanup();
+      }
+    }, 5000);
+
+    console.log(`[Plugins] Server stopped for "${name}"`);
+  });
+}
+
+/**
+ * Get the port a running plugin server is listening on.
+ */
+export function getPluginPort(name) {
+  return runningPlugins.get(name)?.port ?? null;
+}
+
+/**
+ * Check if a plugin's server is running.
+ */
+export function isPluginRunning(name) {
+  return runningPlugins.has(name);
+}
+
+/**
+ * Stop all running plugin servers (called on host shutdown).
+ */
+export function stopAllPlugins() {
+  const stops = [];
+  for (const [name] of runningPlugins) {
+    stops.push(stopPluginServer(name));
+  }
+  return Promise.all(stops);
+}
+
+/**
+ * Start servers for all enabled plugins that have a server entry.
+ * Called once on host server boot.
+ */
+export async function startEnabledPluginServers() {
+  const plugins = scanPlugins();
+  const config = getPluginsConfig();
+
+  for (const plugin of plugins) {
+    if (!plugin.server) continue;
+    if (config[plugin.name]?.enabled === false) continue;
+
+    const pluginDir = getPluginDir(plugin.name);
+    if (!pluginDir) continue;
+
+    try {
+      await startPluginServer(plugin.name, pluginDir, plugin.server);
+    } catch (err) {
+      console.error(`[Plugins] Failed to start server for "${plugin.name}":`, err.message);
+    }
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { AuthProvider, ProtectedRoute } from './components/auth';
 import { TaskMasterProvider } from './contexts/TaskMasterContext';
 import { TasksSettingsProvider } from './contexts/TasksSettingsContext';
 import { WebSocketProvider } from './contexts/WebSocketContext';
+import { PluginsProvider } from './contexts/PluginsContext';
 import AppContent from './components/app/AppContent';
 import i18n from './i18n/config.js';

@@ -14,8 +15,9 @@ export default function App() {
      <ThemeProvider>
        <AuthProvider>
          <WebSocketProvider>
-            <TasksSettingsProvider>
-              <TaskMasterProvider>
+            <PluginsProvider>
+              <TasksSettingsProvider>
+                <TaskMasterProvider>
                <ProtectedRoute>
                  <Router basename={window.__ROUTER_BASENAME__ || ''}>
                    <Routes>
@@ -24,8 +26,9 @@ export default function App() {
                    </Routes>
                  </Router>
                </ProtectedRoute>
-              </TaskMasterProvider>
-            </TasksSettingsProvider>
+                </TaskMasterProvider>
+              </TasksSettingsProvider>
+            </PluginsProvider>
          </WebSocketProvider>
        </AuthProvider>
      </ThemeProvider>
--- 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/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -82,6 +82,8 @@ export function useChatSessionState({
  const [showLoadAllOverlay, setShowLoadAllOverlay] = useState(false);

  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [searchTarget, setSearchTarget] = useState<{ timestamp?: string; uuid?: string; snippet?: string } | null>(null);
+  const searchScrollActiveRef = useRef(false);
  const isLoadingSessionRef = useRef(false);
  const isLoadingMoreRef = useRef(false);
  const allMessagesLoadedRef = useRef(false);
@@ -301,12 +303,14 @@ export function useChatSessionState({
  const isInitialLoadRef = useRef(true);

  useEffect(() => {
-    pendingInitialScrollRef.current = true;
+    if (!searchScrollActiveRef.current) {
+      pendingInitialScrollRef.current = true;
+      setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
+    }
    topLoadLockRef.current = false;
    pendingScrollRestoreRef.current = null;
    prevSessionMessagesLengthRef.current = 0;
    isInitialLoadRef.current = true;
-    setVisibleMessageCount(INITIAL_VISIBLE_MESSAGES);
    setIsUserScrolledUp(false);
  }, [selectedProject?.name, selectedSession?.id]);

@@ -321,9 +325,11 @@ export function useChatSessionState({
    }

    pendingInitialScrollRef.current = false;
-    setTimeout(() => {
-      scrollToBottom();
-    }, 200);
+    if (!searchScrollActiveRef.current) {
+      setTimeout(() => {
+        scrollToBottom();
+      }, 200);
+    }
  }, [chatMessages.length, isLoadingSessionMessages, scrollToBottom]);

  useEffect(() => {
@@ -502,13 +508,28 @@ export function useChatSessionState({
    selectedSession,
  ]);

+  // Detect search navigation target from selectedSession object reference change
+  // This must be a separate effect because the loading effect depends on selectedSession?.id
+  // which doesn't change when clicking a search result for the already-loaded session
+  useEffect(() => {
+    const session = selectedSession as Record<string, unknown> | null;
+    const targetSnippet = session?.__searchTargetSnippet;
+    const targetTimestamp = session?.__searchTargetTimestamp;
+    if (typeof targetSnippet === 'string' && targetSnippet) {
+      searchScrollActiveRef.current = true;
+      setSearchTarget({
+        snippet: targetSnippet,
+        timestamp: typeof targetTimestamp === 'string' ? targetTimestamp : undefined,
+      });
+    }
+  }, [selectedSession]);
+
  useEffect(() => {
    if (selectedSession?.id) {
      pendingViewSessionRef.current = null;
    }
  }, [pendingViewSessionRef, selectedSession?.id]);

-
  useEffect(() => {
    // Only sync sessionMessages to chatMessages when:
    // 1. Not currently loading (to avoid overwriting user's just-sent message)
@@ -533,6 +554,110 @@ export function useChatSessionState({
    }
  }, [chatMessages, selectedProject]);

+  // Scroll to search target message after messages are loaded
+  useEffect(() => {
+    if (!searchTarget || chatMessages.length === 0 || isLoadingSessionMessages) return;
+
+    const target = searchTarget;
+    // Clear immediately to prevent re-triggering
+    setSearchTarget(null);
+
+    const scrollToTarget = async () => {
+      // Always load all messages when navigating from search
+      // (hasMoreMessages may not be set yet due to race with loading effect)
+      if (!allMessagesLoadedRef.current && selectedSession && selectedProject) {
+        const sessionProvider = selectedSession.__provider || 'claude';
+        if (sessionProvider !== 'cursor') {
+          try {
+            const response = await (api.sessionMessages as any)(
+              selectedProject.name,
+              selectedSession.id,
+              null,
+              0,
+              sessionProvider,
+            );
+            if (response.ok) {
+              const data = await response.json();
+              const allMessages = data.messages || data;
+              setSessionMessages(Array.isArray(allMessages) ? allMessages : []);
+              setHasMoreMessages(false);
+              setTotalMessages(Array.isArray(allMessages) ? allMessages.length : 0);
+              messagesOffsetRef.current = Array.isArray(allMessages) ? allMessages.length : 0;
+              setVisibleMessageCount(Infinity);
+              setAllMessagesLoaded(true);
+              allMessagesLoadedRef.current = true;
+              // Wait for messages to render after state update
+              await new Promise(resolve => setTimeout(resolve, 300));
+            }
+          } catch {
+            // Fall through and scroll in current messages
+          }
+        }
+      }
+      setVisibleMessageCount(Infinity);
+
+      // Retry finding the element in the DOM until React finishes rendering all messages
+      const findAndScroll = (retriesLeft: number) => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+
+        let targetElement: Element | null = null;
+
+        // Match by snippet text content (most reliable)
+        if (target.snippet) {
+          const cleanSnippet = target.snippet.replace(/^\.{3}/, '').replace(/\.{3}$/, '').trim();
+          // Use a contiguous substring from the snippet (don't filter words, it breaks matching)
+          const searchPhrase = cleanSnippet.slice(0, 80).toLowerCase().trim();
+
+          if (searchPhrase.length >= 10) {
+            const messageElements = container.querySelectorAll('.chat-message');
+            for (const el of messageElements) {
+              const text = (el.textContent || '').toLowerCase();
+              if (text.includes(searchPhrase)) {
+                targetElement = el;
+                break;
+              }
+            }
+          }
+        }
+
+        // Fallback to timestamp matching
+        if (!targetElement && target.timestamp) {
+          const targetDate = new Date(target.timestamp).getTime();
+          const messageElements = container.querySelectorAll('[data-message-timestamp]');
+          let closestDiff = Infinity;
+
+          for (const el of messageElements) {
+            const ts = el.getAttribute('data-message-timestamp');
+            if (!ts) continue;
+            const diff = Math.abs(new Date(ts).getTime() - targetDate);
+            if (diff < closestDiff) {
+              closestDiff = diff;
+              targetElement = el;
+            }
+          }
+        }
+
+        if (targetElement) {
+          targetElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+          targetElement.classList.add('search-highlight-flash');
+          setTimeout(() => targetElement?.classList.remove('search-highlight-flash'), 4000);
+          searchScrollActiveRef.current = false;
+        } else if (retriesLeft > 0) {
+          setTimeout(() => findAndScroll(retriesLeft - 1), 200);
+        } else {
+          searchScrollActiveRef.current = false;
+        }
+      };
+
+      // Start polling after a short delay to let React begin rendering
+      setTimeout(() => findAndScroll(15), 150);
+    };
+
+    scrollToTarget();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatMessages.length, isLoadingSessionMessages, searchTarget]);
+
  useEffect(() => {
    if (!selectedProject || !selectedSession?.id || selectedSession.id.startsWith('new-session-')) {
      setTokenBudget(null);
@@ -588,6 +713,10 @@ export function useChatSessionState({
      return;
    }

+    if (searchScrollActiveRef.current) {
+      return;
+    }
+
    if (autoScrollToBottom) {
      if (!isUserScrolledUp) {
        setTimeout(() => scrollToBottom(), 50);
--- 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/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -96,6 +96,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
  return (
    <div
      ref={messageRef}
+      data-message-timestamp={message.timestamp || undefined}
      className={`chat-message ${message.type} ${isGrouped ? 'grouped' : ''} ${message.type === 'user' ? 'flex justify-end px-3 sm:px-0' : 'px-3 sm:px-0'}`}
    >
      {message.type === 'user' ? (
--- 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/hooks/useSidebarController.ts
+++ b/src/components/sidebar/hooks/useSidebarController.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type React from 'react';
 import type { TFunction } from 'i18next';
 import { api } from '../../../utils/api';
 import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
@@ -19,6 +20,44 @@ import {
  sortProjects,
 } from '../utils/utils';

+type SnippetHighlight = {
+  start: number;
+  end: number;
+};
+
+type ConversationMatch = {
+  role: string;
+  snippet: string;
+  highlights: SnippetHighlight[];
+  timestamp: string | null;
+  provider?: string;
+  messageUuid?: string | null;
+};
+
+type ConversationSession = {
+  sessionId: string;
+  sessionSummary: string;
+  provider?: string;
+  matches: ConversationMatch[];
+};
+
+type ConversationProjectResult = {
+  projectName: string;
+  projectDisplayName: string;
+  sessions: ConversationSession[];
+};
+
+export type ConversationSearchResults = {
+  results: ConversationProjectResult[];
+  totalMatches: number;
+  query: string;
+};
+
+export type SearchProgress = {
+  scannedProjects: number;
+  totalProjects: number;
+};
+
 type UseSidebarControllerArgs = {
  projects: Project[];
  selectedProject: Project | null;
@@ -71,6 +110,13 @@ export function useSidebarController({
  const [sessionDeleteConfirmation, setSessionDeleteConfirmation] = useState<SessionDeleteConfirmation | null>(null);
  const [showVersionModal, setShowVersionModal] = useState(false);
  const [starredProjects, setStarredProjects] = useState<Set<string>>(() => loadStarredProjects());
+  const [searchMode, setSearchMode] = useState<'projects' | 'conversations'>('projects');
+  const [conversationResults, setConversationResults] = useState<ConversationSearchResults | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchProgress, setSearchProgress] = useState<SearchProgress | null>(null);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchSeqRef = useRef(0);
+  const eventSourceRef = useRef<EventSource | null>(null);

  const isSidebarCollapsed = !isMobile && !sidebarVisible;

@@ -140,6 +186,116 @@ export function useSidebarController({
    };
  }, []);

+  // Debounced conversation search with SSE streaming
+  useEffect(() => {
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+
+    const query = searchFilter.trim();
+    if (searchMode !== 'conversations' || query.length < 2) {
+      searchSeqRef.current += 1;
+      setConversationResults(null);
+      setSearchProgress(null);
+      setIsSearching(false);
+      return;
+    }
+
+    setIsSearching(true);
+    const seq = ++searchSeqRef.current;
+
+    searchTimeoutRef.current = setTimeout(() => {
+      if (seq !== searchSeqRef.current) return;
+
+      const url = api.searchConversationsUrl(query);
+      const es = new EventSource(url);
+      eventSourceRef.current = es;
+
+      const accumulated: ConversationProjectResult[] = [];
+      let totalMatches = 0;
+
+      es.addEventListener('result', (evt) => {
+        if (seq !== searchSeqRef.current) { es.close(); return; }
+        try {
+          const data = JSON.parse(evt.data) as {
+            projectResult: ConversationProjectResult;
+            totalMatches: number;
+            scannedProjects: number;
+            totalProjects: number;
+          };
+          accumulated.push(data.projectResult);
+          totalMatches = data.totalMatches;
+          setConversationResults({ results: [...accumulated], totalMatches, query });
+          setSearchProgress({ scannedProjects: data.scannedProjects, totalProjects: data.totalProjects });
+        } catch {
+          // Ignore malformed SSE data
+        }
+      });
+
+      es.addEventListener('progress', (evt) => {
+        if (seq !== searchSeqRef.current) { es.close(); return; }
+        try {
+          const data = JSON.parse(evt.data) as { totalMatches: number; scannedProjects: number; totalProjects: number };
+          totalMatches = data.totalMatches;
+          setSearchProgress({ scannedProjects: data.scannedProjects, totalProjects: data.totalProjects });
+        } catch {
+          // Ignore malformed SSE data
+        }
+      });
+
+      es.addEventListener('done', () => {
+        if (seq !== searchSeqRef.current) { es.close(); return; }
+        es.close();
+        eventSourceRef.current = null;
+        setIsSearching(false);
+        setSearchProgress(null);
+        if (accumulated.length === 0) {
+          setConversationResults({ results: [], totalMatches: 0, query });
+        }
+      });
+
+      es.addEventListener('error', () => {
+        if (seq !== searchSeqRef.current) { es.close(); return; }
+        es.close();
+        eventSourceRef.current = null;
+        setIsSearching(false);
+        setSearchProgress(null);
+        if (accumulated.length === 0) {
+          setConversationResults({ results: [], totalMatches: 0, query });
+        }
+      });
+    }, 400);
+
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    };
+  }, [searchFilter, searchMode]);
+
+  const handleTouchClick = useCallback(
+    (callback: () => void) =>
+      (event: React.TouchEvent<HTMLElement>) => {
+        const target = event.target as HTMLElement;
+        if (target.closest('.overflow-y-auto') || target.closest('[data-scroll-container]')) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+      },
+    [],
+  );
+
  const toggleProject = useCallback((projectName: string) => {
    setExpandedProjects((prev) => {
      const next = new Set<string>();
@@ -466,6 +622,21 @@ export function useSidebarController({
    setEditingName,
    setEditingSession,
    setEditingSessionName,
+    searchMode,
+    setSearchMode,
+    conversationResults,
+    isSearching,
+    searchProgress,
+    clearConversationResults: useCallback(() => {
+      searchSeqRef.current += 1;
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      setIsSearching(false);
+      setSearchProgress(null);
+      setConversationResults(null);
+    }, []),
    setSearchFilter,
    setDeleteConfirmation,
    setSessionDeleteConfirmation,
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@@ -60,6 +60,12 @@ function Sidebar({
    editingSession,
    editingSessionName,
    searchFilter,
+    searchMode,
+    setSearchMode,
+    conversationResults,
+    isSearching,
+    searchProgress,
+    clearConversationResults,
    deletingProjects,
    deleteConfirmation,
    sessionDeleteConfirmation,
@@ -220,6 +226,37 @@ function Sidebar({
            searchFilter={searchFilter}
            onSearchFilterChange={setSearchFilter}
            onClearSearchFilter={() => setSearchFilter('')}
+            searchMode={searchMode}
+            onSearchModeChange={(mode: 'projects' | 'conversations') => {
+              setSearchMode(mode);
+              if (mode === 'projects') clearConversationResults();
+            }}
+            conversationResults={conversationResults}
+            isSearching={isSearching}
+            searchProgress={searchProgress}
+            onConversationResultClick={(projectName: string, sessionId: string, provider: string, messageTimestamp?: string | null, messageSnippet?: string | null) => {
+              const resolvedProvider = (provider || 'claude') as SessionProvider;
+              const project = projects.find(p => p.name === projectName);
+              const searchTarget = { __searchTargetTimestamp: messageTimestamp || null, __searchTargetSnippet: messageSnippet || null };
+              const sessionObj = {
+                id: sessionId,
+                __provider: resolvedProvider,
+                __projectName: projectName,
+                ...searchTarget,
+              };
+              if (project) {
+                handleProjectSelect(project);
+                const sessions = getProjectSessions(project);
+                const existing = sessions.find(s => s.id === sessionId);
+                if (existing) {
+                  handleSessionClick({ ...existing, ...searchTarget }, projectName);
+                } else {
+                  handleSessionClick(sessionObj, projectName);
+                }
+              } else {
+                handleSessionClick(sessionObj, projectName);
+              }
+            }}
            onRefresh={() => {
              void refreshProjects();
            }}
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -1,11 +1,40 @@
+import { type ReactNode } from 'react';
+import { Folder, MessageSquare, Search } from 'lucide-react';
 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';

+type SearchMode = 'projects' | 'conversations';
+
+function HighlightedSnippet({ snippet, highlights }: { snippet: string; highlights: { start: number; end: number }[] }) {
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+  for (const h of highlights) {
+    if (h.start > cursor) {
+      parts.push(snippet.slice(cursor, h.start));
+    }
+    parts.push(
+      <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>
+    );
+    cursor = h.end;
+  }
+  if (cursor < snippet.length) {
+    parts.push(snippet.slice(cursor));
+  }
+  return (
+    <span className="text-xs leading-relaxed text-muted-foreground">
+      {parts}
+    </span>
+  );
+}
+
 type SidebarContentProps = {
  isPWA: boolean;
  isMobile: boolean;
@@ -14,6 +43,12 @@ type SidebarContentProps = {
  searchFilter: string;
  onSearchFilterChange: (value: string) => void;
  onClearSearchFilter: () => void;
+  searchMode: SearchMode;
+  onSearchModeChange: (mode: SearchMode) => void;
+  conversationResults: ConversationSearchResults | null;
+  isSearching: boolean;
+  searchProgress: SearchProgress | null;
+  onConversationResultClick: (projectName: string, sessionId: string, provider: string, messageTimestamp?: string | null, messageSnippet?: string | null) => void;
  onRefresh: () => void;
  isRefreshing: boolean;
  onCreateProject: () => void;
@@ -35,6 +70,12 @@ export default function SidebarContent({
  searchFilter,
  onSearchFilterChange,
  onClearSearchFilter,
+  searchMode,
+  onSearchModeChange,
+  conversationResults,
+  isSearching,
+  searchProgress,
+  onConversationResultClick,
  onRefresh,
  isRefreshing,
  onCreateProject,
@@ -47,6 +88,9 @@ export default function SidebarContent({
  projectListProps,
  t,
 }: SidebarContentProps) {
+  const showConversationSearch = searchMode === 'conversations' && searchFilter.trim().length >= 2;
+  const hasPartialResults = conversationResults && conversationResults.results.length > 0;
+
  return (
    <div
      className="flex h-full flex-col bg-background/80 backdrop-blur-sm md:w-72 md:select-none"
@@ -60,6 +104,8 @@ export default function SidebarContent({
        searchFilter={searchFilter}
        onSearchFilterChange={onSearchFilterChange}
        onClearSearchFilter={onClearSearchFilter}
+        searchMode={searchMode}
+        onSearchModeChange={onSearchModeChange}
        onRefresh={onRefresh}
        isRefreshing={isRefreshing}
        onCreateProject={onCreateProject}
@@ -68,7 +114,103 @@ export default function SidebarContent({
      />

      <ScrollArea className="flex-1 overflow-y-auto overscroll-contain md:px-1.5 md:py-2">
-        <SidebarProjectList {...projectListProps} />
+        {showConversationSearch ? (
+          isSearching && !hasPartialResults ? (
+            <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="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="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="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 ? (
+            <div className="space-y-3 px-2">
+              <div className="flex items-center justify-between px-1">
+                <p className="text-xs text-muted-foreground">
+                  {t('search.matches', { count: conversationResults.totalMatches })}
+                </p>
+                {isSearching && searchProgress && (
+                  <div className="flex items-center gap-1.5">
+                    <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>
+                  </div>
+                )}
+              </div>
+              {isSearching && searchProgress && (
+                <div className="mx-1 h-0.5 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full rounded-full bg-primary/60 transition-all duration-300"
+                    style={{ width: `${Math.round((searchProgress.scannedProjects / searchProgress.totalProjects) * 100)}%` }}
+                  />
+                </div>
+              )}
+              {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="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 rounded-md px-2 py-2 text-left transition-colors hover:bg-accent/50"
+                      onClick={() => onConversationResultClick(
+                        projectResult.projectName,
+                        session.sessionId,
+                        session.provider || session.matches[0]?.provider || 'claude',
+                        session.matches[0]?.timestamp,
+                        session.matches[0]?.snippet
+                      )}
+                    >
+                      <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="flex-shrink-0 rounded bg-muted px-1 py-0.5 text-[9px] uppercase text-muted-foreground">
+                            {session.provider}
+                          </span>
+                        )}
+                      </div>
+                      <div className="space-y-1 pl-4">
+                        {session.matches.map((match, idx) => (
+                          <div key={idx} className="flex items-start gap-1">
+                            <span className="mt-0.5 flex-shrink-0 text-[10px] font-medium uppercase text-muted-foreground/60">
+                              {match.role === 'user' ? 'U' : 'A'}
+                            </span>
+                            <HighlightedSnippet
+                              snippet={match.snippet}
+                              highlights={match.highlights}
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              ))}
+            </div>
+          ) : null
+        ) : (
+          <SidebarProjectList {...projectListProps} />
+        )}
      </ScrollArea>

      <SidebarFooter
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -1,7 +1,10 @@
-import { FolderPlus, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
+import { Folder, FolderPlus, MessageSquare, Plus, RefreshCw, Search, X, PanelLeftClose } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button, Input } from '../../../../shared/view/ui';
 import { IS_PLATFORM } from '../../../../constants/config';
+import { cn } from '../../../../lib/utils';
+
+type SearchMode = 'projects' | 'conversations';

 type SidebarHeaderProps = {
  isPWA: boolean;
@@ -11,6 +14,8 @@ type SidebarHeaderProps = {
  searchFilter: string;
  onSearchFilterChange: (value: string) => void;
  onClearSearchFilter: () => void;
+  searchMode: SearchMode;
+  onSearchModeChange: (mode: SearchMode) => void;
  onRefresh: () => void;
  isRefreshing: boolean;
  onCreateProject: () => void;
@@ -26,6 +31,8 @@ export default function SidebarHeader({
  searchFilter,
  onSearchFilterChange,
  onClearSearchFilter,
+  searchMode,
+  onSearchModeChange,
  onRefresh,
  isRefreshing,
  onCreateProject,
@@ -101,23 +108,55 @@ export default function SidebarHeader({

        {/* Search bar */}
        {projectsCount > 0 && !isLoading && (
-          <div className="relative mt-2.5">
-            <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={t('projects.searchPlaceholder')}
-              value={searchFilter}
-              onChange={(event) => onSearchFilterChange(event.target.value)}
-              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 && (
+          <div className="mt-2.5 space-y-2">
+            {/* Search mode toggle */}
+            <div className="flex rounded-lg bg-muted/50 p-0.5">
              <button
-                onClick={onClearSearchFilter}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-0.5 hover:bg-accent"
+                onClick={() => onSearchModeChange('projects')}
+                aria-pressed={searchMode === 'projects'}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  searchMode === 'projects'
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
              >
-                <X className="h-3 w-3 text-muted-foreground" />
+                <Folder className="h-3 w-3" />
+                {t('search.modeProjects')}
              </button>
-            )}
+              <button
+                onClick={() => onSearchModeChange('conversations')}
+                aria-pressed={searchMode === 'conversations'}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  searchMode === 'conversations'
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <MessageSquare className="h-3 w-3" />
+                {t('search.modeConversations')}
+              </button>
+            </div>
+            <div className="relative">
+              <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 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 rounded-md p-0.5 hover:bg-accent"
+                >
+                  <X className="h-3 w-3 text-muted-foreground" />
+                </button>
+              )}
+            </div>
          </div>
        )}
      </div>
@@ -162,23 +201,54 @@ export default function SidebarHeader({

        {/* Mobile search */}
        {projectsCount > 0 && !isLoading && (
-          <div className="relative mt-2.5">
-            <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={t('projects.searchPlaceholder')}
-              value={searchFilter}
-              onChange={(event) => onSearchFilterChange(event.target.value)}
-              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 && (
+          <div className="mt-2.5 space-y-2">
+            <div className="flex rounded-lg bg-muted/50 p-0.5">
              <button
-                onClick={onClearSearchFilter}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md p-1 hover:bg-accent"
+                onClick={() => onSearchModeChange('projects')}
+                aria-pressed={searchMode === 'projects'}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  searchMode === 'projects'
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
              >
-                <X className="h-3.5 w-3.5 text-muted-foreground" />
+                <Folder className="h-3 w-3" />
+                {t('search.modeProjects')}
              </button>
-            )}
+              <button
+                onClick={() => onSearchModeChange('conversations')}
+                aria-pressed={searchMode === 'conversations'}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-all",
+                  searchMode === 'conversations'
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <MessageSquare className="h-3 w-3" />
+                {t('search.modeConversations')}
+              </button>
+            </div>
+            <div className="relative">
+              <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 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 rounded-md p-1 hover:bg-accent"
+                >
+                  <X className="h-3.5 w-3.5 text-muted-foreground" />
+                </button>
+              )}
+            </div>
          </div>
        )}
      </div>
--- a/src/contexts/PluginsContext.tsx
+++ b/src/contexts/PluginsContext.tsx
@@ -0,0 +1,157 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import { authenticatedFetch } from '../utils/api';
+
+export type Plugin = {
+  name: string;
+  displayName: string;
+  version: string;
+  description: string;
+  author: string;
+  icon: string;
+  type: 'react' | 'module';
+  slot: 'tab';
+  entry: string;
+  server: string | null;
+  permissions: string[];
+  enabled: boolean;
+  serverRunning: boolean;
+  dirName: string;
+  repoUrl: string | null;
+};
+
+type PluginsContextValue = {
+  plugins: Plugin[];
+  loading: boolean;
+  pluginsError: string | null;
+  refreshPlugins: () => Promise<void>;
+  installPlugin: (url: string) => Promise<{ success: boolean; error?: string }>;
+  uninstallPlugin: (name: string) => Promise<{ success: boolean; error?: string }>;
+  updatePlugin: (name: string) => Promise<{ success: boolean; error?: string }>;
+  togglePlugin: (name: string, enabled: boolean) => Promise<{ success: boolean; error: string | null }>;
+};
+
+const PluginsContext = createContext<PluginsContextValue | null>(null);
+
+export function usePlugins() {
+  const context = useContext(PluginsContext);
+  if (!context) {
+    throw new Error('usePlugins must be used within a PluginsProvider');
+  }
+  return context;
+}
+
+export function PluginsProvider({ children }: { children: ReactNode }) {
+  const [plugins, setPlugins] = useState<Plugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [pluginsError, setPluginsError] = useState<string | null>(null);
+
+  const refreshPlugins = useCallback(async () => {
+    try {
+      const res = await authenticatedFetch('/api/plugins');
+      if (res.ok) {
+        const data = await res.json();
+        setPlugins(data.plugins || []);
+        setPluginsError(null);
+      } else {
+        let errorMessage = `Failed to fetch plugins (${res.status})`;
+        try {
+          const data = await res.json();
+          errorMessage = data.details || data.error || errorMessage;
+        } catch {
+          errorMessage = res.statusText || errorMessage;
+        }
+        setPluginsError(errorMessage);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch plugins';
+      setPluginsError(message);
+      console.error('[Plugins] Failed to fetch plugins:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshPlugins();
+  }, [refreshPlugins]);
+
+  const installPlugin = useCallback(async (url: string) => {
+    try {
+      const res = await authenticatedFetch('/api/plugins/install', {
+        method: 'POST',
+        body: JSON.stringify({ url }),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        await refreshPlugins();
+        return { success: true };
+      }
+      return { success: false, error: data.details || data.error || 'Install failed' };
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : 'Install failed' };
+    }
+  }, [refreshPlugins]);
+
+  const uninstallPlugin = useCallback(async (name: string) => {
+    try {
+      const res = await authenticatedFetch(`/api/plugins/${encodeURIComponent(name)}`, {
+        method: 'DELETE',
+      });
+      const data = await res.json();
+      if (res.ok) {
+        await refreshPlugins();
+        return { success: true };
+      }
+      return { success: false, error: data.details || data.error || 'Uninstall failed' };
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : 'Uninstall failed' };
+    }
+  }, [refreshPlugins]);
+
+  const updatePlugin = useCallback(async (name: string) => {
+    try {
+      const res = await authenticatedFetch(`/api/plugins/${encodeURIComponent(name)}/update`, {
+        method: 'POST',
+      });
+      const data = await res.json();
+      if (res.ok) {
+        await refreshPlugins();
+        return { success: true };
+      }
+      return { success: false, error: data.details || data.error || 'Update failed' };
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : 'Update failed' };
+    }
+  }, [refreshPlugins]);
+
+  const togglePlugin = useCallback(async (name: string, enabled: boolean): Promise<{ success: boolean; error: string | null }> => {
+    try {
+      const res = await authenticatedFetch(`/api/plugins/${encodeURIComponent(name)}/enable`, {
+        method: 'PUT',
+        body: JSON.stringify({ enabled }),
+      });
+      if (!res.ok) {
+        let errorMessage = `Toggle failed (${res.status})`;
+        try {
+          const data = await res.json();
+          errorMessage = data.details || data.error || errorMessage;
+        } catch {
+          // response body wasn't JSON, use status text
+          errorMessage = res.statusText || errorMessage;
+        }
+        return { success: false, error: errorMessage };
+      }
+      await refreshPlugins();
+      return { success: true, error: null };
+    } catch (err) {
+      return { success: false, error: err instanceof Error ? err.message : 'Toggle failed' };
+    }
+  }, [refreshPlugins]);
+
+  return (
+    <PluginsContext.Provider value={{ plugins, loading, pluginsError, refreshPlugins, installPlugin, uninstallPlugin, updatePlugin, togglePlugin }}>
+      {children}
+    </PluginsContext.Provider>
+  );
+}
--- a/src/hooks/useProjectsState.ts
+++ b/src/hooks/useProjectsState.ts
@@ -106,10 +106,14 @@ const isUpdateAdditive = (

 const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'preview']);

+const isValidTab = (tab: string): tab is AppTab => {
+  return VALID_TABS.has(tab) || tab.startsWith('plugin:');
+};
+
 const readPersistedTab = (): AppTab => {
  try {
    const stored = localStorage.getItem('activeTab');
-    if (stored && VALID_TABS.has(stored)) {
+    if (stored && isValidTab(stored)) {
      return stored as AppTab;
    }
  } catch {
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -104,7 +104,8 @@
    "appearance": "Appearance",
    "git": "Git",
    "apiTokens": "API & Tokens",
-    "tasks": "Tasks"
+    "tasks": "Tasks",
+    "plugins": "Plugins"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -46,7 +46,8 @@
    "editSessionName": "Manually edit session name",
    "deleteSession": "Delete this session permanently",
    "save": "Save",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "clearSearch": "Clear search"
  },
  "navigation": {
    "chat": "Chat",
@@ -103,6 +104,18 @@
  "version": {
    "updateAvailable": "Update available"
  },
+  "search": {
+    "modeProjects": "Projects",
+    "modeConversations": "Conversations",
+    "conversationsPlaceholder": "Search in conversations...",
+    "searching": "Searching...",
+    "noResults": "No results found",
+    "tryDifferentQuery": "Try a different search query",
+    "matches_one": "{{count}} match",
+    "matches_other": "{{count}} matches",
+    "projectsScanned_one": "{{count}} project scanned",
+    "projectsScanned_other": "{{count}} projects scanned"
+  },
  "deleteConfirmation": {
    "deleteProject": "Delete Project",
    "deleteSession": "Delete Session",
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -104,7 +104,8 @@
    "appearance": "外観",
    "git": "Git",
    "apiTokens": "API & トークン",
-    "tasks": "タスク"
+    "tasks": "タスク",
+    "plugins": "プラグイン"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/ko/settings.json
+++ b/src/i18n/locales/ko/settings.json
@@ -104,7 +104,8 @@
    "appearance": "외관",
    "git": "Git",
    "apiTokens": "API & 토큰",
-    "tasks": "작업"
+    "tasks": "작업",
+    "plugins": "플러그인"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -104,7 +104,8 @@
    "appearance": "外观",
    "git": "Git",
    "apiTokens": "API 和令牌",
-    "tasks": "任务"
+    "tasks": "任务",
+    "plugins": "插件"
  },
  "appearanceSettings": {
    "darkMode": {
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -46,7 +46,8 @@
    "editSessionName": "手动编辑会话名称",
    "deleteSession": "永久删除此会话",
    "save": "保存",
-    "cancel": "取消"
+    "cancel": "取消",
+    "clearSearch": "清除搜索"
  },
  "navigation": {
    "chat": "聊天",
@@ -103,6 +104,18 @@
  "version": {
    "updateAvailable": "有可用更新"
  },
+  "search": {
+    "modeProjects": "项目",
+    "modeConversations": "对话",
+    "conversationsPlaceholder": "搜索对话内容...",
+    "searching": "搜索中...",
+    "noResults": "未找到结果",
+    "tryDifferentQuery": "尝试不同的搜索词",
+    "matches_one": "{{count}} 个匹配",
+    "matches_other": "{{count}} 个匹配",
+    "projectsScanned_one": "{{count}} 个项目已扫描",
+    "projectsScanned_other": "{{count}} 个项目已扫描"
+  },
  "deleteConfirmation": {
    "deleteProject": "删除项目",
    "deleteSession": "删除会话",
--- a/src/index.css
+++ b/src/index.css
@@ -904,4 +904,23 @@
  summary svg[class*="transition-transform"] {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
+
+  /* Search result highlight flash */
+  .search-highlight-flash {
+    animation: search-flash 4s ease-out;
+  }
+
+  @keyframes search-flash {
+    0%, 50% {
+      outline: 3px solid hsl(var(--primary));
+      outline-offset: 4px;
+      border-radius: 8px;
+      background-color: hsl(var(--primary) / 0.06);
+    }
+    100% {
+      outline: 3px solid transparent;
+      outline-offset: 4px;
+      background-color: transparent;
+    }
+  }
 }
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -1,6 +1,6 @@
 export type SessionProvider = 'claude' | 'cursor' | 'codex' | 'gemini';

-export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'preview';
+export type AppTab = 'chat' | 'files' | 'shell' | 'git' | 'tasks' | 'preview' | `plugin:${string}`;

 export interface ProjectSession {
  id: string;
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -6,4 +6,10 @@ declare global {
    refreshProjects?: () => void | Promise<void>;
    openSettings?: (tab?: string) => void;
  }
+
+  interface EventSourceEventMap {
+    result: MessageEvent;
+    progress: MessageEvent;
+    done: MessageEvent;
+  }
 }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -94,6 +94,12 @@ export const api = {
    authenticatedFetch(`/api/projects/${projectName}${force ? '?force=true' : ''}`, {
      method: 'DELETE',
    }),
+  searchConversationsUrl: (query, limit = 50) => {
+    const token = localStorage.getItem('auth-token');
+    const params = new URLSearchParams({ q: query, limit: String(limit) });
+    if (token) params.set('token', token);
+    return `/api/search/conversations?${params.toString()}`;
+  },
  createProject: (path) =>
    authenticatedFetch('/api/projects/create', {
      method: 'POST',
Author	SHA1	Message	Date
Haileyesus	77fb193598	fix: resolve type error in MobileNav and PluginTabContent components	2026-03-09 12:59:52 +03:00
Haileyesus	ff45a1cfd7	refactor: move plugin content to /view folder	2026-03-09 12:51:48 +03:00
simosmik	951db47a91	fix(git-panel): reset changes view on project switch	2026-03-09 08:18:58 +00:00
simosmik	ca16342a20	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	2026-03-09 07:59:46 +00:00
simosmik	ca247cddae	refactor(git-panel): simplify setCommitMessage with plain function	2026-03-09 07:47:17 +00:00
simosmik	4061a2761e	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.	2026-03-09 07:39:00 +00:00
simosmik	c368451891	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.	2026-03-09 07:35:01 +00:00
simosmik	efdee162c9	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.	2026-03-09 06:51:58 +00:00
viper151	a7e8b12ef4	fix: coderabbit nitpick comments	2026-03-06 15:53:11 +01:00
viper151	24430fa343	fix: lint errors and deleting plugin error on windows	2026-03-06 15:44:32 +01:00
Haileyesus	38accf6505	Merge branch 'main' into feat/plugin-system	2026-03-06 17:09:52 +03:00
Eric Blanquer	3950c0e47f	feat: add full-text search across conversations (#482 ) * feat: add full-text search across conversations in sidebar Add a search mode toggle (Projects/Conversations) to the sidebar search bar. In Conversations mode, search text content across all JSONL session files with debounced API calls, highlighted snippets, and click-to-navigate results. * fix: address PR review feedback - session summary tracking, search sequence invalidation, fallback navigation, SSE streaming - Track session summaries per-session in a Map instead of file-scoped variable - Increment searchSeqRef when clearing conversation search to invalidate in-flight requests - Add fallback session navigation when session not loaded in sidebar paging - Stream search results via SSE for progressive display with progress indicator * feat(search): add Codex/Gemini search and scroll-to-message navigation - Search now includes Codex sessions (JSONL from ~/.codex/sessions/) and Gemini sessions (in-memory via sessionManager) in addition to Claude - Search results include provider info and display a provider badge - Click handler resolves the correct provider instead of hardcoding claude - Clicking a search result loads all messages and scrolls to the matched message with a highlight flash animation * fix(search): Codex search path matching and scroll reliability - Fix Codex search scanning all sessions for every project by checking session_meta cwd match BEFORE scanning messages (was inflating match count and hitting limit before reaching later projects) - Fix Codex search missing user messages in response_item entries (role=user with input_text content parts) - Fix scroll-to-message being overridden by initial scrollToBottom using searchScrollActiveRef to inhibit competing scroll effects - Fix snippet matching using contiguous substring instead of filtered words (which created non-existent phrases) * feat(search): add Gemini CLI session support for search and history viewing Gemini CLI sessions stored in ~/.gemini/tmp/<project>/chats/.json are now indexed for conversation search and can be loaded for viewing. Previously only sessions created through the UI (sessionManager) were searchable. fix(search): full-word matching and longer highlight flash - Search now uses word boundaries (\b) instead of substring matching, so "hi" no longer matches "this" - Highlight flash extended to 4s with thicker outline and subtle background tint for better visibility	2026-03-06 16:59:23 +03:00
simosmik	e80fd4b09b	fix(plugins): prevent git arg injection, add repo URL detection	2026-03-06 12:09:25 +00:00
simosmik	1d62df68d6	fix: design changes to plugins settings tab	2026-03-06 12:01:11 +00:00
simosmik	0a3e22905f	fix: coderabbit changes and new plugin name & repo	2026-03-06 11:50:01 +00:00
viper151	a09aa5f68e	feat(plugins): add SVG icon support with authenticated inline rendering	2026-03-06 12:36:15 +01:00
Haileyesus	95ba61ea3e	Merge branch 'main' into feat/plugin-system	2026-03-06 13:07:30 +03:00
Simos Mikelatos	6e4ea7f333	Update manifest.json	2026-03-06 10:20:56 +01:00
Simos Mikelatos	d299ab88a0	chore(release): v1.23.2	2026-03-06 01:51:03 +00:00
Simos Mikelatos	dcea8a329c	fix: release it script	2026-03-06 01:38:08 +00:00
Simos Mikelatos	6d4cea0435	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>	2026-03-06 01:16:52 +01:00
Simos Mikelatos	ba197cc286	Merge branch 'main' into feat/plugin-system # Conflicts: # src/App.tsx # src/components/app/MobileNav.tsx # src/components/main-content/view/MainContent.tsx # src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx # src/components/main-content/view/subcomponents/MainContentTitle.tsx # src/components/settings/view/SettingsMainTabs.tsx	2026-03-05 22:53:54 +00:00
Simos Mikelatos	b4169887ab	feat: new plugin system	2026-03-05 22:51:27 +00:00
Haileyesus	844de26ada	Refactor/shared and tasks components (#473 ) * refactor: remove unused TasksSettings component * refactor: migrate TodoList component to a new file with improved structure and normalization logic * refactor: Move Tooltip and DarkModeToggle to shared/ui * refactor: Move Tooltip and DarkModeToggle to shared/view/ui * refactor: move GeminiLogo to llm-logo-provider and update imports * refactor: remove unused GeminiStatus component * refactor: move components in src/components/ui to src/shared/view/ui * refactor: move ErrorBoundary component to main-content/view and update imports * refactor: move VersionUpgradeModal to its own module * refactor(wizard): rebuild project creation flow as modular TypeScript components Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS implementation under `src/components/project-creation-wizard`, while preserving existing behavior and improving readability, maintainability, and state isolation. Why: - The previous wizard mixed API logic, flow state, folder browsing, and UI in one file. - Refactoring and testing were difficult due to tightly coupled concerns. - We needed stronger type safety and localized component state. What changed: - Deleted: - `src/components/ProjectCreationWizard.jsx` - Added new modular structure: - `src/components/project-creation-wizard/index.ts` - `src/components/project-creation-wizard/ProjectCreationWizard.tsx` - `src/components/project-creation-wizard/types.ts` - `src/components/project-creation-wizard/data/workspaceApi.ts` - `src/components/project-creation-wizard/hooks/useGithubTokens.ts` - `src/components/project-creation-wizard/utils/pathUtils.ts` - `src/components/project-creation-wizard/components/` - `WizardProgress`, `WizardFooter`, `ErrorBanner` - `StepTypeSelection`, `StepConfiguration`, `StepReview` - `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal` - Updated import usage: - `src/components/sidebar/view/subcomponents/SidebarModals.tsx` now imports from `../../../project-creation-wizard`. Implementation details: - Migrated wizard logic to TypeScript using `type` aliases only. - Kept component prop types colocated in each component file. - Split responsibilities by feature: - container/orchestration in `ProjectCreationWizard.tsx` - API/SSE and request parsing in `data/workspaceApi.ts` - GitHub token loading/caching behavior in `useGithubTokens` - path/URL helpers in `utils/pathUtils.ts` - Localized UI-only state to child components: - folder browser modal state (current path, hidden folders, create-folder input) - path suggestion dropdown state with debounced lookup - Preserved existing UX flows: - step navigation and validation - existing/new workspace modes - optional GitHub clone + auth modes - clone progress via SSE - folder browsing + folder creation - Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases). refactor(quick-settings): migrate panel to typed feature-based modules Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations. Highlights: - Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx). - Introduce src/components/quick-settings-panel/ with clear separation of concerns: - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections. - hooks/: drag interactions and whisper mode persistence. - constants.ts and types.ts for shared config and strict local typing. - Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence. - Keep user-visible behavior intact: - same open/close panel interactions. - same mobile/desktop drag behavior and persisted handle position. - same quick preference toggles and wiring to useUiPreferences. - same hidden whisper section behavior and localStorage/event updates. - Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components. - Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent). - Keep files small and reviewable (all new/changed files are under 300 lines). Validation: - npm run typecheck - npm run build * refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file * refactor(shared): move shared ui components to share/view/ui without subfolders * refactor(LanguageSelector): move LanguageSelector to shared UI components * refactor(prd-editor): modularize PRD editor with typed feature modules Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability. Key changes: - Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx. - Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts. - Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal. - Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants. - Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container. - Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion. - Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior. - Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification. Validation: - npm run typecheck - npm run build * refactor(TaskMasterPanel): update PRDEditor import path to match new structure * refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components * refactor(TaskDetail): remove unused TaskIndicator import * refactor(task-master): migrate tasks to a typed feature module - introduce a new feature-oriented TaskMaster domain under src/components/task-master - add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling - split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner) - move task board filtering/sorting/kanban derivation into dedicated hooks and utilities - relocate CreateTaskModal into the feature module and keep task views modular/readable - remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel - replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context - update MainContent project sync logic to compare by project name to avoid state churn - validation: npm run typecheck, npm run build * refactor(MobileNav): remove unused React import and TaskMasterContext * refactor(auth): migrate login and setup flows to typed feature module - Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n - view/* components for loading, route guarding, form layout, input fields, and error display\n - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic - Replace legacy auth entrypoints with the new feature module in app wiring:\n - App now imports AuthProvider and ProtectedRoute from src/components/auth\n - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas. * refactor(AppContent): update MobileNav import path and add MobileNav component * refactor(DiffViewer): rename different diff viewers and place them in different components * refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features - Move onboarding out of root-level components into a dedicated feature module: - add src/components/onboarding/view/Onboarding.tsx - split onboarding UI into focused subcomponents: - OnboardingStepProgress - GitConfigurationStep - AgentConnectionsStep - AgentConnectionCard - add onboarding-local types and utils for provider status and validation helpers - Move multi-provider login modal into a dedicated provider-auth feature: - add src/components/provider-auth/view/ProviderLoginModal.tsx - add src/components/provider-auth/types.ts - keep provider-specific command/title behavior and Gemini setup guidance - preserve compatibility for both onboarding flow and settings login flow - Move TaskIndicator into the sidebar domain: - add src/components/sidebar/view/subcomponents/TaskIndicator.tsx - update SidebarProjectItem to consume local sidebar TaskIndicator - Update integration points to the new structure: - ProtectedRoute now imports onboarding from onboarding feature - Settings now imports ProviderLoginModal directly (remove legacy cast wrapper) - git panel consumers now import shared GitDiffViewer by explicit name - Rename git shared diff view to clearer domain naming: - replace shared DiffViewer with shared GitDiffViewer - update FileChangeItem and CommitHistoryItem imports accordingly - Remove superseded root-level legacy components: - delete src/components/LoginModal.jsx - delete src/components/Onboarding.jsx - delete src/components/TaskIndicator.jsx - delete old src/components/git-panel/view/shared/DiffViewer.tsx - Result: - clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar) - easier navigation and ownership by domain - preserved runtime behavior with improved readability and modularity * refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component * fix: update import paths for Input component in FileTree and FileTreeNode * refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view * refactor(FileTree): remove unused ScrollArea import * feat: setup eslint with typescript and react rules, add unused imports plugin * fix: remove unused imports, functions, and types after discovering using `npm run lint` * feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations * chore: reformat files after running `npm run lint:fix` * chore: add omments about eslint config plugin uses * feat: add husky and lint-staged for pre-commit linting * feat: setup commitlint with conventional config * fix: i18n translations --------- Co-authored-by: Haileyesus <something@gmail.com> Co-authored-by: viper151 <simosmik@gmail.com>	2026-03-05 23:47:58 +01:00