From 531a8a75da4425611a20ee2e7d3c38d17d9b4ced Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Mon, 23 Jun 2025 14:45:34 +0200 Subject: [PATCH] Tauri updates, tests, linter, more fetat parity --- tauri/ENHANCEMENTS_COMPLETE.md | 168 ++ tauri/IMPROVEMENTS.md | 155 ++ tauri/TYPESCRIPT_MIGRATION.md | 137 ++ tauri/lint-fix.sh | 29 + tauri/lint.sh | 27 + tauri/package-lock.json | 1104 +++++++++++- tauri/package.json | 27 +- tauri/public | 1 + tauri/public/index.html | 266 --- tauri/public/server-console.html | 634 ------- tauri/public/session-detail.html | 364 ---- tauri/public/settings.html | 1516 ----------------- tauri/public/welcome.html | 638 ------- tauri/src-tauri/.gitignore | 109 ++ tauri/src-tauri/Cargo.toml | 43 +- tauri/src-tauri/src/api_client.rs | 319 +++- tauri/src-tauri/src/api_testing.rs | 56 +- tauri/src-tauri/src/app_mover.rs | 10 +- tauri/src-tauri/src/auth_cache.rs | 12 +- tauri/src-tauri/src/auto_launch.rs | 12 +- tauri/src-tauri/src/backend_manager.rs | 410 ++++- tauri/src-tauri/src/cli_installer.rs | 11 +- tauri/src-tauri/src/commands.rs | 590 ++++++- tauri/src-tauri/src/debug_features.rs | 6 + tauri/src-tauri/src/errors.rs | 285 +++- tauri/src-tauri/src/fs_api.rs | 4 +- tauri/src-tauri/src/keychain.rs | 1 + tauri/src-tauri/src/main.rs | 65 +- tauri/src-tauri/src/network_utils.rs | 8 +- tauri/src-tauri/src/ngrok.rs | 295 +++- tauri/src-tauri/src/notification_manager.rs | 19 +- tauri/src-tauri/src/permissions.rs | 12 +- tauri/src-tauri/src/port_conflict.rs | 27 +- tauri/src-tauri/src/session_monitor.rs | 295 +++- tauri/src-tauri/src/settings.rs | 498 +++++- tauri/src-tauri/src/state.rs | 235 +++ tauri/src-tauri/src/terminal.rs | 225 ++- tauri/src-tauri/src/terminal_detector.rs | 6 +- tauri/src-tauri/src/terminal_integrations.rs | 47 +- tauri/src-tauri/src/terminal_spawn_service.rs | 337 +++- tauri/src-tauri/src/tray_menu.rs | 331 +++- tauri/src-tauri/src/tty_forward.rs | 28 +- tauri/src-tauri/src/unix_socket_server.rs | 2 +- tauri/src-tauri/src/updater.rs | 26 +- tauri/src-tauri/src/welcome.rs | 8 +- .../tests/keychain_integration_test.rs | 12 + .../tests/server_integration_test.rs | 12 + .../tests/terminal_integration_test.rs | 13 + tauri/src/components/README.md | 69 + tauri/src/components/app-main.ts | 381 +++++ tauri/src/components/base/tauri-base.ts | 180 ++ .../components/example-modern-component.ts | 325 ++++ tauri/src/components/index.ts | 20 + tauri/src/components/server-console-app.ts | 654 +++++++ tauri/src/components/session-detail-app.ts | 392 +++++ tauri/src/components/settings-app.ts | 463 +++++ tauri/src/components/settings-checkbox.ts | 115 ++ tauri/src/components/settings-tab.ts | 84 + tauri/src/components/shared/styles.ts | 513 ++++++ tauri/src/components/shared/vt-button.test.ts | 107 ++ tauri/src/components/shared/vt-button.ts | 108 ++ tauri/src/components/shared/vt-card.ts | 85 + .../components/shared/vt-error-boundary.ts | 379 +++++ tauri/src/components/shared/vt-list.ts | 308 ++++ .../src/components/shared/vt-loading.test.ts | 90 + tauri/src/components/shared/vt-loading.ts | 98 ++ tauri/src/components/shared/vt-modal.ts | 282 +++ tauri/src/components/shared/vt-stepper.ts | 220 +++ tauri/src/components/terminal/README.md | 112 ++ .../terminal/virtual-terminal-output.ts | 313 ++++ tauri/src/components/welcome-app.ts | 529 ++++++ tauri/src/contexts/app-context.ts | 130 ++ tauri/{public => src}/icon.png | Bin tauri/src/index.html | 47 + tauri/src/mixins/with-error-handler.ts | 90 + tauri/src/server-console.html | 34 + tauri/src/session-detail.html | 33 + tauri/src/settings.html | 46 + tauri/src/utils/accessibility.ts | 367 ++++ tauri/src/welcome.html | 36 + tauri/tsconfig.json | 41 + tauri/vite.config.js | 23 + tauri/web-test-runner.config.mjs | 26 + 83 files changed, 12260 insertions(+), 3875 deletions(-) create mode 100644 tauri/ENHANCEMENTS_COMPLETE.md create mode 100644 tauri/IMPROVEMENTS.md create mode 100644 tauri/TYPESCRIPT_MIGRATION.md create mode 100755 tauri/lint-fix.sh create mode 100755 tauri/lint.sh create mode 120000 tauri/public delete mode 100644 tauri/public/index.html delete mode 100644 tauri/public/server-console.html delete mode 100644 tauri/public/session-detail.html delete mode 100644 tauri/public/settings.html delete mode 100644 tauri/public/welcome.html create mode 100644 tauri/src-tauri/.gitignore create mode 100644 tauri/src-tauri/tests/keychain_integration_test.rs create mode 100644 tauri/src-tauri/tests/server_integration_test.rs create mode 100644 tauri/src-tauri/tests/terminal_integration_test.rs create mode 100644 tauri/src/components/README.md create mode 100644 tauri/src/components/app-main.ts create mode 100644 tauri/src/components/base/tauri-base.ts create mode 100644 tauri/src/components/example-modern-component.ts create mode 100644 tauri/src/components/index.ts create mode 100644 tauri/src/components/server-console-app.ts create mode 100644 tauri/src/components/session-detail-app.ts create mode 100644 tauri/src/components/settings-app.ts create mode 100644 tauri/src/components/settings-checkbox.ts create mode 100644 tauri/src/components/settings-tab.ts create mode 100644 tauri/src/components/shared/styles.ts create mode 100644 tauri/src/components/shared/vt-button.test.ts create mode 100644 tauri/src/components/shared/vt-button.ts create mode 100644 tauri/src/components/shared/vt-card.ts create mode 100644 tauri/src/components/shared/vt-error-boundary.ts create mode 100644 tauri/src/components/shared/vt-list.ts create mode 100644 tauri/src/components/shared/vt-loading.test.ts create mode 100644 tauri/src/components/shared/vt-loading.ts create mode 100644 tauri/src/components/shared/vt-modal.ts create mode 100644 tauri/src/components/shared/vt-stepper.ts create mode 100644 tauri/src/components/terminal/README.md create mode 100644 tauri/src/components/terminal/virtual-terminal-output.ts create mode 100644 tauri/src/components/welcome-app.ts create mode 100644 tauri/src/contexts/app-context.ts rename tauri/{public => src}/icon.png (100%) create mode 100644 tauri/src/index.html create mode 100644 tauri/src/mixins/with-error-handler.ts create mode 100644 tauri/src/server-console.html create mode 100644 tauri/src/session-detail.html create mode 100644 tauri/src/settings.html create mode 100644 tauri/src/utils/accessibility.ts create mode 100644 tauri/src/welcome.html create mode 100644 tauri/tsconfig.json create mode 100644 tauri/vite.config.js create mode 100644 tauri/web-test-runner.config.mjs diff --git a/tauri/ENHANCEMENTS_COMPLETE.md b/tauri/ENHANCEMENTS_COMPLETE.md new file mode 100644 index 00000000..9a37bae4 --- /dev/null +++ b/tauri/ENHANCEMENTS_COMPLETE.md @@ -0,0 +1,168 @@ +# Tauri + Lit Enhancements Complete ✅ + +## Summary of Additional Improvements + +Building on the TypeScript migration, I've implemented several high-priority enhancements from the IMPROVEMENTS.md document: + +### 1. **Component Testing Framework** ✅ +- Added `@web/test-runner` with Playwright for cross-browser testing +- Created example test files for `vt-button` and `vt-loading` components +- Configured coverage thresholds (80% statements, 70% branches) +- Added `npm test` and `npm test:watch` scripts + +### 2. **Accessibility Enhancements** ✅ +- Created comprehensive accessibility utilities (`src/utils/accessibility.ts`): + - Screen reader announcements + - Focus trap directive for modals + - Keyboard navigation helpers + - Roving tabindex for lists + - Contrast ratio calculations +- Built accessible components: + - **vt-modal**: Fully accessible modal with focus trap and ARIA attributes + - **vt-list**: List component with keyboard navigation and screen reader support +- All components now include proper ARIA attributes and keyboard support + +### 3. **Error Boundaries & Enhanced Error Handling** ✅ +- **vt-error-boundary**: Component that catches and displays errors gracefully + - Global error and unhandled rejection handling + - Error logging to session storage + - Development mode with stack traces + - Retry and reload functionality +- **WithErrorHandler mixin**: Adds error handling to any component + - `safeAsync` and `safeSync` wrappers + - Error event dispatching + - Centralized error management + +## New Components Created + +### 1. **vt-modal** (`src/components/shared/vt-modal.ts`) +```typescript + this.showModal = false} +> +

Are you sure you want to proceed?

+
+ Confirm +
+ +``` + +### 2. **vt-list** (`src/components/shared/vt-list.ts`) +```typescript + +``` + +### 3. **vt-error-boundary** (`src/components/shared/vt-error-boundary.ts`) +```typescript + this.loadData()} + development +> + + +``` + +## Accessibility Features Added + +### 1. **Keyboard Navigation** +- Tab, Shift+Tab for focus navigation +- Arrow keys for list navigation +- Escape to close modals +- Enter/Space to activate buttons + +### 2. **Screen Reader Support** +- Proper ARIA labels and descriptions +- Live regions for dynamic content +- Role attributes for semantic meaning +- Announcement utilities for state changes + +### 3. **Focus Management** +- Focus trap for modals +- Roving tabindex for lists +- Focus restoration after modal close +- Visible focus indicators + +### 4. **Reduced Motion Support** +- Respects `prefers-reduced-motion` setting +- Conditional animations based on user preference + +## Testing Setup + +### Run Tests +```bash +npm test # Run all tests +npm test:watch # Run tests in watch mode +``` + +### Write New Tests +```typescript +import { html, fixture, expect } from '@open-wc/testing'; +import './my-component'; + +describe('MyComponent', () => { + it('should render', async () => { + const el = await fixture(html``); + expect(el).to.exist; + }); +}); +``` + +## Error Handling Patterns + +### Using Error Boundary +```typescript +// Wrap components that might error + console.error(error)} +> + + +``` + +### Using Error Handler Mixin +```typescript +import { WithErrorHandler } from '../mixins/with-error-handler'; + +@customElement('my-component') +export class MyComponent extends WithErrorHandler(LitElement) { + async loadData() { + // Automatically catches errors + const data = await this.safeAsync(() => + fetch('/api/data').then(r => r.json()) + ); + } +} +``` + +## Next Steps + +The following enhancements from IMPROVEMENTS.md could still be implemented: + +### Medium Priority +- **Build Optimizations**: Tree-shaking, CSS purging, source maps +- **Component Library Extraction**: Create npm package for reusability +- **Hot Module Replacement**: For better development experience +- **VS Code Snippets**: Custom snippets for common patterns + +### Advanced Features +- **Offline Support**: Service workers for PWA functionality +- **Real-time Collaboration**: WebSocket-based features +- **Plugin System**: Extensibility framework + +## Benefits Achieved + +1. **Better Testing**: Components can now be tested with real browser environments +2. **Improved Accessibility**: Full keyboard and screen reader support +3. **Robust Error Handling**: Graceful error recovery and debugging +4. **Enhanced UX**: Modal dialogs, better lists, loading states +5. **Developer Experience**: Clear patterns for common tasks + +The Tauri app now has a solid foundation with TypeScript, testing, accessibility, and error handling! \ No newline at end of file diff --git a/tauri/IMPROVEMENTS.md b/tauri/IMPROVEMENTS.md new file mode 100644 index 00000000..01038abf --- /dev/null +++ b/tauri/IMPROVEMENTS.md @@ -0,0 +1,155 @@ +# Tauri + Lit Improvements Plan + +## Overview +The VibeTunnel Tauri app already has a solid Lit-based architecture. This document outlines high-impact improvements to enhance performance, developer experience, and maintainability. + +## High Priority Improvements + +### 1. TypeScript Migration +**Impact**: High - Better type safety and IDE support +- Convert all `.js` files to `.ts` +- Add proper type definitions for Tauri API interactions +- Define interfaces for component properties and events +- Use Lit's built-in TypeScript decorators + +### 2. State Management Layer +**Impact**: High - Better data flow and maintainability +- Implement a lightweight state management solution (e.g., Lit's `@lit/context` or MobX) +- Create a centralized store for: + - Session management + - User preferences + - Connection status + - Terminal state +- Reduce prop drilling between components + +### 3. Component Testing Framework +**Impact**: High - Better reliability +- Set up `@web/test-runner` with Lit testing utilities +- Add unit tests for each component +- Implement visual regression testing +- Add E2E tests for critical user flows + +### 4. Performance Optimizations +**Impact**: Medium-High +- Implement lazy loading for route-based components +- Add virtual scrolling for terminal output +- Use `