@gxp-dev/tools 2.0.11 → 2.0.13

package/bin/lib/tui/App.tsx

@@ -30,6 +30,14 @@ export interface Service {
   logs: string[];
 }
 
+interface ExtractedConfig {
+  strings: Record<string, string>;
+  settings: Record<string, unknown>;
+  assets: Record<string, string>;
+  triggerState: Record<string, unknown>;
+  dependencies: Array<{ identifier: string; path: string; events?: Record<string, string> }>;
+}
+
 export interface AppProps {
   autoStart?: string[];
   args?: Record<string, unknown>;
@@ -129,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;
@@ -148,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) {
@@ -232,6 +231,11 @@ export default function App({ autoStart, args }: AppProps) {
         handleGeminiCommand(cmdArgs);
         break;
 
+      case 'extract-config':
+      case 'extract':
+        handleExtractConfig(cmdArgs);
+        break;
+
       default:
         addSystemLog(`Unknown command: ${command}. Type /help for available commands.`);
     }
@@ -510,42 +514,155 @@ export default function App({ autoStart, args }: AppProps) {
     addSystemLog(message);
   };
 
+  const handleExtractConfig = async (cmdArgs: string[]) => {
+    const dryRun = cmdArgs.includes('--dry-run') || cmdArgs.includes('-d');
+    const overwrite = cmdArgs.includes('--overwrite') || cmdArgs.includes('-o');
+
+    addSystemLog('Scanning source files for GxP configuration...');
+
+    try {
+      // Use dynamic imports for ES modules
+      const path = await import('path');
+      const fs = await import('fs');
+      const { createRequire } = await import('module');
+
+      // Create a require function to load CommonJS modules
+      const require = createRequire(import.meta.url);
+      const extractConfigUtils = require('../utils/extract-config.js') as {
+        extractConfigFromSource: (srcDir: string) => ExtractedConfig;
+        mergeConfig: (existing: Record<string, unknown>, extracted: ExtractedConfig, options: { overwrite: boolean }) => Record<string, unknown>;
+        generateSummary: (config: ExtractedConfig) => string;
+      };
+
+      const projectPath = process.cwd();
+      const srcDir = path.join(projectPath, 'src');
+      const manifestPath = path.join(projectPath, 'app-manifest.json');
+
+      // Check if src directory exists
+      if (!fs.existsSync(srcDir)) {
+        addSystemLog('Source directory not found: src/');
+        return;
+      }
+
+      // Extract configuration
+      const extractedConfig = extractConfigUtils.extractConfigFromSource(srcDir);
+      const summary = extractConfigUtils.generateSummary(extractedConfig);
+      addSystemLog(summary);
+
+      // Count total items
+      const totalItems =
+        Object.keys(extractedConfig.strings).length +
+        Object.keys(extractedConfig.settings).length +
+        Object.keys(extractedConfig.assets).length +
+        Object.keys(extractedConfig.triggerState).length +
+        extractedConfig.dependencies.length;
+
+      if (totalItems === 0) {
+        addSystemLog('No GxP configuration found in source files.');
+        return;
+      }
+
+      if (dryRun) {
+        addSystemLog('Dry run mode - no changes made.');
+        addSystemLog('Run /extract-config without --dry-run to apply changes.');
+        return;
+      }
+
+      // Load or create manifest
+      let existingManifest: Record<string, unknown> = {};
+      if (fs.existsSync(manifestPath)) {
+        try {
+          existingManifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+        } catch {
+          addSystemLog('Could not parse existing manifest, creating new one.');
+          existingManifest = getDefaultManifest();
+        }
+      } else {
+        addSystemLog('Creating new app-manifest.json');
+        existingManifest = getDefaultManifest();
+      }
+
+      // Merge and write
+      const mergedManifest = extractConfigUtils.mergeConfig(existingManifest, extractedConfig, { overwrite });
+      fs.writeFileSync(manifestPath, JSON.stringify(mergedManifest, null, '\t'));
+      addSystemLog('Updated app-manifest.json');
+    } catch (err) {
+      addSystemLog(`Error: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    }
+  };
+
+  const getDefaultManifest = () => ({
+    name: 'GxToolkit',
+    version: '1.0.0',
+    description: 'GxToolkit Plugin',
+    manifest_version: 3,
+    asset_dir: '/src/assets/',
+    configurationFile: 'configuration.json',
+    appInstructionsFile: 'app-instructions.md',
+    defaultStylingFile: 'default-styling.css',
+    settings: {},
+    strings: { default: {} },
+    assets: {},
+    triggerState: {},
+    dependencies: [],
+    permissions: [],
+  });
+
   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
-  /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>
   );