feat(app): show app version on welcome screen

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

@@ -10,12 +10,19 @@ import { AddHostModal } from "./add-host-modal";
 import { PairLinkModal } from "./pair-link-modal";
 import { NameHostModal } from "./name-host-modal";
 import { buildHostAgentDraftRoute } from "@/utils/host-routes";
+import { resolveAppVersion } from "@/utils/app-version";
+import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
-    flex: 1,
+    flexGrow: 1,
     backgroundColor: theme.colors.surface0,
     padding: theme.spacing[6],
+    alignItems: "center",
+  },
+  content: {
+    width: "100%",
+    flexGrow: 1,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -65,6 +72,12 @@ const styles = StyleSheet.create((theme) => ({
   actionTextPrimary: {
     color: theme.colors.palette.white,
   },
+  versionLabel: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    textAlign: "center",
+    marginTop: theme.spacing[6],
+  },
 }));
 
 export interface WelcomeScreenProps {
@@ -75,6 +88,8 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
   const { theme } = useUnistyles();
   const router = useRouter();
   const { updateHost } = useDaemonRegistry();
+  const appVersion = resolveAppVersion();
+  const appVersionText = formatVersionWithPrefix(appVersion);
   const [isDirectOpen, setIsDirectOpen] = useState(false);
   const [isPasteLinkOpen, setIsPasteLinkOpen] = useState(false);
   const [pendingNameHost, setPendingNameHost] = useState<{ serverId: string; hostname: string | null } | null>(null);
@@ -103,44 +118,47 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
       showsVerticalScrollIndicator={false}
       testID="welcome-screen"
     >
-      <Image
-        source={require("../../assets/images/icon.png")}
-        style={styles.logo}
-        resizeMode="contain"
-      />
-      <Text style={styles.title}>Welcome to Paseo</Text>
-      <Text style={styles.subtitle}>Add a host to start.</Text>
+      <View style={styles.content}>
+        <Image
+          source={require("../../assets/images/icon.png")}
+          style={styles.logo}
+          resizeMode="contain"
+        />
+        <Text style={styles.title}>Welcome to Paseo</Text>
+        <Text style={styles.subtitle}>Add a host to start.</Text>
 
-      <View style={styles.actions}>
-        <Pressable
-          style={[styles.actionButton, styles.actionButtonPrimary]}
-          onPress={() => setIsDirectOpen(true)}
-          testID="welcome-direct-connection"
-        >
-          <Link2 size={18} color={theme.colors.palette.white} />
-          <Text style={[styles.actionText, styles.actionTextPrimary]}>Direct connection</Text>
-        </Pressable>
+        <View style={styles.actions}>
+          <Pressable
+            style={[styles.actionButton, styles.actionButtonPrimary]}
+            onPress={() => setIsDirectOpen(true)}
+            testID="welcome-direct-connection"
+          >
+            <Link2 size={18} color={theme.colors.palette.white} />
+            <Text style={[styles.actionText, styles.actionTextPrimary]}>Direct connection</Text>
+          </Pressable>
 
-        <Pressable
-          style={styles.actionButton}
-          onPress={() => setIsPasteLinkOpen(true)}
-          testID="welcome-paste-pairing-link"
-        >
-          <ClipboardPaste size={18} color={theme.colors.foreground} />
-          <Text style={styles.actionText}>Paste pairing link</Text>
-        </Pressable>
-
-        {Platform.OS !== "web" ? (
           <Pressable
             style={styles.actionButton}
-            onPress={() => router.push("/pair-scan?source=onboarding")}
-            testID="welcome-scan-qr"
+            onPress={() => setIsPasteLinkOpen(true)}
+            testID="welcome-paste-pairing-link"
           >
-            <QrCode size={18} color={theme.colors.foreground} />
-            <Text style={styles.actionText}>Scan QR code</Text>
+            <ClipboardPaste size={18} color={theme.colors.foreground} />
+            <Text style={styles.actionText}>Paste pairing link</Text>
           </Pressable>
-        ) : null}
+
+          {Platform.OS !== "web" ? (
+            <Pressable
+              style={styles.actionButton}
+              onPress={() => router.push("/pair-scan?source=onboarding")}
+              testID="welcome-scan-qr"
+            >
+              <QrCode size={18} color={theme.colors.foreground} />
+              <Text style={styles.actionText}>Scan QR code</Text>
+            </Pressable>
+          ) : null}
+        </View>
       </View>
+      <Text style={styles.versionLabel}>{appVersionText}</Text>
 
       <AddHostModal
         visible={isDirectOpen}

packages/app/src/screens/settings-screen.tsx

@@ -10,8 +10,6 @@ import {
 } from "react-native";
 import { router, useLocalSearchParams } from "expo-router";
 import { useFocusEffect } from "@react-navigation/native";
-import Constants from "expo-constants";
-import appPackage from "../../package.json";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Sun, Moon, Monitor, Globe, Settings, RotateCw, Trash2 } from "lucide-react-native";
@@ -43,6 +41,7 @@ import { DesktopPermissionsSection } from "@/desktop/components/desktop-permissi
 import { LocalDaemonSection } from "@/desktop/components/desktop-updates-section";
 import { useDesktopAppUpdater } from "@/desktop/updates/use-desktop-app-updater";
 import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates";
+import { resolveAppVersion } from "@/utils/app-version";
 
 const delay = (ms: number) =>
   new Promise<void>((resolve) => {
@@ -385,25 +384,6 @@ const styles = StyleSheet.create((theme) => ({
   },
 }));
 
-function resolveAppVersion(): string | null {
-  const packageVersion = appPackage?.version;
-  if (typeof packageVersion === "string" && packageVersion.trim().length > 0) {
-    return packageVersion.trim();
-  }
-
-  const expoVersion = Constants.expoConfig?.version;
-  if (typeof expoVersion === "string" && expoVersion.trim().length > 0) {
-    return expoVersion.trim();
-  }
-
-  const manifestVersion = (Constants as any).manifest?.version;
-  if (typeof manifestVersion === "string" && manifestVersion.trim().length > 0) {
-    return manifestVersion.trim();
-  }
-
-  return null;
-}
-
 function formatDaemonVersionBadge(version: string | null): string | null {
   const daemonVersion = version?.trim();
   if (!daemonVersion) {
@@ -415,19 +395,6 @@ function formatDaemonVersionBadge(version: string | null): string | null {
   return `v${daemonVersion}`;
 }
 
-function formatVersionForDisplay(version: string | null | undefined): string {
-  const value = version?.trim();
-  if (!value) {
-    return "\u2014";
-  }
-
-  if (value.startsWith("v")) {
-    return value;
-  }
-
-  return `v${value}`;
-}
-
 function DesktopAppUpdateRow() {
   const {
     isDesktop,
@@ -550,7 +517,7 @@ export default function SettingsScreen() {
   const lastHandledEditHostRef = useRef<string | null>(null);
   const isDesktop = Platform.OS === "web";
   const appVersion = resolveAppVersion();
-  const appVersionText = formatVersionForDisplay(appVersion);
+  const appVersionText = formatVersionWithPrefix(appVersion);
   const editingServerId = editingDaemon?.serverId ?? null;
   const editingDaemonLive = editingServerId
     ? daemons.find((daemon) => daemon.serverId === editingServerId) ?? null

packages/app/src/utils/app-version.ts

@@ -0,0 +1,34 @@
+import Constants from "expo-constants";
+import appPackage from "../../package.json";
+
+function toVersionOrNull(value: unknown): string | null {
+  if (typeof value !== "string") {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+
+  return trimmed;
+}
+
+export function resolveAppVersion(): string | null {
+  const packageVersion = toVersionOrNull(appPackage?.version);
+  if (packageVersion) {
+    return packageVersion;
+  }
+
+  const expoVersion = toVersionOrNull(Constants.expoConfig?.version);
+  if (expoVersion) {
+    return expoVersion;
+  }
+
+  const manifestVersion = toVersionOrNull((Constants as any).manifest?.version);
+  if (manifestVersion) {
+    return manifestVersion;
+  }
+
+  return null;
+}