feat: enhance CodexLens with quick install feature and embed mode toggle

2026-03-20 19:03:51 +08:00 · 2026-03-18 17:09:18 +08:00
parent 301ae3439a
commit 6ff0467e02
8 changed files with 180 additions and 10 deletions
--- a/ccw/frontend/src/components/codexlens/EnvSettingsTab.tsx
+++ b/ccw/frontend/src/components/codexlens/EnvSettingsTab.tsx
@@ -11,6 +11,8 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useCodexLensEnv, useSaveCodexLensEnv } from '@/hooks/useCodexLens';

+type EmbedMode = 'local' | 'api';
+
 // ========================================
 // ENV group definitions
 // ========================================
@@ -71,6 +73,29 @@ const ENV_GROUPS: EnvGroup[] = [
  },
 ];

+// Fields that are only relevant in API mode
+const API_ONLY_KEYS = new Set([
+  'CODEXLENS_EMBED_API_URL',
+  'CODEXLENS_EMBED_API_KEY',
+  'CODEXLENS_EMBED_API_ENDPOINTS',
+  'CODEXLENS_EMBED_API_CONCURRENCY',
+]);
+
+// Default placeholder values
+const FIELD_DEFAULTS: Record<string, string> = {
+  CODEXLENS_EMBED_API_MODEL: 'text-embedding-3-small',
+  CODEXLENS_EMBED_DIM: '1536',
+  CODEXLENS_EMBED_BATCH_SIZE: '512',
+  CODEXLENS_EMBED_API_CONCURRENCY: '4',
+  CODEXLENS_BINARY_TOP_K: '200',
+  CODEXLENS_ANN_TOP_K: '50',
+  CODEXLENS_FTS_TOP_K: '50',
+  CODEXLENS_FUSION_K: '60',
+  CODEXLENS_RERANKER_TOP_K: '20',
+  CODEXLENS_RERANKER_BATCH_SIZE: '32',
+  CODEXLENS_INDEX_WORKERS: '4',
+};
+
 // Collect all keys
 const ALL_KEYS = ENV_GROUPS.flatMap((g) => g.fields.map((f) => f.key));

@@ -120,9 +145,10 @@ export function EnvSettingsTab() {
  const { data: serverEnv, isLoading } = useCodexLensEnv();
  const { saveEnv, isSaving } = useSaveCodexLensEnv();

+  const [embedMode, setEmbedMode] = useState<EmbedMode>('local');
  const [localEnv, setLocalEnv] = useState<Record<string, string>>(buildEmptyEnv);

-  // Sync server state into local when loaded
+  // Sync server state into local when loaded and detect embed mode
  useEffect(() => {
    if (serverEnv) {
      setLocalEnv((prev) => {
@@ -132,6 +158,10 @@ export function EnvSettingsTab() {
        });
        return next;
      });
+      // Auto-detect mode from saved env
+      if (serverEnv.CODEXLENS_EMBED_API_URL) {
+        setEmbedMode('api');
+      }
    }
  }, [serverEnv]);

@@ -157,13 +187,53 @@ export function EnvSettingsTab() {

  return (
    <div className="space-y-6">
-      {ENV_GROUPS.map((group) => (
+      {/* Mode toggle */}
+      <div className="flex items-center gap-3">
+        <span className="text-sm font-medium">{formatMessage({ id: 'codexlens.env.mode' })}:</span>
+        <div className="flex rounded-md border border-border overflow-hidden">
+          <button
+            type="button"
+            onClick={() => setEmbedMode('local')}
+            className={`px-3 py-1.5 text-sm transition-colors ${
+              embedMode === 'local'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-background text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            {formatMessage({ id: 'codexlens.env.localMode' })}
+          </button>
+          <button
+            type="button"
+            onClick={() => setEmbedMode('api')}
+            className={`px-3 py-1.5 text-sm transition-colors ${
+              embedMode === 'api'
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-background text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            {formatMessage({ id: 'codexlens.env.apiMode' })}
+          </button>
+        </div>
+        <span className="text-xs text-muted-foreground">
+          {embedMode === 'local'
+            ? formatMessage({ id: 'codexlens.env.localModeDesc' })
+            : formatMessage({ id: 'codexlens.env.apiModeDesc' })}
+        </span>
+      </div>
+
+      {ENV_GROUPS.map((group) => {
+        // In local mode, filter out API-only fields from embed group
+        const visibleFields = embedMode === 'local'
+          ? group.fields.filter((f) => !API_ONLY_KEYS.has(f.key))
+          : group.fields;
+        if (visibleFields.length === 0) return null;
+        return (
        <Card key={group.title}>
          <CardHeader className="pb-3">
            <CardTitle className="text-base">{formatMessage({ id: `codexlens.env.sections.${group.title}` })}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
-            {group.fields.map((field) => (
+            {visibleFields.map((field) => (
              <div key={field.key} className="grid grid-cols-3 gap-3 items-center">
                <label
                  htmlFor={field.key}
@@ -182,6 +252,7 @@ export function EnvSettingsTab() {
                    <Input
                      id={field.key}
                      value={localEnv[field.key] ?? ''}
+                      placeholder={FIELD_DEFAULTS[field.key] ?? ''}
                      onChange={(e) => handleChange(field.key, e.target.value)}
                    />
                  )}
@@ -190,7 +261,8 @@ export function EnvSettingsTab() {
            ))}
          </CardContent>
        </Card>
-      ))}
+        );
+      })}

      {/* Action buttons */}
      <div className="flex justify-between pt-2">
--- a/ccw/frontend/src/components/codexlens/IndexManagerTab.tsx
+++ b/ccw/frontend/src/components/codexlens/IndexManagerTab.tsx
@@ -3,7 +3,7 @@
 // ========================================
 // Project path input, index status display, and sync/rebuild actions

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { Plus, Trash2, RefreshCw, Loader2 } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -11,6 +11,7 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useIndexStatus, useSyncIndex, useRebuildIndex, codexLensKeys, type IndexStatusData } from '@/hooks/useCodexLens';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';

 interface ProjectStatusCardProps {
  projectPath: string;
@@ -98,9 +99,20 @@ function ProjectStatusCard({ projectPath }: ProjectStatusCardProps) {

 export function IndexManagerTab() {
  const { formatMessage } = useIntl();
+  const currentWorkspacePath = useWorkflowStore(selectProjectPath);
  const [paths, setPaths] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState('');

+  // Auto-add current workspace path on mount and when workspace changes
+  useEffect(() => {
+    if (currentWorkspacePath) {
+      setPaths((prev) => {
+        if (prev.includes(currentWorkspacePath)) return prev;
+        return [currentWorkspacePath, ...prev];
+      });
+    }
+  }, [currentWorkspacePath]);
+
  const handleAdd = () => {
    const trimmed = inputValue.trim();
    if (trimmed && !paths.includes(trimmed)) {
--- a/ccw/frontend/src/components/codexlens/McpConfigTab.tsx
+++ b/ccw/frontend/src/components/codexlens/McpConfigTab.tsx
@@ -5,17 +5,44 @@

 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Copy, RefreshCw, Check } from 'lucide-react';
+import { Copy, RefreshCw, Check, Download, Loader2 } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { useCodexLensMcpConfig, useCodexLensEnv } from '@/hooks/useCodexLens';
+import { installMcpTemplate } from '@/lib/api';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';

 export function McpConfigTab() {
  const { formatMessage } = useIntl();
  const { data: mcpConfig, isLoading, isError, refetch } = useCodexLensMcpConfig();
  const { data: envData } = useCodexLensEnv();
  const [copied, setCopied] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [installResult, setInstallResult] = useState<{ ok: boolean; msg: string } | null>(null);
+  const projectPath = useWorkflowStore(selectProjectPath);
+
+  const handleInstall = async (scope: 'global' | 'project') => {
+    setInstalling(true);
+    setInstallResult(null);
+    try {
+      const res = await installMcpTemplate({
+        templateName: 'codexlens',
+        scope,
+        projectPath: scope === 'project' ? projectPath : undefined,
+      });
+      setInstallResult({
+        ok: !!res.success,
+        msg: res.success
+          ? formatMessage({ id: 'codexlens.mcp.installSuccess' })
+          : (res.error ?? formatMessage({ id: 'codexlens.mcp.installError' })),
+      });
+    } catch (err) {
+      setInstallResult({ ok: false, msg: (err as Error).message });
+    } finally {
+      setInstalling(false);
+    }
+  };

  const hasApiUrl = !!(envData?.CODEXLENS_EMBED_API_URL);
  const embedMode = hasApiUrl ? 'API' : 'Local fastembed';
@@ -85,6 +112,41 @@ export function McpConfigTab() {
        </CardContent>
      </Card>

+      {/* Quick Install */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base">{formatMessage({ id: 'codexlens.mcp.quickInstallTitle' })}</CardTitle>
+          <p className="text-xs text-muted-foreground mt-1">{formatMessage({ id: 'codexlens.mcp.quickInstallDesc' })}</p>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex gap-2 flex-wrap">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleInstall('project')}
+              disabled={installing || !projectPath}
+            >
+              {installing ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Download className="w-4 h-4 mr-1" />}
+              {installing ? formatMessage({ id: 'codexlens.mcp.installing' }) : formatMessage({ id: 'codexlens.mcp.installProject' })}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleInstall('global')}
+              disabled={installing}
+            >
+              {installing ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Download className="w-4 h-4 mr-1" />}
+              {installing ? formatMessage({ id: 'codexlens.mcp.installing' }) : formatMessage({ id: 'codexlens.mcp.installGlobal' })}
+            </Button>
+          </div>
+          {installResult && (
+            <p className={`text-sm ${installResult.ok ? 'text-success' : 'text-destructive'}`}>
+              {installResult.msg}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
      {/* Installation instructions */}
      <Card>
        <CardHeader className="pb-3">
--- a/ccw/frontend/src/locales/en/codexlens.json
+++ b/ccw/frontend/src/locales/en/codexlens.json
@@ -27,7 +27,14 @@
      "step3": "Add the copied JSON under the mcpServers key.",
      "step4": "Save the configuration file and restart your client.",
      "step5": "Verify the CodexLens server appears as an available MCP tool."
-    }
+    },
+    "quickInstallTitle": "Quick Install",
+    "quickInstallDesc": "Install CodexLens MCP server directly to your project or global config",
+    "installProject": "Install to Project",
+    "installGlobal": "Install to Global",
+    "installing": "Installing...",
+    "installSuccess": "CodexLens MCP installed successfully",
+    "installError": "Install failed"
  },
  "models": {
    "embedMode": "Current embed mode",
@@ -58,6 +65,11 @@
    "save": "Save",
    "saving": "Saving...",
    "clearForm": "Clear Form",
+    "mode": "Embed Mode",
+    "localMode": "Local fastembed",
+    "apiMode": "Remote API",
+    "localModeDesc": "Use local fastembed models, no external API required",
+    "apiModeDesc": "Use remote Embedding API (OpenAI-compatible)",
    "sections": {
      "embed": "Embed Config",
      "reranker": "Reranker Config",
--- a/ccw/frontend/src/locales/en/navigation.json
+++ b/ccw/frontend/src/locales/en/navigation.json
@@ -27,7 +27,7 @@
    "prompts": "Prompt History",
    "settings": "Settings",
    "mcp": "MCP Servers",
-    "codexlens": "Search Manager",
+    "codexlens": "CodexLens",
    "apiSettings": "API Settings",
    "endpoints": "CLI Endpoints",
    "installations": "Installations",
--- a/ccw/frontend/src/locales/zh/codexlens.json
+++ b/ccw/frontend/src/locales/zh/codexlens.json
@@ -30,7 +30,14 @@
      "step3": "将复制的 JSON 添加到 mcpServers 键下。",
      "step4": "保存配置文件并重启客户端。",
      "step5": "验证 CodexLens 服务器是否作为可用 MCP 工具出现。"
-    }
+    },
+    "quickInstallTitle": "快速安装",
+    "quickInstallDesc": "直接安装 CodexLens MCP 服务器到当前项目或全局配置",
+    "installProject": "安装到当前项目",
+    "installGlobal": "安装到全局",
+    "installing": "安装中...",
+    "installSuccess": "CodexLens MCP 安装成功",
+    "installError": "安装失败"
  },
  "models": {
    "embedMode": "当前嵌入模式",
@@ -61,6 +68,11 @@
    "save": "保存",
    "saving": "保存中...",
    "clearForm": "清空表单",
+    "mode": "嵌入模式",
+    "localMode": "本地 fastembed",
+    "apiMode": "远程 API",
+    "localModeDesc": "使用本地 fastembed 模型，无需外部 API",
+    "apiModeDesc": "使用远程 Embedding API（OpenAI 兼容）",
    "sections": {
      "embed": "嵌入配置",
      "reranker": "重排序配置",
--- a/ccw/frontend/src/locales/zh/navigation.json
+++ b/ccw/frontend/src/locales/zh/navigation.json
@@ -27,7 +27,7 @@
    "prompts": "提示历史",
    "settings": "设置",
    "mcp": "MCP 服务器",
-    "codexlens": "搜索管理",
+    "codexlens": "CodexLens",
    "apiSettings": "API 设置",
    "endpoints": "CLI 端点",
    "installations": "安装",