@gxp-dev/tools 2.0.12 → 2.0.14

package/bin/lib/commands/init.js

@@ -340,7 +340,8 @@ async function runInteractiveConfig(projectPath, initialName) {
 		console.log("   To enable AI scaffolding, set up one of:");
 		console.log("   • Claude CLI: npm install -g @anthropic-ai/claude-code && claude login");
 		console.log("   • Codex CLI: npm install -g @openai/codex && codex auth");
-		console.log("   • Gemini: export GEMINI_API_KEY=your_key or gcloud auth login");
+		console.log("   • Gemini CLI: npm install -g @google/gemini-cli && gemini");
+		console.log("   • Gemini API: export GEMINI_API_KEY=your_key");
 		console.log("");
 		aiChoice = "skip";
 	} else {
@@ -352,7 +353,19 @@ async function runInteractiveConfig(projectPath, initialName) {
 		for (const provider of availableProviders) {
 			let authInfo = "";
 			if (provider.id === "gemini") {
-				authInfo = provider.method === "api_key" ? "via API key" : "via gcloud";
+				switch (provider.method) {
+					case "cli":
+						authInfo = "logged in";
+						break;
+					case "api_key":
+						authInfo = "via API key";
+						break;
+					case "gcloud":
+						authInfo = "via gcloud";
+						break;
+					default:
+						authInfo = "";
+				}
 			} else {
 				authInfo = "logged in";
 			}

package/bin/lib/tui/App.tsx

@@ -137,16 +137,7 @@ export default function App({ autoStart, args }: AppProps) {
       return;
     }
 
-    // Tab to cycle through tabs (when not in input)
-    if (key.tab && services.length > 0) {
-      const nextTab = key.shift
-        ? (activeTab - 1 + services.length) % services.length
-        : (activeTab + 1) % services.length;
-      setActiveTab(nextTab);
-      return;
-    }
-
-    // Left/Right arrow to switch tabs
+    // Left/Right arrow to switch tabs (Tab is reserved for command autocomplete)
     if (key.leftArrow && services.length > 0) {
       setActiveTab((activeTab - 1 + services.length) % services.length);
       return;
@@ -156,7 +147,7 @@ export default function App({ autoStart, args }: AppProps) {
       return;
     }
 
-    // Ctrl+1-9 or Cmd+1-9 to switch tabs (for compatibility)
+    // Ctrl+1-9 or Cmd+1-9 to switch tabs directly
     if ((key.ctrl || key.meta) && /^[1-9]$/.test(input)) {
       const tabIndex = parseInt(input) - 1;
       if (tabIndex < services.length) {
@@ -530,11 +521,24 @@ export default function App({ autoStart, args }: AppProps) {
     addSystemLog('Scanning source files for GxP configuration...');
 
     try {
-      // Use require for CommonJS modules
-      const path = require('path');
-      const fs = require('fs');
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const extractConfigUtils = require('../utils/extract-config.js') as {
+      // Use dynamic imports for ES modules
+      const path = await import('path');
+      const fs = await import('fs');
+      const url = await import('url');
+      const { createRequire } = await import('module');
+
+      // Get the directory of this file and resolve to the utils directory
+      const __filename = url.fileURLToPath(import.meta.url);
+      const __dirname = path.dirname(__filename);
+
+      // The compiled JS is in dist/tui/, utils is in bin/lib/utils/
+      // From dist/tui/ we need to go up to package root, then into bin/lib/utils/
+      const packageRoot = path.resolve(__dirname, '..', '..');
+      const utilsPath = path.join(packageRoot, 'bin', 'lib', 'utils', 'extract-config.js');
+
+      // Create a require function to load CommonJS modules
+      const requireCjs = createRequire(import.meta.url);
+      const extractConfigUtils = requireCjs(utilsPath) as {
         extractConfigFromSource: (srcDir: string) => ExtractedConfig;
         mergeConfig: (existing: Record<string, unknown>, extracted: ExtractedConfig, options: { overwrite: boolean }) => Record<string, unknown>;
         generateSummary: (config: ExtractedConfig) => string;
@@ -616,43 +620,59 @@ export default function App({ autoStart, args }: AppProps) {
 
   const getHelpText = () => `
 Available commands:
-  /dev                  Start Vite (+ Socket if SOCKET_IO_ENABLED=true)
-  /dev --with-socket    Start Vite + Socket.IO together
-  /dev --with-mock      Start Vite + Socket.IO + Mock API server
-  /dev --no-socket      Start Vite only (skip Socket.IO)
-  /dev --no-https       Start Vite without SSL
-  /dev --firefox        Start Vite + Firefox extension
-  /dev --chrome         Start Vite + Chrome extension
-  /socket               Start Socket.IO server
-  /socket --with-mock   Start Socket.IO with Mock API enabled
-  /socket send <event>  Send socket event
-  /socket list          List available events
-  /mock                 Start Socket.IO + Mock API (shorthand)
-  /ext chrome           Launch Chrome extension
-  /ext firefox          Launch Firefox extension
-  /extract-config       Extract GxP config from source to manifest
-  /extract-config -d    Dry run (show what would be extracted)
-  /extract-config -o    Overwrite existing values in manifest
-  /stop [service]       Stop a running service
-  /restart [service]    Restart a service
-  /clear                Clear current log panel
-  /gemini               Open Gemini AI chat panel
-  /gemini enable        Set up Google authentication
-  /gemini ask <query>   Quick question to Gemini
-  /gemini status        Check authentication status
-  /gemini logout        Log out from Gemini
-  /help                 Show this help message
-  /quit                 Exit the application
+
+  Development Server:
+    /dev                  Start Vite dev server
+    /dev --with-socket    Start Vite + Socket.IO
+    /dev --with-mock      Start Vite + Socket.IO + Mock API
+    /dev --no-https       Start without SSL
+    /dev --no-socket      Start without Socket.IO
+    /dev --chrome         Start + launch Chrome extension
+    /dev --firefox        Start + launch Firefox extension
+
+  Socket.IO:
+    /socket               Start Socket.IO server
+    /socket --with-mock   Start with Mock API enabled
+    /socket send <event>  Send a socket event
+    /socket list          List available events
+    /mock                 Shorthand for /socket --with-mock
+
+  Browser Extensions:
+    /ext chrome           Launch Chrome with GxP extension
+    /ext firefox          Launch Firefox with GxP extension
+
+  Config Extraction:
+    /extract-config       Extract GxP config from source
+    /extract-config -d    Dry run (preview changes)
+    /extract-config -o    Overwrite existing values
+
+  AI Assistant:
+    /gemini               Open Gemini AI chat panel
+    /gemini enable        Set up Google authentication
+    /gemini ask <query>   Quick question to AI
+    /gemini status        Check auth status
+    /gemini logout        Log out from Gemini
+    /gemini clear         Clear conversation history
+    /ai                   Alias for /gemini
+
+  Service Management:
+    /stop [service]       Stop current or specified service
+    /restart [service]    Restart a service
+    /clear                Clear current log panel
+    /help                 Show this help
+    /quit                 Exit application
 
 Keyboard shortcuts:
-  Tab / Shift+Tab  Cycle through tabs
-  Left/Right       Switch tabs
-  Cmd+1/2/3...     Jump to tab (Mac)
-  Shift+Up/Down    Scroll logs
-  Cmd+Up/Down      Jump to top/bottom of logs
+  ←/→              Switch tabs
+  Ctrl+1/2/3...    Jump to tab directly
+  Shift+↑/↓        Scroll logs
+  Ctrl+↑/↓         Jump to top/bottom of logs
   Ctrl+L           Clear current log
+  Ctrl+K           Stop current service
   Ctrl+C           Exit application
-  Up/Down          Command history (in input)
+  Tab              Autocomplete command
+  ↑/↓              Navigate suggestions or command history
+  Esc              Clear input
 `;
 
   // Show Gemini panel

package/bin/lib/tui/components/CommandInput.tsx

@@ -1,29 +1,52 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 
-// Command definitions with descriptions
+// Command definitions with descriptions - comprehensive list
 const COMMANDS = [
-  { cmd: '/dev', args: '', desc: 'Start Vite (+ Socket if SOCKET_IO_ENABLED)' },
+  // Dev server commands
+  { cmd: '/dev', args: '', desc: 'Start Vite dev server' },
   { cmd: '/dev', args: '--with-socket', desc: 'Start Vite + Socket.IO' },
-  { cmd: '/dev', args: '--with-mock', desc: 'Start Vite + Socket.IO + Mock API server' },
-  { cmd: '/dev', args: '--firefox', desc: 'Start Vite + Firefox extension' },
-  { cmd: '/dev', args: '--chrome', desc: 'Start Vite + Chrome extension' },
-  { cmd: '/dev', args: '--no-socket', desc: 'Start Vite without Socket.IO' },
+  { cmd: '/dev', args: '--with-mock', desc: 'Start Vite + Socket.IO + Mock API' },
   { cmd: '/dev', args: '--no-https', desc: 'Start Vite without SSL' },
+  { cmd: '/dev', args: '--no-socket', desc: 'Start Vite without Socket.IO' },
+  { cmd: '/dev', args: '--chrome', desc: 'Start Vite + Chrome extension' },
+  { cmd: '/dev', args: '--firefox', desc: 'Start Vite + Firefox extension' },
+
+  // Socket commands
   { cmd: '/socket', args: '', desc: 'Start Socket.IO server' },
-  { cmd: '/socket', args: 'send <event>', desc: 'Send socket event' },
-  { cmd: '/socket', args: 'list', desc: 'List available events' },
-  { cmd: '/ext', args: 'chrome', desc: 'Launch Chrome extension' },
-  { cmd: '/ext', args: 'firefox', desc: 'Launch Firefox extension' },
-  { cmd: '/stop', args: '[service]', desc: 'Stop current/specified service' },
-  { cmd: '/restart', args: '[service]', desc: 'Restart current/specified service' },
+  { cmd: '/socket', args: '--with-mock', desc: 'Start Socket.IO + Mock API' },
+  { cmd: '/socket', args: 'send <event>', desc: 'Send a socket event' },
+  { cmd: '/socket', args: 'list', desc: 'List available socket events' },
+  { cmd: '/mock', args: '', desc: 'Start Socket.IO + Mock API (shorthand)' },
+
+  // Browser extension commands
+  { cmd: '/ext', args: 'chrome', desc: 'Launch Chrome with extension' },
+  { cmd: '/ext', args: 'firefox', desc: 'Launch Firefox with extension' },
+
+  // Service management
+  { cmd: '/stop', args: '[service]', desc: 'Stop current or specified service' },
+  { cmd: '/restart', args: '[service]', desc: 'Restart current or specified service' },
   { cmd: '/clear', args: '', desc: 'Clear current log panel' },
-  { cmd: '/gemini', args: '', desc: 'Open Gemini AI chat' },
-  { cmd: '/gemini', args: 'enable', desc: 'Set up Google auth' },
+
+  // Config extraction
+  { cmd: '/extract-config', args: '', desc: 'Extract GxP config from source' },
+  { cmd: '/extract-config', args: '--dry-run', desc: 'Preview config extraction' },
+  { cmd: '/extract-config', args: '--overwrite', desc: 'Overwrite existing config values' },
+
+  // AI commands
+  { cmd: '/gemini', args: '', desc: 'Open Gemini AI chat panel' },
+  { cmd: '/gemini', args: 'enable', desc: 'Set up Google authentication' },
   { cmd: '/gemini', args: 'ask <query>', desc: 'Quick AI question' },
+  { cmd: '/gemini', args: 'status', desc: 'Check AI auth status' },
+  { cmd: '/gemini', args: 'logout', desc: 'Log out from Gemini' },
+  { cmd: '/gemini', args: 'clear', desc: 'Clear conversation history' },
+  { cmd: '/ai', args: '', desc: 'Open Gemini AI chat (alias)' },
+
+  // General
   { cmd: '/help', args: '', desc: 'Show all commands' },
   { cmd: '/quit', args: '', desc: 'Exit application' },
+  { cmd: '/exit', args: '', desc: 'Exit application (alias)' },
 ];
 
 interface ActiveService {
@@ -39,16 +62,17 @@ interface CommandInputProps {
 }
 
 export default function CommandInput({ onSubmit, activeService, onSuggestionsChange }: CommandInputProps) {
-  const [value, setValue] = useState('');  // The actual typed value (for filtering)
-  const [displayValue, setDisplayValue] = useState('');  // What's shown in input (may differ when navigating)
-  const [isNavigating, setIsNavigating] = useState(false);  // Track if user is arrowing through suggestions
+  const [value, setValue] = useState('');
   const [history, setHistory] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
-  // Key to force TextInput remount when value is set programmatically (resets cursor)
-  const [inputKey, setInputKey] = useState(0);
 
-  // Filter commands based on the TYPED value (not display value)
+  // Use ref to track if we should skip the next onChange (after programmatic update)
+  const skipNextChange = useRef(false);
+  // Track previous suggestion count to avoid unnecessary parent updates
+  const prevSuggestionCount = useRef(0);
+
+  // Filter commands based on typed value
   const suggestions = useMemo(() => {
     if (!value.startsWith('/')) return [];
 
@@ -57,13 +81,13 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       const fullCmd = c.args ? `${c.cmd} ${c.args}` : c.cmd;
       return fullCmd.toLowerCase().includes(search) ||
              c.cmd.toLowerCase().startsWith(search);
-    });
+    }).slice(0, 8); // Limit to 8 suggestions for cleaner UI
   }, [value]);
 
   const showSuggestions = value.startsWith('/') && value.length >= 1 && suggestions.length > 0;
 
   // Helper to build full command string from suggestion
-  const buildFullCommand = (suggestion: typeof COMMANDS[0]): string => {
+  const buildFullCommand = useCallback((suggestion: typeof COMMANDS[0]): string => {
     if (suggestion.args) {
       const hasPlaceholder = suggestion.args.includes('<') || suggestion.args.includes('[');
       if (!hasPlaceholder) {
@@ -71,55 +95,43 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       }
     }
     return suggestion.cmd;
-  };
+  }, []);
 
-  // Notify parent when suggestions change (for layout adjustment)
+  // Notify parent when suggestions change (debounced to reduce flicker)
   useEffect(() => {
-    if (onSuggestionsChange) {
-      // +2 for border and help text row
-      onSuggestionsChange(showSuggestions ? suggestions.length + 2 : 0);
+    const count = showSuggestions ? suggestions.length + 2 : 0;
+    if (count !== prevSuggestionCount.current) {
+      prevSuggestionCount.current = count;
+      onSuggestionsChange?.(count);
     }
   }, [showSuggestions, suggestions.length, onSuggestionsChange]);
 
+  // Reset selected suggestion when suggestions change
+  useEffect(() => {
+    if (selectedSuggestion >= suggestions.length) {
+      setSelectedSuggestion(Math.max(0, suggestions.length - 1));
+    }
+  }, [suggestions.length, selectedSuggestion]);
+
   useInput((input, key) => {
-    // Tab to autocomplete selected suggestion (commits the selection)
+    // Tab to autocomplete selected suggestion
     if (key.tab && showSuggestions && suggestions[selectedSuggestion]) {
       const suggestion = suggestions[selectedSuggestion];
       const fullCmd = buildFullCommand(suggestion);
-      // Commit to both value and displayValue
+      skipNextChange.current = true;
       setValue(fullCmd);
-      setDisplayValue(fullCmd);
       setSelectedSuggestion(0);
-      setIsNavigating(false);
-      // Increment key to force TextInput remount (resets cursor to end)
-      setInputKey(k => k + 1);
       return;
     }
 
     // Up/Down to navigate suggestions when showing
     if (showSuggestions) {
       if (key.upArrow) {
-        const newIndex = Math.max(0, selectedSuggestion - 1);
-        setSelectedSuggestion(newIndex);
-        setIsNavigating(true);
-        // Update display value to show highlighted command
-        const suggestion = suggestions[newIndex];
-        if (suggestion) {
-          setDisplayValue(buildFullCommand(suggestion));
-          setInputKey(k => k + 1);
-        }
+        setSelectedSuggestion(prev => Math.max(0, prev - 1));
         return;
       }
       if (key.downArrow) {
-        const newIndex = Math.min(suggestions.length - 1, selectedSuggestion + 1);
-        setSelectedSuggestion(newIndex);
-        setIsNavigating(true);
-        // Update display value to show highlighted command
-        const suggestion = suggestions[newIndex];
-        if (suggestion) {
-          setDisplayValue(buildFullCommand(suggestion));
-          setInputKey(k => k + 1);
-        }
+        setSelectedSuggestion(prev => Math.min(suggestions.length - 1, prev + 1));
         return;
       }
     } else {
@@ -127,81 +139,75 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       if (key.upArrow && history.length > 0) {
         const newIndex = Math.min(historyIndex + 1, history.length - 1);
         setHistoryIndex(newIndex);
-        const histVal = history[history.length - 1 - newIndex] || '';
-        setValue(histVal);
-        setDisplayValue(histVal);
-        setInputKey(k => k + 1);
+        skipNextChange.current = true;
+        setValue(history[history.length - 1 - newIndex] || '');
         return;
       }
 
       if (key.downArrow) {
         const newIndex = Math.max(historyIndex - 1, -1);
         setHistoryIndex(newIndex);
+        skipNextChange.current = true;
         if (newIndex < 0) {
           setValue('');
-          setDisplayValue('');
         } else {
-          const histVal = history[history.length - 1 - newIndex] || '';
-          setValue(histVal);
-          setDisplayValue(histVal);
+          setValue(history[history.length - 1 - newIndex] || '');
         }
-        setInputKey(k => k + 1);
         return;
       }
     }
+
+    // Escape to clear input or close suggestions
+    if (key.escape) {
+      setValue('');
+      setSelectedSuggestion(0);
+      setHistoryIndex(-1);
+      return;
+    }
   });
 
-  const handleSubmit = (input: string) => {
+  const handleSubmit = useCallback((input: string) => {
     if (!input.trim()) return;
 
-    // Add to history
-    if (input.trim()) {
-      setHistory(prev => [...prev.filter(h => h !== input.trim()), input.trim()]);
-    }
+    // Add to history (avoid duplicates)
+    setHistory(prev => [...prev.filter(h => h !== input.trim()), input.trim()]);
 
     // Reset state
     setValue('');
-    setDisplayValue('');
     setHistoryIndex(-1);
     setSelectedSuggestion(0);
-    setIsNavigating(false);
 
     // Call handler
     onSubmit(input);
-  };
+  }, [onSubmit]);
 
   // Handle text input changes
-  const handleChange = (v: string) => {
-    // User typed something, reset navigation state
+  const handleChange = useCallback((v: string) => {
+    if (skipNextChange.current) {
+      skipNextChange.current = false;
+      return;
+    }
     setValue(v);
-    setDisplayValue(v);
     setSelectedSuggestion(0);
-    setIsNavigating(false);
-  };
+  }, []);
 
   // Get context-specific hints for current tab
-  const getHints = (): string[] => {
-    const hints: string[] = [];
+  const hints = useMemo((): string[] => {
+    const h: string[] = [];
 
     if (activeService) {
       const isRunning = activeService.status === 'running' || activeService.status === 'starting';
-      if (isRunning) {
-        hints.push(`Ctrl+K stop ${activeService.name}`);
-        hints.push(`/restart to restart`);
-      }
-      if (activeService.id === 'vite') {
-        hints.push('r to refresh browser');
+      if (isRunning && activeService.id !== 'system') {
+        h.push(`Ctrl+K stop`);
       }
     }
 
-    hints.push('Ctrl+L clear logs');
-    hints.push('Tab/Arrow switch tabs');
-    hints.push('Ctrl+C quit');
-
-    return hints;
-  };
+    h.push('Ctrl+L clear');
+    h.push('←/→ tabs');
+    h.push('Esc cancel');
 
-  const hints = getHints();
+    return h;
+  }, [activeService]);
 
   return (
     <Box flexDirection="column">
@@ -239,8 +245,8 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
               </Text>
             </Box>
           ))}
-          <Box paddingX={1} borderStyle={undefined}>
-            <Text dimColor>Tab to complete · Up/Down to select</Text>
+          <Box paddingX={1}>
+            <Text dimColor>Tab complete · ↑↓ select · Esc cancel</Text>
           </Box>
         </Box>
       )}
@@ -254,10 +260,9 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
         <Text color="cyan" bold>&gt;</Text>
         <Text> </Text>
         <TextInput
-          key={inputKey}
-          value={displayValue}
+          value={value}
           onChange={handleChange}
-          onSubmit={() => handleSubmit(displayValue.startsWith('/') ? displayValue : '/' + displayValue)}
+          onSubmit={() => handleSubmit(value.startsWith('/') ? value : '/' + value)}
           placeholder="Type / to run a command..."
         />
       </Box>
@@ -265,7 +270,7 @@ export default function CommandInput({ onSubmit, activeService, onSuggestionsCha
       {/* Hints bar (below input) */}
       <Box paddingX={1} justifyContent="space-between">
         <Box>
-          {hints.slice(0, 4).map((hint, index) => (
+          {hints.map((hint, index) => (
             <React.Fragment key={hint}>
               {index > 0 && <Text color="gray"> · </Text>}
               <Text dimColor>{hint}</Text>

package/bin/lib/tui/components/LogPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import { Box, Text, useStdout, useInput } from 'ink';
 
 interface LogPanelProps {
@@ -7,15 +7,25 @@ interface LogPanelProps {
   maxHeight?: number; // Maximum height in rows (from parent container)
 }
 
-export default function LogPanel({ logs, isActive = true, maxHeight }: LogPanelProps) {
+// Memoized log line component to prevent unnecessary re-renders
+const LogLine = memo(({ log, index }: { log: string; index: number }) => (
+  <Text key={index} wrap="wrap">
+    {formatLog(log)}
+  </Text>
+));
+LogLine.displayName = 'LogLine';
+
+function LogPanel({ logs, isActive = true, maxHeight }: LogPanelProps) {
   const { stdout } = useStdout();
   const [scrollOffset, setScrollOffset] = useState(0);
   const [autoScroll, setAutoScroll] = useState(true);
 
   // Calculate visible lines based on provided maxHeight or terminal height
   // Subtract 2 for padding, 2 for border
-  const defaultMaxLines = stdout ? Math.max(5, stdout.rows - 10) : 15;
-  const maxLines = maxHeight ? Math.max(3, maxHeight - 4) : defaultMaxLines;
+  const maxLines = useMemo(() => {
+    const defaultMaxLines = stdout ? Math.max(5, stdout.rows - 10) : 15;
+    return maxHeight ? Math.max(3, maxHeight - 4) : defaultMaxLines;
+  }, [stdout?.rows, maxHeight]);
 
   // Reset scroll when logs are cleared
   useEffect(() => {
@@ -23,7 +33,7 @@ export default function LogPanel({ logs, isActive = true, maxHeight }: LogPanelP
       setScrollOffset(0);
       setAutoScroll(true);
     }
-  }, [logs.length === 0]);
+  }, [logs.length]);
 
   // Auto-scroll to bottom when new logs arrive (if autoScroll is enabled)
   useEffect(() => {
@@ -70,15 +80,18 @@ export default function LogPanel({ logs, isActive = true, maxHeight }: LogPanelP
     }
   });
 
-  // Calculate visible logs with scroll offset
-  const totalLogs = logs.length;
-  const startIndex = Math.max(0, totalLogs - maxLines - scrollOffset);
-  const endIndex = Math.max(0, totalLogs - scrollOffset);
-  const visibleLogs = logs.slice(startIndex, endIndex);
-
-  // Show scroll indicator
-  const canScrollUp = startIndex > 0;
-  const canScrollDown = scrollOffset > 0;
+  // Calculate visible logs with scroll offset - memoized
+  const { visibleLogs, startIndex, canScrollUp, canScrollDown } = useMemo(() => {
+    const totalLogs = logs.length;
+    const start = Math.max(0, totalLogs - maxLines - scrollOffset);
+    const end = Math.max(0, totalLogs - scrollOffset);
+    return {
+      visibleLogs: logs.slice(start, end),
+      startIndex: start,
+      canScrollUp: start > 0,
+      canScrollDown: scrollOffset > 0,
+    };
+  }, [logs, maxLines, scrollOffset]);
 
   return (
     <Box flexDirection="column" padding={1} flexGrow={1} overflow="hidden">
@@ -89,9 +102,7 @@ export default function LogPanel({ logs, isActive = true, maxHeight }: LogPanelP
         <Text color="gray" dimColor>No logs yet...</Text>
       ) : (
         visibleLogs.map((log, index) => (
-          <Text key={startIndex + index} wrap="wrap">
-            {formatLog(log)}
-          </Text>
+          <LogLine key={startIndex + index} log={log} index={startIndex + index} />
         ))
       )}
       {canScrollDown && (
@@ -120,3 +131,5 @@ function formatLog(log: string): React.ReactNode {
   }
   return <Text>{log}</Text>;
 }
+
+export default memo(LogPanel);

package/bin/lib/tui/components/TabBar.tsx

@@ -49,7 +49,7 @@ export default function TabBar({ services, activeTab, onTabChange }: TabBarProps
         })}
       </Box>
       <Box>
-        <Text color="gray">Tab/←→ switch tabs</Text>
+        <Text color="gray">←/→ switch tabs</Text>
       </Box>
     </Box>
   );

package/bin/lib/tui/services/ExtensionService.ts

@@ -20,6 +20,37 @@ function getToolkitRoot(): string {
   return path.resolve(__dirname, '..', '..', '..');
 }
 
+/**
+ * Generate extension defaults based on environment variables
+ * This creates a defaults.json file that the popup.js reads on load
+ */
+function generateExtensionDefaults(extensionPath: string, useHttps: boolean, port: number | string): void {
+  const protocol = useHttps ? 'https' : 'http';
+  const baseUrl = `${protocol}://localhost:${port}`;
+
+  const defaults = {
+    // Extension should be enabled by default when launched from CLI
+    enabled: true,
+    // JS redirect URL based on env
+    jsRedirectUrl: `${baseUrl}/src/Plugin.vue`,
+    // CSS redirect URL (empty by default, uses blank CSS)
+    cssRedirectUrl: '',
+    // CSS override should be enabled by default
+    cssRuleEnabled: true,
+    // Return blank CSS by default
+    cssReturnBlank: true,
+    // Use custom URL pattern by default
+    jsUseCustomPattern: true,
+    cssUseCustomPattern: true,
+    // Cache settings
+    clearCacheOnEnable: true,
+    disableCacheForRedirects: true,
+  };
+
+  const defaultsPath = path.join(extensionPath, 'defaults.json');
+  fs.writeFileSync(defaultsPath, JSON.stringify(defaults, null, 2));
+}
+
 // Find the extension path (project-local or toolkit built-in)
 function findExtensionPath(browser: BrowserType, cwd: string): string | null {
   // Check local project first
@@ -64,6 +95,9 @@ export function startExtension(options: ExtensionOptions): void {
     return;
   }
 
+  // Generate defaults.json for the extension based on environment
+  generateExtensionDefaults(extensionPath, useHttps, port);
+
   if (browser === 'firefox') {
     const config: ServiceConfig = {
       id: serviceId,