From d21066c282b5d45d26451a582094f3fd24118457 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Tue, 16 Dec 2025 20:29:28 +0800 Subject: [PATCH] Add scripts for inspecting LLM summaries and testing misleading comments - Implement `inspect_llm_summaries.py` to display LLM-generated summaries from the semantic_chunks table in the database. - Create `show_llm_analysis.py` to demonstrate LLM analysis of misleading code examples, highlighting discrepancies between comments and actual functionality. - Develop `test_misleading_comments.py` to compare pure vector search with LLM-enhanced search, focusing on the impact of misleading or missing comments on search results. - Introduce `test_llm_enhanced_search.py` to provide a test suite for evaluating the effectiveness of LLM-enhanced vector search against pure vector search. - Ensure all new scripts are integrated with the existing codebase and follow the established coding standards. --- ccw/src/core/server.ts | 3 +- .../dashboard-css/15-mcp-manager.css | 365 +++++++++++- .../dashboard-js/views/graph-explorer.js | 31 +- .../dashboard-js/views/mcp-manager.js | 84 +-- codex-lens/docs/IMPLEMENTATION_SUMMARY.md | 47 ++ codex-lens/docs/LLM_ENHANCED_SEARCH_GUIDE.md | 463 +++++++++++++++ .../docs/LLM_ENHANCEMENT_TEST_RESULTS.md | 232 ++++++++ .../docs/MISLEADING_COMMENTS_TEST_RESULTS.md | 301 ++++++++++ codex-lens/misleading_test.db | Bin 0 -> 163840 bytes codex-lens/scripts/compare_search_methods.py | 465 +++++++++++++++ codex-lens/scripts/inspect_llm_summaries.py | 88 +++ codex-lens/scripts/show_llm_analysis.py | 112 ++++ .../scripts/test_misleading_comments.py | 491 ++++++++++++++++ codex-lens/tests/test_llm_enhanced_search.py | 545 ++++++++++++++++++ 14 files changed, 3170 insertions(+), 57 deletions(-) create mode 100644 codex-lens/docs/LLM_ENHANCED_SEARCH_GUIDE.md create mode 100644 codex-lens/docs/LLM_ENHANCEMENT_TEST_RESULTS.md create mode 100644 codex-lens/docs/MISLEADING_COMMENTS_TEST_RESULTS.md create mode 100644 codex-lens/misleading_test.db create mode 100644 codex-lens/scripts/compare_search_methods.py create mode 100644 codex-lens/scripts/inspect_llm_summaries.py create mode 100644 codex-lens/scripts/show_llm_analysis.py create mode 100644 codex-lens/scripts/test_misleading_comments.py create mode 100644 codex-lens/tests/test_llm_enhanced_search.py diff --git a/ccw/src/core/server.ts b/ccw/src/core/server.ts index 88301984..00d2b635 100644 --- a/ccw/src/core/server.ts +++ b/ccw/src/core/server.ts @@ -64,7 +64,8 @@ const MODULE_CSS_FILES = [ '11-prompt-history.css', '12-skills-rules.css', '13-claude-manager.css', - '14-graph-explorer.css' + '14-graph-explorer.css', + '15-mcp-manager.css' ]; // Modular JS files in dependency order diff --git a/ccw/src/templates/dashboard-css/15-mcp-manager.css b/ccw/src/templates/dashboard-css/15-mcp-manager.css index 3b907e9d..c256a4f2 100644 --- a/ccw/src/templates/dashboard-css/15-mcp-manager.css +++ b/ccw/src/templates/dashboard-css/15-mcp-manager.css @@ -2,7 +2,187 @@ MCP MANAGER - ORANGE THEME ENHANCEMENTS ========================================== */ -/* MCP CLI Mode Toggle - Orange for Codex */ +/* ========================================== + BASIC BUTTON STYLES + ========================================== */ + +/* Primary buttons (blue) */ +.bg-primary { + background-color: hsl(221.2, 83.2%, 53.3%); + color: white; +} + +.bg-primary:hover { + background-color: hsl(221.2, 83.2%, 45%); +} + +.dark .bg-primary { + background-color: hsl(217.2, 91.2%, 59.8%); +} + +.dark .bg-primary:hover { + background-color: hsl(217.2, 91.2%, 65%); +} + +/* Success buttons (green) */ +.bg-success { + background-color: hsl(142.1, 76.2%, 36.3%); + color: white; +} + +.bg-success:hover { + background-color: hsl(142.1, 76.2%, 30%); +} + +.dark .bg-success { + background-color: hsl(142.1, 70.6%, 45.3%); +} + +.dark .bg-success:hover { + background-color: hsl(142.1, 70.6%, 50%); +} + +/* Destructive buttons (red) */ +.bg-destructive { + background-color: hsl(0, 84.2%, 60.2%); + color: white; +} + +.bg-destructive:hover { + background-color: hsl(0, 84.2%, 50%); +} + +.dark .bg-destructive { + background-color: hsl(0, 62.8%, 30.6%); +} + +.dark .bg-destructive:hover { + background-color: hsl(0, 62.8%, 40%); +} + +/* Secondary buttons (gray) */ +.bg-secondary { + background-color: hsl(210, 40%, 96.1%); + color: hsl(222.2, 47.4%, 11.2%); +} + +.bg-secondary:hover { + background-color: hsl(210, 40%, 90%); +} + +.dark .bg-secondary { + background-color: hsl(217.2, 32.6%, 17.5%); + color: hsl(210, 40%, 98%); +} + +.dark .bg-secondary:hover { + background-color: hsl(217.2, 32.6%, 22%); +} + +/* Muted/Ghost buttons */ +.bg-muted { + background-color: hsl(210, 40%, 96.1%); + color: hsl(215.4, 16.3%, 46.9%); +} + +.bg-muted:hover { + background-color: hsl(210, 40%, 90%); +} + +.dark .bg-muted { + background-color: hsl(217.2, 32.6%, 17.5%); + color: hsl(215, 20.2%, 65.1%); +} + +.dark .bg-muted:hover { + background-color: hsl(217.2, 32.6%, 22%); +} + +/* Button base styles */ +button { + cursor: pointer; + transition: all 0.2s ease; + border: none; + border-radius: 0.375rem; + padding: 0.5rem 1rem; + font-weight: 500; + font-size: 0.875rem; +} + +button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +button:focus-visible { + outline: 2px solid hsl(221.2, 83.2%, 53.3%); + outline-offset: 2px; +} + +/* Icon buttons */ +button.icon-btn { + padding: 0.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2rem; + min-height: 2rem; +} + +/* ========================================== + CLAUDE (ORANGE) & CODEX (GREEN) THEMES + ========================================== */ + +/* Claude Orange Colors */ +.text-claude { + color: #f97316; +} + +.bg-claude { + background-color: #f97316; + color: white; +} + +.bg-claude:hover { + background-color: #ea580c; +} + +.border-claude { + border-color: #f97316; +} + +/* Codex Green Colors */ +.text-codex { + color: #22c55e; +} + +.bg-codex { + background-color: #22c55e; + color: white; +} + +.bg-codex:hover { + background-color: #16a34a; +} + +.border-codex { + border-color: #22c55e; +} + +/* Dark mode adjustments */ +.dark .text-claude { + color: #fb923c; +} + +.dark .text-codex { + color: #4ade80; +} + +/* ========================================== + ORANGE THEME ENHANCEMENTS (CLAUDE) + ========================================== */ + +/* MCP CLI Mode Toggle - Orange for Claude */ .mcp-cli-toggle .cli-mode-btn { position: relative; overflow: hidden; @@ -373,3 +553,186 @@ .mcp-section .flex.items-center.gap-3 button:hover::before { transform: translateX(100%); } + +/* ========================================== + GREEN THEME ENHANCEMENTS (CODEX) + ========================================== */ + +/* Codex green colors palette */ +.bg-green-500 { + background-color: #22c55e; +} + +.text-green-500 { + color: #22c55e; +} + +.text-green-600 { + color: #16a34a; +} + +.text-green-700 { + color: #15803d; +} + +.text-green-800 { + color: #166534; +} + +.bg-green-50 { + background-color: #f0fdf4; +} + +.bg-green-100 { + background-color: #dcfce7; +} + +.border-green-200 { + border-color: #bbf7d0; +} + +.border-green-500\/20 { + border-color: rgba(34, 197, 94, 0.2); +} + +.border-green-500\/30 { + border-color: rgba(34, 197, 94, 0.3); +} + +.border-green-800 { + border-color: #166534; +} + +/* Dark mode green colors */ +.dark .bg-green-50 { + background-color: rgba(34, 197, 94, 0.05); +} + +.dark .bg-green-100 { + background-color: rgba(34, 197, 94, 0.1); +} + +.dark .bg-green-900\/30 { + background-color: rgba(20, 83, 45, 0.3); +} + +.dark .text-green-200 { + color: #bbf7d0; +} + +.dark .text-green-300 { + color: #86efac; +} + +.dark .text-green-400 { + color: #4ade80; +} + +.dark .border-green-800 { + border-color: #166534; +} + +.dark .border-green-950\/30 { + background-color: rgba(5, 46, 22, 0.3); +} + +/* Codex MCP Server Cards - Green Borders */ +.mcp-server-card[data-cli-type="codex-green"] { + border-left: 3px solid #22c55e; + transition: all 0.3s ease; +} + +.mcp-server-card[data-cli-type="codex-green"]:hover { + border-left-width: 4px; + box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15); +} + +/* Toggle switches - Green for Codex */ +.mcp-toggle input:checked + div.peer-checked\:bg-green-500 { + background: #22c55e; +} + +/* Installation buttons - Enhanced Green */ +.bg-green-500:hover { + background-color: #16a34a; + box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); +} + +/* Info panels - Green accent */ +.bg-green-50.dark\:bg-green-950\/30 { + border-left: 3px solid #22c55e; +} + +/* Codex section headers - Green gradient */ +.text-green-500 svg { + filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3)); +} + +.mcp-section h3.text-green-500 { + background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 700; +} + +/* Animated pulse for Codex servers */ +.border-green-500\/30 { + animation: greenPulse 2s ease-in-out infinite; +} + +@keyframes greenPulse { + 0%, 100% { + border-color: rgba(34, 197, 94, 0.3); + box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); + } + 50% { + border-color: rgba(34, 197, 94, 0.6); + box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); + } +} + +/* Green button hover effects */ +.bg-green-500.rounded-lg { + position: relative; + overflow: hidden; +} + +.bg-green-500.rounded-lg::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + transform: translate(-50%, -50%); + transition: width 0.3s, height 0.3s; +} + +.bg-green-500.rounded-lg:active::after { + width: 200px; + height: 200px; +} + +/* Green-themed success badges */ +.bg-green-100 { + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Loading states with green */ +@keyframes greenGlow { + 0%, 100% { + box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); + } + 50% { + box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); + } +} + +.loading-green { + animation: greenGlow 1.5s ease-in-out infinite; +} diff --git a/ccw/src/templates/dashboard-js/views/graph-explorer.js b/ccw/src/templates/dashboard-js/views/graph-explorer.js index 16cf36a3..917947b2 100644 --- a/ccw/src/templates/dashboard-js/views/graph-explorer.js +++ b/ccw/src/templates/dashboard-js/views/graph-explorer.js @@ -306,17 +306,17 @@ function initializeCytoscape() { style: getCytoscapeStyles(), layout: { name: 'cose', - idealEdgeLength: 100, - nodeOverlap: 20, + idealEdgeLength: 180, + nodeOverlap: 50, refresh: 20, fit: true, - padding: 30, + padding: 50, randomize: false, - componentSpacing: 100, - nodeRepulsion: 400000, + componentSpacing: 150, + nodeRepulsion: 600000, edgeElasticity: 100, nestingFactor: 5, - gravity: 80, + gravity: 60, numIter: 1000, initialTemp: 200, coolingFactor: 0.95, @@ -412,18 +412,18 @@ function getCytoscapeStyles() { 'label': 'data(label)', 'width': function(ele) { var refs = ele.data('references') || 0; - return Math.max(20, Math.min(60, 20 + refs * 2)); + return Math.max(16, Math.min(48, 16 + refs * 1.5)); }, 'height': function(ele) { var refs = ele.data('references') || 0; - return Math.max(20, Math.min(60, 20 + refs * 2)); + return Math.max(16, Math.min(48, 16 + refs * 1.5)); }, 'text-valign': 'center', 'text-halign': 'center', - 'font-size': '10px', + 'font-size': '8px', 'color': '#000', 'text-outline-color': '#fff', - 'text-outline-width': 2, + 'text-outline-width': 1.5, 'overlay-padding': 6 } }, @@ -612,11 +612,14 @@ function refreshCytoscape() { cyInstance.add(elements); cyInstance.layout({ name: 'cose', - idealEdgeLength: 100, - nodeOverlap: 20, + idealEdgeLength: 180, + nodeOverlap: 50, refresh: 20, fit: true, - padding: 30 + padding: 50, + componentSpacing: 150, + nodeRepulsion: 600000, + gravity: 60 }).run(); deselectNode(); @@ -625,7 +628,7 @@ function refreshCytoscape() { // ========== Cytoscape Controls ========== function fitCytoscape() { if (cyInstance) { - cyInstance.fit(null, 30); + cyInstance.fit(null, 50); } } diff --git a/ccw/src/templates/dashboard-js/views/mcp-manager.js b/ccw/src/templates/dashboard-js/views/mcp-manager.js index 15d636bb..d868883e 100644 --- a/ccw/src/templates/dashboard-js/views/mcp-manager.js +++ b/ccw/src/templates/dashboard-js/views/mcp-manager.js @@ -193,23 +193,23 @@ async function renderMcpManager() { ${currentCliMode === 'codex' ? `
-
+
-
+

CCW Tools MCP

- Codex + Codex ${codexMcpServers && codexMcpServers['ccw-tools'] ? ` ${enabledToolsCodex.length} tools ` : ` - + ${t('mcp.available')} @@ -228,14 +228,14 @@ async function renderMcpManager() { `).join('')}
- - + +
- @@ -273,12 +273,12 @@ async function renderMcpManager() {
-
+
- +
-

${t('mcp.codex.infoTitle')}

-

${t('mcp.codex.infoDesc')}

+

${t('mcp.codex.infoTitle')}

+

${t('mcp.codex.infoDesc')}

@@ -321,7 +321,7 @@ async function renderMcpManager() { ${alreadyInCodex ? `${t('mcp.codex.alreadyAdded')}` : ''}
${!alreadyInCodex ? ` - - + +
${isCcwToolsInstalled ? ` - ` : ` -
-