From 29f938dcc1f84f9b478a817c412e9ad0663ddd4a Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sat, 12 Jul 2025 22:11:30 +0200 Subject: [PATCH] Terminal theme improvements (#332) Co-authored-by: Claude --- CLAUDE.md | 1 + apple/docs/swift-testing-playbook.md | 289 ++++++++++++++ mac/VibeTunnel/Core/Models/AppConstants.swift | 76 ++-- mac/VibeTunnel/Core/Services/BunServer.swift | 10 + .../Utilities/TerminalLauncher.swift | 8 +- web/CLAUDE.md | 10 +- web/src/client/app.ts | 14 +- web/src/client/components/session-card.ts | 39 ++ web/src/client/components/session-view.ts | 119 +++--- .../components/session-view/width-selector.ts | 362 ++++++++++++------ web/src/client/components/sidebar-header.ts | 2 +- web/src/client/components/terminal.ts | 102 ++++- web/src/client/components/unified-settings.ts | 8 +- .../client/components/vibe-terminal-buffer.ts | 24 +- web/src/client/styles.css | 18 +- web/src/client/utils/monaco-loader.ts | 7 +- web/src/client/utils/terminal-preferences.ts | 10 +- web/src/client/utils/terminal-themes.ts | 6 + web/src/client/utils/theme-utils.ts | 77 ++++ web/src/client/utils/title-manager.ts | 106 +++++ web/src/client/utils/title-updater.ts | 108 ------ web/src/server/server.ts | 34 +- web/src/server/utils/activity-detector.ts | 2 +- web/src/test/e2e/logs-api.e2e.test.ts | 18 +- web/src/test/unit/terminal-themes.test.ts | 51 +++ web/src/test/utils/activity-detector.test.ts | 4 + 26 files changed, 1124 insertions(+), 381 deletions(-) create mode 100644 web/src/client/utils/theme-utils.ts create mode 100644 web/src/client/utils/title-manager.ts delete mode 100644 web/src/client/utils/title-updater.ts create mode 100644 web/src/test/unit/terminal-themes.test.ts diff --git a/CLAUDE.md b/CLAUDE.md index eb37c0f3..deafc462 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -52,6 +52,7 @@ When the user says "release" or asks to create a release, ALWAYS read and follow - PRs sometimes contain multiple different features and that's okay - Always check current branch with `git branch` before making changes - If unsure about branching, ASK THE USER FIRST +- **"Adopt" means REVIEW, not merge!** When asked to "adopt" a PR, switch to its branch and review the changes. NEVER merge without explicit permission. ### Terminal Title Management with VT diff --git a/apple/docs/swift-testing-playbook.md b/apple/docs/swift-testing-playbook.md index 9ab6ecd9..040849d7 100644 --- a/apple/docs/swift-testing-playbook.md +++ b/apple/docs/swift-testing-playbook.md @@ -441,6 +441,295 @@ Continue using XCTest for the following, as they are not currently supported by --- +## **13. Swift 6.2 Testing Enhancements (2025 Edition)** + +Swift 6.2 introduces powerful new testing capabilities that take Swift Testing to the next level. These features provide enhanced debugging context, process lifecycle testing, and more sophisticated test control. + +### 13.1 Exit Tests: Testing Process Lifecycle and Crashes + +Exit tests allow you to verify that code properly handles process termination scenarios, crash recovery, and subprocess management. This is crucial for applications that spawn external processes or need robust crash recovery. + +| Feature | Use Case | Benefits | +|---|---|---| +| **`#expect(processExitsWith: .success)`** | Test that processes terminate cleanly | Verifies graceful shutdown and cleanup | +| **`#expect(processExitsWith: .failure)`** | Test that invalid operations fail appropriately | Ensures proper error handling and exit codes | +| **Process Recovery Testing** | Test auto-restart and crash recovery logic | Validates resilience mechanisms | + +#### Practical Example: Server Process Lifecycle + +```swift +@Test("Server handles unexpected termination gracefully", .tags(.exitTests)) +func serverCrashRecovery() async throws { + await #expect(processExitsWith: .success) { + let serverManager = ServerManager.shared + + // Start server process + await serverManager.start() + + // Simulate unexpected termination + if let server = serverManager.bunServer { + server.terminate() + } + + // Wait for auto-restart logic + try await Task.sleep(for: .milliseconds(2_000)) + + // Verify recovery behavior + // Test should verify that the system handles the crash gracefully + + // Clean shutdown + await serverManager.stop() + } +} +``` + +#### CLI Tool Process Validation + +```swift +@Test("Shell command executes successfully", .tags(.exitTests)) +func shellCommandExecution() async throws { + await #expect(processExitsWith: .success) { + let process = Process() + process.executableURL = URL(fileURLWithPath: "/bin/sh") + process.arguments = ["-c", "ls /tmp | head -5"] + + try process.run() + process.waitUntilExit() + + guard process.terminationStatus == 0 else { + throw ProcessError.commandFailed(process.terminationStatus) + } + } +} +``` + +### 13.2 Attachments: Rich Debugging Context + +Attachments revolutionize test debugging by capturing system state, configuration details, and diagnostic information when tests fail. This provides invaluable context that makes debugging faster and more effective. + +| Attachment Type | Best For | Example Use Cases | +|---|---|---| +| **System Information** | Environment debugging | OS version, memory, processor info | +| **Configuration State** | Settings and setup issues | Server ports, network config, feature flags | +| **Process Details** | Service lifecycle issues | PIDs, running state, error messages | +| **Performance Metrics** | Performance regression analysis | Timing data, memory usage, throughput | + +#### Enhanced Test with Diagnostic Attachments + +```swift +@Test("Network configuration with full diagnostics", .tags(.attachmentTests)) +func networkConfigurationDiagnostics() throws { + // Attach system environment for context + Attachment.record("System Info", """ + OS: \(ProcessInfo.processInfo.operatingSystemVersionString) + Environment: \(ProcessInfo.processInfo.environment["CI"] != nil ? "CI" : "Local") + Timestamp: \(Date().ISO8601Format()) + """) + + // Attach network state + let localIP = NetworkUtility.getLocalIPAddress() + let allIPs = NetworkUtility.getAllIPAddresses() + + Attachment.record("Network Configuration", """ + Local IP: \(localIP ?? "none") + All IPs: \(allIPs.joined(separator: ", ")) + Interface Count: \(allIPs.count) + """) + + // Test logic with rich failure context + #expect(localIP != nil || allIPs.isEmpty) +} +``` + +#### Performance Testing with Detailed Metrics + +```swift +@Test("API performance with statistical analysis", .tags(.performance, .attachmentTests)) +func apiPerformanceAnalysis() async throws { + var timings: [TimeInterval] = [] + let iterations = 100 + + // Capture test configuration + Attachment.record("Performance Test Setup", """ + Iterations: \(iterations) + Test Environment: \(ProcessInfo.processInfo.environment["CI"] != nil ? "CI" : "Local") + API Endpoint: /api/sessions + """) + + // Collect timing data + for _ in 0.. ConditionResult { + let bunPath = "/usr/local/bin/bun" + let altBunPath = "/opt/homebrew/bin/bun" + + let hasBinary = FileManager.default.fileExists(atPath: bunPath) || + FileManager.default.fileExists(atPath: altBunPath) + + return hasBinary ? .continue : .skip(reason: "Server binary not available") + } +} + +/// Checks if network interfaces are available for testing +struct NetworkAvailableCondition: ConditionTrait { + func evaluate(for test: Test) -> ConditionResult { + let hasNetwork = !NetworkUtility.getAllIPAddresses().isEmpty + return hasNetwork ? .continue : .skip(reason: "No network interfaces available") + } +} + +/// Checks if we're in a valid Git repository for repository-specific tests +struct ValidGitRepositoryCondition: ConditionTrait { + func evaluate(for test: Test) -> ConditionResult { + let gitDir = FileManager.default.fileExists(atPath: ".git") + return gitDir ? .continue : .skip(reason: "Not in a Git repository") + } +} + +/// Checks if we're running in CI environment +struct NotInCICondition: ConditionTrait { + func evaluate(for test: Test) -> ConditionResult { + let isCI = ProcessInfo.processInfo.environment["CI"] != nil || + ProcessInfo.processInfo.environment["GITHUB_ACTIONS"] != nil + return isCI ? .skip(reason: "Disabled in CI environment") : .continue + } +} +``` + +#### Smart Test Execution + +```swift +// Replace broad .disabled() with intelligent conditions +@Suite("Server Manager Tests", .tags(.serverManager)) +struct ServerManagerTests { + + @Test("Server lifecycle with full binary", ServerBinaryAvailableCondition(), NotInCICondition()) + func serverLifecycleWithBinary() async throws { + // This test only runs when: + // 1. The server binary is actually available + // 2. We're not in a CI environment + // This prevents false failures and provides clear skip reasons + } + + @Test("Network configuration", NetworkAvailableCondition()) + func networkConfiguration() throws { + // Only runs when network interfaces are available + // Automatically skipped in containerized or network-less environments + } +} +``` + +### 13.4 Enhanced Tag System for Better Organization + +Expand your tag system to include the new Swift 6.2 testing capabilities: + +```swift +// Enhanced TestTags.swift +extension Tag { + // Existing tags + @Tag static var critical: Self + @Tag static var networking: Self + @Tag static var concurrency: Self + + // Swift 6.2 Enhanced Tags + @Tag static var exitTests: Self // Tests using processExitsWith + @Tag static var attachmentTests: Self // Tests with rich diagnostic attachments + @Tag static var requiresServerBinary: Self // Tests needing actual server binary + @Tag static var requiresNetwork: Self // Tests needing network interfaces + @Tag static var processSpawn: Self // Tests that spawn external processes + @Tag static var gitRepository: Self // Tests that need to run in a Git repository +} +``` + +#### Strategic Test Filtering + +```bash +# Run only tests with attachments for debugging +swift test --filter .attachmentTests + +# Skip exit tests in CI environments +swift test --skip .exitTests + +# Run performance tests with attachments for detailed analysis +swift test --filter .performance --filter .attachmentTests + +# Run all tests that require external dependencies +swift test --filter .requiresServerBinary --filter .requiresNetwork + +# Run Git repository tests only when in a Git repo +swift test --filter .gitRepository +``` + +### 13.5 Best Practices for Swift 6.2 Features + +#### Exit Tests Guidelines +- **Use Sparingly**: Exit tests are powerful but should be used for critical process lifecycle scenarios +- **Clean State**: Always ensure proper cleanup in exit test blocks +- **Avoid Elevated Permissions**: Don't test operations requiring sudo or admin rights +- **Mock When Possible**: Use mock processes for testing logic without actual system processes + +#### Attachment Strategy +- **Contextual Information**: Attach system state, configuration, and environment details +- **Progressive Detail**: Start with summary info, add detailed data as needed +- **Performance Focus**: Use attachments extensively in performance tests for trend analysis +- **Failure Context**: Attach diagnostic info that helps understand why tests failed + +#### Condition Trait Design +- **Specific Conditions**: Create focused conditions for specific capabilities +- **Clear Skip Reasons**: Always provide descriptive reasons for skipped tests +- **Environment Awareness**: Consider CI, local development, and different platforms +- **Combine Thoughtfully**: Use multiple conditions when tests have multiple requirements + +### Action Items for Swift 6.2 Adoption + +- [ ] **Audit Disabled Tests**: Replace broad `.disabled()` with specific condition traits +- [ ] **Add Exit Tests**: Identify critical process lifecycle scenarios and add exit tests +- [ ] **Enhance Debugging**: Add attachments to complex tests and all performance tests +- [ ] **Update Tag Strategy**: Add Swift 6.2 tags and update filtering strategies +- [ ] **Create Condition Traits**: Build reusable conditions for common system requirements +- [ ] **Document Skip Reasons**: Ensure all conditional tests have clear skip explanations +- [ ] **CI Integration**: Update CI scripts to handle new test filtering and skip reasons + +--- + ## **Appendix: Evergreen Testing Principles (The F.I.R.S.T. Principles)** These foundational principles are framework-agnostic, and Swift Testing is designed to make adhering to them easier than ever. diff --git a/mac/VibeTunnel/Core/Models/AppConstants.swift b/mac/VibeTunnel/Core/Models/AppConstants.swift index 9176965c..474bae0f 100644 --- a/mac/VibeTunnel/Core/Models/AppConstants.swift +++ b/mac/VibeTunnel/Core/Models/AppConstants.swift @@ -16,25 +16,25 @@ enum AppConstants { static let preventSleepWhenRunning = "preventSleepWhenRunning" static let enableScreencapService = "enableScreencapService" static let repositoryBasePath = "repositoryBasePath" - + // Server Configuration static let serverPort = "serverPort" static let dashboardAccessMode = "dashboardAccessMode" static let cleanupOnStartup = "cleanupOnStartup" static let authenticationMode = "authenticationMode" - + // Development Settings static let debugMode = "debugMode" static let useDevServer = "useDevServer" static let devServerPath = "devServerPath" static let logLevel = "logLevel" - + // Application Preferences static let preferredGitApp = "preferredGitApp" static let preferredTerminal = "preferredTerminal" static let showInDock = "showInDock" static let updateChannel = "updateChannel" - + // New Session keys static let newSessionCommand = "NewSession.command" static let newSessionWorkingDirectory = "NewSession.workingDirectory" @@ -50,19 +50,19 @@ enum AppConstants { static let enableScreencapService = true /// Default repository base path for auto-discovery static let repositoryBasePath = "~/" - + // Server Configuration - static let serverPort = 4020 + static let serverPort = 4_020 static let dashboardAccessMode = "localhost" static let cleanupOnStartup = true static let authenticationMode = "os" - + // Development Settings static let debugMode = false static let useDevServer = false static let devServerPath = "" static let logLevel = "info" - + // Application Preferences static let showInDock = false static let updateChannel = "stable" @@ -122,7 +122,7 @@ enum AppConstants { // Key exists but contains non-string value, return empty string return "" } - + /// Helper to get integer value with proper default static func intValue(for key: String) -> Int { // If the key doesn't exist in UserDefaults, return our default @@ -139,69 +139,69 @@ enum AppConstants { } // MARK: - Configuration Helpers + extension AppConstants { - /// Development server configuration struct DevServerConfig { let useDevServer: Bool let devServerPath: String - - static func current() -> DevServerConfig { - DevServerConfig( + + static func current() -> Self { + Self( useDevServer: boolValue(for: UserDefaultsKeys.useDevServer), devServerPath: stringValue(for: UserDefaultsKeys.devServerPath) ) } } - + /// Authentication configuration struct AuthConfig { let mode: String - - static func current() -> AuthConfig { - AuthConfig( + + static func current() -> Self { + Self( mode: stringValue(for: UserDefaultsKeys.authenticationMode) ) } } - + /// Debug configuration struct DebugConfig { let debugMode: Bool let logLevel: String - - static func current() -> DebugConfig { - DebugConfig( + + static func current() -> Self { + Self( debugMode: boolValue(for: UserDefaultsKeys.debugMode), logLevel: stringValue(for: UserDefaultsKeys.logLevel) ) } } - + /// Server configuration struct ServerConfig { let port: Int let dashboardAccessMode: String let cleanupOnStartup: Bool - - static func current() -> ServerConfig { - ServerConfig( + + static func current() -> Self { + Self( port: intValue(for: UserDefaultsKeys.serverPort), dashboardAccessMode: stringValue(for: UserDefaultsKeys.dashboardAccessMode), cleanupOnStartup: boolValue(for: UserDefaultsKeys.cleanupOnStartup) ) } } - + /// Application preferences struct AppPreferences { let preferredGitApp: String? let preferredTerminal: String? let showInDock: Bool let updateChannel: String - - static func current() -> AppPreferences { - AppPreferences( + + static func current() -> Self { + Self( preferredGitApp: UserDefaults.standard.string(forKey: UserDefaultsKeys.preferredGitApp), preferredTerminal: UserDefaults.standard.string(forKey: UserDefaultsKeys.preferredTerminal), showInDock: boolValue(for: UserDefaultsKeys.showInDock), @@ -209,42 +209,42 @@ extension AppConstants { ) } } - + // MARK: - Convenience Methods - + /// Check if the app is in development mode (debug or dev server enabled) static func isInDevelopmentMode() -> Bool { let debug = DebugConfig.current() let devServer = DevServerConfig.current() return debug.debugMode || devServer.useDevServer } - + /// Get development status for UI display static func getDevelopmentStatus() -> (debugMode: Bool, useDevServer: Bool) { let debug = DebugConfig.current() let devServer = DevServerConfig.current() return (debug.debugMode, devServer.useDevServer) } - + /// Preference helpers static func getPreferredGitApp() -> String? { UserDefaults.standard.string(forKey: UserDefaultsKeys.preferredGitApp) } - + static func setPreferredGitApp(_ app: String?) { - if let app = app { + if let app { UserDefaults.standard.set(app, forKey: UserDefaultsKeys.preferredGitApp) } else { UserDefaults.standard.removeObject(forKey: UserDefaultsKeys.preferredGitApp) } } - + static func getPreferredTerminal() -> String? { UserDefaults.standard.string(forKey: UserDefaultsKeys.preferredTerminal) } - + static func setPreferredTerminal(_ terminal: String?) { - if let terminal = terminal { + if let terminal { UserDefaults.standard.set(terminal, forKey: UserDefaultsKeys.preferredTerminal) } else { UserDefaults.standard.removeObject(forKey: UserDefaultsKeys.preferredTerminal) diff --git a/mac/VibeTunnel/Core/Services/BunServer.swift b/mac/VibeTunnel/Core/Services/BunServer.swift index fbb7c18f..4ab94d9a 100644 --- a/mac/VibeTunnel/Core/Services/BunServer.swift +++ b/mac/VibeTunnel/Core/Services/BunServer.swift @@ -242,6 +242,12 @@ final class BunServer { } } + // Set NODE_ENV to development in debug builds to disable caching + #if DEBUG + environment["NODE_ENV"] = "development" + logger.info("Running in DEBUG configuration - setting NODE_ENV=development to disable caching") + #endif + // Add Node.js memory settings as command line arguments instead of NODE_OPTIONS // NODE_OPTIONS can interfere with SEA binaries @@ -432,6 +438,10 @@ final class BunServer { // Add Node.js memory settings environment["NODE_OPTIONS"] = "--max-old-space-size=4096 --max-semi-space-size=128" + // Always set NODE_ENV to development for dev server to ensure caching is disabled + environment["NODE_ENV"] = "development" + logger.info("Dev server mode - setting NODE_ENV=development to disable caching") + // Add pnpm to PATH so that scripts can use it // pnpmDir is already defined above if let existingPath = environment["PATH"] { diff --git a/mac/VibeTunnel/Utilities/TerminalLauncher.swift b/mac/VibeTunnel/Utilities/TerminalLauncher.swift index 56ec7cad..1ec3ca0a 100644 --- a/mac/VibeTunnel/Utilities/TerminalLauncher.swift +++ b/mac/VibeTunnel/Utilities/TerminalLauncher.swift @@ -467,12 +467,16 @@ final class TerminalLauncher { if let windowIDValue = UInt32(components[0]) { windowID = CGWindowID(windowIDValue) tabReference = "tab id \(components[1]) of window id \(components[0])" - logger.info("Terminal.app window ID: \(windowID ?? 0), tab reference: \(tabReference ?? "")") + logger + .info("Terminal.app window ID: \(windowID ?? 0), tab reference: \(tabReference ?? "")") } else { logger.warning("Failed to parse window ID from components[0]: '\(components[0])'") } } else { - logger.warning("Unexpected AppleScript result format for Terminal.app. Expected 'windowID|tabID', got: '\(result)'. Components: \(components)") + logger + .warning( + "Unexpected AppleScript result format for Terminal.app. Expected 'windowID|tabID', got: '\(result)'. Components: \(components)" + ) } } else if config.terminal == .iTerm2 { // iTerm2 returns window ID diff --git a/web/CLAUDE.md b/web/CLAUDE.md index 6ac95ee0..396719a8 100644 --- a/web/CLAUDE.md +++ b/web/CLAUDE.md @@ -72,4 +72,12 @@ Do NOT use three separate commands (add, commit, push) as this is slow. - Delete unused functions and code paths immediately ## Best Practices -- ALWAYS use `Z_INDEX` constants in `src/client/utils/constants.ts` instead of setting z-index properties using primitives / magic numbers \ No newline at end of file +- ALWAYS use `Z_INDEX` constants in `src/client/utils/constants.ts` instead of setting z-index properties using primitives / magic numbers + +## CRITICAL: Package Installation Policy +**NEVER install packages without explicit user approval!** +- Do NOT run `pnpm add`, `npm install`, or any package installation commands +- Do NOT modify `package.json` or `pnpm-lock.yaml` unless explicitly requested +- Always ask for permission before suggesting new dependencies +- Understand and work with the existing codebase architecture first +- This project has custom implementations - don't assume we need standard packages \ No newline at end of file diff --git a/web/src/client/app.ts b/web/src/client/app.ts index 7ff4ee4a..1e3cf95a 100644 --- a/web/src/client/app.ts +++ b/web/src/client/app.ts @@ -19,7 +19,7 @@ import { createLogger } from './utils/logger.js'; import { isIOS } from './utils/mobile-utils.js'; import { type MediaQueryState, responsiveObserver } from './utils/responsive-utils.js'; import { triggerTerminalResize } from './utils/terminal-utils.js'; -import { initTitleUpdater } from './utils/title-updater.js'; +import { titleManager } from './utils/title-manager.js'; // Import version import { VERSION } from './version.js'; @@ -95,7 +95,7 @@ export class VibeTunnelApp extends LitElement { this.setupResponsiveObserver(); this.setupPreferences(); // Initialize title updater - initTitleUpdater(); + titleManager.initAutoUpdates(); // Initialize authentication and routing together this.initializeApp(); } @@ -373,7 +373,7 @@ export class VibeTunnelApp extends LitElement { // Update page title if we're in list view if (this.currentView === 'list') { const sessionCount = this.sessions.length; - document.title = `VibeTunnel - ${sessionCount} Session${sessionCount !== 1 ? 's' : ''}`; + titleManager.setListTitle(sessionCount); } // Handle session loading state tracking @@ -723,7 +723,7 @@ export class VibeTunnelApp extends LitElement { if (session) { const sessionName = session.name || session.command.join(' '); console.log('[App] Setting title:', sessionName); - document.title = `${sessionName} - VibeTunnel`; + titleManager.setSessionTitle(sessionName); } else { console.log('[App] No session found:', sessionId); } @@ -745,7 +745,7 @@ export class VibeTunnelApp extends LitElement { this.selectedSessionId = sessionId || null; // Update document title - document.title = 'VibeTunnel - File Browser'; + titleManager.setFileBrowserTitle(); // Navigate to file browser view this.currentView = 'file-browser'; @@ -758,7 +758,7 @@ export class VibeTunnelApp extends LitElement { // Update document title with session count const sessionCount = this.sessions.length; - document.title = `VibeTunnel - ${sessionCount} Session${sessionCount !== 1 ? 's' : ''}`; + titleManager.setListTitle(sessionCount); // Disable View Transitions when navigating from session detail view // to prevent animations when sidebar is involved @@ -1199,7 +1199,7 @@ export class VibeTunnelApp extends LitElement { return 'w-full min-h-screen flex flex-col'; } - const baseClasses = 'bg-secondary border-r border-base flex flex-col'; + const baseClasses = 'bg-secondary flex flex-col'; const isMobile = this.mediaState.isMobile; // Only apply transition class when animations are ready (not during initial load) const transitionClass = this.sidebarAnimationReady && !isMobile ? 'sidebar-transition' : ''; diff --git a/web/src/client/components/session-card.ts b/web/src/client/components/session-card.ts index 25230419..2c0c262d 100644 --- a/web/src/client/components/session-card.ts +++ b/web/src/client/components/session-card.ts @@ -17,6 +17,8 @@ import type { AuthClient } from '../services/auth-client.js'; import { isAIAssistantSession, sendAIPrompt } from '../utils/ai-sessions.js'; import { createLogger } from '../utils/logger.js'; import { copyToClipboard } from '../utils/path-utils.js'; +import { TerminalPreferencesManager } from '../utils/terminal-preferences.js'; +import type { TerminalThemeId } from '../utils/terminal-themes.js'; const logger = createLogger('session-card'); import './vibe-terminal-buffer.js'; @@ -63,12 +65,33 @@ export class SessionCard extends LitElement { @state() private isActive = false; @state() private isHovered = false; @state() private isSendingPrompt = false; + @state() private terminalTheme: TerminalThemeId = 'auto'; private killingInterval: number | null = null; private activityTimeout: number | null = null; + private storageListener: ((e: StorageEvent) => void) | null = null; + private themeChangeListener: ((e: CustomEvent) => void) | null = null; + private preferencesManager = TerminalPreferencesManager.getInstance(); connectedCallback() { super.connectedCallback(); + + // Load initial theme from TerminalPreferencesManager + this.loadThemeFromStorage(); + + // Listen for storage changes to update theme reactively (cross-tab) + this.storageListener = (e: StorageEvent) => { + if (e.key === 'vibetunnel_terminal_preferences') { + this.loadThemeFromStorage(); + } + }; + window.addEventListener('storage', this.storageListener); + + // Listen for custom theme change events (same-tab) + this.themeChangeListener = (e: CustomEvent) => { + this.terminalTheme = e.detail as TerminalThemeId; + }; + window.addEventListener('terminal-theme-changed', this.themeChangeListener as EventListener); } disconnectedCallback() { @@ -79,6 +102,17 @@ export class SessionCard extends LitElement { if (this.activityTimeout) { clearTimeout(this.activityTimeout); } + if (this.storageListener) { + window.removeEventListener('storage', this.storageListener); + this.storageListener = null; + } + if (this.themeChangeListener) { + window.removeEventListener( + 'terminal-theme-changed', + this.themeChangeListener as EventListener + ); + this.themeChangeListener = null; + } } private handleCardClick() { @@ -340,6 +374,10 @@ export class SessionCard extends LitElement { this.isHovered = false; } + private loadThemeFromStorage() { + this.terminalTheme = this.preferencesManager.getTheme(); + } + render() { // Debug logging to understand what's in the session if (!this.session.name) { @@ -475,6 +513,7 @@ export class SessionCard extends LitElement { : html` ) { super.updated(changedProperties); - // If session changed, clean up old stream connection + // If session changed, clean up old stream connection and reset terminal state if (changedProperties.has('session')) { const oldSession = changedProperties.get('session') as Session | null; - if (oldSession && oldSession.id !== this.session?.id) { + const sessionChanged = oldSession?.id !== this.session?.id; + + if (sessionChanged && oldSession) { logger.log('Session changed, cleaning up old stream connection'); if (this.connectionManager) { this.connectionManager.cleanupStreamConnection(); } + // Clean up terminal lifecycle manager for fresh start + if (this.terminalLifecycleManager) { + this.terminalLifecycleManager.cleanup(); + } } + // Update managers with new session if (this.inputManager) { this.inputManager.setSession(this.session); @@ -485,59 +497,64 @@ export class SessionView extends LitElement { if (this.lifecycleEventManager) { this.lifecycleEventManager.setSession(this.session); } + + // Initialize terminal when session first becomes available + if (this.session && this.connected && !oldSession) { + logger.log('Session data now available, initializing terminal'); + this.ensureTerminalInitialized(); + } } - // Stop loading and create terminal when session becomes available + // Stop loading and ensure terminal is initialized when session becomes available if ( changedProperties.has('session') && this.session && this.loadingAnimationManager.isLoading() ) { this.loadingAnimationManager.stopLoading(); - this.terminalLifecycleManager.setupTerminal(); + this.ensureTerminalInitialized(); } - // Initialize terminal after first render when terminal element exists - if (!this.terminalLifecycleManager.getTerminal() && this.session && this.connected) { - const terminalElement = this.querySelector('vibe-terminal') as Terminal; - if (terminalElement) { - this.terminalLifecycleManager.initializeTerminal(); - } + // Ensure terminal is initialized when connected state changes + if (changedProperties.has('connected') && this.connected && this.session) { + this.ensureTerminalInitialized(); + } + } + + /** + * Ensures terminal is properly initialized with current session data. + * This method is idempotent and can be called multiple times safely. + */ + private ensureTerminalInitialized() { + if (!this.session || !this.connected) { + logger.log('Cannot initialize terminal: missing session or not connected'); + return; } - // Create hidden input if direct keyboard is enabled on mobile - if ( - this.isMobile && - this.useDirectKeyboard && - !this.directKeyboardManager.getShowQuickKeys() && - this.session && - this.connected - ) { - // Clear any existing timeout - if (this.createHiddenInputTimeout) { - clearTimeout(this.createHiddenInputTimeout); - } - - // Delay creation to ensure terminal is rendered and DOM is stable - const TERMINAL_RENDER_DELAY_MS = 100; - this.createHiddenInputTimeout = setTimeout(() => { - try { - // Re-validate conditions in case component state changed during the delay - if ( - this.isMobile && - this.useDirectKeyboard && - !this.directKeyboardManager.getShowQuickKeys() && - this.connected // Ensure component is still connected to DOM - ) { - this.directKeyboardManager.ensureHiddenInputVisible(); - } - } catch (error) { - logger.warn('Failed to create hidden input during setTimeout:', error); - } - // Clear the timeout reference after execution - this.createHiddenInputTimeout = null; - }, TERMINAL_RENDER_DELAY_MS); + // Check if terminal is already initialized + if (this.terminalLifecycleManager.getTerminal()) { + logger.log('Terminal already initialized'); + return; } + + // Check if terminal element exists in DOM + const terminalElement = this.querySelector('vibe-terminal') as Terminal; + if (!terminalElement) { + logger.log('Terminal element not found in DOM, deferring initialization'); + // Retry after next render cycle + requestAnimationFrame(() => { + this.ensureTerminalInitialized(); + }); + return; + } + + logger.log('Initializing terminal with session:', this.session.id); + + // Setup terminal with session data + this.terminalLifecycleManager.setupTerminal(); + + // Initialize terminal after setup + this.terminalLifecycleManager.initializeTerminal(); } async handleKeyboardInput(e: KeyboardEvent) { @@ -874,6 +891,8 @@ export class SessionView extends LitElement { } private handleThemeChange(newTheme: TerminalThemeId) { + logger.debug('Changing terminal theme to:', newTheme); + this.terminalTheme = newTheme; this.preferencesManager.setTheme(newTheme); this.terminalLifecycleManager.setTerminalTheme(newTheme); @@ -963,6 +982,10 @@ export class SessionView extends LitElement { // Update the local session object with the server-assigned name this.session = { ...this.session, name: actualName }; + // Update the page title with the new session name + const sessionName = actualName || this.session.command.join(' '); + titleManager.setSessionTitle(sessionName); + // Dispatch event to notify parent components with the actual name this.dispatchEvent( new CustomEvent('session-renamed', { @@ -1491,7 +1514,7 @@ export class SessionView extends LitElement { > - + > ${ diff --git a/web/src/client/components/session-view/width-selector.ts b/web/src/client/components/session-view/width-selector.ts index deb1580f..d87dce17 100644 --- a/web/src/client/components/session-view/width-selector.ts +++ b/web/src/client/components/session-view/width-selector.ts @@ -1,27 +1,67 @@ /** - * Width Selector Component + * Terminal Settings Component * - * Dropdown menu for selecting terminal width constraints. - * Includes common presets and custom width input with font size controls. + * Modal for configuring terminal width, font size, and theme. + * Features a grid-based layout with conditional custom width input. */ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { Z_INDEX } from '../../utils/constants.js'; -import { COMMON_TERMINAL_WIDTHS } from '../../utils/terminal-preferences.js'; +import { createLogger } from '../../utils/logger.js'; +import { + COMMON_TERMINAL_WIDTHS, + TerminalPreferencesManager, +} from '../../utils/terminal-preferences.js'; import { TERMINAL_THEMES, type TerminalThemeId } from '../../utils/terminal-themes.js'; +import { getTextColorEncoded } from '../../utils/theme-utils.js'; -@customElement('width-selector') -export class WidthSelector extends LitElement { +const logger = createLogger('terminal-settings-modal'); + +@customElement('terminal-settings-modal') +export class TerminalSettingsModal extends LitElement { // Disable shadow DOM to use Tailwind createRenderRoot() { return this; } + connectedCallback() { + super.connectedCallback(); + + // Clean up old conflicting localStorage key if it exists + if (localStorage.getItem('terminal-theme')) { + const oldTheme = localStorage.getItem('terminal-theme') as TerminalThemeId; + // Migrate to TerminalPreferencesManager if it's a valid theme + if ( + oldTheme && + ['auto', 'light', 'dark', 'vscode-dark', 'dracula', 'nord'].includes(oldTheme) + ) { + this.preferencesManager.setTheme(oldTheme); + } + localStorage.removeItem('terminal-theme'); + } + + // Load theme from TerminalPreferencesManager + this.terminalTheme = this.preferencesManager.getTheme(); + } + + private preferencesManager = TerminalPreferencesManager.getInstance(); + @property({ type: Boolean }) visible = false; @property({ type: Number }) terminalMaxCols = 0; @property({ type: Number }) terminalFontSize = 14; - @property({ type: String }) terminalTheme: TerminalThemeId = 'auto'; + + private _terminalTheme: TerminalThemeId = 'auto'; + @property({ type: String }) + get terminalTheme(): TerminalThemeId { + return this._terminalTheme; + } + set terminalTheme(value: TerminalThemeId) { + logger.debug('Terminal theme set to:', value); + this._terminalTheme = value; + this.requestUpdate(); + } @property({ type: String }) customWidth = ''; + @property({ type: Boolean }) showCustomInput = false; @property({ type: Function }) onWidthSelect?: (width: number) => void; @property({ type: Function }) onFontSizeChange?: (size: number) => void; @property({ type: Function }) onThemeChange?: (theme: TerminalThemeId) => void; @@ -39,158 +79,228 @@ export class WidthSelector extends LitElement { if (!Number.isNaN(width) && width >= 20 && width <= 500) { this.onWidthSelect?.(width); this.customWidth = ''; + this.showCustomInput = false; } } + private handleClose() { + this.showCustomInput = false; + this.customWidth = ''; + this.onClose?.(); + } + private handleCustomWidthKeydown(e: KeyboardEvent) { if (e.key === 'Enter') { this.handleCustomWidthSubmit(); } else if (e.key === 'Escape') { - this.customWidth = ''; - this.onClose?.(); + this.handleClose(); + } + } + + private getArrowColor(): string { + // Return URL-encoded text color from CSS custom properties + return getTextColorEncoded(); + } + + updated(changedProperties: Map) { + super.updated(changedProperties); + + // Force update the theme select value when terminalTheme property changes OR when visible changes + if (changedProperties.has('terminalTheme') || changedProperties.has('visible')) { + // Use requestAnimationFrame to ensure DOM is fully updated + requestAnimationFrame(() => { + const themeSelect = this.querySelector('#theme-select') as HTMLSelectElement; + if (themeSelect && this.terminalTheme) { + logger.debug('Updating theme select value to:', this.terminalTheme); + themeSelect.value = this.terminalTheme; + } + }); } } render() { if (!this.visible) return null; + // Debug localStorage when dialog opens + logger.debug('Dialog opening, terminal theme:', this.terminalTheme); + + // Check if we're showing a custom value that doesn't match presets + const isCustomValue = + this.terminalMaxCols > 0 && + !COMMON_TERMINAL_WIDTHS.find((w) => w.value === this.terminalMaxCols); + return html`
this.onClose?.()} + role="dialog" + aria-modal="true" + aria-labelledby="terminal-settings-title" + @click=${() => this.handleClose()} >
- +
-
-
-
Terminal Width
- +
+
+

Terminal Settings

- ${COMMON_TERMINAL_WIDTHS.map( - (width) => html` - +
+
` - )} -
-
Custom (20-500)
-
- +
+ +
+ + + ${this.terminalFontSize}px + + +
+
+
+ + +
+ +
-
-
Font Size
-
- - - ${this.terminalFontSize}px - - - -
-
-
-
Theme
- -
`; diff --git a/web/src/client/components/sidebar-header.ts b/web/src/client/components/sidebar-header.ts index b43ba311..3c7785b1 100644 --- a/web/src/client/components/sidebar-header.ts +++ b/web/src/client/components/sidebar-header.ts @@ -16,7 +16,7 @@ export class SidebarHeader extends HeaderBase { return html`
diff --git a/web/src/client/components/terminal.ts b/web/src/client/components/terminal.ts index 59487078..1df35169 100644 --- a/web/src/client/components/terminal.ts +++ b/web/src/client/components/terminal.ts @@ -18,6 +18,7 @@ import { createLogger } from '../utils/logger.js'; import { detectMobile } from '../utils/mobile-utils.js'; import { TerminalPreferencesManager } from '../utils/terminal-preferences.js'; import { TERMINAL_THEMES, type TerminalThemeId } from '../utils/terminal-themes.js'; +import { getCurrentTheme } from '../utils/theme-utils.js'; import { UrlHighlighter } from '../utils/url-highlighter'; const logger = createLogger('terminal'); @@ -103,7 +104,10 @@ export class Terminal extends LitElement { } private requestRenderBuffer() { - this.queueRenderOperation(() => {}); + logger.debug('Requesting render buffer update'); + this.queueRenderOperation(() => { + logger.debug('Executing render operation'); + }); } private async processOperationQueue(): Promise { @@ -148,10 +152,15 @@ export class Terminal extends LitElement { // Check for debug mode this.debugMode = new URLSearchParams(window.location.search).has('debug'); - // Watch for theme changes + // Watch for theme changes (only when using auto theme) this.themeObserver = new MutationObserver(() => { - if (this.terminal) { + if (this.terminal && this.theme === 'auto') { + logger.debug('Auto theme detected system change, updating terminal'); this.terminal.options.theme = this.getTerminalTheme(); + this.updateTerminalColorProperties(this.getTerminalTheme()); + this.requestRenderBuffer(); + } else if (this.theme !== 'auto') { + logger.debug('Ignoring system theme change - explicit theme selected:', this.theme); } }); @@ -224,8 +233,25 @@ export class Terminal extends LitElement { } if (changedProperties.has('theme')) { - if (this.terminal) { - this.terminal.options.theme = this.getTerminalTheme(); + logger.debug('Terminal theme changed to:', this.theme); + if (this.terminal?.options) { + const resolvedTheme = this.getTerminalTheme(); + logger.debug('Applying terminal theme:', this.theme); + this.terminal.options.theme = resolvedTheme; + + // Update CSS custom properties for terminal colors + this.updateTerminalColorProperties(resolvedTheme); + + // Force complete HTML regeneration to pick up new colors + if (this.container) { + // Clear the container first + this.container.innerHTML = ''; + } + + // Force immediate buffer re-render with new colors + this.requestRenderBuffer(); + } else { + logger.warn('No terminal instance found for theme update'); } } } @@ -367,13 +393,62 @@ export class Terminal extends LitElement { let themeId = this.theme; if (themeId === 'auto') { - themeId = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; + themeId = getCurrentTheme(); } const preset = TERMINAL_THEMES.find((t) => t.id === themeId) || TERMINAL_THEMES[0]; return { ...preset.colors }; } + /** + * Updates CSS custom properties for terminal colors based on theme + * This allows the already-rendered HTML to immediately pick up new colors + */ + private updateTerminalColorProperties(themeColors: Record) { + logger.debug('Updating terminal CSS color properties'); + + // Standard 16 colors mapping from XTerm.js theme to CSS custom properties + const colorMapping = { + black: 0, + red: 1, + green: 2, + yellow: 3, + blue: 4, + magenta: 5, + cyan: 6, + white: 7, + brightBlack: 8, + brightRed: 9, + brightGreen: 10, + brightYellow: 11, + brightBlue: 12, + brightMagenta: 13, + brightCyan: 14, + brightWhite: 15, + }; + + // Update the CSS custom properties + Object.entries(colorMapping).forEach(([colorName, colorIndex]) => { + if (themeColors[colorName]) { + const cssProperty = `--terminal-color-${colorIndex}`; + document.documentElement.style.setProperty(cssProperty, themeColors[colorName]); + logger.debug(`Set CSS property ${cssProperty}:`, themeColors[colorName]); + } + }); + + // Update main terminal foreground and background colors + if (themeColors.foreground) { + document.documentElement.style.setProperty('--terminal-foreground', themeColors.foreground); + logger.debug('Set terminal foreground color:', themeColors.foreground); + } + if (themeColors.background) { + document.documentElement.style.setProperty('--terminal-background', themeColors.background); + logger.debug('Set terminal background color:', themeColors.background); + } + + logger.debug('CSS terminal color properties updated'); + } + private async initializeTerminal() { try { this.requestUpdate(); @@ -1132,9 +1207,9 @@ export class Terminal extends LitElement { const tempFg = style.match(/color: ([^;]+);/)?.[1]; const tempBg = style.match(/background-color: ([^;]+);/)?.[1]; - // Default terminal colors - const defaultFg = '#e4e4e4'; - const defaultBg = '#0a0a0a'; + // Use theme colors as defaults + const defaultFg = 'var(--terminal-foreground, #e4e4e4)'; + const defaultBg = 'var(--terminal-background, #0a0a0a)'; // Determine actual foreground and background const actualFg = tempFg || defaultFg; @@ -1551,6 +1626,13 @@ export class Terminal extends LitElement { }; render() { + const terminalTheme = this.getTerminalTheme(); + const containerStyle = ` + view-transition-name: session-${this.sessionId}; + background-color: ${terminalTheme.background || 'var(--terminal-background, #0a0a0a)'}; + color: ${terminalTheme.foreground || 'var(--terminal-foreground, #e4e4e4)'}; + `; + return html`
${ this.error diff --git a/web/src/client/styles.css b/web/src/client/styles.css index d4f365f0..41b8aaa9 100644 --- a/web/src/client/styles.css +++ b/web/src/client/styles.css @@ -66,9 +66,9 @@ --color-bg-elevated: 38 38 38; /* #262626 */ --color-surface: 26 26 26; /* #1a1a1a */ --color-surface-hover: 42 42 42; /* #2a2a2a */ - --color-border: 42 42 42; /* #2a2a2a */ - --color-border-light: 58 58 58; /* #3a3a3a */ - --color-border-focus: 74 74 74; /* #4a4a4a */ + --color-border: 26 26 26; /* #1a1a1a - Much more subtle */ + --color-border-light: 31 31 31; /* #1f1f1f - More subtle */ + --color-border-focus: 58 58 58; /* #3a3a3a - Keep some contrast for focus */ /* Text colors - Dark Mode */ --color-text: 228 228 228; /* #e4e4e4 */ @@ -97,9 +97,9 @@ --color-bg-elevated: 38 38 38; --color-surface: 26 26 26; --color-surface-hover: 42 42 42; - --color-border: 42 42 42; - --color-border-light: 58 58 58; - --color-border-focus: 74 74 74; + --color-border: 26 26 26; + --color-border-light: 31 31 31; + --color-border-focus: 58 58 58; --color-text: 228 228 228; --color-text-bright: 255 255 255; --color-text-muted: 163 163 163; @@ -998,8 +998,7 @@ body.initial-session-load .session-flex-responsive > session-card:nth-child(n + /* Light theme terminal container styling */ [data-theme="light"] .terminal-container { /* Terminal colors are now handled by xterm.js theme */ - border: 1px solid rgb(var(--color-border)); - border-radius: 0.5rem; + /* Removed border and border-radius to prevent double-line effect with card borders */ } /* Terminal line styling */ @@ -1081,8 +1080,7 @@ body.initial-session-load .session-flex-responsive > session-card:nth-child(n + } [data-theme="light"] .session-card .terminal-container { - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); - border: 1px solid rgb(var(--color-border)); + /* Removed border and box-shadow to prevent double-line effect with card borders */ } /* Ensure terminal container has proper size */ diff --git a/web/src/client/utils/monaco-loader.ts b/web/src/client/utils/monaco-loader.ts index 092ecf30..49d2d231 100644 --- a/web/src/client/utils/monaco-loader.ts +++ b/web/src/client/utils/monaco-loader.ts @@ -5,6 +5,7 @@ * This module ensures Monaco is properly loaded and configured before use. */ import { createLogger } from './logger.js'; +import { isDarkMode } from './theme-utils.js'; const logger = createLogger('monaco-loader'); @@ -108,13 +109,11 @@ export async function initializeMonaco(): Promise { }); // Set initial theme based on current theme - const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; - monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs'); + monaco.editor.setTheme(isDarkMode() ? 'vs-dark' : 'vs'); // Watch for theme changes const themeObserver = new MutationObserver(() => { - const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'; - monaco.editor.setTheme(currentTheme ? 'vs-dark' : 'vs'); + monaco.editor.setTheme(isDarkMode() ? 'vs-dark' : 'vs'); }); themeObserver.observe(document.documentElement, { diff --git a/web/src/client/utils/terminal-preferences.ts b/web/src/client/utils/terminal-preferences.ts index 46ffdd94..9c144e29 100644 --- a/web/src/client/utils/terminal-preferences.ts +++ b/web/src/client/utils/terminal-preferences.ts @@ -56,17 +56,22 @@ export class TerminalPreferencesManager { if (saved) { const parsed = JSON.parse(saved); // Merge with defaults to handle new properties - return { ...DEFAULT_PREFERENCES, ...parsed }; + const merged = { ...DEFAULT_PREFERENCES, ...parsed }; + logger.debug('Loaded terminal preferences:', merged); + return merged; } } catch (error) { logger.warn('Failed to load terminal preferences', { error }); } + logger.debug('Using default terminal preferences'); return { ...DEFAULT_PREFERENCES }; } private savePreferences() { try { - localStorage.setItem(STORAGE_KEY_TERMINAL_PREFS, JSON.stringify(this.preferences)); + const toSave = JSON.stringify(this.preferences); + localStorage.setItem(STORAGE_KEY_TERMINAL_PREFS, toSave); + logger.debug('Saved terminal preferences to localStorage'); } catch (error) { logger.warn('Failed to save terminal preferences', { error }); } @@ -104,6 +109,7 @@ export class TerminalPreferencesManager { } setTheme(theme: TerminalThemeId) { + logger.debug('Setting terminal theme:', theme); this.preferences.theme = theme; this.savePreferences(); } diff --git a/web/src/client/utils/terminal-themes.ts b/web/src/client/utils/terminal-themes.ts index 350d820a..24998824 100644 --- a/web/src/client/utils/terminal-themes.ts +++ b/web/src/client/utils/terminal-themes.ts @@ -8,6 +8,12 @@ export interface TerminalTheme { } export const TERMINAL_THEMES: TerminalTheme[] = [ + { + id: 'auto', + name: 'Auto', + description: 'Follow system theme', + colors: {}, // Actual colors determined at runtime + }, { id: 'dark', name: 'Dark', diff --git a/web/src/client/utils/theme-utils.ts b/web/src/client/utils/theme-utils.ts new file mode 100644 index 00000000..f24f2c5b --- /dev/null +++ b/web/src/client/utils/theme-utils.ts @@ -0,0 +1,77 @@ +/** + * Theme detection utilities + */ + +/** + * Gets the current effective theme (light or dark) + * Handles both explicit theme setting and system preference + */ +export function getCurrentTheme(): 'light' | 'dark' { + const explicitTheme = document.documentElement.getAttribute('data-theme'); + + if (explicitTheme === 'dark') return 'dark'; + if (explicitTheme === 'light') return 'light'; + + // No explicit theme set, use system preference + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +} + +/** + * Checks if the current effective theme is dark mode + */ +export function isDarkMode(): boolean { + return getCurrentTheme() === 'dark'; +} + +/** + * Gets a color value based on current theme + * @param lightColor Color to use in light mode + * @param darkColor Color to use in dark mode + */ +export function getThemeColor(lightColor: string, darkColor: string): string { + return isDarkMode() ? darkColor : lightColor; +} + +/** + * Gets URL-encoded color for SVG based on current theme + * @param lightColor Color to use in light mode (will be URL-encoded) + * @param darkColor Color to use in dark mode (will be URL-encoded) + */ +export function getThemeColorEncoded(lightColor: string, darkColor: string): string { + const color = getThemeColor(lightColor, darkColor); + return encodeURIComponent(color); +} + +/** + * Gets a CSS custom property value as RGB color + * @param property CSS custom property name (without --) + */ +function getCSSColorAsHex(property: string): string { + const rgb = getComputedStyle(document.documentElement) + .getPropertyValue(`--color-${property}`) + .trim(); + + if (!rgb) return '#000000'; // fallback + + // Convert "r g b" format to hex + const [r, g, b] = rgb.split(' ').map((n) => Number.parseInt(n, 10)); + return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; +} + +/** + * Gets URL-encoded text color for SVG arrows based on current theme + * Uses CSS custom properties for consistent theming + */ +export function getTextColorEncoded(): string { + const color = getCSSColorAsHex('text'); + return encodeURIComponent(color); +} + +/** + * Creates a media query listener for system theme changes + */ +export function createSystemThemeListener(callback: (isDark: boolean) => void): MediaQueryList { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + mediaQuery.addEventListener('change', (e) => callback(e.matches)); + return mediaQuery; +} diff --git a/web/src/client/utils/title-manager.ts b/web/src/client/utils/title-manager.ts new file mode 100644 index 00000000..9eda5434 --- /dev/null +++ b/web/src/client/utils/title-manager.ts @@ -0,0 +1,106 @@ +/** + * Centralized title management for VibeTunnel + */ + +export class TitleManager { + private static instance: TitleManager; + private cleanupFunctions: Array<() => void> = []; + private currentSessionId: string | null = null; + + private constructor() {} + + static getInstance(): TitleManager { + if (!TitleManager.instance) { + TitleManager.instance = new TitleManager(); + } + return TitleManager.instance; + } + + /** + * Set title for session view + */ + setSessionTitle(sessionName: string): void { + document.title = `VibeTunnel - ${sessionName}`; + } + + /** + * Set title for list view with session count + */ + setListTitle(sessionCount: number): void { + document.title = + sessionCount > 0 + ? `VibeTunnel - ${sessionCount} Session${sessionCount !== 1 ? 's' : ''}` + : 'VibeTunnel'; + } + + /** + * Set title for file browser + */ + setFileBrowserTitle(): void { + document.title = 'VibeTunnel - File Browser'; + } + + /** + * Initialize automatic title updates for list view + */ + initAutoUpdates(): void { + this.cleanup(); + + // Monitor URL changes for list view updates + const updateFromUrl = () => { + const url = new URL(window.location.href); + const sessionId = url.searchParams.get('session'); + + if (sessionId !== this.currentSessionId) { + this.currentSessionId = sessionId; + + // Only auto-update title for list view (no session ID) + if (!sessionId) { + setTimeout(() => { + const sessionCount = document.querySelectorAll('session-card').length; + this.setListTitle(sessionCount); + }, 100); + } + } + }; + + // Initial check + updateFromUrl(); + + // Monitor DOM changes for session count updates + let mutationTimeout: NodeJS.Timeout | null = null; + const observer = new MutationObserver(() => { + if (mutationTimeout) clearTimeout(mutationTimeout); + mutationTimeout = setTimeout(updateFromUrl, 100); + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + }); + + // Listen for URL changes + const popstateHandler = () => updateFromUrl(); + window.addEventListener('popstate', popstateHandler); + + // Store cleanup functions + this.cleanupFunctions = [ + () => observer.disconnect(), + () => window.removeEventListener('popstate', popstateHandler), + () => { + if (mutationTimeout) clearTimeout(mutationTimeout); + }, + ]; + } + + /** + * Clean up event listeners + */ + cleanup(): void { + this.cleanupFunctions.forEach((fn) => fn()); + this.cleanupFunctions = []; + } +} + +// Export singleton instance +export const titleManager = TitleManager.getInstance(); diff --git a/web/src/client/utils/title-updater.ts b/web/src/client/utils/title-updater.ts deleted file mode 100644 index 2223b044..00000000 --- a/web/src/client/utils/title-updater.ts +++ /dev/null @@ -1,108 +0,0 @@ -/** - * Simple utility to update page title based on URL - */ - -let currentSessionId: string | null = null; -let cleanupFunctions: Array<() => void> = []; - -function updateTitleFromUrl() { - const url = new URL(window.location.href); - const sessionId = url.searchParams.get('session'); - - if (sessionId && sessionId !== currentSessionId) { - currentSessionId = sessionId; - - // Find session name from the page content - setTimeout(() => { - // Look for session name in multiple places - const sessionElements = document.querySelectorAll( - 'session-card, .sidebar, [data-session-id], .session-name, h1, h2' - ); - let sessionName: string | null = null; - - for (const element of sessionElements) { - const text = element.textContent?.trim() || ''; - - // Look for any text that could be a session name - // First try to find data attributes - if (element.hasAttribute('data-session-name')) { - sessionName = element.getAttribute('data-session-name'); - break; - } - - // Try to extract from element content - be more flexible - // Look for patterns like "Session X", "test-session-X", or any non-path text - if (text && !text.includes('/') && text.length > 0 && text.length < 100) { - // Skip if it looks like a path or too generic - if (!text.startsWith('~') && !text.startsWith('/')) { - sessionName = text.split('\n')[0]; // Take first line if multi-line - break; - } - } - } - - if (sessionName) { - document.title = `${sessionName} - VibeTunnel`; - } else { - // Fallback to generic session title - document.title = `Session - VibeTunnel`; - } - }, 500); - } else if (!sessionId && currentSessionId) { - // Back to list view - currentSessionId = null; - // Wait a bit for DOM to update before counting - setTimeout(() => { - const sessionCount = document.querySelectorAll('session-card').length; - document.title = - sessionCount > 0 - ? `VibeTunnel - ${sessionCount} Session${sessionCount !== 1 ? 's' : ''}` - : 'VibeTunnel'; - }, 100); - } -} - -// Initialize -export function initTitleUpdater() { - // Clean up any existing listeners first - cleanup(); - - // Check on load - updateTitleFromUrl(); - - // Monitor URL changes with debouncing - let mutationTimeout: NodeJS.Timeout | null = null; - const observer = new MutationObserver(() => { - if (mutationTimeout) clearTimeout(mutationTimeout); - mutationTimeout = setTimeout(updateTitleFromUrl, 100); - }); - - observer.observe(document.body, { - childList: true, - subtree: true, - characterData: true, - }); - - // Also listen for popstate - const popstateHandler = () => updateTitleFromUrl(); - window.addEventListener('popstate', popstateHandler); - - // Check periodically as fallback - const intervalId = setInterval(updateTitleFromUrl, 2000); // Less frequent - - // Store cleanup functions - cleanupFunctions = [ - () => observer.disconnect(), - () => window.removeEventListener('popstate', popstateHandler), - () => clearInterval(intervalId), - () => { - if (mutationTimeout) clearTimeout(mutationTimeout); - }, - ]; -} - -// Cleanup function to prevent memory leaks -export function cleanup() { - cleanupFunctions.forEach((fn) => fn()); - cleanupFunctions = []; -} diff --git a/web/src/server/server.ts b/web/src/server/server.ts index 32271435..9219dc35 100644 --- a/web/src/server/server.ts +++ b/web/src/server/server.ts @@ -550,25 +550,37 @@ export async function createApp(): Promise { // Serve static files with .html extension handling and caching headers const publicPath = path.join(process.cwd(), 'public'); + const isDevelopment = !process.env.BUILD_DATE || process.env.NODE_ENV === 'development'; + app.use( express.static(publicPath, { extensions: ['html'], // This allows /logs to resolve to /logs.html - maxAge: '1d', // Cache static assets for 1 day - etag: true, // Enable ETag generation - lastModified: true, // Enable Last-Modified header + maxAge: isDevelopment ? 0 : '1d', // No cache in dev, 1 day in production + etag: !isDevelopment, // Disable ETag in development + lastModified: !isDevelopment, // Disable Last-Modified in development setHeaders: (res, filePath) => { - // Set longer cache for immutable assets - if (filePath.match(/\.(js|css|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|ico)$/)) { - res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); - } - // Shorter cache for HTML files - else if (filePath.endsWith('.html')) { - res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour + if (isDevelopment) { + // Disable all caching in development + res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); + res.setHeader('Pragma', 'no-cache'); + res.setHeader('Expires', '0'); + } else { + // Production caching rules + // Set longer cache for immutable assets + if (filePath.match(/\.(js|css|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|ico)$/)) { + res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); + } + // Shorter cache for HTML files + else if (filePath.endsWith('.html')) { + res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour + } } }, }) ); - logger.debug(`Serving static files from: ${publicPath} with caching headers`); + logger.debug( + `Serving static files from: ${publicPath} ${isDevelopment ? 'with caching disabled (dev mode)' : 'with caching headers'}` + ); // Health check endpoint (no auth required) app.get('/api/health', (_req, res) => { diff --git a/web/src/server/utils/activity-detector.ts b/web/src/server/utils/activity-detector.ts index 4d30ed32..26d38de3 100644 --- a/web/src/server/utils/activity-detector.ts +++ b/web/src/server/utils/activity-detector.ts @@ -75,7 +75,7 @@ export interface AppDetector { // Format 4: ✳ Measuring… (120s · ⚒ 671 tokens · esc to interrupt) - with hammer symbol // Note: We match ANY non-whitespace character as the indicator since Claude uses many symbols const CLAUDE_STATUS_REGEX = - /(\S)\s+(\w+)…\s*\((\d+)s(?:\s*·\s*(\S?)\s*([\d.]+)\s*k?\s*tokens\s*·\s*[^)]+to\s+interrupt)?\)/gi; + /(\S)\s+([\w\s]+?)…\s*\((\d+)s(?:\s*·\s*(\S?)\s*([\d.]+)\s*k?\s*tokens\s*·\s*[^)]+to\s+interrupt)?\)/gi; /** * Parse Claude-specific status from output diff --git a/web/src/test/e2e/logs-api.e2e.test.ts b/web/src/test/e2e/logs-api.e2e.test.ts index 2554000f..82632bda 100644 --- a/web/src/test/e2e/logs-api.e2e.test.ts +++ b/web/src/test/e2e/logs-api.e2e.test.ts @@ -116,13 +116,19 @@ describe.sequential('Logs API Tests', () => { }), }); - // Give it a moment to write (longer in CI environments) - await sleep(500); + // Wait and retry for the log file to be written and flushed + let info: any; + let attempts = 0; + const maxAttempts = 10; + const retryDelay = 200; - const response = await fetch(`http://localhost:${server?.port}/api/logs/info`); - - expect(response.status).toBe(200); - const info = await response.json(); + do { + await sleep(retryDelay); + const response = await fetch(`http://localhost:${server?.port}/api/logs/info`); + expect(response.status).toBe(200); + info = await response.json(); + attempts++; + } while (!info.exists && attempts < maxAttempts); expect(info).toHaveProperty('exists'); expect(info).toHaveProperty('size'); diff --git a/web/src/test/unit/terminal-themes.test.ts b/web/src/test/unit/terminal-themes.test.ts new file mode 100644 index 00000000..ee190e95 --- /dev/null +++ b/web/src/test/unit/terminal-themes.test.ts @@ -0,0 +1,51 @@ +import { describe, expect, it } from 'vitest'; +import { TERMINAL_THEMES } from '../../client/utils/terminal-themes.js'; + +describe('terminal-themes', () => { + it('should include all expected theme IDs', () => { + const themeIds = TERMINAL_THEMES.map((t) => t.id); + expect(themeIds).toContain('auto'); + expect(themeIds).toContain('dark'); + expect(themeIds).toContain('light'); + }); + + it('should have valid theme structure', () => { + TERMINAL_THEMES.forEach((theme) => { + expect(theme).toHaveProperty('id'); + expect(theme).toHaveProperty('name'); + expect(theme).toHaveProperty('description'); + expect(theme).toHaveProperty('colors'); + expect(typeof theme.id).toBe('string'); + expect(typeof theme.name).toBe('string'); + expect(typeof theme.description).toBe('string'); + expect(typeof theme.colors).toBe('object'); + }); + }); + + it('should have unique theme IDs', () => { + const themeIds = TERMINAL_THEMES.map((t) => t.id); + const uniqueIds = [...new Set(themeIds)]; + expect(themeIds).toHaveLength(uniqueIds.length); + }); + + it('should have non-empty names and descriptions', () => { + TERMINAL_THEMES.forEach((theme) => { + expect(theme.name.trim()).not.toBe(''); + expect(theme.description.trim()).not.toBe(''); + }); + }); + + it('should have valid color format for themes with colors', () => { + TERMINAL_THEMES.forEach((theme) => { + if (theme.id !== 'auto') { + // auto theme has empty colors object + Object.values(theme.colors).forEach((color) => { + if (typeof color === 'string' && color.startsWith('#')) { + // Basic hex color validation + expect(color).toMatch(/^#[0-9a-fA-F]{6}$/); + } + }); + } + }); + }); +}); diff --git a/web/src/test/utils/activity-detector.test.ts b/web/src/test/utils/activity-detector.test.ts index 789fdbf2..f1095e19 100644 --- a/web/src/test/utils/activity-detector.test.ts +++ b/web/src/test/utils/activity-detector.test.ts @@ -73,6 +73,10 @@ describe('Activity Detector', () => { input: '◐ Processing… (42s · ↑ 1.2k tokens · esc to interrupt)\n', expected: '◐ Processing (42s, ↑1.2k)', }, + { + input: '✻ Compacting conversation… (303s · ↑ 16.3k tokens · esc to interrupt)\n', + expected: '✻ Compacting conversation (303s, ↑16.3k)', + }, ]; for (const { input, expected } of statuses) {