feat: Improve onboarding and on-going useage for non-technical users via web-browsable UI

[pacphi]

Pre-flight Checklist

• I have searched existing issues to ensure this feature hasn't been requested
• I have reviewed the documentation and this feature doesn't already exist

Feature Category

Other

Problem Statement

For non-technical personae, how does an individual or team get started with Sindri? How do we simplify the on-boarding experience? Can we make it so that all that is required is a web-browser? User(s) could be guided thru an interactive, progressive-staged wizard? What might it be like to interact with one or more VMs (hosting curated tools) with only a browser?

Proposed Solution

These files express the user-journey, design, security concerns, and technical implementation of to solve the stated problem:

• BROWSER_LAUNCHER_DESIGN.md
• BROWSER_SHELL_DESIGN.md

Alternatives Considered

One could manually curate a desktop experience. But that introduces risk(s). And we want the user to be guided thru the install/configuration process.

Exemplary Tools

• https://claraverse.space/
• https://github.com/features/codespaces
• https://coder.com/

Use Cases

Onboarding

1. As a curious developer, I want to deploy a Sindri VM through a guided web interface so that I can try it without installing CLI tools or learning complex commands.
2. As a cost-conscious user, I want to see real-time cost estimates before deployment so that I can make informed decisions and avoid billing surprises.
3. As a full-stack developer, I want to select my development tools and environments through preset profiles so that my VM comes pre-configured with everything I need.
4. As a security-aware user, I want to securely provide my Fly.io API token with clear validation and encryption so that I can deploy safely without exposing credentials.
5. As a first-time user, I want clear progress indicators during the 8-12 minute deployment so that I understand what's happening and know when my VM is ready.
6. As a team lead with limited technical knowledge, I want a simplified interface to provision VMs for team members so that I can enable my team without needing DevOps expertise.
7. As an experienced developer, I want to customize extension selection and VM resources so that I can optimize my environment for specific workloads and workflows.
8. As a returning user, I want the wizard to remember my preferences and API tokens (securely) so that subsequent deployments are faster and require less repetitive input.

Interaction

1. As a mobile developer, I want to access and control my development VM from my smartphone so that I can fix critical issues and deploy code without needing my laptop.
2. As an engineering manager, I want to view and access all team VMs from a single dashboard so that I can quickly troubleshoot issues and assist team members without requesting SSH credentials.
3. As a workshop instructor, I want to provision multiple VMs with shareable access links so that students can start coding immediately without spending time on SSH configuration.
4. As a traveling consultant, I want to securely access my VMs from untrusted devices via browser so that I can work from client sites without installing software or leaving traces on their machines.
5. As a pair programmer, I want to share my terminal session in real-time with teammates so that we can collaborate on debugging and learning together with full interaction capabilities.
6. As a mobile user, I want a touch-optimized keyboard with shortcuts and command snippets so that I can efficiently execute terminal commands on devices without physical keyboards.
7. As a developer, I want to browse, upload, download, and edit files through a visual interface so that I can manage my project files without memorizing command-line syntax.
8. As a team lead, I want to view live logs with filtering and sharing capabilities so that I can quickly diagnose production issues and share relevant excerpts with my team.
9. As a developer on-the-go, I want my terminal sessions to persist across network interruptions and device switches so that I can seamlessly continue work when changing locations or devices.
10. As a workshop participant, I want to watch my instructor's terminal in real-time and replay commands so that I can follow along and catch up if I fall behind during demonstrations.

Priority

Medium - Would improve my workflow

Acceptance Criteria

Onboarding

1. Zero CLI Dependencies
   • Users can complete the entire deployment flow without installing flyctl, git, or make
   • The wizard validates Fly.io API tokens without requiring local CLI authentication
   • All deployment operations execute server-side through the web interface
2. Accurate Cost Estimation
   • Real-time cost calculator displays monthly estimates based on selected VM size, region, and extensions
   • Cost updates dynamically as users change configuration options
   • Final confirmation screen shows estimated costs before deployment begins
3. Guided Multi-Step Experience
   • Wizard enforces logical step progression (authentication → configuration → review → deploy)
   • Users cannot proceed to next step until current step validation passes
   • Navigation allows moving backward to revise choices without losing progress
4. Real-Time Deployment Tracking
   • Progress indicator shows current deployment phase (VM creation, volume mounting, extension installation, etc.)
   • Estimated time remaining updates based on actual progress
   • Console output streams live to the browser for transparency
5. Successful Deployment Output
   • Upon completion, users receive SSH connection command, VM URL, and credential information
   • Deployment produces functionally identical VM to CLI-based vm-setup.sh approach
   • Connection instructions are copy-paste ready and work immediately
6. Extension Validation and Dependency Resolution
   • Wizard prevents invalid extension combinations (e.g., nodejs-devtools without nodejs)
   • Protected extensions (workspace-structure, mise-config, ssh-environment) are pre-selected and immutable
   • Extension selection shows dependency warnings before deployment
7. Secure Token Handling
   • Fly.io API tokens are validated before deployment begins
   • Tokens are encrypted in transit and at rest
   • Users can choose whether to persist tokens (with clear security warnings)
8. Error Recovery and Troubleshooting
   • Deployment failures show actionable error messages with suggested fixes
   • Failed deployments can be retried without re-entering all configuration
   • Partial deployments are cleaned up automatically on failure
9. Responsive and Accessible UI
   • Wizard works on desktop, tablet, and mobile browsers
   • Interface meets WCAG 2.1 AA accessibility standards
   • Form inputs provide clear labels, help text, and validation feedback
10. Configuration Persistence (Optional but Recommended)
    • Returning users can access saved configurations and API tokens (if opted-in)
    • Saved configurations can be edited and reused for new deployments
    • Users can manage (view, edit, delete) saved configurations from a dashboard

Interaction

1. Initial Connection Performance
   • Desktop users connect to VM terminal in <2 seconds
   • Mobile users connect to VM terminal in <5 seconds
   • Connection success rate ≥95% across all device types
2. Session Persistence
   • Terminal sessions survive network interruptions and automatically reconnect
   • Session persistence rate ≥95% for network blips/drops
   • Users can close browser and resume session on different device
3. Mobile Touch Keyboard
   • Mobile interface provides touch-optimized keyboard with essential terminal keys (Ctrl, Alt, Esc, Tab, arrows)
   • Keyboard supports modifier key combinations (Ctrl+C, Alt+Tab, etc.)
   • Context-aware shortcuts display based on current directory (git commands in git repo, npm commands in node project)
   • Haptic feedback provided on key presses
4. Multi-Device Responsive Layout
   • Browser shell renders correctly on desktop (≥1024px), tablet (768px-1023px), and mobile (320px-767px)
   • Interface adapts to portrait and landscape orientations
   • All core features (terminal, file browser, settings) accessible on mobile devices
5. File Management Interface
   • Users can browse directory tree structure with expand/collapse
   • Users can upload files via button click or drag-and-drop
   • Users can download individual files with single click
   • Users can create, rename, and delete files through UI
   • File browser includes search functionality
6. Real-time Terminal Emulation
   • Terminal supports full VT100/xterm emulation with 256 colors
   • Keystroke latency median <100ms
   • Terminal supports copy/paste (Ctrl+C/V or Cmd+C/V)
   • Find-in-terminal functionality available (Ctrl+F)
7. Collaborative Sessions
   • Users can generate shareable session links with access tokens
   • Multiple users can view same terminal session in real-time
   • Session owner can toggle read-only mode for viewers
   • Session activity recorded for later replay
8. Security & Authentication
   • All sessions require valid authentication token
   • Sessions auto-expire after 30 minutes of inactivity
   • WebSocket connections use encryption
   • No plaintext credentials stored client-side
9. Lightweight Performance
   • Initial page load <5MB total size
   • Subsequent launches instant (cached resources)
   • Browser shell consumes <100MB RAM on client device
10. Zero-Configuration Access
    • Users access VM terminal without installing SSH clients
    • No SSH key configuration required
    • No port forwarding setup needed
    • Anonymous/guest access supported via token URLs for workshop scenarios

Implementation

• I'm willing to submit a pull request for this feature
• I can help with testing once implemented
• I can help with documentation

Additional Context

No response

Cost Impact

Might increase costs