- Initialize analytics service on app startup in main.tsx
- Integrate analytics consent management in App.tsx
- Track app lifecycle events (start, screen changes)
- Update Tauri configuration for production build
- Set up proper analytics shutdown on app close
- Ensure analytics is initialized before other services
This completes the analytics integration setup with proper
initialization and lifecycle management.
- Track MCP server additions with configuration method (manual/preset/import)
- Monitor server connections and disconnections with success metrics
- Record server removal events with connection state
- Track MCP tool invocations with source attribution
- Monitor connection errors with retry attempts
- Add performance tracking for server operations
These metrics help understand MCP server usage patterns and
identify connection reliability issues.
- Track prompt submissions with detailed metrics (length, complexity, attachments)
- Monitor session lifecycle (start, stop, duration, engagement)
- Record tool executions with performance and success metrics
- Track checkpoint creation and restoration events
- Implement enhanced session metrics including:
- Time to first message
- Average response time
- Files created/modified/deleted count
- Error frequency and recovery attempts
- Token usage and code generation metrics
- Add session engagement scoring
- Monitor conversation abandonment patterns
- Track agent execution context when applicable
This provides deep insights into user interactions and session
quality for improving the AI coding experience.
- Create AnalyticsErrorBoundary component to catch and track UI errors
- Implement automatic error reporting to analytics on component failures
- Provide customizable fallback UI for error states
- Add withAnalyticsErrorBoundary HOC for easy component wrapping
- Include error recovery functionality with reset capability
- Track component stack information for debugging
This ensures all UI errors are captured and reported for better
application stability monitoring and debugging.
- Add ResourceMonitor for tracking system resource usage (memory, CPU, network)
- Implement API request tracking with performance metrics and error monitoring
- Create usePerformanceMonitor hook for component-level performance tracking
- Add useAsyncPerformanceTracker for async operation monitoring
- Track memory warnings, performance bottlenecks, and network failures
- Support configurable thresholds for resource usage alerts
- Implement periodic sampling with intelligent reporting
These utilities enable proactive performance monitoring to identify
and address bottlenecks before they impact user experience.
- Implement comprehensive analytics type system with 100+ event types
- Create event builders for consistent event tracking
- Add main analytics service with PostHog integration
- Include performance tracking utilities with percentile monitoring
- Support anonymous user tracking with session management
- Implement sanitization helpers to remove PII from events
- Add event queueing with automatic flush intervals
- Support for screen tracking and app context
BREAKING CHANGE: Analytics tracking is now integrated throughout the app
and requires PostHog API key configuration via environment variables.
- Track tab creation and closure events in TabManager
- Add session tracking (created, resumed, completed) in ClaudeCodeSession
- Track model selection changes in ClaudeCodeSession
- Monitor agent execution events (success/failure) in AgentExecution
- Include execution duration metrics for agents
- Use useTrackEvent hook for consistent event tracking
- Add new Analytics tab to Settings component
- Implement analytics enable/disable toggle
- Show consent dialog when enabling analytics without prior consent
- Add delete all analytics data functionality
- Display privacy information and data collection details
- Track analytics settings changes with event tracking
- Initialize analytics service on app startup
- Add PostHogProvider wrapper for React integration
- Include AnalyticsConsentBanner in App component
- Set up app lifecycle tracking with useAppLifecycle hook
- Configure PostHog with environment variables
- Create AnalyticsConsent modal dialog for initial consent
- Add AnalyticsConsentBanner for non-intrusive consent request
- Implement privacy-focused consent flow with clear data collection info
- Show what data is collected and privacy protections
- Support both controlled and uncontrolled component usage
- Add smooth animations with Framer Motion
- Include accept/decline handlers with analytics service integration
- Create AnalyticsService singleton for centralized analytics tracking
- Implement ConsentManager for privacy-first analytics consent
- Add comprehensive event builders and sanitizers
- Define analytics event types and interfaces
- Support opt-in analytics with local storage persistence
- Include event queue and batch processing
- Add privacy-focused configuration (no session recording, no autocapture)
- Add proxy settings UI component with enable/disable toggle
- Support HTTP, HTTPS, NO_PROXY, and ALL_PROXY environment variables
- Store proxy settings in app database for persistence
- Apply proxy settings on app startup and when saved
- Pass proxy environment variables to Claude command execution
- Integrate proxy settings into main Settings page with unified save
- Add proxy support for both system binary and sidecar execution
This allows users to configure proxy settings for Claude API requests,
which is essential for users behind corporate firewalls or in regions
requiring proxy access.
Fixes network connectivity issues in restricted environments.
Fix white scrollbar issue in Tauri dark theme
- Added color-scheme: dark meta tag for native dark scrollbar support
- Implemented ultra-thin (3px) elegant scrollbars globally
- Removed overflow-hidden container that was cutting scrollbar
- Cleaned up redundant CSS scrollbar styling
- Optimized scrollbar appearance for both web and Tauri environments
- Add missing zustand dependency to package.json
- Fix unused variable errors in ToolWidgets.tsx
- Remove invalid 'white' theme comparison in claudeSyntaxTheme.ts
- Add proper TypeScript types to stores using StateCreator pattern
- Add null checks and type casting in Settings.tsx filter operations
- Add onChange handler to Switch component to suppress React warning
- Add 'check' script for TypeScript validation
These changes ensure the TypeScript build passes without errors.
- Add ThemeContext with support for dark, gray, light, and custom themes
- Create theme switching UI in Settings with theme selector
- Add custom color editor for custom theme mode
- Update styles.css with theme-specific CSS variables
- Add theme storage API methods for persistence
- Update syntax highlighting to match selected theme
- Wrap App with ThemeProvider for global theme access
The theming system allows users to switch between predefined themes
or create their own custom theme with live color editing.
- Add color-scheme: dark meta tag and CSS for proper dark scrollbars
- Implement ultra-thin (3px) elegant scrollbars globally
- Remove overflow-hidden that was cutting scrollbar at top
- Clean up redundant scrollbar CSS and component styling
- Optimize scrollbar appearance for both web and Tauri desktop
Fixes scrollbar visibility issues in dark theme across all components.
- Remove all bundled/sidecar binary functionality
- Delete build scripts for fetching and building Claude executables
- Simplify binary detection to only support system installations
- Update UI to remove bundled installation options
- Update build configuration and documentation
- Remove TODO comments from WebviewPreview.tsx
- Clean up unused import comments for Tauri webview
- Add App.cleaned.tsx as refactored version
- Improve code readability and maintainability
- Add useLoadingState hook for managing loading states
- Add useDebounce hook for debouncing values/callbacks
- Add useApiCall hook for API call management with error handling
- Add usePagination hook for pagination logic
- Create centralized hooks/index.ts for exports
- Reduce code duplication across components
- Add Zustand (v5.0.6) for lightweight state management
- Create sessionStore for managing session-related state
- Create agentStore for managing agent runs with intelligent polling
- Eliminate prop drilling across component tree
- Add comprehensive documentation for store usage
- Add TabContext and useTabState for centralized tab management
- Create TabManager component with drag-and-drop reordering
- Implement TabContent component for dynamic content rendering
- Add AgentsModal for enhanced agent management interface
- Integrate tab system into main App component
- Update existing components to work with new tab architecture
- Support multiple tab types: chat, agent, projects, usage, mcp, settings
- Add tab status tracking and unsaved changes detection
- Implement smooth animations and modern UI interactions
- Add scopeFilter prop to SlashCommandsManager for filtering by scope
- Replace browser confirm() with proper delete confirmation dialog
- Fix slash_command_delete to handle project commands with project_path param
- Add Slash Commands tab to ProjectSettings as the default tab
- Add Commands button to ClaudeCodeSession for quick access
- Improve error handling and user feedback for delete operations
- Better UI text when showing project-specific commands only
- Add built-in slash commands: /add-dir, /init, /review
- Update slash_commands_list to include default commands
- Enhance SlashCommandPicker UI to show default commands in dedicated tab
- Improve empty state handling with search-aware messaging
- Add proper command display with icons, descriptions, and scope badges
- Add Default and Custom tabs to separate built-in vs user/project commands
- Enhance command grouping with User/Project scope indicators and icons
- Improve filtering logic to work with tab selection
- Add visual distinction between user and project commands with icons
- Maintain backward compatibility with existing command display logic
Adds a comprehensive slash command system that allows users to create and manage custom commands:
- Backend implementation in Rust for discovering, loading, and managing slash commands
- Support for both user-level (~/.claude/commands/) and project-level (.claude/commands/) commands
- YAML frontmatter support for command metadata (description, allowed-tools)
- Command namespacing with directory structure (e.g., /namespace:command)
- Detection of special features: bash commands (\!), file references (@), and arguments ($ARGUMENTS)
Frontend enhancements:
- SlashCommandPicker component with autocomplete UI and keyboard navigation
- SlashCommandsManager component for CRUD operations on commands
- Integration with FloatingPromptInput to trigger picker on "/" input
- Visual indicators for command features (bash, files, arguments)
- Grouped display by namespace with search functionality
API additions:
- slash_commands_list: Discover all available commands
- slash_command_get: Retrieve specific command by ID
- slash_command_save: Create or update commands
- slash_command_delete: Remove commands
This implementation provides a foundation for users to create reusable command templates and workflows. Commands are stored as markdown files with optional YAML frontmatter for metadata.
Addresses #127 and #134
