feat: deliver polished desktop first-launch experience with smart recovery (#850)

* feat: implement desktop boot outcome architecture - Add structured DesktopBootOutcome with target/status fields - Implement boot outcome computation and validation - Add desktop hosts configuration management (Tauri + TypeScript) - Add desktop hosts probing with timeout and retry logic - Support local/remote host classification and health checks This provides the foundational infrastructure for desktop onboarding flow to determine whether to show local setup, remote connection, or recovery screens based on OpenCode availability and remote host reachability. * feat: add desktop onboarding UI components Add comprehensive onboarding flow for desktop app: - ChooserScreen: First-launch local/remote selection - LocalSetupScreen: CLI installation guidance and manual detection - RecoveryScreen: Recovery mode with routing to local/remote - RemoteConnectionForm: Remote host connection with validation - DesktopConnectionRecovery: Recovery variants and routing logic - ConnectionSettingsPage: Manage remote connections Components handle: - Local vs remote choice persistence - Recovery scenarios (unreachable, wrong-service, missing) - Manual CLI detection (replaced auto-polling) - Back navigation and state preservation * feat: integrate desktop onboarding with app shell - Update App.tsx to handle onboarding routing and recovery - Add onboarding mode switching (first-launch/local-setup/recovery) - Integrate desktop hosts in SettingsView - Update DesktopHostSwitcher with recovery routing - Add desktop shell utilities for onboarding detection - Update web manifest for desktop app metadata Completes the desktop onboarding feature integration, allowing users to choose local or remote OpenCode on first launch and recover from connection failures. * fix: hide back button in remote connection form for first-launch chooser In first-launch chooser mode, the back button is redundant since users can simply click the "Local Install" tab. The back button is still shown in recovery mode where there's no tab interface. Changes: - Add showBackButton prop to RemoteConnectionForm (default: true) - Set showBackButton={false} in ChooserScreen remote tab - Keep showBackButton={true} in RecoveryScreen for navigation * refactor: remove Connection Settings page and simplify recovery UI Remove the Connection Settings page as it was redundant: - Local server is single-instance (no need to "choose") - Remote servers are one-time setup (first-launch chooser) - SSH Instances remain for multi-instance management Changes: - Remove ConnectionSettingsPage component and directory - Remove 'connection' from Settings metadata - Remove "Open Settings" button from recovery screens - Remove desktopBootBypassToSettings state and logic - Update recovery config to use 'local' icon instead of 'settings' - Update tests to reflect removed showOpenSettings field This simplifies the UX by focusing on: - First-launch chooser for initial local/remote decision - Remote Instances (SSH) for managing multiple remote machines - No persistent "server management" needed for typical desktop usage * fix: remove unused enableCliPolling prop and clean up TypeScript errors Remove the obsolete enableCliPolling prop that was used for auto- polling CLI detection. We replaced this with manual "Check and Continue" button in a previous commit, so this prop is no longer needed. Changes: - Remove enableCliPolling from OnboardingScreen props and usage - Remove enableCliPolling from App.tsx calls - Remove unused 'connection' case from getSettingsNavIcon() - Remove unused RiGlobalLine import This resolves all TypeScript compilation errors reported by Copilot. * fix: remove unused onChooseLocal prop and CLI_MISSING_ERROR_REGEX These were left over from the refactoring: - onChooseLocal in RecoveryScreen was defined but never used - CLI_MISSING_ERROR_REGEX in App.tsx was leftover from removed enableCliPolling code * fix: remove unused variables and fix React Hook dependency warnings Remove unused memoized components and variables that were causing lint errors in packages/ui: - MainLayout.tsx: Remove unused MemoHeader, MemoChatView, MemoPlanView, MemoGitView, MemoDiffView, MemoTerminalView, MemoFilesView, MemoRightSidebarTabs, DesktopLeftSidebar, and DesktopRightPanel - useGitHubPrStatusStore.ts: Remove unused prVisualPriority function - useChatScrollManager.ts: Add missing markProgrammaticScroll dependency to React.useEffect hook These fixes resolve the CI lint failures in PR 850. * chore: remove local claude settings from repo * refactor(desktop): drop vibrancy code from onboarding PR --------- Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-04-14 20:32:59 +03:00
parent bb1d522838
commit 9b169aaacf
22 changed files with 3851 additions and 568 deletions
@@ -0,0 +1,129 @@
+import React from 'react';
+import { isTauriShell, restartDesktopApp } from '@/lib/desktop';
+import { DesktopConnectionRecovery, type RecoveryVariant } from './DesktopConnectionRecovery';
+import { RemoteConnectionForm } from './RemoteConnectionForm';
+import { resolveRecoveryNextStep } from './desktopRecoveryRouting';
+import { desktopHostsGet, desktopHostsSet } from '@/lib/desktopHosts';
+
+type RecoveryScreenProps = {
+  /** Recovery variant */
+  variant: RecoveryVariant;
+  /** Host URL for recovery context */
+  hostUrl?: string;
+  /** Host label for recovery context */
+  hostLabel?: string;
+  /** Callback when user wants to retry */
+  onRetry?: () => void;
+  /** Callback when user chooses remote */
+  onChooseRemote?: () => void;
+  /** Whether to show the remote connection form */
+  showRemoteForm?: boolean;
+  /** Callback when closing remote form */
+  onCloseRemoteForm?: () => void;
+  /** Callback when switching to local from remote form */
+  onSwitchToLocalFromRemote?: () => void;
+  /** Callback when entering local setup */
+  onEnterLocalSetup?: () => void;
+  /** Whether retry action is in progress */
+  isRetrying?: boolean;
+};
+
+export function RecoveryScreen({
+  variant,
+  hostUrl,
+  hostLabel,
+  onRetry,
+  onChooseRemote,
+  showRemoteForm = false,
+  onCloseRemoteForm,
+  onSwitchToLocalFromRemote,
+  onEnterLocalSetup,
+  isRetrying = false,
+}: RecoveryScreenProps) {
+  // Persist the user's first choice (local or remote)
+  const persistFirstChoice = React.useCallback(async (choice: 'local' | 'remote') => {
+    if (!isTauriShell()) return;
+
+    const config = await desktopHostsGet();
+    await desktopHostsSet({
+      ...config,
+      // Only change defaultHostId when switching to local; remote keeps
+      // whatever was there (or null) until a successful connect.
+      ...(choice === 'local' ? { defaultHostId: 'local' } : {}),
+      initialHostChoiceCompleted: true,
+    });
+  }, []);
+
+  const handleRecoveryRetry = React.useCallback(async () => {
+    // In desktop boot flow, always restart the entire Tauri app so Rust
+    // can re-evaluate the boot outcome.
+    if (isTauriShell()) {
+      await restartDesktopApp();
+      return;
+    }
+
+    await fetch('/api/config/reload', { method: 'POST' });
+    onRetry?.();
+  }, [onRetry]);
+
+  const handleRecoveryUseLocal = React.useCallback(async () => {
+    const step = resolveRecoveryNextStep(variant, 'use-local');
+    if (step.kind === 'local-setup') {
+      // local-unavailable + local → enter local-setup subflow without reload
+      onEnterLocalSetup?.();
+      return;
+    }
+    // switch-default-to-local → persist local choice and restart
+    await persistFirstChoice('local');
+
+    if (isTauriShell()) {
+      await restartDesktopApp();
+      return;
+    }
+
+    window.location.reload();
+  }, [variant, persistFirstChoice, onEnterLocalSetup]);
+
+  const handleRecoveryUseRemote = React.useCallback(() => {
+    const step = resolveRecoveryNextStep(variant, 'use-remote');
+    if (step.kind === 'remote-form') {
+      onChooseRemote?.();
+    }
+  }, [variant, onChooseRemote]);
+
+  // Recovery mode — show recovery component first; only switch to remote form on explicit user action
+  if (showRemoteForm) {
+    // For remote-wrong-service, do NOT auto-populate the known bad URL
+    const prefillUrl = variant === 'remote-wrong-service' ? '' : (hostUrl || '');
+    const prefillLabel = variant === 'remote-wrong-service' ? '' : (hostLabel || '');
+    return (
+      <RemoteConnectionForm
+        onBack={onCloseRemoteForm || (() => onChooseRemote?.())}
+        initialUrl={prefillUrl}
+        initialLabel={prefillLabel}
+        isRecoveryMode={true}
+        onSwitchToLocal={onSwitchToLocalFromRemote || (() => {
+          persistFirstChoice('local').then(() => {
+            if (isTauriShell()) {
+              restartDesktopApp();
+            } else {
+              onEnterLocalSetup?.();
+            }
+          });
+        })}
+      />
+    );
+  }
+
+  return (
+    <DesktopConnectionRecovery
+      variant={variant}
+      hostLabel={hostLabel}
+      hostUrl={hostUrl}
+      onRetry={handleRecoveryRetry}
+      onUseLocal={handleRecoveryUseLocal}
+      onUseRemote={handleRecoveryUseRemote}
+      isRetrying={isRetrying}
+    />
+  );
+}