fix(app): support ipad desktop layout safely

packages/app/src/app/_layout.tsx

@@ -57,7 +57,7 @@ import {
   HorizontalScrollProvider,
   useHorizontalScrollOptional,
 } from "@/contexts/horizontal-scroll-context";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime, isCompactFormFactor } from "@/constants/layout";
 import { CommandCenter } from "@/components/command-center";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
@@ -103,7 +103,7 @@ function PushNotificationRouter() {
       let removeDesktopNotificationListener: (() => void) | null = null;
       let cancelled = false;
 
-      if (getIsDesktop()) {
+      if (getIsElectronRuntime()) {
         void ensureOsNotificationPermission();
 
         const unlistenResult = getDesktopHost()?.events?.on?.(
@@ -342,12 +342,12 @@ function AppContainer({
   const toggleFocusMode = usePanelStore((state) => state.toggleFocusMode);
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
   const chromeEnabled = chromeEnabledOverride ?? daemons.length > 0;
 
   useKeyboardShortcuts({
     enabled: chromeEnabled,
-    isMobile,
+    isMobile: isCompactLayout,
     toggleAgentList,
     selectedAgentId,
     toggleFileExplorer,
@@ -363,10 +363,12 @@ function AppContainer({
   const content = (
     <View style={containerStyle}>
       <View style={rowStyle}>
-        {!isMobile && chromeEnabled && !isFocusModeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+        {!isCompactLayout && chromeEnabled && !isFocusModeEnabled && (
+          <LeftSidebar selectedAgentId={selectedAgentId} />
+        )}
         <View style={flexStyle}>{children}</View>
       </View>
-      {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+      {isCompactLayout && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
       <DownloadToast />
       <UpdateBanner />
       <CommandCenter />
@@ -375,7 +377,7 @@ function AppContainer({
     </View>
   );
 
-  if (!isMobile) {
+  if (!isCompactLayout) {
     return content;
   }
 

packages/app/src/attachments/store.ts

@@ -1,12 +1,12 @@
 import { Platform } from "react-native";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import type { AttachmentStore } from "@/attachments/types";
 
 let attachmentStorePromise: Promise<AttachmentStore> | null = null;
 
 async function createAttachmentStore(): Promise<AttachmentStore> {
   if (Platform.OS === "web") {
-    if (isDesktop()) {
+    if (isElectronRuntime()) {
       const { createDesktopAttachmentStore } = await import(
         "../desktop/attachments/desktop-attachment-store"
       );

packages/app/src/components/explorer-sidebar.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useIsFocused } from "@react-navigation/native";
 import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { X } from "lucide-react-native";
 import {
   usePanelStore,
@@ -13,7 +13,7 @@ import {
   type ExplorerTab,
 } from "@/stores/panel-store";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
-import { HEADER_INNER_HEIGHT } from "@/constants/layout";
+import { HEADER_INNER_HEIGHT, isCompactFormFactor } from "@/constants/layout";
 import { GitDiffPane } from "./git-diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
@@ -40,7 +40,7 @@ export function ExplorerSidebar({
   const { theme } = useUnistyles();
   const isScreenFocused = useIsFocused();
   const insets = useSafeAreaInsets();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const closeToAgent = usePanelStore((state) => state.closeToAgent);

packages/app/src/components/headers/menu-header.tsx

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
 import { Text, View, type StyleProp, type ViewStyle } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { HeaderToggleButton } from "./header-toggle-button";
 import { usePanelStore } from "@/stores/panel-store";
+import { isCompactFormFactor } from "@/constants/layout";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
 interface MenuHeaderProps {
@@ -43,7 +44,7 @@ export function SidebarMenuToggle({
   nativeID = "menu-button",
 }: SidebarMenuToggleProps = {}) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);

packages/app/src/components/headers/screen-header.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
   HEADER_INNER_HEIGHT,
   HEADER_INNER_HEIGHT_MOBILE,
   HEADER_TOP_PADDING_MOBILE,
+  isCompactFormFactor,
 } from "@/constants/layout";
 import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
 
@@ -24,7 +25,7 @@ interface ScreenHeaderProps {
 export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: ScreenHeaderProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const padding = useWindowControlsPadding("header");
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
   const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;

packages/app/src/components/keyboard-shortcuts-dialog.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime } from "@/constants/layout";
 import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
 import { Shortcut } from "@/components/ui/shortcut";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
@@ -13,7 +13,7 @@ export function KeyboardShortcutsDialog() {
   const setOpen = useKeyboardShortcutsStore((s) => s.setShortcutsDialogOpen);
 
   const isMac = getShortcutOs() === "mac";
-  const isDesktopApp = getIsDesktop();
+  const isDesktopApp = getIsElectronRuntime();
   const sections = useMemo(
     () => buildKeyboardShortcutHelpSections({ isMac, isDesktop: isDesktopApp }),
     [isDesktopApp, isMac],

packages/app/src/components/left-sidebar.tsx

@@ -20,7 +20,7 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { MessagesSquare, Plus, Settings } from "lucide-react-native";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
@@ -39,7 +39,11 @@ import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/deskto
 import { Combobox } from "@/components/ui/combobox";
 import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
 import { formatConnectionStatus } from "@/utils/daemons";
-import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE } from "@/constants/layout";
+import {
+  HEADER_INNER_HEIGHT,
+  HEADER_INNER_HEIGHT_MOBILE,
+  isCompactFormFactor,
+} from "@/constants/layout";
 import {
   buildHostSessionsRoute,
   buildHostSettingsRoute,
@@ -94,6 +98,7 @@ interface MobileSidebarProps extends SidebarSharedProps {
 }
 
 interface DesktopSidebarProps extends SidebarSharedProps {
+  insetsTop: number;
   isOpen: boolean;
   handleViewMore: () => void;
 }
@@ -105,7 +110,7 @@ export const LeftSidebar = memo(function LeftSidebar({
 
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const closeToAgent = usePanelStore((state) => state.closeToAgent);
@@ -175,7 +180,7 @@ export const LeftSidebar = memo(function LeftSidebar({
   const hostTriggerRef = useRef<View | null>(null);
   const [isHostPickerOpen, setIsHostPickerOpen] = useState(false);
 
-  const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
+  const isOpen = isCompactLayout ? mobileView === "agent-list" : desktopAgentListOpen;
 
   const { projects, isInitialLoad, isRevalidating, refreshAll } = useSidebarWorkspacesList({
     serverId: activeServerId,
@@ -265,7 +270,7 @@ export const LeftSidebar = memo(function LeftSidebar({
     handleHostSelect,
   };
 
-  if (isMobile) {
+  if (isCompactLayout) {
     return (
       <MobileSidebar
         {...sharedProps}
@@ -283,6 +288,7 @@ export const LeftSidebar = memo(function LeftSidebar({
   return (
     <DesktopSidebar
       {...sharedProps}
+      insetsTop={insets.top}
       isOpen={isOpen}
       handleOpenProject={handleOpenProjectDesktop}
       handleSettings={handleSettingsDesktop}
@@ -627,6 +633,7 @@ function DesktopSidebar({
   handleHostSelect,
   handleOpenProject,
   handleSettings,
+  insetsTop,
   isOpen,
   handleViewMore,
 }: DesktopSidebarProps) {
@@ -681,7 +688,7 @@ function DesktopSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle]}>
+    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
       {padding.top > 0 ? <View style={{ height: padding.top }} {...dragHandlers} /> : null}
       <View style={styles.sidebarHeader} {...dragHandlers}>
         <View style={styles.sidebarHeaderRow}>

packages/app/src/components/sidebar-workspace-list.tsx

@@ -22,7 +22,7 @@ import {
 } from "react";
 import { router, usePathname } from "expo-router";
 import { navigateToWorkspace } from "@/hooks/use-workspace-navigation";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { type GestureType } from "react-native-gesture-handler";
 import * as Clipboard from "expo-clipboard";
 import {
@@ -42,7 +42,7 @@ import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list";
 import type { DraggableListDragHandleProps } from "./draggable-list.types";
 import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runtime";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime, isCompactFormFactor } from "@/constants/layout";
 import { projectIconQueryKey } from "@/hooks/use-project-icon-query";
 import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
@@ -664,8 +664,7 @@ function ProjectHeaderRow({
   dragHandleProps,
 }: ProjectHeaderRowProps) {
   const [isHovered, setIsHovered] = useState(false);
-  const isMobileBreakpoint =
+  const isMobileBreakpoint = isCompactFormFactor();
-    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
   const toast = useToast();
 
@@ -836,7 +835,7 @@ function WorkspaceRowInner({
 }: WorkspaceRowInnerProps) {
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
-  const isMobile = Platform.OS !== "web";
+  const isTouchPlatform = Platform.OS !== "web";
   const prHint = useWorkspacePrHint({
     serverId: workspace.serverId,
     cwd: workspace.workspaceId,
@@ -901,7 +900,7 @@ function WorkspaceRowInner({
           </View>
           <View style={styles.workspaceRowRight}>
             {isCreating ? <Text style={styles.workspaceCreatingText}>Creating...</Text> : null}
-            {onArchive && (isHovered || isMobile) ? (
+            {onArchive && (isHovered || isTouchPlatform) ? (
               <DropdownMenu>
                 <DropdownMenuTrigger
                   hitSlop={8}
@@ -1638,7 +1637,7 @@ export function SidebarWorkspaceList({
   listFooterComponent,
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const isNative = Platform.OS !== "web";
   const pathname = usePathname();
   const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
@@ -1646,7 +1645,7 @@ export function SidebarWorkspaceList({
   const creatingWorkspaceTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
     new Map(),
   );
-  const isDesktopApp = getIsDesktop();
+  const isDesktopApp = getIsElectronRuntime();
   const altDown = useKeyboardShortcutsStore((state) => state.altDown);
   const cmdOrCtrlDown = useKeyboardShortcutsStore((state) => state.cmdOrCtrlDown);
   const showShortcutBadges = altDown || (isDesktopApp && cmdOrCtrlDown);

packages/app/src/components/terminal-pane.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFocusEffect, useIsFocused } from "@react-navigation/native";
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
 import Animated, { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { encodeTerminalKeyInput } from "@server/shared/terminal-key-input";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
@@ -21,6 +21,7 @@ import {
 import { usePanelStore } from "@/stores/panel-store";
 import { toXtermTheme } from "@/utils/to-xterm-theme";
 import TerminalEmulator, { type TerminalEmulatorHandle } from "./terminal-emulator";
+import { isCompactFormFactor } from "@/constants/layout";
 
 interface TerminalPaneProps {
   serverId: string;
@@ -91,7 +92,7 @@ export function TerminalPane({
   const isAppVisible = useAppVisible();
   const { theme } = useUnistyles();
   const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme.colors.terminal]);
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const openAgentList = usePanelStore((state) => state.openAgentList);
   const openFileExplorer = usePanelStore((state) => state.openFileExplorer);

packages/app/src/constants/layout.ts

@@ -1,5 +1,6 @@
 import { Platform } from "react-native";
-import { isDesktop, isDesktopMac } from "@/desktop/host";
+import { UnistylesRuntime } from "react-native-unistyles";
+import { isElectronRuntime, isElectronRuntimeMac } from "@/desktop/host";
 
 export const FOOTER_HEIGHT = 75;
 
@@ -23,40 +24,59 @@ export const DESKTOP_TRAFFIC_LIGHT_HEIGHT = 45;
 export const DESKTOP_WINDOW_CONTROLS_WIDTH = 140;
 export const DESKTOP_WINDOW_CONTROLS_HEIGHT = 48;
 
-// Check if running in desktop app (any OS)
+// Check if running in the Electron desktop runtime (any OS)
-function isDesktopEnvironment(): boolean {
+function isElectronDesktopRuntime(): boolean {
   if (Platform.OS !== "web") return false;
-  return isDesktop();
+  return isElectronRuntime();
 }
 
-// Check if running in desktop host on macOS
+// Check if running in the Electron desktop runtime on macOS
-function isDesktopEnvironmentMac(): boolean {
+function isElectronDesktopRuntimeMac(): boolean {
   if (Platform.OS !== "web") return false;
-  return isDesktopMac();
+  return isElectronRuntimeMac();
 }
 
 // Cached result - only cache true, keep checking if false (in case desktop globals load later)
-let _isDesktopMacCached: boolean | null = null;
+let _isElectronRuntimeMacCached: boolean | null = null;
-let _isDesktopCached: boolean | null = null;
+let _isElectronRuntimeCached: boolean | null = null;
 
-export function getIsDesktopMac(): boolean {
+export function getIsElectronRuntimeMac(): boolean {
-  if (_isDesktopMacCached === true) {
+  if (_isElectronRuntimeMacCached === true) {
     return true;
   }
-  const result = isDesktopEnvironmentMac();
+  const result = isElectronDesktopRuntimeMac();
   if (result) {
-    _isDesktopMacCached = true;
+    _isElectronRuntimeMacCached = true;
   }
   return result;
 }
 
-export function getIsDesktop(): boolean {
+export function getIsElectronRuntime(): boolean {
-  if (_isDesktopCached === true) {
+  if (_isElectronRuntimeCached === true) {
     return true;
   }
-  const result = isDesktopEnvironment();
+  const result = isElectronDesktopRuntime();
   if (result) {
-    _isDesktopCached = true;
+    _isElectronRuntimeCached = true;
   }
   return result;
 }
+
+export function isCompactFormFactor(): boolean {
+  return UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+}
+
+export function isDesktopFormFactor(): boolean {
+  return !isCompactFormFactor();
+}
+
+export function isTouchDesktopFormFactor(): boolean {
+  return Platform.OS !== "web" && isDesktopFormFactor();
+}
+
+// SplitContainer relies on dnd-kit and DOM-backed accessibility helpers.
+// Keep that capability distinct from desktop-width layout so touch tablets
+// can use the desktop shell without entering web-only code paths.
+export function supportsDesktopPaneSplits(): boolean {
+  return Platform.OS === "web";
+}

packages/app/src/contexts/explorer-sidebar-animation-context.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useRef, type ReactNode } from "re
 import { useWindowDimensions } from "react-native";
 import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
 import { type GestureType } from "react-native-gesture-handler";
-import { UnistylesRuntime } from "react-native-unistyles";
+import { isCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   getRightSidebarAnimationTargets,
@@ -27,12 +27,12 @@ const ExplorerSidebarAnimationContext = createContext<ExplorerSidebarAnimationCo
 
 export function ExplorerSidebarAnimationProvider({ children }: { children: ReactNode }) {
   const { width: windowWidth } = useWindowDimensions();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
 
   // Derive isOpen from the unified panel state
-  const isOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
+  const isOpen = isCompactLayout ? mobileView === "file-explorer" : desktopFileExplorerOpen;
 
   // Right sidebar: closed = +windowWidth (off-screen right), open = 0
   const initialTargets = getRightSidebarAnimationTargets({ isOpen, windowWidth });

packages/app/src/contexts/sidebar-animation-context.tsx

@@ -10,7 +10,7 @@ import {
 import { useWindowDimensions } from "react-native";
 import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
 import { type GestureType } from "react-native-gesture-handler";
-import { UnistylesRuntime } from "react-native-unistyles";
+import { isCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   getLeftSidebarAnimationTargets,
@@ -34,12 +34,12 @@ const SidebarAnimationContext = createContext<SidebarAnimationContextValue | nul
 
 export function SidebarAnimationProvider({ children }: { children: ReactNode }) {
   const { width: windowWidth } = useWindowDimensions();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
 
   // Derive isOpen from the unified panel state
-  const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
+  const isOpen = isCompactLayout ? mobileView === "agent-list" : desktopAgentListOpen;
 
   // Initialize based on current state
   const initialTargets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });

packages/app/src/desktop/components/desktop-permissions-section.tsx

@@ -9,7 +9,7 @@ import { settingsStyles } from "@/styles/settings";
 export function DesktopPermissionsSection() {
   const { theme } = useUnistyles();
   const {
-    isDesktop,
+    isDesktopApp,
     snapshot,
     isRefreshing,
     requestingPermission,
@@ -20,7 +20,7 @@ export function DesktopPermissionsSection() {
     sendTestNotification,
   } = useDesktopPermissions();
 
-  if (!isDesktop) {
+  if (!isDesktopApp) {
     return null;
   }
 

packages/app/src/desktop/daemon/desktop-daemon.ts

@@ -1,4 +1,4 @@
-import { getDesktopHost, isDesktop } from "@/desktop/host";
+import { getDesktopHost, isElectronRuntime } from "@/desktop/host";
 import { invokeDesktopCommand } from "@/desktop/electron/invoke";
 
 export type DesktopDaemonState = "starting" | "running" | "stopped" | "errored";
@@ -123,7 +123,7 @@ function parseCliSymlinkInstructionsInternal(raw: unknown): CliSymlinkInstructio
 }
 
 export function shouldUseDesktopDaemon(): boolean {
-  return isDesktop();
+  return isElectronRuntime();
 }
 
 export async function getDesktopDaemonStatus(): Promise<DesktopDaemonStatus> {

packages/app/src/desktop/host.ts

@@ -97,12 +97,12 @@ export function getDesktopHost(): DesktopHostBridge | null {
   return getElectronHost();
 }
 
-export function isDesktop(): boolean {
+export function isElectronRuntime(): boolean {
   return getDesktopHost() !== null;
 }
 
-export function isDesktopMac(): boolean {
+export function isElectronRuntimeMac(): boolean {
-  if (!isDesktop()) {
+  if (!isElectronRuntime()) {
     return false;
   }
   if (typeof navigator === "undefined") {

packages/app/src/desktop/permissions/use-desktop-permissions.ts

@@ -9,7 +9,7 @@ import {
 import { sendOsNotification } from "@/utils/os-notifications";
 
 export interface UseDesktopPermissionsReturn {
-  isDesktop: boolean;
+  isDesktopApp: boolean;
   snapshot: DesktopPermissionSnapshot | null;
   isRefreshing: boolean;
   requestingPermission: DesktopPermissionKind | null;
@@ -31,7 +31,7 @@ const EMPTY_MICROPHONE_STATUS = {
 };
 
 export function useDesktopPermissions(): UseDesktopPermissionsReturn {
-  const isDesktop = shouldShowDesktopPermissionSection();
+  const isDesktopApp = shouldShowDesktopPermissionSection();
   const isMountedRef = useRef(true);
   const [snapshot, setSnapshot] = useState<DesktopPermissionSnapshot | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -47,7 +47,7 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
   }, []);
 
   const refreshPermissions = useCallback(async () => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return;
     }
 
@@ -65,11 +65,11 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
         setIsRefreshing(false);
       }
     }
-  }, [isDesktop]);
+  }, [isDesktopApp]);
 
   const requestPermission = useCallback(
     async (kind: DesktopPermissionKind) => {
-      if (!isDesktop) {
+      if (!isDesktopApp) {
         return;
       }
 
@@ -110,13 +110,13 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
         await refreshPermissions();
       }
     },
-    [isDesktop, refreshPermissions],
+    [isDesktopApp, refreshPermissions],
   );
 
   const [testNotificationError, setTestNotificationError] = useState<string | null>(null);
 
   const sendTestNotification = useCallback(async () => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return;
     }
 
@@ -137,18 +137,18 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
         setIsSendingTestNotification(false);
       }
     }
-  }, [isDesktop]);
+  }, [isDesktopApp]);
 
   useEffect(() => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return;
     }
 
     void refreshPermissions();
-  }, [isDesktop, refreshPermissions]);
+  }, [isDesktopApp, refreshPermissions]);
 
   return {
-    isDesktop,
+    isDesktopApp,
     snapshot,
     isRefreshing,
     requestingPermission,

packages/app/src/desktop/updates/desktop-updates.ts

@@ -1,5 +1,5 @@
 import { Platform } from "react-native";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import { invokeDesktopCommand } from "@/desktop/electron/invoke";
 
 export interface DesktopAppUpdateCheckResult {
@@ -49,7 +49,7 @@ function toNumberOr(defaultValue: number, value: unknown): number {
 }
 
 export function shouldShowDesktopUpdateSection(): boolean {
-  return Platform.OS === "web" && isDesktop();
+  return Platform.OS === "web" && isElectronRuntime();
 }
 
 export function parseLocalDaemonVersionResult(raw: unknown): LocalDaemonVersionResult {

packages/app/src/desktop/updates/update-banner.tsx

@@ -11,7 +11,7 @@ const CHANGELOG_URL = "https://paseo.sh/changelog";
 export function UpdateBanner() {
   const { theme } = useUnistyles();
   const {
-    isDesktop,
+    isDesktopApp,
     status,
     availableUpdate,
     errorMessage,
@@ -23,7 +23,7 @@ export function UpdateBanner() {
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   useEffect(() => {
-    if (!isDesktop) return;
+    if (!isDesktopApp) return;
 
     void checkForUpdates({ silent: true });
 
@@ -36,9 +36,9 @@ export function UpdateBanner() {
         clearInterval(intervalRef.current);
       }
     };
-  }, [isDesktop, checkForUpdates]);
+  }, [isDesktopApp, checkForUpdates]);
 
-  if (!isDesktop) return null;
+  if (!isDesktopApp) return null;
   if (dismissed) return null;
   if (status !== "available" && status !== "installed" && status !== "installing" && status !== "error")
     return null;

packages/app/src/desktop/updates/use-desktop-app-updater.ts

@@ -18,7 +18,7 @@ export type DesktopAppUpdateStatus =
   | "error";
 
 export interface UseDesktopAppUpdaterReturn {
-  isDesktop: boolean;
+  isDesktopApp: boolean;
   status: DesktopAppUpdateStatus;
   statusText: string;
   availableUpdate: DesktopAppUpdateCheckResult | null;
@@ -75,7 +75,7 @@ function formatStatusText(input: {
 }
 
 export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
-  const isDesktop = shouldShowDesktopUpdateSection();
+  const isDesktopApp = shouldShowDesktopUpdateSection();
   const requestVersionRef = useRef(0);
   const [status, setStatus] = useState<DesktopAppUpdateStatus>("idle");
   const [availableUpdate, setAvailableUpdate] = useState<DesktopAppUpdateCheckResult | null>(null);
@@ -85,7 +85,7 @@ export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
 
   const checkForUpdates = useCallback(
     async (options: { silent?: boolean } = {}) => {
-      if (!isDesktop) {
+      if (!isDesktopApp) {
         return null;
       }
 
@@ -130,11 +130,11 @@ export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
         return null;
       }
     },
-    [isDesktop],
+    [isDesktopApp],
   );
 
   const installUpdate = useCallback(async () => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return null;
     }
 
@@ -162,10 +162,10 @@ export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
       setErrorMessage(message);
       return null;
     }
-  }, [isDesktop]);
+  }, [isDesktopApp]);
 
   return {
-    isDesktop,
+    isDesktopApp,
     status,
     statusText: formatStatusText({
       status,

packages/app/src/hooks/use-audio-recorder.web.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AttemptCancelledError, AttemptGuard } from "@/utils/attempt-guard";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 
 export interface AudioCaptureConfig {
   sampleRate?: number;
@@ -157,7 +157,7 @@ export function useAudioRecorder(config?: AudioCaptureConfig) {
         : true;
     const currentOrigin =
       typeof window !== "undefined" && window.location ? window.location.origin : "unknown";
-    const isDesktopApp = isDesktop();
+    const isDesktopApp = isElectronRuntime();
 
     if (missingNavigator) {
       throw new Error("Microphone capture is not supported in this environment");

packages/app/src/hooks/use-command-center.ts

@@ -17,7 +17,7 @@ import { chordStringToShortcutKeys } from "@/keyboard/shortcut-string";
 import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
 import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 import { getShortcutOs } from "@/utils/shortcut-platform";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime } from "@/constants/layout";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import { focusWithRetries } from "@/utils/web-focus";
 
@@ -110,8 +110,8 @@ function resolveActionShortcutKeys(
 ): ShortcutKey[][] | undefined {
   if (!actionId) return undefined;
   const isMac = getShortcutOs() === "mac";
-  const isDesktop = getIsDesktop();
+  const isDesktopApp = getIsElectronRuntime();
-  const platform = { isMac, isDesktop };
+  const platform = { isMac, isDesktop: isDesktopApp };
   const bindingId = getBindingIdForAction(actionId, platform);
   if (!bindingId) return undefined;
   const override = overrides[bindingId];

packages/app/src/hooks/use-dictation-audio-source.web.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { parsePcm16Wav } from "@/utils/pcm16-wav";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 
 import type {
   DictationAudioSource,
@@ -168,7 +168,7 @@ export function useDictationAudioSource(config: DictationAudioSourceConfig): Dic
         : true;
     const currentOrigin =
       typeof window !== "undefined" && window.location ? window.location.origin : "unknown";
-    const isDesktopApp = isDesktop();
+    const isDesktopApp = isElectronRuntime();
 
     if (missingNavigator) {
       throw new Error("Microphone capture is not supported in this environment");

packages/app/src/hooks/use-favicon-status.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Platform } from "react-native";
-import { getIsDesktopMac } from "@/constants/layout";
+import { getIsElectronRuntimeMac } from "@/constants/layout";
 import { useAggregatedAgents } from "./use-aggregated-agents";
 import { getDesktopHost } from "@/desktop/host";
 
@@ -96,7 +96,7 @@ function getSystemColorScheme(): ColorScheme {
 }
 
 async function updateMacDockBadge(count?: number) {
-  if (Platform.OS !== "web" || !getIsDesktopMac()) return;
+  if (Platform.OS !== "web" || !getIsElectronRuntimeMac()) return;
 
   const desktopWindow = getDesktopHost()?.window?.getCurrentWindow?.();
   if (!desktopWindow || typeof desktopWindow.setBadgeCount !== "function") {

packages/app/src/hooks/use-image-attachment-picker.ts

@@ -2,7 +2,7 @@ import { useCallback, useRef } from "react";
 import { Alert } from "react-native";
 import { Platform } from "react-native";
 import * as ImagePicker from "expo-image-picker";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import {
   normalizePickedImageAssets,
   openImagePathsWithDesktopDialog,
@@ -45,7 +45,7 @@ export function useImageAttachmentPicker(): UseImageAttachmentPickerResult {
     isPickingRef.current = true;
 
     try {
-      if (Platform.OS === "web" && isDesktop()) {
+      if (Platform.OS === "web" && isElectronRuntime()) {
         const selectedPaths = await openImagePathsWithDesktopDialog();
         if (selectedPaths.length === 0) {
           return null;

packages/app/src/hooks/use-is-local-daemon.ts

@@ -17,12 +17,12 @@ async function loadDesktopDaemonServerId(): Promise<DesktopDaemonServerIdResult>
 
 export function useIsLocalDaemon(serverId: string): boolean {
   const normalizedServerId = serverId.trim();
-  const isDesktop = shouldUseDesktopDaemon();
+  const isDesktopApp = shouldUseDesktopDaemon();
 
   const query = useQuery({
     queryKey: DESKTOP_DAEMON_SERVER_ID_QUERY_KEY,
     queryFn: loadDesktopDaemonServerId,
-    enabled: isDesktop,
+    enabled: isDesktopApp,
     staleTime: Infinity,
     gcTime: Infinity,
     refetchInterval: (query) => (query.state.data?.serverId ? false : 1000),
@@ -32,7 +32,7 @@ export function useIsLocalDaemon(serverId: string): boolean {
     retry: false,
   });
 
-  if (!isDesktop || normalizedServerId.length === 0) {
+  if (!isDesktopApp || normalizedServerId.length === 0) {
     return false;
   }
 

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { usePathname } from "expo-router";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime } from "@/constants/layout";
 import { useHosts } from "@/runtime/host-runtime";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { setCommandCenterFocusRestoreElement } from "@/utils/command-center-focus-restore";
@@ -66,7 +66,7 @@ export function useKeyboardShortcuts({
     if (Platform.OS !== "web") return;
     if (isMobile) return;
 
-    const isDesktopApp = getIsDesktop();
+    const isDesktopApp = getIsElectronRuntime();
     const isMac = getShortcutOs() === "mac";
 
     const shouldHandle = () => {

packages/app/src/hooks/use-shortcut-keys.ts

@@ -4,15 +4,15 @@ import { chordStringToShortcutKeys } from "@/keyboard/shortcut-string";
 import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
 import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 import { getShortcutOs } from "@/utils/shortcut-platform";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime } from "@/constants/layout";
 
 export function useShortcutKeys(actionId: string): ShortcutKey[][] | null {
   const { overrides } = useKeyboardShortcutOverrides();
   const isMac = getShortcutOs() === "mac";
-  const isDesktop = getIsDesktop();
+  const isDesktopApp = getIsElectronRuntime();
 
   return useMemo(() => {
-    const platform = { isMac, isDesktop };
+    const platform = { isMac, isDesktop: isDesktopApp };
     const bindingId = getBindingIdForAction(actionId, platform);
     if (!bindingId) return null;
 
@@ -23,5 +23,5 @@ export function useShortcutKeys(actionId: string): ShortcutKey[][] | null {
 
     const defaultKeys = getDefaultKeysForAction(actionId, platform);
     return defaultKeys ? [defaultKeys] : null;
-  }, [actionId, overrides, isMac, isDesktop]);
+  }, [actionId, overrides, isMac, isDesktopApp]);
 }

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -4,7 +4,7 @@ import type { ImageAttachment } from "@/components/message-input";
 import { View, Text, Pressable, ScrollView, Keyboard, Platform } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useIsFocused } from "@react-navigation/native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
@@ -40,7 +40,7 @@ import {
 } from "@/runtime/host-runtime";
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
 import { usePanelStore, type ExplorerCheckoutContext } from "@/stores/panel-store";
-import { MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { MAX_CONTENT_WIDTH, isCompactFormFactor } from "@/constants/layout";
 import { WelcomeScreen } from "@/components/welcome-screen";
 import type { Agent } from "@/contexts/session-context";
 import { encodeImages } from "@/utils/encode-images";
@@ -233,7 +233,7 @@ function DraftAgentScreenContent({
     isCreateFlow: true,
     onlineServerIds,
   });
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);

packages/app/src/screens/open-project-screen.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { View, Text } from "react-native";
-import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
+import { StyleSheet } from "react-native-unistyles";
 import { FolderOpen } from "lucide-react-native";
 import { PaseoLogo } from "@/components/icons/paseo-logo";
 import { Button } from "@/components/ui/button";
@@ -8,6 +8,7 @@ import { MenuHeader } from "@/components/headers/menu-header";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSessionStore } from "@/stores/session-store";
+import { isCompactFormFactor } from "@/constants/layout";
 import { useDesktopDragHandlers } from "@/utils/desktop-window";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
@@ -16,14 +17,14 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const hasHydrated = useSessionStore((s) => s.sessions[serverId]?.hasHydratedWorkspaces ?? false);
   const hasProjects = useSessionStore((s) => (s.sessions[serverId]?.workspaces?.size ?? 0) > 0);
 
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
   const dragHandlers = useDesktopDragHandlers();
 
   useEffect(() => {
-    if (!isMobile) {
+    if (!isCompactLayout) {
       openAgentList();
     }
-  }, [isMobile, openAgentList]);
+  }, [isCompactLayout, openAgentList]);
 
   return (
     <View style={styles.container}>

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

@@ -4,7 +4,7 @@ import { View, Text, ScrollView, Alert, Platform, Pressable } from "react-native
 import { router, useLocalSearchParams } from "expo-router";
 import { useFocusEffect } from "@react-navigation/native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Buffer } from "buffer";
 import {
   Sun,
@@ -51,7 +51,7 @@ import {
 import { AdaptiveModalSheet, AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
 import { DesktopPermissionsSection } from "@/desktop/components/desktop-permissions-section";
 import { LocalDaemonSection } from "@/desktop/components/desktop-updates-section";
-import { isDesktop as isDesktopHost } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import { useDesktopAppUpdater } from "@/desktop/updates/use-desktop-app-updater";
 import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates";
 import { resolveAppVersion } from "@/utils/app-version";
@@ -59,6 +59,7 @@ import { settingsStyles } from "@/styles/settings";
 import { THINKING_TONE_NATIVE_PCM_BASE64 } from "@/utils/thinking-tone.native-pcm";
 import { useVoiceAudioEngineOptional } from "@/contexts/voice-context";
 import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
+import { isCompactFormFactor } from "@/constants/layout";
 
 // ---------------------------------------------------------------------------
 // Section definitions
@@ -79,7 +80,7 @@ interface SettingsSectionDef {
   icon: ComponentType<{ size: number; color: string }>;
 }
 
-function getSettingsSections(context: { isDesktop: boolean }): SettingsSectionDef[] {
+function getSettingsSections(context: { isDesktopApp: boolean }): SettingsSectionDef[] {
   const sections: SettingsSectionDef[] = [
     { id: "hosts", label: "Hosts", icon: Server },
     { id: "appearance", label: "Appearance", icon: Palette },
@@ -88,7 +89,7 @@ function getSettingsSections(context: { isDesktop: boolean }): SettingsSectionDe
     { id: "about", label: "About", icon: Info },
   ];
 
-  if (context.isDesktop) {
+  if (context.isDesktopApp) {
     sections.push(
       { id: "permissions", label: "Permissions", icon: Shield },
       { id: "daemon", label: "Daemon", icon: Settings },
@@ -174,7 +175,6 @@ interface HostsSectionProps {
   daemons: HostProfile[];
   settings: AppSettings;
   routeServerId: string;
-  isDesktop: boolean;
   theme: ReturnType<typeof useUnistyles>["theme"];
   handleEditDaemon: (profile: HostProfile) => void;
   setAddConnectionTargetServerId: (id: string | null) => void;
@@ -464,10 +464,10 @@ function DiagnosticsSection({
 
 interface AboutSectionProps {
   appVersionText: string;
-  isDesktop: boolean;
+  isDesktopApp: boolean;
 }
 
-function AboutSection({ appVersionText, isDesktop }: AboutSectionProps) {
+function AboutSection({ appVersionText, isDesktopApp }: AboutSectionProps) {
   return (
     <View style={settingsStyles.section}>
       <Text style={settingsStyles.sectionTitle}>About</Text>
@@ -478,7 +478,7 @@ function AboutSection({ appVersionText, isDesktop }: AboutSectionProps) {
           </View>
           <Text style={styles.aboutValue}>{appVersionText}</Text>
         </View>
-        {isDesktop ? <DesktopAppUpdateRow /> : null}
+        {isDesktopApp ? <DesktopAppUpdateRow /> : null}
       </View>
     </View>
   );
@@ -496,7 +496,7 @@ interface SettingsSectionContentProps {
   aboutProps: AboutSectionProps;
   appVersion: string | null;
   isLocalDaemon: boolean;
-  isDesktop: boolean;
+  isDesktopApp: boolean;
 }
 
 function SettingsSectionContent({
@@ -507,7 +507,7 @@ function SettingsSectionContent({
   aboutProps,
   appVersion,
   isLocalDaemon,
-  isDesktop,
+  isDesktopApp,
 }: SettingsSectionContentProps) {
   switch (sectionId) {
     case "hosts":
@@ -521,9 +521,9 @@ function SettingsSectionContent({
     case "about":
       return <AboutSection {...aboutProps} />;
     case "permissions":
-      return isDesktop ? <DesktopPermissionsSection /> : null;
+      return isDesktopApp ? <DesktopPermissionsSection /> : null;
     case "daemon":
-      return isDesktop ? (
+      return isDesktopApp ? (
         <LocalDaemonSection appVersion={appVersion} showLifecycleControls={isLocalDaemon} />
       ) : null;
   }
@@ -619,7 +619,7 @@ function SettingsDesktopLayout({ sections, sectionContentProps }: SettingsLayout
 
 function DesktopAppUpdateRow() {
   const {
-    isDesktop,
+    isDesktopApp,
     statusText,
     availableUpdate,
     errorMessage,
@@ -631,23 +631,23 @@ function DesktopAppUpdateRow() {
 
   useFocusEffect(
     useCallback(() => {
-      if (!isDesktop) {
+      if (!isDesktopApp) {
         return undefined;
       }
       void checkForUpdates({ silent: true });
       return undefined;
-    }, [checkForUpdates, isDesktop]),
+    }, [checkForUpdates, isDesktopApp]),
   );
 
   const handleCheckForUpdates = useCallback(() => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return;
     }
     void checkForUpdates();
-  }, [checkForUpdates, isDesktop]);
+  }, [checkForUpdates, isDesktopApp]);
 
   const handleInstallUpdate = useCallback(() => {
-    if (!isDesktop) {
+    if (!isDesktopApp) {
       return;
     }
 
@@ -667,9 +667,9 @@ function DesktopAppUpdateRow() {
         console.error("[Settings] Failed to open app update confirmation", error);
         Alert.alert("Error", "Unable to open the update confirmation dialog.");
       });
-  }, [installUpdate, isDesktop]);
+  }, [installUpdate, isDesktopApp]);
 
-  if (!isDesktop) {
+  if (!isDesktopApp) {
     return null;
   }
 
@@ -745,7 +745,7 @@ export default function SettingsScreen() {
   const isLoading = settingsLoading;
   const isMountedRef = useRef(true);
   const lastHandledEditHostRef = useRef<string | null>(null);
-  const isDesktop = isDesktopHost();
+  const isDesktopApp = isElectronRuntime();
   const isLocalDaemon = useIsLocalDaemon(routeServerId);
   const appVersion = resolveAppVersion();
   const appVersionText = formatVersionWithPrefix(appVersion);
@@ -929,14 +929,13 @@ export default function SettingsScreen() {
     }
   }, [isPlaybackTestRunning, voiceAudioEngine]);
 
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isCompactLayout = isCompactFormFactor();
-  const sections = getSettingsSections({ isDesktop });
+  const sections = getSettingsSections({ isDesktopApp });
 
   const hostsProps: HostsSectionProps = {
     daemons,
     settings,
     routeServerId,
-    isDesktop,
     theme,
     handleEditDaemon,
     setAddConnectionTargetServerId,
@@ -985,7 +984,7 @@ export default function SettingsScreen() {
 
   const aboutProps: AboutSectionProps = {
     appVersionText,
-    isDesktop,
+    isDesktopApp,
   };
 
   const sectionContentProps: Omit<SettingsSectionContentProps, "sectionId"> = {
@@ -995,7 +994,7 @@ export default function SettingsScreen() {
     aboutProps,
     appVersion,
     isLocalDaemon,
-    isDesktop,
+    isDesktopApp,
   };
 
   if (isLoading) {
@@ -1009,7 +1008,7 @@ export default function SettingsScreen() {
   return (
     <View style={styles.container}>
       <MenuHeader title="Settings" />
-      {isMobile ? (
+      {isCompactLayout ? (
         <SettingsMobileLayout sections={sections} sectionContentProps={sectionContentProps} />
       ) : (
         <SettingsDesktopLayout sections={sections} sectionContentProps={sectionContentProps} />

packages/app/src/screens/settings/keyboard-shortcuts-section.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/keyboard/shortcut-string";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { getShortcutOs } from "@/utils/shortcut-platform";
-import { getIsDesktop } from "@/constants/layout";
+import { getIsElectronRuntime } from "@/constants/layout";
 
 function ShortcutSequence({ chord }: { chord: string[] | null }) {
   if (!chord || chord.length === 0) {
@@ -93,8 +93,8 @@ export function KeyboardShortcutsSection() {
   const setCapturingShortcut = useKeyboardShortcutsStore((s) => s.setCapturingShortcut);
 
   const isMac = getShortcutOs() === "mac";
-  const isDesktop = getIsDesktop();
+  const isDesktopApp = getIsElectronRuntime();
-  const sections = buildKeyboardShortcutHelpSections({ isMac, isDesktop });
+  const sections = buildKeyboardShortcutHelpSections({ isMac, isDesktop: isDesktopApp });
 
   function cancelCapture() {
     setCapturedCombos([]);
@@ -180,7 +180,10 @@ export function KeyboardShortcutsSection() {
             <Text style={styles.subsectionTitle}>{section.title}</Text>
             <View style={settingsStyles.card}>
               {section.rows.map(function (row, index) {
-                const bindingId = getBindingIdForAction(row.id, { isMac, isDesktop });
+                const bindingId = getBindingIdForAction(row.id, {
+                  isMac,
+                  isDesktop: isDesktopApp,
+                });
                 const overrideCombo = bindingId ? overrides[bindingId] : undefined;
 
                 return (

packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx

@@ -83,6 +83,7 @@ type WorkspaceDesktopTabsRowProps = {
   externalDndContext?: boolean;
   activeDragTabId?: string | null;
   tabDropPreviewIndex?: number | null;
+  showPaneSplitActions?: boolean;
 };
 
 function getFallbackTabLabel(tab: WorkspaceTabDescriptor): string {
@@ -346,6 +347,7 @@ export function WorkspaceDesktopTabsRow({
   externalDndContext = false,
   activeDragTabId = null,
   tabDropPreviewIndex = null,
+  showPaneSplitActions = true,
 }: WorkspaceDesktopTabsRowProps) {
   const { theme } = useUnistyles();
   const newAgentTabKeys = useShortcutKeys("workspace-tab-new");
@@ -522,48 +524,52 @@ export function WorkspaceDesktopTabsRow({
             </View>
           </TooltipContent>
         </Tooltip>
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+        {showPaneSplitActions ? (
-          <TooltipTrigger
+          <>
-            onPress={onSplitRight}
+            <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-            accessibilityRole="button"
+              <TooltipTrigger
-            accessibilityLabel="Split pane right"
+                onPress={onSplitRight}
-            style={({ hovered, pressed }) => [
+                accessibilityRole="button"
-              styles.newTabActionButton,
+                accessibilityLabel="Split pane right"
-              (hovered || pressed) && styles.newTabActionButtonHovered,
+                style={({ hovered, pressed }) => [
-            ]}
+                  styles.newTabActionButton,
-          >
+                  (hovered || pressed) && styles.newTabActionButtonHovered,
-            <Columns2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+                ]}
-          </TooltipTrigger>
+              >
-          <TooltipContent side="bottom" align="center" offset={8}>
+                <Columns2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-            <View style={styles.newTabTooltipRow}>
+              </TooltipTrigger>
-              <Text style={styles.newTabTooltipText}>Split pane right</Text>
+              <TooltipContent side="bottom" align="center" offset={8}>
-              {splitRightKeys ? (
+                <View style={styles.newTabTooltipRow}>
-                <Shortcut chord={splitRightKeys} style={styles.newTabTooltipShortcut} />
+                  <Text style={styles.newTabTooltipText}>Split pane right</Text>
-              ) : null}
+                  {splitRightKeys ? (
-            </View>
+                    <Shortcut chord={splitRightKeys} style={styles.newTabTooltipShortcut} />
-          </TooltipContent>
+                  ) : null}
-        </Tooltip>
+                </View>
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+              </TooltipContent>
-          <TooltipTrigger
+            </Tooltip>
-            onPress={onSplitDown}
+            <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-            accessibilityRole="button"
+              <TooltipTrigger
-            accessibilityLabel="Split pane down"
+                onPress={onSplitDown}
-            style={({ hovered, pressed }) => [
+                accessibilityRole="button"
-              styles.newTabActionButton,
+                accessibilityLabel="Split pane down"
-              (hovered || pressed) && styles.newTabActionButtonHovered,
+                style={({ hovered, pressed }) => [
-            ]}
+                  styles.newTabActionButton,
-          >
+                  (hovered || pressed) && styles.newTabActionButtonHovered,
-            <Rows2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+                ]}
-          </TooltipTrigger>
+              >
-          <TooltipContent side="bottom" align="center" offset={8}>
+                <Rows2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-            <View style={styles.newTabTooltipRow}>
+              </TooltipTrigger>
-              <Text style={styles.newTabTooltipText}>Split pane down</Text>
+              <TooltipContent side="bottom" align="center" offset={8}>
-              {splitDownKeys ? (
+                <View style={styles.newTabTooltipRow}>
-                <Shortcut chord={splitDownKeys} style={styles.newTabTooltipShortcut} />
+                  <Text style={styles.newTabTooltipText}>Split pane down</Text>
-              ) : null}
+                  {splitDownKeys ? (
-            </View>
+                    <Shortcut chord={splitDownKeys} style={styles.newTabTooltipShortcut} />
-          </TooltipContent>
+                  ) : null}
-        </Tooltip>
+                </View>
+              </TooltipContent>
+            </Tooltip>
+          </>
+        ) : null}
       </View>
     </View>
   );

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

@@ -29,7 +29,7 @@ import {
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import invariant from "tiny-invariant";
 import { SidebarMenuToggle } from "@/components/headers/menu-header";
 import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
@@ -86,6 +86,10 @@ import {
   WorkspaceTabIcon,
   WorkspaceTabOptionRow,
 } from "@/screens/workspace/workspace-tab-presentation";
+import {
+  WorkspaceDesktopTabsRow,
+  type WorkspaceDesktopTabRowItem,
+} from "@/screens/workspace/workspace-desktop-tabs-row";
 import { buildWorkspaceTabMenuEntries } from "@/screens/workspace/workspace-tab-menu";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import {
@@ -110,6 +114,7 @@ import {
   closeBulkWorkspaceTabs,
 } from "@/screens/workspace/workspace-bulk-close";
 import { findAdjacentPane } from "@/utils/split-navigation";
+import { isCompactFormFactor, supportsDesktopPaneSplits } from "@/constants/layout";
 
 const TERMINALS_QUERY_STALE_TIME = 5_000;
 const NEW_TAB_AGENT_OPTION_ID = "__new_tab_agent__";
@@ -576,7 +581,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const isDarkMode = useColorScheme() === "dark";
   const mainBackgroundColor = isDarkMode ? theme.colors.surface1 : theme.colors.surface0;
   const toast = useToast();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = isCompactFormFactor();
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
   const normalizedServerId = trimNonEmpty(decodeSegment(serverId)) ?? "";
@@ -1703,6 +1708,8 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   });
 
   const activeTabDescriptor = activeTab?.descriptor ?? null;
+  const canRenderDesktopPaneSplits = supportsDesktopPaneSplits();
+  const shouldRenderDesktopPaneFallback = !isMobile && !canRenderDesktopPaneSplits;
   useEffect(() => {
     if (Platform.OS !== "web" || typeof document === "undefined" || activeTabDescriptor) {
       return;
@@ -1881,6 +1888,17 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     [buildPaneContentModel],
   );
 
+  const desktopTabRowItems = useMemo<WorkspaceDesktopTabRowItem[]>(
+    () =>
+      tabs.map((tab) => ({
+        tab,
+        isActive: tab.tabId === activeTabDescriptor?.tabId,
+        isCloseHovered: hoveredCloseTabKey === tab.key,
+        isClosingTab: closingTabIds.has(tab.tabId),
+      })),
+    [activeTabDescriptor?.tabId, closingTabIds, hoveredCloseTabKey, tabs],
+  );
+
   const handleFocusPane = useStableEvent(function handleFocusPane(paneId: string) {
     if (!persistenceKey || paneFocusSuppressedRef.current) {
       return;
@@ -1932,6 +1950,19 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     [persistenceKey, reorderWorkspaceTabsInPane],
   );
 
+  const handleReorderTabsInFocusedPane = useCallback(
+    (nextTabs: WorkspaceTabDescriptor[]) => {
+      if (!focusedPaneId) {
+        return;
+      }
+      handleReorderTabsInPane(
+        focusedPaneId,
+        nextTabs.map((tab) => tab.tabId),
+      );
+    },
+    [focusedPaneId, handleReorderTabsInPane],
+  );
+
   const renderSplitPaneEmptyState = useCallback(function renderSplitPaneEmptyState() {
     return (
       <View style={styles.emptyState}>
@@ -2187,6 +2218,32 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
             />
           ) : null}
 
+          {shouldRenderDesktopPaneFallback ? (
+            <WorkspaceDesktopTabsRow
+              paneId={focusedPaneId ?? undefined}
+              isFocused
+              tabs={desktopTabRowItems}
+              normalizedServerId={normalizedServerId}
+              normalizedWorkspaceId={normalizedWorkspaceId}
+              setHoveredTabKey={setHoveredTabKey}
+              setHoveredCloseTabKey={setHoveredCloseTabKey}
+              onNavigateTab={navigateToTabId}
+              onCloseTab={handleCloseTabById}
+              onCopyResumeCommand={handleCopyResumeCommand}
+              onCopyAgentId={handleCopyAgentId}
+              onCloseTabsToLeft={handleCloseTabsToLeft}
+              onCloseTabsToRight={handleCloseTabsToRight}
+              onCloseOtherTabs={handleCloseOtherTabs}
+              onSelectNewTabOption={handleSelectNewTabOption}
+              newTabAgentOptionId={NEW_TAB_AGENT_OPTION_ID}
+              onReorderTabs={handleReorderTabsInFocusedPane}
+              onNewTerminalTab={handleCreateTerminal}
+              onSplitRight={() => {}}
+              onSplitDown={() => {}}
+              showPaneSplitActions={false}
+            />
+          ) : null}
+
           <View style={styles.centerContent}>
             {isMobile ? (
               <GestureDetector gesture={explorerOpenGesture} touchAction="pan-y">
@@ -2194,7 +2251,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
               </GestureDetector>
             ) : (
               <View style={styles.content}>
-                {workspaceLayout && persistenceKey ? (
+                {canRenderDesktopPaneSplits && workspaceLayout && persistenceKey ? (
                   <SplitContainer
                     layout={workspaceLayout}
                     focusModeEnabled={isFocusModeEnabled && !isMobile}

packages/app/src/utils/desktop-window.ts

@@ -1,15 +1,15 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Platform, type PointerEvent as RNPointerEvent, type ViewProps } from "react-native";
 import {
-  getIsDesktopMac,
+  getIsElectronRuntimeMac,
-  getIsDesktop,
+  getIsElectronRuntime,
   DESKTOP_TRAFFIC_LIGHT_WIDTH,
   DESKTOP_TRAFFIC_LIGHT_HEIGHT,
   DESKTOP_WINDOW_CONTROLS_WIDTH,
   DESKTOP_WINDOW_CONTROLS_HEIGHT,
 } from "@/constants/layout";
 import { getDesktopWindow } from "@/desktop/electron/window";
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import { usePanelStore } from "@/stores/panel-store";
 import { readFiniteScreenPoint } from "./desktop-window-drag-coordinates";
 
@@ -56,7 +56,7 @@ export function isInteractiveDesktopDragTarget(target: unknown): boolean {
 export function useDesktopDragHandlers(): DesktopDragViewProps {
   const isDragging = useRef(false);
   const lastPointerDownAt = useRef(0);
-  const isActive = Platform.OS === "web" && isDesktop();
+  const isActive = Platform.OS === "web" && isElectronRuntime();
 
   useEffect(() => {
     if (!isActive) return;
@@ -136,7 +136,7 @@ function useRawWindowControlsPadding(): RawWindowControlsPadding {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
-    if (Platform.OS !== "web" || !getIsDesktop()) return;
+    if (Platform.OS !== "web" || !getIsElectronRuntime()) return;
 
     let disposed = false;
     let cleanup: (() => void) | undefined;
@@ -188,11 +188,11 @@ function useRawWindowControlsPadding(): RawWindowControlsPadding {
   }, []);
 
   return useMemo((): RawWindowControlsPadding => {
-    if (!getIsDesktop() || isFullscreen) {
+    if (!getIsElectronRuntime() || isFullscreen) {
       return { left: 0, right: 0, top: 0 };
     }
 
-    if (getIsDesktopMac()) {
+    if (getIsElectronRuntimeMac()) {
       return {
         left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
         right: 0,

packages/app/src/utils/shortcut-platform.ts

@@ -1,12 +1,12 @@
 import { Platform } from "react-native";
-import { getIsDesktopMac } from "@/constants/layout";
+import { getIsElectronRuntimeMac } from "@/constants/layout";
 import type { ShortcutOs } from "@/utils/format-shortcut";
 
 export function getShortcutOs(): ShortcutOs {
   if (Platform.OS !== "web") {
     return Platform.OS === "ios" ? "mac" : "non-mac";
   }
-  if (getIsDesktopMac()) return "mac";
+  if (getIsElectronRuntimeMac()) return "mac";
   if (typeof navigator === "undefined") return "non-mac";
   const ua = navigator.userAgent ?? "";
   const platform = (navigator as any).platform ?? "";

packages/app/src/voice/audio-engine.web.ts

@@ -1,4 +1,4 @@
-import { isDesktop } from "@/desktop/host";
+import { isElectronRuntime } from "@/desktop/host";
 import type {
   AudioEngine,
   AudioEngineCallbacks,
@@ -289,7 +289,7 @@ export function createAudioEngine(
           : true;
       const currentOrigin =
         typeof window !== "undefined" && window.location ? window.location.origin : "unknown";
-      const isDesktopApp = isDesktop();
+      const isDesktopApp = isElectronRuntime();
 
       if (missingNavigator) {
         throw new Error("Microphone capture is not supported in this environment");