Skip to content

feat: Migrate backend-ai-app-launcher main dialog and infrastructure to React #5372

@inureyes

Description

@inureyes

⚠️ Before implementing, read and follow the Implementation Rules in the epic issue #5364. These rules cover mandatory patterns for React component structure, BAI component usage, reactToWebComponent bridge, state management, i18n, error handling, styling, and code quality. The reference implementation is react/src/components/SignupModal.tsx.

Goal: Complete Lit file removal. Each migration must fully replace the Lit source file with React — not just the dialog parts. The migrated Lit .ts file and its type declarations must be deleted. This epic is a critical step toward removing all Lit/MWC/Vaadin dependencies from the codebase.

Description

The app launcher and all its sub-dialogs are already fully implemented in React. The Lit version (backend-ai-app-launcher.ts) only remains because backend-ai-edu-applauncher.ts still depends on it. This issue tracks removing the Lit app-launcher once the edu-launcher is migrated (#5377).

Part of epic #5364 — Phase 4 (App launcher)
Blocked by: #5377 (Edu app launcher must be migrated first to remove the last consumer of Lit app-launcher)

Existing React Implementation

All app launcher functionality already exists in React:

Component File Status
AppLauncherModal react/src/components/ComputeSessionNodeItems/AppLauncherModal.tsx (19KB) ✅ Complete
useBackendAIAppLauncher react/src/hooks/useBackendAIAppLauncher.tsx (27KB) ✅ Complete
SFTPConnectionInfoModal react/src/components/ComputeSessionNodeItems/SFTPConnectionInfoModal.tsx ✅ Complete
VNCConnectionInfoModal react/src/components/ComputeSessionNodeItems/VNCConnectionInfoModal.tsx ✅ Complete
XRDPConnectionInfoModal react/src/components/ComputeSessionNodeItems/XRDPConnectionInfoModal.tsx ✅ Complete
VSCodeDesktopConnectionModal react/src/components/ComputeSessionNodeItems/VSCodeDesktopConnectionModal.tsx ✅ Complete
TCPConnectionInfoModal react/src/components/ComputeSessionNodeItems/TCPConnectionInfoModal.tsx ✅ Complete
TensorboardPathModal react/src/components/ComputeSessionNodeItems/TensorboardPathModal.tsx ✅ Complete
AppLaunchConfirmationModal react/src/components/ComputeSessionNodeItems/AppLaunchConfirmationModal.tsx ✅ Complete

The Terminal Guide (carousel) from the Lit version was intentionally omitted — ttyd launches directly without a guide dialog.

What This Issue Now Covers

  1. Verify that the edu-launcher migration (feat: Migrate backend-ai-edu-applauncher to React #5377) has removed the last dependency on Lit backend-ai-app-launcher
  2. Remove src/components/backend-ai-app-launcher.ts (~2400 lines)
  3. Remove its type declarations in d/components/
  4. Remove the import from backend-ai-webui.ts (import './backend-ai-app-launcher')
  5. Remove the <backend-ai-app-launcher> tag from backend-ai-webui.ts render
  6. Verify no other Lit components reference backend-ai-app-launcher

Acceptance Criteria

  • Lit file removed: src/components/backend-ai-app-launcher.ts and its type declarations deleted
  • No remaining imports or references to backend-ai-app-launcher in src/
  • Build passes (pnpm run build)
  • All app launch functionality works via the existing React implementation
  • globalThis.appLauncher reference cleaned up or redirected

Labels: area:ux, effort:easy, platform:web, type:enhance

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:uxUI / UX issue.effort:hardNeed to understand many components / a large extent of contextual or historical information.platform:webWeb-specific issuetype:enhanceAdd new features

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions