feat(FR-1568): migrate app launcher notifications from Lit to React #4617

ironAiken2 · 2025-11-12T02:53:41Z

Resolves #TBD (FR-1568)

📋 Overview

Migration of the app launcher notification system from Lit-based (lablup-notification) to React-based notification system in Backend.AI.

🔄 App Launch & Notification Flow

1. App Launch Request Initiation (React → Lit)

AppLauncherModal.tsx (lines 108-133)

Create notification in React component with session info and app name
Call Lit component's _runApp with unified notification key

2. App Launch Process (Lit Component)

backend-ai-app-launcher.ts updates notification at each stage during app launch:

Phase 1: Initial Setup (lines 1251-1255)

Start backgroundTask at 10%
Status: pending

Phase 2: Proxy Configuration

V1 Proxy (lines 715-720): Progress at 20%
V2 Proxy (lines 773-780): Error handling with status: 'failed'

Phase 3: Socket Queue Addition (lines 902-909)

Progress at 50%
Adding kernel to socket queue

Phase 4: App Launch Completion (lines 1375-1387)

Progress at 100%
Status: succeeded
Update notification after showing TCP app dialogs (SSH, VNC, etc.)

Phase 5: Final Cleanup (lines 1447-1451)

Final notification display in finally block

3. Error Handling

Notification alerts users on errors:

Proxy setup failure (lines 697-702, 727-734)
Session creation failure (lines 821-826)
Service port unavailable (lines 835-841)
Connection failure (lines 916-930)

🎯 Key Changes

Unified Notification Key:
- Shared key (session-app-${sessionUuid}) between React and Lit components for state synchronization
Progress Tracking:
- Visual progress via backgroundTask property (0% → 10% → 20% → 50% → 100%)
- Status transitions: pending → succeeded or failed
Error Handling:
- Updates to status: 'failed' on failure at any stage
- User-friendly error messages

📝 Review Points

Notification state synchronization between React and Lit components
Prevention of duplicate notifications using shared notification key
Real-time progress updates for improved UX
Clear feedback on error occurrences

✅ Testing

App launch notifications appear correctly
Progress indicators update during app launch
Error states display appropriate messages
No duplicate notifications with same key
Backward compatibility maintained

ironAiken2 · 2025-11-12T02:53:57Z

feat(FR-1568): migrate app launcher notifications from Lit to React #4617 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-11-12T02:55:53Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.72%	547/11582
🔴	Branches	3.85%	314/8157
🔴	Functions	2.92%	104/3562
🔴	Lines	4.67%	529/11323

Test suite run success

125 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 77e1ef1

Copilot

Pull Request Overview

This PR migrates the app launcher notification system from Lit-based lablup-notification to a React-based notification system in Backend.AI. The changes unify notification management by using a shared notification key (session-app-${sessionUuid}) between React and Lit components, enabling real-time progress tracking (10% → 20% → 50% → 100%) with status transitions (pending → succeeded/failed).

Key changes:

Added backgroundTask property to lablup-notification.ts for progress tracking
Updated backend-ai-app-launcher.ts to use notifications instead of indicators with consistent error handling
Modified React components (AppLauncherModal.tsx, useBackendAIAppLauncher.tsx) to create initial notifications before Lit component takes over
Added "LunchingApp" translation key across 20+ language files

Reviewed Changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 25 comments.

Show a summary per file

File	Description
src/components/lablup-notification.ts	Added `backgroundTask` property and conditional rendering logic to support progress indicators
src/components/backend-ai-app-launcher.ts	Replaced indicator-based progress tracking with notification system using `backgroundTask` and unified notification keys
react/src/hooks/useBackendAIAppLauncher.tsx	Added notification creation in `runTerminal` function with session info and app name
react/src/components/ComputeSessionNodeItems/AppLauncherModal.tsx	Added notification setup before app launch, converted button to async `BAIButton` with proper state cleanup
resources/i18n/*.json (20+ files)	Added "LunchingApp" translation key for app launch notification message

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/backend-ai-app-launcher.ts

resources/i18n/de.json

resources/i18n/el.json

resources/i18n/es.json

resources/i18n/id.json

resources/i18n/pt.json

resources/i18n/ru.json

resources/i18n/tr.json

resources/i18n/vi.json

resources/i18n/zh-TW.json

agatha197

LGTM

src/components/backend-ai-app-launcher.ts

react/src/components/WEBUINotificationDrawer.tsx

react/src/components/MainLayout/MainLayout.tsx

yomybaby

LGTM

graphite-app · 2025-11-14T07:48:01Z

Merge activity

Nov 14, 7:48 AM UTC: yomybaby added this pull request to the Graphite merge queue.
Nov 14, 7:49 AM UTC: Merged by the Graphite merge queue.

…4617) Resolves #TBD ([FR-1568](https://lablup.atlassian.net/browse/FR-1568)) ## 📋 Overview Migration of the app launcher notification system from Lit-based (`lablup-notification`) to React-based notification system in Backend.AI. ## 🔄 App Launch & Notification Flow ### 1. **App Launch Request Initiation** (React → Lit) **`AppLauncherModal.tsx` (lines 108-133)** - Create notification in React component with session info and app name - Call Lit component's `_runApp` with unified notification key ### 2. **App Launch Process** (Lit Component) **`backend-ai-app-launcher.ts`** updates notification at each stage during app launch: #### Phase 1: Initial Setup (lines 1251-1255) - Start backgroundTask at 10% - Status: `pending` #### Phase 2: Proxy Configuration - **V1 Proxy** (lines 715-720): Progress at 20% - **V2 Proxy** (lines 773-780): Error handling with `status: 'failed'` #### Phase 3: Socket Queue Addition (lines 902-909) - Progress at 50% - Adding kernel to socket queue #### Phase 4: App Launch Completion (lines 1375-1387) - Progress at 100% - Status: `succeeded` - Update notification after showing TCP app dialogs (SSH, VNC, etc.) #### Phase 5: Final Cleanup (lines 1447-1451) - Final notification display in finally block ### 3. **Error Handling** Notification alerts users on errors: - Proxy setup failure (lines 697-702, 727-734) - Session creation failure (lines 821-826) - Service port unavailable (lines 835-841) - Connection failure (lines 916-930) ## 🎯 Key Changes 1. **Unified Notification Key**: - Shared key (`session-app-${sessionUuid}`) between React and Lit components for state synchronization 2. **Progress Tracking**: - Visual progress via `backgroundTask` property (0% → 10% → 20% → 50% → 100%) - Status transitions: `pending` → `succeeded` or `failed` 3. **Error Handling**: - Updates to `status: 'failed'` on failure at any stage - User-friendly error messages ## 📝 Review Points - Notification state synchronization between React and Lit components - Prevention of duplicate notifications using shared notification key - Real-time progress updates for improved UX - Clear feedback on error occurrences ## ✅ Testing - [x] App launch notifications appear correctly - [x] Progress indicators update during app launch - [x] Error states display appropriate messages - [x] No duplicate notifications with same key - [x] Backward compatibility maintained [FR-1568]: https://lablup.atlassian.net/browse/FR-1568?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

github-actions bot assigned ironAiken2 Nov 12, 2025

github-actions bot added area:ux UI / UX issue. area:i18n Localization size:L 100~500 LoC labels Nov 12, 2025

ironAiken2 force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch from 3baa86c to e921bc1 Compare November 12, 2025 03:05

ironAiken2 requested review from agatha197, nowgnuesLee and yomybaby November 12, 2025 03:05

ironAiken2 marked this pull request as ready for review November 12, 2025 03:06

Copilot AI review requested due to automatic review settings November 12, 2025 03:06

Copilot started reviewing on behalf of ironAiken2 November 12, 2025 03:06 View session

Copilot finished reviewing on behalf of ironAiken2 November 12, 2025 03:10

Copilot AI reviewed Nov 12, 2025

View reviewed changes

ironAiken2 force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch 2 times, most recently from 1b298ed to 004bc3f Compare November 12, 2025 04:22

agatha197 approved these changes Nov 12, 2025

View reviewed changes

yomybaby requested changes Nov 12, 2025

View reviewed changes

src/components/backend-ai-app-launcher.ts Outdated Show resolved Hide resolved

ironAiken2 force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch from 004bc3f to 224ce44 Compare November 13, 2025 04:04

ironAiken2 requested a review from yomybaby November 13, 2025 04:04

ironAiken2 force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch from 224ce44 to 396594c Compare November 14, 2025 05:54

yomybaby requested changes Nov 14, 2025

View reviewed changes

react/src/components/WEBUINotificationDrawer.tsx Outdated Show resolved Hide resolved

react/src/components/MainLayout/MainLayout.tsx Outdated Show resolved Hide resolved

yomybaby force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch from 396594c to 371699f Compare November 14, 2025 07:43

yomybaby approved these changes Nov 14, 2025

View reviewed changes

graphite-app bot force-pushed the feat/FR-1568-migrate-app-launcher-notification-to-react branch from 371699f to 77e1ef1 Compare November 14, 2025 07:48

graphite-app bot merged commit 77e1ef1 into main Nov 14, 2025
11 checks passed

graphite-app bot deleted the feat/FR-1568-migrate-app-launcher-notification-to-react branch November 14, 2025 07:49

github-pages bot temporarily deployed to github-pages November 14, 2025 07:49 Inactive

vercel bot deployed to Production November 14, 2025 08:00 View deployment

feat(FR-1568): migrate app launcher notifications from Lit to React #4617

feat(FR-1568): migrate app launcher notifications from Lit to React #4617

Uh oh!

Conversation

ironAiken2 commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Overview

🔄 App Launch & Notification Flow

1. App Launch Request Initiation (React → Lit)

2. App Launch Process (Lit Component)

Phase 1: Initial Setup (lines 1251-1255)

Phase 2: Proxy Configuration

Phase 3: Socket Queue Addition (lines 902-909)

Phase 4: App Launch Completion (lines 1375-1387)

Phase 5: Final Cleanup (lines 1447-1451)

3. Error Handling

🎯 Key Changes

📝 Review Points

✅ Testing

Uh oh!

ironAiken2 commented Nov 12, 2025

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yomybaby left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ironAiken2 commented Nov 12, 2025 •

edited

Loading

github-actions bot commented Nov 12, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Nov 14, 2025 •

edited

Loading