mirror of
https://github.com/wavetermdev/waveterm
synced 2026-05-23 08:48:28 +00:00
An open-source, AI-integrated, cross-platform terminal for seamless workflows
58e000bf12
## Alert and Confirm Modal System for Tsunami This PR implements a complete modal system for the tsunami app framework as specified in the requirements. ### Implementation Summary **Backend (Go) - 574 lines changed across 11 files:** 1. **Type Definitions** (`rpctypes/protocoltypes.go`): - `ModalConfig`: Configuration for modal display with icon, title, text, and button labels - `ModalResult`: Result structure containing modal ID and confirmation status 2. **Client State Management** (`engine/clientimpl.go`): - Added `ModalState` to track open modals with result channels - `OpenModals` map to track all currently open modals - `ShowModal()`: Sends SSE event to display modal and returns result channel - `CloseModal()`: Processes modal result from frontend - `CloseAllModals()`: Automatically cancels all modals when frontend sends Resync flag (page refresh) 3. **API Endpoint** (`engine/serverhandlers.go`): - `/api/modalresult` POST endpoint to receive modal results from frontend - Validates and processes `ModalResult` JSON payload - Closes all modals on Resync (page refresh) before processing events 4. **User-Facing Hooks** (`app/hooks.go`): - `UseAlertModal()`: Returns (isOpen, triggerAlert) for alert modals - `UseConfirmModal()`: Returns (isOpen, triggerConfirm) for confirm modals - Both hooks manage local state and handle async modal lifecycle **Frontend (TypeScript/React):** 1. **Type Definitions** (`types/vdom.d.ts`): - Added `ModalConfig` and `ModalResult` TypeScript types 2. **Modal Components** (`element/modals.tsx`): - `AlertModal`: Dark-mode styled alert with icon, title, text, and OK button - `ConfirmModal`: Dark-mode styled confirm with icon, title, text, OK and Cancel buttons - Both support keyboard (ESC) and backdrop click dismissal - Fully accessible with focus management 3. **Model Integration** (`model/tsunami-model.tsx`): - Added `currentModal` atom to track displayed modal - SSE event handler for `showmodal` events - `sendModalResult()`: Sends result to `/api/modalresult` and clears modal 4. **UI Integration** (`vdom.tsx`): - Integrated modal display in `VDomView` component - Conditionally renders alert or confirm modal based on type **Demo Application** (`demo/modaltest/`): - Comprehensive demonstration of modal functionality - Shows 4 different modal configurations: - Alert with icon - Simple alert with custom button text - Confirm modal - Delete confirmation with custom buttons - Displays modal state and results in real-time ### Key Features ✅ **SSE-Based Modal Display**: Modals are pushed from backend to frontend via SSE ✅ **API-Based Result Handling**: Results sent back via `/api/modalresult` endpoint ✅ **Automatic Cleanup**: All open modals auto-cancel on page refresh (when Resync flag is set) ✅ **Type-Safe Hooks**: Full TypeScript and Go type safety ✅ **Dark Mode UI**: Components styled for Wave Terminal's dark theme ✅ **Accessibility**: Keyboard navigation, ESC to dismiss, backdrop click support ✅ **Zero Security Issues**: Passed CodeQL security analysis ✅ **Zero Code Review Issues**: Clean implementation following best practices ### Testing - ✅ Go code compiles without errors - ✅ TypeScript/React builds without errors - ✅ All existing tests pass - ✅ Demo app created and compiles successfully - ✅ CodeQL security scan: 0 vulnerabilities - ✅ Code review: 0 issues ### Security Summary No security vulnerabilities were introduced. All modal operations are properly scoped to the client's SSE connection, and modal IDs are generated server-side to prevent tampering. Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: sawka <2722291+sawka@users.noreply.github.com> |
||
|---|---|---|
| .github | ||
| .roo/rules | ||
| .storybook | ||
| .vscode | ||
| .zed | ||
| aiprompts | ||
| assets | ||
| build | ||
| cmd | ||
| db | ||
| docs | ||
| emain | ||
| frontend | ||
| pkg | ||
| public | ||
| schema | ||
| testdriver | ||
| tests/copytests | ||
| tsunami | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .golangci.yml | ||
| .prettierignore | ||
| ACKNOWLEDGEMENTS.md | ||
| BUILD.md | ||
| CNAME | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| electron-builder.config.cjs | ||
| electron.vite.config.ts | ||
| eslint.config.js | ||
| go.mod | ||
| go.sum | ||
| index.html | ||
| LICENSE | ||
| NOTICE | ||
| package-lock.json | ||
| package.json | ||
| prettier.config.cjs | ||
| README.md | ||
| RELEASES.md | ||
| ROADMAP.md | ||
| SECURITY.md | ||
| staticcheck.conf | ||
| Taskfile.yml | ||
| tsconfig.json | ||
| version.cjs | ||
| vitest.config.ts | ||
Wave Terminal
Wave is an open-source terminal that combines traditional terminal features with graphical capabilities like file previews, web browsing, and AI assistance. It runs on MacOS, Linux, and Windows.
Modern development involves constantly switching between terminals and browsers - checking documentation, previewing files, monitoring systems, and using AI tools. Wave brings these graphical tools directly into the terminal, letting you control them from the command line. This means you can stay in your terminal workflow while still having access to the visual interfaces you need.
Key Features
- Flexible drag & drop interface to organize terminal blocks, editors, web browsers, and AI assistants
- Built-in editor for seamlessly editing remote files with syntax highlighting and modern editor features
- Rich file preview system for remote files (markdown, images, video, PDFs, CSVs, directories)
- Integrated AI chat with support for multiple models (OpenAI, Claude, Azure, Perplexity, Ollama)
- Command Blocks for isolating and monitoring individual commands with auto-close options
- One-click remote connections with full terminal and file system access
- Rich customization including tab themes, terminal styles, and background images
- Powerful
wshcommand system for managing your workspace from the CLI and sharing data between terminal sessions
Installation
Wave Terminal works on macOS, Linux, and Windows.
Platform-specific installation instructions can be found here.
You can also install Wave Terminal directly from: www.waveterm.dev/download.
Minimum requirements
Wave Terminal runs on the following platforms:
- macOS 11 or later (arm64, x64)
- Windows 10 1809 or later (x64)
- Linux based on glibc-2.28 or later (Debian 10, RHEL 8, Ubuntu 20.04, etc.) (arm64, x64)
The WSH helper runs on the following platforms:
- macOS 11 or later (arm64, x64)
- Windows 10 or later (arm64, x64)
- Linux Kernel 2.6.32 or later (x64), Linux Kernel 3.1 or later (arm64)
Roadmap
Wave is constantly improving! Our roadmap will be continuously updated with our goals for each release. You can find it here.
Want to provide input to our future releases? Connect with us on Discord or open a Feature Request!
Links
- Homepage — https://www.waveterm.dev
- Download Page — https://www.waveterm.dev/download
- Documentation — https://docs.waveterm.dev
- Legacy Documentation — https://legacydocs.waveterm.dev
- Blog — https://blog.waveterm.dev
- X — https://x.com/wavetermdev
- Discord Community — https://discord.gg/XfvZ334gwU
Building from Source
Contributing
Wave uses GitHub Issues for issue tracking.
Find more information in our Contributions Guide, which includes:
License
Wave Terminal is licensed under the Apache-2.0 License. For more information on our dependencies, see here.