+
+ {desktop &&
}
+
{/* Mobile Overlay */}
{isSidebarOpen && (
= ({ children }) => {
{children}
+
);
};
diff --git a/propr-ui/src/config/runtimeConfig.ts b/propr-ui/src/config/runtimeConfig.ts
index 1cde62247..b570334a6 100644
--- a/propr-ui/src/config/runtimeConfig.ts
+++ b/propr-ui/src/config/runtimeConfig.ts
@@ -61,6 +61,7 @@ const WINDOW_NAME_CONTEXT_PREFIX = 'propr-hosted-flow-context:';
const WINDOW_NAME_CONTEXT_SEPARATOR = '|';
let activeHostedTunnelFlowId: string | null = null;
+let desktopApiBaseUrl: string | null = null;
/**
* Hostname of the managed hosted UI (e.g. `app.propr.dev`), derived from the
@@ -501,6 +502,8 @@ export const getApiBaseUrl = (): string => {
return '';
}
+ if (desktopApiBaseUrl !== null) return desktopApiBaseUrl;
+
return resolveApiBaseUrl(
typeof window !== 'undefined' ? window.location.hostname : '',
typeof window !== 'undefined' ? window.location.search : '',
@@ -509,3 +512,14 @@ export const getApiBaseUrl = (): string => {
storageForWindow()
);
};
+
+/** Set by the desktop presentation boundary after a profile has passed its probe. */
+export const setDesktopApiBaseUrl = (value: string | null): void => {
+ if (value === null) {
+ desktopApiBaseUrl = null;
+ return;
+ }
+ const normalized = value.trim().replace(/\/+$/, '');
+ if (normalized && !isValidHttpUrl(normalized)) throw new Error('Desktop API base URL must use http(s).');
+ desktopApiBaseUrl = normalized;
+};
diff --git a/propr-ui/src/desktop/DesktopContext.tsx b/propr-ui/src/desktop/DesktopContext.tsx
new file mode 100644
index 000000000..c3351d9bd
--- /dev/null
+++ b/propr-ui/src/desktop/DesktopContext.tsx
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import type { DesktopConnectionResult, DesktopPlatform, DesktopProfile } from './types';
+
+export interface DesktopContextValue {
+ isDesktop: true;
+ platform: DesktopPlatform;
+ profile: DesktopProfile;
+ connection: DesktopConnectionResult;
+ openProfileManager(): void;
+ authenticate(): Promise
;
+ openConnectionHelp(): Promise;
+ retry(): void;
+}
+
+export const DesktopContext = createContext(null);
+
+export const useDesktop = (): DesktopContextValue | null => useContext(DesktopContext);
diff --git a/propr-ui/src/desktop/DesktopExperience.test.tsx b/propr-ui/src/desktop/DesktopExperience.test.tsx
new file mode 100644
index 000000000..e8ea211dc
--- /dev/null
+++ b/propr-ui/src/desktop/DesktopExperience.test.tsx
@@ -0,0 +1,116 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { DesktopExperience } from './DesktopExperience';
+import { DesktopTitleBar } from './DesktopTitleBar';
+import type { DesktopAdapters, DesktopConnectionResult, DesktopProfile } from './types';
+
+const apiMock = vi.hoisted(() => ({ setApiBaseUrl: vi.fn() }));
+const runtimeMock = vi.hoisted(() => ({ setDesktopApiBaseUrl: vi.fn() }));
+
+vi.mock('../api/apiClient', () => ({ setApiBaseUrl: apiMock.setApiBaseUrl }));
+vi.mock('../config/runtimeConfig', () => ({ setDesktopApiBaseUrl: runtimeMock.setDesktopApiBaseUrl }));
+
+const localProfile: DesktopProfile = {
+ id: 'local',
+ name: 'This computer',
+ baseUrl: 'http://127.0.0.1:3000',
+ kind: 'local',
+};
+
+const adaptersFor = (
+ profiles: DesktopProfile[] = [],
+ activeId: string | null = null,
+ probe: (profile: DesktopProfile) => Promise = async () => ({ status: 'ready', version: '0.8.15' })
+): DesktopAdapters => ({
+ platform: 'linux',
+ profiles: {
+ list: vi.fn(async () => profiles),
+ save: vi.fn(async () => undefined),
+ remove: vi.fn(async () => undefined),
+ getActiveId: vi.fn(async () => activeId),
+ setActiveId: vi.fn(async () => undefined),
+ },
+ discovery: { discover: vi.fn(async () => []) },
+ authentication: { authenticate: vi.fn(async () => undefined) },
+ externalBrowser: { open: vi.fn(async () => undefined) },
+ localSetup: { setup: vi.fn(async () => localProfile) },
+ connection: { probe: vi.fn(probe) },
+});
+
+describe('DesktopExperience', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.spyOn(window, 'confirm').mockReturnValue(true);
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('runs first-time local setup through adapters before mounting the shared app', async () => {
+ const adapters = adaptersFor();
+ render(Shared route tree
);
+
+ expect(await screen.findByRole('heading', { name: 'Let’s set up this computer' })).toBeInTheDocument();
+ expect(screen.queryByText('Shared route tree')).not.toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button', { name: /Set up this computer/i }));
+
+ expect(await screen.findByText('Shared route tree')).toBeInTheDocument();
+ expect(adapters.localSetup.setup).toHaveBeenCalledOnce();
+ expect(adapters.connection.probe).toHaveBeenCalledWith(localProfile);
+ expect(adapters.profiles.save).toHaveBeenCalledWith(expect.objectContaining({ id: 'local' }));
+ expect(adapters.profiles.setActiveId).toHaveBeenCalledWith('local');
+ expect(runtimeMock.setDesktopApiBaseUrl).toHaveBeenCalledWith(localProfile.baseUrl);
+ expect(apiMock.setApiBaseUrl).toHaveBeenCalledWith(localProfile.baseUrl);
+ });
+
+ it('shows a retryable offline state and recovers without reloading', async () => {
+ const probe = vi.fn()
+ .mockResolvedValueOnce({ status: 'offline', message: 'The instance is offline.' })
+ .mockResolvedValueOnce({ status: 'ready', version: '0.8.15' });
+ const adapters = adaptersFor([localProfile], localProfile.id, probe);
+ render(Dashboard content
);
+
+ expect(await screen.findByRole('heading', { name: 'This computer' })).toBeInTheDocument();
+ expect(screen.getByText('The instance is offline.')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: /Try again/i }));
+
+ expect(await screen.findByText('Dashboard content')).toBeInTheDocument();
+ expect(probe).toHaveBeenCalledTimes(2);
+ });
+
+ it('supports editing a recent profile and connecting to the updated URL', async () => {
+ const adapters = adaptersFor([localProfile]);
+ render(Connected app
);
+
+ expect(await screen.findByText('Recent instances')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Edit This computer' }));
+ fireEvent.change(screen.getByLabelText('Display name'), { target: { value: 'Office ProPR' } });
+ fireEvent.change(screen.getByLabelText('Instance URL'), { target: { value: 'https://office.example.com/' } });
+ fireEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+
+ expect(await screen.findByText('Connected app')).toBeInTheDocument();
+ expect(adapters.profiles.save).toHaveBeenCalledWith(expect.objectContaining({
+ id: 'local',
+ name: 'Office ProPR',
+ baseUrl: 'https://office.example.com',
+ }));
+ });
+
+ it('opens instance management with the desktop shortcut and exposes connection status', async () => {
+ const adapters = adaptersFor([localProfile], localProfile.id);
+ render(
+
+
+
+ );
+
+ expect(await screen.findByRole('button', { name: 'Connected: This computer' })).toBeInTheDocument();
+ fireEvent.keyDown(document, { key: ',', ctrlKey: true });
+ expect(await screen.findByRole('dialog', { name: 'Manage instances' })).toBeInTheDocument();
+ fireEvent.keyDown(document, { key: 'Escape' });
+ await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+ });
+});
+
diff --git a/propr-ui/src/desktop/DesktopExperience.tsx b/propr-ui/src/desktop/DesktopExperience.tsx
new file mode 100644
index 000000000..5f4b9658d
--- /dev/null
+++ b/propr-ui/src/desktop/DesktopExperience.tsx
@@ -0,0 +1,362 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { AlertTriangle, ArrowLeft, ChevronRight, Cloud, Computer, LoaderCircle, Pencil, Plus, RefreshCw, Search, Server, Trash2, X } from 'lucide-react';
+import { setApiBaseUrl } from '../api/apiClient';
+import * as runtimeConfig from '../config/runtimeConfig';
+import { DesktopContext } from './DesktopContext';
+import { normalizeBaseUrl } from './browserAdapters';
+import type { DesktopAdapters, DesktopConnectionResult, DesktopProfile } from './types';
+import './desktop.css';
+
+type ExperienceState =
+ | { phase: 'loading' }
+ | { phase: 'choose' }
+ | { phase: 'connecting'; profile: DesktopProfile }
+ | { phase: 'blocked'; profile: DesktopProfile; result: Exclude }
+ | { phase: 'connected'; profile: DesktopProfile; result: Extract };
+
+interface DesktopExperienceProps {
+ adapters: DesktopAdapters;
+ children: React.ReactNode;
+}
+
+const profileId = (): string => {
+ try { return crypto.randomUUID(); } catch { return `profile-${Date.now()}`; }
+};
+
+const mergeProfiles = (current: DesktopProfile[], incoming: DesktopProfile[]): DesktopProfile[] => {
+ const profiles = new Map(current.map(profile => [profile.id, profile]));
+ incoming.forEach(profile => profiles.set(profile.id, profile));
+ return [...profiles.values()].sort((a, b) => (b.lastConnectedAt || '').localeCompare(a.lastConnectedAt || ''));
+};
+
+const connectionLabel = (result: DesktopConnectionResult): string => {
+ if (result.status === 'incompatible') return 'Update required';
+ if (result.status === 'authentication-required') return 'Sign in required';
+ if (result.status === 'offline') return 'Instance unavailable';
+ return 'Connected';
+};
+
+const DesktopBrand: React.FC = () => (
+
+
+
ProPR
+
+
Recent instances
+
+ {profiles.map(profile => (
+
+
+
+
+
+ ))}
+
+
+
ProPR Desktop
+
{profiles.length ? 'Choose an instance' : 'Let’s set up this computer'}
+
Keep your repositories and coding agents close, or connect securely to a ProPR instance you already use.
+
+
+
+
+ {error && {error}
}
+ {profiles.length > 0 && }
+
+
+);
+
+const ConnectionPanel: React.FC<{
+ profile: DesktopProfile;
+ result?: Exclude;
+ onBack(): void;
+ onRetry(): void;
+ onAuthenticate(): void;
+ onHelp(): void;
+}> = ({ profile, result, onBack, onRetry, onAuthenticate, onHelp }) => (
+
+
+ {!result ? (
+ <>
+
+ Connecting to {profile.name}
+ Checking the instance and desktop compatibility…
+
+ ) : (
+ <>
+
+ {connectionLabel(result)}
+ {profile.name}
+ {result.message || 'This instance needs authentication before ProPR Desktop can connect.'}
+ {result.status === 'incompatible' && result.version && Instance version {result.version} · Desktop {__APP_VERSION__}
}
+
+ {result.status === 'authentication-required' && }
+
+
+
+
+
+ )}
+
+);
+
+export const DesktopExperience: React.FC = ({ adapters, children }) => {
+ const [profiles, setProfiles] = useState([]);
+ const [state, setState] = useState({ phase: 'loading' });
+ const [editing, setEditing] = useState(null);
+ const [managerOpen, setManagerOpen] = useState(false);
+ const [operationError, setOperationError] = useState(null);
+ const [busy, setBusy] = useState(false);
+ const [networkOffline, setNetworkOffline] = useState(!navigator.onLine);
+
+ const connect = useCallback(async (profile: DesktopProfile) => {
+ setOperationError(null);
+ setState({ phase: 'connecting', profile });
+ const result = await adapters.connection.probe(profile);
+ if (result.status !== 'ready') {
+ setState({ phase: 'blocked', profile, result });
+ return;
+ }
+ const connectedProfile = { ...profile, lastConnectedAt: new Date().toISOString() };
+ await adapters.profiles.save(connectedProfile);
+ await adapters.profiles.setActiveId(profile.id);
+ setProfiles(current => mergeProfiles(current, [connectedProfile]));
+ runtimeConfig.setDesktopApiBaseUrl(connectedProfile.baseUrl);
+ setApiBaseUrl(connectedProfile.baseUrl);
+ setState({ phase: 'connected', profile: connectedProfile, result });
+ }, [adapters]);
+
+ useEffect(() => {
+ let cancelled = false;
+ void Promise.all([adapters.profiles.list(), adapters.profiles.getActiveId()]).then(([stored, activeId]) => {
+ if (cancelled) return;
+ setProfiles(stored);
+ const active = stored.find(profile => profile.id === activeId);
+ if (active) void connect(active);
+ else setState({ phase: 'choose' });
+ }).catch(error => {
+ if (!cancelled) {
+ setOperationError(error instanceof Error ? error.message : 'Profiles could not be loaded.');
+ setState({ phase: 'choose' });
+ }
+ });
+ return () => { cancelled = true; };
+ }, [adapters, connect]);
+
+ useEffect(() => {
+ const online = () => setNetworkOffline(false);
+ const offline = () => setNetworkOffline(true);
+ window.addEventListener('online', online);
+ window.addEventListener('offline', offline);
+ return () => {
+ window.removeEventListener('online', online);
+ window.removeEventListener('offline', offline);
+ };
+ }, []);
+
+ useEffect(() => {
+ const handleKeyboard = (event: KeyboardEvent) => {
+ if (state.phase !== 'connected') return;
+ if ((event.metaKey || event.ctrlKey) && event.key === ',') {
+ event.preventDefault();
+ setManagerOpen(true);
+ } else if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 'r') {
+ event.preventDefault();
+ void connect(state.profile);
+ } else if (event.key === 'Escape') {
+ setManagerOpen(false);
+ setEditing(null);
+ }
+ };
+ document.addEventListener('keydown', handleKeyboard);
+ return () => document.removeEventListener('keydown', handleKeyboard);
+ }, [connect, state]);
+
+ const removeProfile = async (profile: DesktopProfile) => {
+ if (!window.confirm(`Remove “${profile.name}” from this computer?`)) return;
+ await adapters.profiles.remove(profile.id);
+ setProfiles(current => current.filter(item => item.id !== profile.id));
+ if (state.phase === 'connected' && state.profile.id === profile.id) setState({ phase: 'choose' });
+ };
+
+ const saveProfile = async (profile: DesktopProfile, shouldConnect = true) => {
+ await adapters.profiles.save(profile);
+ setProfiles(current => mergeProfiles(current, [profile]));
+ setEditing(null);
+ if (shouldConnect) void connect(profile);
+ };
+
+ const setupLocal = async () => {
+ setBusy(true);
+ setOperationError(null);
+ try {
+ const profile = await adapters.localSetup.setup();
+ await saveProfile(profile);
+ } catch (error) {
+ setOperationError(error instanceof Error ? error.message : 'Local setup could not be started.');
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const discover = async () => {
+ setBusy(true);
+ setOperationError(null);
+ try {
+ const discovered = await adapters.discovery.discover();
+ setProfiles(current => mergeProfiles(current, discovered));
+ if (!discovered.length) setOperationError('No new ProPR instances were found on this network.');
+ } catch (error) {
+ setOperationError(error instanceof Error ? error.message : 'Network discovery is unavailable.');
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const choose = () => {
+ void adapters.profiles.setActiveId(null);
+ setManagerOpen(false);
+ setEditing(null);
+ setState({ phase: 'choose' });
+ };
+
+ const retry = () => {
+ if ('profile' in state) void connect(state.profile);
+ };
+
+ const content = () => {
+ if (state.phase === 'loading') return Opening ProPR…
;
+ if (state.phase === 'connecting') return undefined} onHelp={() => void adapters.externalBrowser.open('https://propr.dev')} />;
+ if (state.phase === 'blocked') return void adapters.authentication.authenticate(state.profile)} onHelp={() => void adapters.externalBrowser.open('https://propr.dev')} />;
+ if (editing) return setEditing(null)} onSave={profile => void saveProfile(profile)} />;
+ return void setupLocal()} onConnectNew={() => setEditing('new')} onDiscover={() => void discover()} onConnect={profile => void connect(profile)} onEdit={setEditing} onRemove={profile => void removeProfile(profile)} />;
+ };
+
+ if (state.phase !== 'connected') {
+ return {content()}
;
+ }
+
+ const displayedConnection: DesktopConnectionResult = networkOffline
+ ? { status: 'offline', message: 'This computer is offline.' }
+ : state.result;
+ const contextValue = {
+ isDesktop: true as const,
+ platform: adapters.platform,
+ profile: state.profile,
+ connection: displayedConnection,
+ openProfileManager: () => setManagerOpen(true),
+ authenticate: () => adapters.authentication.authenticate(state.profile),
+ openConnectionHelp: () => adapters.externalBrowser.open('https://propr.dev'),
+ retry,
+ };
+
+ return (
+
+ {children}
+ {managerOpen && (
+ { if (event.target === event.currentTarget) setManagerOpen(false); }}>
+
+ Desktop
Manage instances
+ {editing ? (
+ setEditing(null)} onSave={profile => void saveProfile(profile, false)} />
+ ) : (
+ <>
+ { setManagerOpen(false); void connect(profile); }} onEdit={setEditing} onRemove={profile => void removeProfile(profile)} />
+
+
+ )}
+
+
+
+
ProPR
+
+
+
+