feat: Add indexing group to CodexLens environment variable schema

- Introduced a new `indexing` group in the environment variable schema with fields for AST grep usage, static graph enablement, and relationship types.
- Updated the CodexLens configuration to support new indexing features.

feat: Enhance DashboardToolbar with session and fullscreen controls

- Added props for session sidebar visibility and fullscreen mode to the DashboardToolbar component.
- Implemented handlers for toggling session sidebar and fullscreen mode.
- Updated the toolbar layout to include session sidebar toggle and fullscreen button.

refactor: Improve TerminalGrid and TerminalPane components

- Refactored GridGroupRenderer to handle pane size changes directly via store.
- Enhanced TerminalPane to remove unused file browser logic and improve layout handling.
- Updated key generation for child panes to ensure stability.

feat: Extend CodexLens API for staged Stage-2 expansion modes

- Added support for `staged_stage2_mode` in the CodexLens API, allowing for different expansion strategies.
- Updated semantic search handlers to process new stage-2 mode parameter.
- Implemented validation and handling for new stage-2 modes in the backend.

test: Add benchmarks for staged Stage-2 modes comparison

- Created a benchmark script to compare performance and results of different staged Stage-2 modes.
- Included metrics for latency, overlap, and diversity across modes.

Author: catlog22

ccw/frontend/src/components/codexlens/SearchTab.tsx

@@ -24,7 +24,12 @@ import {
   useCodexLensLspStatus,
   useCodexLensSemanticSearch,
 } from '@/hooks/useCodexLens';
-import type { CodexLensSearchParams, CodexLensSemanticSearchMode, CodexLensFusionStrategy } from '@/lib/api';
+import type {
+  CodexLensSearchParams,
+  CodexLensSemanticSearchMode,
+  CodexLensFusionStrategy,
+  CodexLensStagedStage2Mode,
+} from '@/lib/api';
 import { cn } from '@/lib/utils';
 
 type SearchType = 'search' | 'search_files' | 'symbol' | 'semantic';
@@ -40,6 +45,7 @@ export function SearchTab({ enabled }: SearchTabProps) {
   const [searchMode, setSearchMode] = useState<SearchMode>('dense_rerank');
   const [semanticMode, setSemanticMode] = useState<CodexLensSemanticSearchMode>('fusion');
   const [fusionStrategy, setFusionStrategy] = useState<CodexLensFusionStrategy>('rrf');
+  const [stagedStage2Mode, setStagedStage2Mode] = useState<CodexLensStagedStage2Mode>('precomputed');
   const [query, setQuery] = useState('');
   const [hasSearched, setHasSearched] = useState(false);
 
@@ -76,6 +82,7 @@ export function SearchTab({ enabled }: SearchTabProps) {
       query,
       mode: semanticMode,
       fusion_strategy: semanticMode === 'fusion' ? fusionStrategy : undefined,
+      staged_stage2_mode: semanticMode === 'fusion' && fusionStrategy === 'staged' ? stagedStage2Mode : undefined,
       limit: 20,
       include_match_reason: true,
     },
@@ -123,6 +130,11 @@ export function SearchTab({ enabled }: SearchTabProps) {
     setHasSearched(false);
   };
 
+  const handleStagedStage2ModeChange = (value: CodexLensStagedStage2Mode) => {
+    setStagedStage2Mode(value);
+    setHasSearched(false);
+  };
+
   const handleQueryChange = (value: string) => {
     setQuery(value);
     setHasSearched(false);
@@ -308,6 +320,29 @@ export function SearchTab({ enabled }: SearchTabProps) {
         </div>
       )}
 
+      {/* Staged Stage-2 Mode - only when semantic + fusion + staged */}
+      {searchType === 'semantic' && semanticMode === 'fusion' && fusionStrategy === 'staged' && (
+        <div className="space-y-2">
+          <Label>{formatMessage({ id: 'codexlens.search.stagedStage2Mode' })}</Label>
+          <Select value={stagedStage2Mode} onValueChange={handleStagedStage2ModeChange}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="precomputed">
+                {formatMessage({ id: 'codexlens.search.stagedStage2Mode.precomputed' })}
+              </SelectItem>
+              <SelectItem value="realtime">
+                {formatMessage({ id: 'codexlens.search.stagedStage2Mode.realtime' })}
+              </SelectItem>
+              <SelectItem value="static_global_graph">
+                {formatMessage({ id: 'codexlens.search.stagedStage2Mode.static_global_graph' })}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
       {/* Query Input */}
       <div className="space-y-2">
         <Label htmlFor="search-query">{formatMessage({ id: 'codexlens.search.query' })}</Label>

ccw/frontend/src/components/codexlens/envVarSchema.ts

@@ -2,7 +2,7 @@
 // CodexLens Environment Variable Schema
 // ========================================
 // TypeScript port of ENV_VAR_GROUPS from codexlens-manager.js
-// Defines the 5 structured groups: embedding, reranker, concurrency, cascade, chunking
+// Defines structured groups for CodexLens configuration
 
 import type { EnvVarGroupsSchema } from '@/types/codexlens';
 
@@ -306,6 +306,36 @@ export const envVarGroupsSchema: EnvVarGroupsSchema = {
       },
     },
   },
+  indexing: {
+    id: 'indexing',
+    labelKey: 'codexlens.envGroup.indexing',
+    icon: 'git-branch',
+    vars: {
+      CODEXLENS_USE_ASTGREP: {
+        key: 'CODEXLENS_USE_ASTGREP',
+        labelKey: 'codexlens.envField.useAstGrep',
+        type: 'checkbox',
+        default: 'false',
+        settingsPath: 'parsing.use_astgrep',
+      },
+      CODEXLENS_STATIC_GRAPH_ENABLED: {
+        key: 'CODEXLENS_STATIC_GRAPH_ENABLED',
+        labelKey: 'codexlens.envField.staticGraphEnabled',
+        type: 'checkbox',
+        default: 'false',
+        settingsPath: 'indexing.static_graph_enabled',
+      },
+      CODEXLENS_STATIC_GRAPH_RELATIONSHIP_TYPES: {
+        key: 'CODEXLENS_STATIC_GRAPH_RELATIONSHIP_TYPES',
+        labelKey: 'codexlens.envField.staticGraphRelationshipTypes',
+        type: 'text',
+        placeholder: 'imports,inherits,calls',
+        default: 'imports,inherits',
+        settingsPath: 'indexing.static_graph_relationship_types',
+        showWhen: (env) => env['CODEXLENS_STATIC_GRAPH_ENABLED'] === 'true',
+      },
+    },
+  },
   chunking: {
     id: 'chunking',
     labelKey: 'codexlens.envGroup.chunking',

ccw/frontend/src/components/terminal-dashboard/DashboardToolbar.tsx

@@ -21,6 +21,9 @@ import {
   Zap,
   Settings,
   Loader2,
+  Folder,
+  Maximize2,
+  Minimize2,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/Badge';
@@ -57,6 +60,14 @@ interface DashboardToolbarProps {
   isFileSidebarOpen?: boolean;
   /** Callback to toggle file sidebar */
   onToggleFileSidebar?: () => void;
+  /** Whether the session sidebar is open */
+  isSessionSidebarOpen?: boolean;
+  /** Callback to toggle session sidebar */
+  onToggleSessionSidebar?: () => void;
+  /** Whether fullscreen mode is active */
+  isFullscreen?: boolean;
+  /** Callback to toggle fullscreen mode */
+  onToggleFullscreen?: () => void;
 }
 
 // ========== Layout Presets ==========
@@ -83,7 +94,7 @@ const LAUNCH_COMMANDS: Record<CliTool, Record<LaunchMode, string>> = {
 
 // ========== Component ==========
 
-export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen, onToggleFileSidebar }: DashboardToolbarProps) {
+export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen, onToggleFileSidebar, isSessionSidebarOpen, onToggleSessionSidebar, isFullscreen, onToggleFullscreen }: DashboardToolbarProps) {
   const { formatMessage } = useIntl();
 
   // Issues count
@@ -117,17 +128,30 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
   // Launch CLI handlers
   const projectPath = useWorkflowStore(selectProjectPath);
   const focusedPaneId = useTerminalGridStore(selectTerminalGridFocusedPaneId);
+  const panes = useTerminalGridStore((s) => s.panes);
   const createSessionAndAssign = useTerminalGridStore((s) => s.createSessionAndAssign);
   const [isCreating, setIsCreating] = useState(false);
   const [selectedTool, setSelectedTool] = useState<CliTool>('gemini');
   const [launchMode, setLaunchMode] = useState<LaunchMode>('yolo');
   const [isConfigOpen, setIsConfigOpen] = useState(false);
 
+  // Helper to get or create a focused pane
+  const getOrCreateFocusedPane = useCallback(() => {
+    if (focusedPaneId) return focusedPaneId;
+    // No focused pane - reset layout to create a single pane
+    resetLayout('single');
+    // Get the new focused pane id from store
+    return useTerminalGridStore.getState().focusedPaneId;
+  }, [focusedPaneId]);
+
   const handleQuickCreate = useCallback(async () => {
-    if (!focusedPaneId || !projectPath) return;
+    if (!projectPath) return;
     setIsCreating(true);
     try {
-      const created = await createSessionAndAssign(focusedPaneId, {
+      const targetPaneId = getOrCreateFocusedPane();
+      if (!targetPaneId) return;
+
+      const created = await createSessionAndAssign(targetPaneId, {
         workingDir: projectPath,
         preferredShell: 'bash',
         tool: selectedTool,
@@ -146,18 +170,21 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
     } finally {
       setIsCreating(false);
     }
-  }, [focusedPaneId, projectPath, createSessionAndAssign, selectedTool, launchMode]);
+  }, [projectPath, createSessionAndAssign, selectedTool, launchMode, getOrCreateFocusedPane]);
 
   const handleConfigure = useCallback(() => {
     setIsConfigOpen(true);
   }, []);
 
   const handleCreateConfiguredSession = useCallback(async (config: CliSessionConfig) => {
-    if (!focusedPaneId || !projectPath) throw new Error('No focused pane or project path');
+    if (!projectPath) throw new Error('No project path');
     setIsCreating(true);
     try {
+      const targetPaneId = getOrCreateFocusedPane();
+      if (!targetPaneId) throw new Error('Failed to create pane');
+
       const created = await createSessionAndAssign(
-        focusedPaneId,
+        targetPaneId,
         {
           workingDir: config.workingDir || projectPath,
           preferredShell: config.preferredShell,
@@ -182,7 +209,7 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
     } finally {
       setIsCreating(false);
     }
-  }, [focusedPaneId, projectPath, createSessionAndAssign]);
+  }, [projectPath, createSessionAndAssign, getOrCreateFocusedPane]);
 
   return (
     <>
@@ -254,7 +281,7 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onClick={handleQuickCreate}
-              disabled={isCreating || !projectPath || !focusedPaneId}
+              disabled={isCreating || !projectPath}
               className="gap-2"
             >
               <Zap className="w-4 h-4" />
@@ -263,7 +290,7 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onClick={handleConfigure}
-              disabled={isCreating || !projectPath || !focusedPaneId}
+              disabled={isCreating || !projectPath}
               className="gap-2"
             >
               <Settings className="w-4 h-4" />
@@ -275,6 +302,17 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
         {/* Separator */}
         <div className="w-px h-5 bg-border mx-1" />
 
+        {/* Session sidebar toggle */}
+        <ToolbarButton
+          icon={Folder}
+          label={formatMessage({ id: 'terminalDashboard.toolbar.sessions', defaultMessage: 'Sessions' })}
+          isActive={isSessionSidebarOpen ?? true}
+          onClick={() => onToggleSessionSidebar?.()}
+        />
+
+        {/* Separator */}
+        <div className="w-px h-5 bg-border mx-1" />
+
         {/* Panel toggle buttons */}
         <ToolbarButton
           icon={AlertCircle}
@@ -322,6 +360,30 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
           </button>
         ))}
 
+        {/* Separator */}
+        <div className="w-px h-5 bg-border mx-1" />
+
+        {/* Fullscreen toggle */}
+        <button
+          onClick={onToggleFullscreen}
+          className={cn(
+            'p-1.5 rounded transition-colors',
+            isFullscreen
+              ? 'bg-primary/10 text-primary'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+          )}
+          title={isFullscreen
+            ? formatMessage({ id: 'terminalDashboard.toolbar.exitFullscreen', defaultMessage: 'Exit Fullscreen' })
+            : formatMessage({ id: 'terminalDashboard.toolbar.fullscreen', defaultMessage: 'Fullscreen' })
+          }
+        >
+          {isFullscreen ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+
         {/* Right-aligned title */}
         <span className="ml-auto text-xs text-muted-foreground font-medium">
           {formatMessage({ id: 'terminalDashboard.page.title' })}

ccw/frontend/src/components/terminal-dashboard/TerminalGrid.tsx

@@ -23,19 +23,20 @@ import { TerminalPane } from './TerminalPane';
 interface GridGroupRendererProps {
   group: AllotmentLayoutGroup;
   minSize: number;
-  onSizeChange: (sizes: number[]) => void;
+  depth?: number;
 }
 
 // ========== Recursive Group Renderer ==========
 
-function GridGroupRenderer({ group, minSize, onSizeChange }: GridGroupRendererProps) {
+function GridGroupRenderer({ group, minSize, depth = 0 }: GridGroupRendererProps) {
   const panes = useTerminalGridStore(selectTerminalGridPanes);
+  const updateLayoutSizes = useTerminalGridStore((s) => s.updateLayoutSizes);
 
   const handleChange = useCallback(
     (sizes: number[]) => {
-      onSizeChange(sizes);
+      updateLayoutSizes(sizes);
     },
-    [onSizeChange]
+    [updateLayoutSizes]
   );
 
   const validChildren = useMemo(() => {
@@ -51,22 +52,27 @@ function GridGroupRenderer({ group, minSize, onSizeChange }: GridGroupRendererPr
     return null;
   }
 
+  // Generate stable key based on children
+  const groupKey = useMemo(() => {
+    return validChildren.map(c => isPaneId(c) ? c : 'group').join('-');
+  }, [validChildren]);
+
   return (
     <Allotment
+      key={groupKey}
       vertical={group.direction === 'vertical'}
       defaultSizes={group.sizes}
       onChange={handleChange}
-      className="h-full"
     >
       {validChildren.map((child, index) => (
-        <Allotment.Pane key={isPaneId(child) ? child : `group-${index}`} minSize={minSize}>
+        <Allotment.Pane key={isPaneId(child) ? child : `group-${depth}-${index}`} minSize={minSize}>
           {isPaneId(child) ? (
             <TerminalPane paneId={child} />
           ) : (
             <GridGroupRenderer
               group={child}
               minSize={minSize}
-              onSizeChange={onSizeChange}
+              depth={depth + 1}
             />
           )}
         </Allotment.Pane>
@@ -80,14 +86,6 @@ function GridGroupRenderer({ group, minSize, onSizeChange }: GridGroupRendererPr
 export function TerminalGrid({ className }: { className?: string }) {
   const layout = useTerminalGridStore(selectTerminalGridLayout);
   const panes = useTerminalGridStore(selectTerminalGridPanes);
-  const updateLayoutSizes = useTerminalGridStore((s) => s.updateLayoutSizes);
-
-  const handleSizeChange = useCallback(
-    (sizes: number[]) => {
-      updateLayoutSizes(sizes);
-    },
-    [updateLayoutSizes]
-  );
 
   const content = useMemo(() => {
     if (!layout.children || layout.children.length === 0) {
@@ -105,10 +103,10 @@ export function TerminalGrid({ className }: { className?: string }) {
       <GridGroupRenderer
         group={layout}
         minSize={150}
-        onSizeChange={handleSizeChange}
+        depth={0}
       />
     );
-  }, [layout, panes, handleSizeChange]);
+  }, [layout, panes]);
 
   return (
     <div className={cn('h-full w-full overflow-hidden bg-background', className)}>