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>
This commit is contained in:
jwcrystal
2026-04-14 20:32:59 +03:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent bb1d522838
commit 9b169aaacf
22 changed files with 3851 additions and 568 deletions
@@ -0,0 +1,109 @@
import { redactSensitiveUrl } from '@/lib/desktopHosts';
export type RecoveryVariant =
| 'local-unavailable'
| 'remote-unreachable'
| 'remote-wrong-service'
| 'remote-missing'
| 'missing-default-host';
export type DesktopRecoveryConfig = {
title: string;
description: string;
iconKey: 'local' | 'remote';
showRetry: boolean;
retryLabel?: string;
showUseLocal: boolean;
showUseRemote: boolean;
/** Label for the "use local" primary action button */
useLocalLabel: string;
/** Label for the "use remote" primary action button */
useRemoteLabel: string;
};
function formatHostDisplay(hostLabel?: string, hostUrl?: string): string | undefined {
if (hostLabel?.trim()) return redactSensitiveUrl(hostLabel.trim());
if (hostUrl) return redactSensitiveUrl(hostUrl);
return undefined;
}
export function getDesktopRecoveryConfig(
variant: RecoveryVariant,
hostLabel?: string,
hostUrl?: string,
): DesktopRecoveryConfig {
switch (variant) {
case 'local-unavailable':
return {
title: 'Local OpenCode Unavailable',
description:
'OpenCode CLI could not be started or is not installed. Install OpenCode or connect to a remote server instead.',
iconKey: 'local',
showRetry: true,
retryLabel: 'Retry Local',
showUseLocal: true,
showUseRemote: true,
useLocalLabel: 'Set Up Local',
useRemoteLabel: 'Use Remote',
};
case 'remote-missing':
return {
title: 'No Default Connection',
description: 'Your saved default connection could not be found. Choose how you want to connect.',
iconKey: 'local',
showRetry: false,
showUseLocal: true,
showUseRemote: true,
useLocalLabel: 'Use Local',
useRemoteLabel: 'Use Remote',
};
case 'remote-unreachable': {
const host = formatHostDisplay(hostLabel, hostUrl);
return {
title: 'Remote Server Unreachable',
description: `Could not connect to "${host || 'the remote server'}". Check your network connection and verify the server address.`,
iconKey: 'remote',
showRetry: true,
retryLabel: 'Retry Connection',
showUseLocal: true,
showUseRemote: true,
useLocalLabel: 'Use Local',
useRemoteLabel: 'Use Remote',
};
}
case 'remote-wrong-service': {
const host = formatHostDisplay(hostLabel, hostUrl);
return {
title: 'Incompatible Server',
description: `The server at "${host || 'unknown'}" is not running OpenChamber. Verify the address points to an OpenChamber server.`,
iconKey: 'remote',
showRetry: false,
showUseLocal: true,
showUseRemote: true,
useLocalLabel: 'Use Local',
useRemoteLabel: 'Use Remote',
};
}
case 'missing-default-host':
return {
title: 'No Default Connection',
description: 'Your saved default connection could not be found. Choose how you want to connect.',
iconKey: 'local',
showRetry: false,
showUseLocal: true,
showUseRemote: true,
useLocalLabel: 'Use Local',
useRemoteLabel: 'Use Remote',
};
default: {
// TypeScript exhaustive check - this should never be reached
const exhaustive: never = variant;
throw new Error(`Unknown recovery variant: ${exhaustive}`);
}
}
}