Jeff Emmett
4306cd6646
Add interactive terminal windows to canvas dashboard with tmux session management and SSH proxy support. ## Features - **TerminalShape**: Resizable terminal windows on canvas - **SessionBrowser**: UI for managing tmux sessions (list, attach, create) - **TerminalContent**: xterm.js-based terminal renderer with WebSocket streaming - **TerminalProxy**: SSH connection pooling and tmux command execution - **Collaboration Mode**: Read-only by default, owner can enable shared input - **Pin to View**: Keep terminal fixed during pan/zoom ## Implementation Frontend Components: - src/shapes/TerminalShapeUtil.tsx - Terminal shape definition - src/tools/TerminalTool.ts - Shape creation tool - src/components/TerminalContent.tsx - xterm.js integration with WebSocket - src/components/SessionBrowser.tsx - tmux session management UI - Registered in Board.tsx and CustomToolbar.tsx Backend Infrastructure: - worker/TerminalProxy.ts - SSH proxy with connection pooling - terminal-config.example.json - Configuration template Documentation: - TERMINAL_SPEC.md - Complete feature specification (19 sections) - TERMINAL_INTEGRATION.md - Backend setup guide with 2 deployment options ## Dependencies - @xterm/xterm ^5.5.0 - Terminal emulator - @xterm/addon-fit ^0.10.0 - Responsive sizing - @xterm/addon-web-links ^0.11.0 - Clickable URLs - ssh2 ^1.16.0 - SSH client for backend ## Next Steps See TERMINAL_INTEGRATION.md for: - Backend WebSocket server setup on DigitalOcean droplet - SSH configuration and security hardening - Testing and troubleshooting procedures ## Notes - Backend implementation requires separate WebSocket server (Cloudflare Workers lack PTY support) - Frontend components ready but need backend deployed to function - Mock data shown in SessionBrowser for development 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .github/workflows | ||
| .wrangler/tmp | ||
| docs | ||
| src | ||
| worker | ||
| .cfignore | ||
| .env.example | ||
| .gitattributes | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierrc.json | ||
| CLOUDFLARE_PAGES_MIGRATION.md | ||
| CLOUDFLARE_PAGES_SETUP.md | ||
| CLOUDFLARE_WORKER_SETUP.md | ||
| DATA_CONVERSION_GUIDE.md | ||
| DATA_CONVERSION_SUMMARY.md | ||
| DATA_SAFETY_VERIFICATION.md | ||
| DEPLOYMENT_GUIDE.md | ||
| DEPLOYMENT_SUMMARY.md | ||
| FATHOM_INTEGRATION.md | ||
| GESTURES.md | ||
| MIGRATION_CHECKLIST.md | ||
| QUARTZ_SYNC_SETUP.md | ||
| README.md | ||
| SANITIZATION_EXPLANATION.md | ||
| TERMINAL_INTEGRATION.md | ||
| TERMINAL_SPEC.md | ||
| TLDRW_INTERACTIVE_ELEMENTS.md | ||
| TRANSCRIPTION_SETUP.md | ||
| WORKER_ENV_GUIDE.md | ||
| _redirects | ||
| github-integration-setup.md | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| quartz-sync.env.example | ||
| start-network-dev.sh | ||
| switch-worker-env.sh | ||
| switch-worker.sh | ||
| terminal-config.example.json | ||
| test-change-detection.js | ||
| test-data-conversion.ts | ||
| test-holon-data.js | ||
| test-r2-conversion.md | ||
| test-video-chat-network.js | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.worker.json | ||
| vite.config.ts | ||
| wrangler.dev.toml | ||
| wrangler.toml | ||
README.md
A website.
Do npm i and npm run dev