fix(app): streamline startup loading states

packages/app/src/app/_layout.tsx

@@ -817,8 +817,10 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const params = useGlobalSearchParams<{ open?: string | string[] }>();
   const hosts = useHosts();
+  const storeReady = useStoreReady();
   const activeServerId = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
-  const shouldShowAppChrome = activeServerId !== null;
+  const shouldShowAppChrome =
+    storeReady && activeServerId !== null && hosts.some((host) => host.serverId === activeServerId);
 
   useEffect(() => {
     if (!activeServerId || hosts.length === 0) {

packages/app/src/components/host-route-bootstrap-boundary.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
 import { useHostRuntimeBootstrapState, useStoreReady } from "@/app/_layout";
+import { shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
 import { StartupSplashScreen } from "@/screens/startup-splash-screen";
 
 export function HostRouteBootstrapBoundary({ children }: { children: ReactNode }) {
   const storeReady = useStoreReady();
   const bootstrapState = useHostRuntimeBootstrapState();
+  const isDesktop = shouldUseDesktopDaemon();
 
   if (!storeReady) {
-    return <StartupSplashScreen bootstrapState={bootstrapState} />;
+    return <StartupSplashScreen bootstrapState={isDesktop ? bootstrapState : undefined} />;
   }
 
   return <>{children}</>;

packages/app/src/components/welcome-screen.tsx

@@ -5,12 +5,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { QrCode, Link2, ClipboardPaste, ExternalLink, Settings } from "lucide-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { HostProfile } from "@/types/host-connection";
-import {
-  getHostRuntimeStore,
-  isHostRuntimeConnected,
-  useHostRuntimeSnapshot,
-  useHosts,
-} from "@/runtime/host-runtime";
+import { getHostRuntimeStore, isHostRuntimeConnected, useHosts } from "@/runtime/host-runtime";
 import { AddHostModal } from "./add-host-modal";
 import { PairLinkModal } from "./pair-link-modal";
 import { Button } from "@/components/ui/button";
@@ -94,39 +89,6 @@ const styles = StyleSheet.create((theme) => ({
   actionTextPrimary: {
     color: theme.colors.accentForeground,
   },
-  hostList: {
-    width: "100%",
-    maxWidth: 420,
-    marginTop: theme.spacing[6],
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.border,
-    paddingTop: theme.spacing[4],
-    gap: theme.spacing[2],
-  },
-  hostRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-  },
-  hostLabel: {
-    flex: 1,
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
-  hostStatus: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-  hostStatusError: {
-    color: theme.colors.destructive,
-    fontSize: theme.fontSize.sm,
-  },
   setupLink: {
     flexDirection: "row",
     alignItems: "center",
@@ -189,50 +151,6 @@ function useAnyHostOnline(serverIds: string[]): string | null {
   );
 }
 
-function HostStatusRow({ serverId, label }: { serverId: string; label: string }) {
-  const { theme } = useUnistyles();
-  const snapshot = useHostRuntimeSnapshot(serverId);
-  const status = snapshot?.connectionStatus ?? "connecting";
-  const lastError = snapshot?.lastError ?? null;
-
-  let dotColor: string;
-  let statusText: string;
-  let isError = false;
-
-  switch (status) {
-    case "online":
-      dotColor = theme.colors.success;
-      statusText = "Online";
-      break;
-    case "connecting":
-    case "idle":
-      dotColor = theme.colors.foregroundMuted;
-      statusText = "Connecting…";
-      break;
-    case "offline":
-      dotColor = theme.colors.foregroundMuted;
-      statusText = "Offline";
-      break;
-    case "error":
-      dotColor = theme.colors.destructive;
-      statusText = lastError ? lastError.slice(0, 40) : "Connection error";
-      isError = true;
-      break;
-  }
-
-  return (
-    <View style={styles.hostRow}>
-      <View style={[styles.statusDot, { backgroundColor: dotColor }]} />
-      <Text style={styles.hostLabel} numberOfLines={1}>
-        {label}
-      </Text>
-      <Text style={isError ? styles.hostStatusError : styles.hostStatus} numberOfLines={1}>
-        {statusText}
-      </Text>
-    </View>
-  );
-}
-
 export interface WelcomeScreenProps {
   onHostAdded?: (profile: HostProfile) => void;
 }
@@ -306,7 +224,7 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
         },
       ];
 
-  const showHostList = hosts.length > 0 && !anyOnlineServerId;
+  const isConnectingToSavedHosts = hosts.length > 0 && !anyOnlineServerId;
 
   return (
     <View style={styles.root}>
@@ -322,11 +240,11 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
         <View style={styles.content}>
           <PaseoLogo size={96} />
           <View style={styles.copyBlock}>
-            <Text style={styles.title}>Welcome to Paseo</Text>
-            {showHostList ? (
-              <Text style={styles.subtitle}>Connecting to your hosts…</Text>
+            {isConnectingToSavedHosts ? (
+              <Text style={styles.subtitle}>Connecting…</Text>
             ) : (
               <>
+                <Text style={styles.title}>Welcome to Paseo</Text>
                 <Text style={styles.subtitle}>Connect your computer to get started</Text>
                 {isNative ? (
                   <Pressable
@@ -365,14 +283,6 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
             })}
           </View>
 
-          {showHostList && (
-            <View style={styles.hostList}>
-              {hosts.map((host) => (
-                <HostStatusRow key={host.serverId} serverId={host.serverId} label={host.label} />
-              ))}
-            </View>
-          )}
-
           <Button
             variant="ghost"
             size="sm"

packages/app/src/screens/startup-splash-screen.tsx

@@ -252,7 +252,7 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
       <View style={styles.container}>
         <TitlebarDragRegion />
         <PaseoLogo size={96} />
-        <Text style={styles.subtitle}>Starting up…</Text>
+        <Text style={styles.subtitle}>Connecting…</Text>
       </View>
     );
   }