Simplify workspace reconnect gating

2026-05-03 13:50:20 +07:00
parent b2247450f9
commit fa20f313d3
9 changed files with 1310 additions and 333 deletions
@@ -1,8 +1,18 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 import { useIsFocused } from "@react-navigation/native";
 import { ActivityIndicator, BackHandler, Keyboard, Pressable, Text, View } from "react-native";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter, type Href } from "expo-router";
 import * as Clipboard from "expo-clipboard";
 import { DiffStat } from "@/components/diff-stat";
 import {
@@ -67,7 +77,13 @@ import {
  normalizeWorkspaceTabTarget,
  workspaceTabTargetsEqual,
 } from "@/utils/workspace-tab-identity";
-import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import {
+  getHostRuntimeStore,
+  useHostRuntimeClient,
+  useHostRuntimeIsConnected,
+  useHostRuntimeSnapshot,
+  useHosts,
+} from "@/runtime/host-runtime";
 import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import { shouldShowWorkspaceSetup, useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
 import { useWorkspace } from "@/stores/session-store-hooks";
@@ -106,9 +122,16 @@ import {
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import {
  resolveWorkspaceHeaderRenderState,
-  shouldRenderMissingWorkspaceDescriptor,
  type WorkspaceHeaderCheckoutState,
 } from "@/screens/workspace/workspace-header-source";
+import {
+  resolveWorkspaceRouteState,
+  type WorkspaceRouteState,
+} from "@/screens/workspace/workspace-route-state";
+import {
+  renderWorkspaceReconnectIndicator,
+  renderWorkspaceRouteGate,
+} from "@/screens/workspace/workspace-route-state-views";
 import {
  deriveWorkspaceAgentVisibility,
  workspaceAgentVisibilityEqual,
@@ -132,6 +155,7 @@ import { isAbsolutePath } from "@/utils/path";
 import { useIsCompactFormFactor, supportsDesktopPaneSplits } from "@/constants/layout";
 import { getIsElectron, isNative, isWeb } from "@/constants/platform";
 import { useContainerWidthBelow } from "@/hooks/use-container-width";
+import { buildHostRootRoute, buildSettingsHostRoute } from "@/utils/host-routes";

 const TERMINALS_QUERY_STALE_TIME = 5_000;
 const WORKSPACE_SETUP_AUTO_OPEN_WINDOW_MS = 30_000;
@@ -166,6 +190,7 @@ const MENU_NEW_TERMINAL_ICON = <ThemedSquareTerminal size={16} uniProps={mutedCo
 const MENU_NEW_BROWSER_ICON = <ThemedGlobe size={16} uniProps={mutedColorMapping} />;
 const MENU_COPY_ICON = <ThemedCopy size={16} uniProps={mutedColorMapping} />;
 const MENU_SETTINGS_ICON = <ThemedSettings size={16} uniProps={mutedColorMapping} />;
+const GATED_WORKSPACE_HEADER_LEFT = <SidebarMenuToggle />;

 interface WorkspaceScreenProps {
  serverId: string;
@@ -971,7 +996,6 @@ function parsePaneDirection(actionId: string): PaneDirection | null {
 }

 interface RenderWorkspaceContentInput {
-  showMissingWorkspaceDescriptor: boolean;
  isMissingWorkspaceExecutionAuthority: boolean;
  activeTabDescriptor: WorkspaceTabDescriptor | null;
  hasHydratedAgents: boolean;
@@ -987,7 +1011,6 @@ interface RenderWorkspaceContentInput {

 function renderWorkspaceContent(input: RenderWorkspaceContentInput): React.ReactNode {
  const {
-    showMissingWorkspaceDescriptor,
    isMissingWorkspaceExecutionAuthority,
    activeTabDescriptor,
    hasHydratedAgents,
@@ -998,13 +1021,6 @@ function renderWorkspaceContent(input: RenderWorkspaceContentInput): React.React
    buildMobilePaneContentModel,
  } = input;

-  if (showMissingWorkspaceDescriptor) {
-    return (
-      <View style={styles.emptyState}>
-        <ThemedActivityIndicator uniProps={mutedColorMapping} />
-      </View>
-    );
-  }
  if (isMissingWorkspaceExecutionAuthority) {
    return (
      <View style={styles.emptyState}>
@@ -1152,6 +1168,170 @@ function removeTerminalFromPayload(terminalId: string) {
  };
 }

+function getHostDisplayName(host: { label?: string | null } | null, fallback: string): string {
+  const trimmed = host?.label?.trim();
+  return trimmed ? trimmed : fallback;
+}
+
+function useWorkspaceRouteActions(normalizedServerId: string): {
+  handleRetryHost: () => void;
+  handleManageHost: () => void;
+  handleDismissMissingWorkspace: () => void;
+} {
+  const router = useRouter();
+  const handleRetryHost = useCallback(() => {
+    if (!normalizedServerId) {
+      return;
+    }
+    void getHostRuntimeStore().runProbeCycleNow(normalizedServerId);
+  }, [normalizedServerId]);
+  const handleManageHost = useCallback(() => {
+    if (!normalizedServerId) {
+      return;
+    }
+    router.push(buildSettingsHostRoute(normalizedServerId) as Href);
+  }, [normalizedServerId, router]);
+  const handleDismissMissingWorkspace = useCallback(() => {
+    if (router.canGoBack()) {
+      router.back();
+      return;
+    }
+    if (normalizedServerId) {
+      router.replace(buildHostRootRoute(normalizedServerId) as Href);
+      return;
+    }
+    router.replace("/" as Href);
+  }, [normalizedServerId, router]);
+
+  return {
+    handleRetryHost,
+    handleManageHost,
+    handleDismissMissingWorkspace,
+  };
+}
+
+function useResolvedWorkspaceRouteState(input: {
+  serverId: string;
+  workspace: WorkspaceDescriptor | null;
+  hasHydratedWorkspaces: boolean;
+}): WorkspaceRouteState {
+  const hosts = useHosts();
+  const host = useMemo(
+    () => hosts.find((entry) => entry.serverId === input.serverId) ?? null,
+    [hosts, input.serverId],
+  );
+  const hostSnapshot = useHostRuntimeSnapshot(input.serverId);
+  const hostName = useMemo(() => getHostDisplayName(host, input.serverId), [host, input.serverId]);
+
+  return useMemo(
+    () =>
+      resolveWorkspaceRouteState({
+        hostName,
+        connectionStatus: hostSnapshot?.connectionStatus ?? "connecting",
+        lastError: hostSnapshot?.lastError ?? null,
+        workspace: input.workspace,
+        hasHydratedWorkspaces: input.hasHydratedWorkspaces,
+      }),
+    [
+      hostName,
+      hostSnapshot?.connectionStatus,
+      hostSnapshot?.lastError,
+      input.workspace,
+      input.hasHydratedWorkspaces,
+    ],
+  );
+}
+
+function WorkspaceScreenGateFrame({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <ScreenHeader left={GATED_WORKSPACE_HEADER_LEFT} />
+      <View style={styles.centerContent}>{children}</View>
+    </>
+  );
+}
+
+function renderWorkspaceScreenGateShell(input: {
+  gate: ReactNode;
+  workspaceKey: string | null;
+}): ReactElement | null {
+  if (!input.gate) {
+    return null;
+  }
+
+  return (
+    <WorkspaceFocusProvider workspaceKey={input.workspaceKey}>
+      <View style={containerWithWorkspaceBackgroundStyle}>
+        <View style={styles.threePaneRow}>
+          <View style={styles.centerColumn}>
+            <WorkspaceScreenGateFrame>{input.gate}</WorkspaceScreenGateFrame>
+          </View>
+        </View>
+      </View>
+    </WorkspaceFocusProvider>
+  );
+}
+
+function WorkspaceDocumentTitleEffectSlot({
+  tab,
+  serverId,
+  workspaceId,
+  isRouteFocused,
+}: {
+  tab: WorkspaceTabDescriptor | null;
+  serverId: string;
+  workspaceId: string;
+  isRouteFocused: boolean;
+}) {
+  if (!isRouteFocused || !isWeb || !tab) {
+    return null;
+  }
+
+  return (
+    <WorkspaceTabPresentationResolver tab={tab} serverId={serverId} workspaceId={workspaceId}>
+      {(presentation) => (
+        <WorkspaceDocumentTitleEffect
+          label={presentation.label}
+          titleState={presentation.titleState}
+        />
+      )}
+    </WorkspaceTabPresentationResolver>
+  );
+}
+
+function shouldShowWorkspaceScreenHeader(input: {
+  isFocusModeEnabled: boolean;
+  isMobile: boolean;
+}): boolean {
+  return !input.isFocusModeEnabled || input.isMobile;
+}
+
+function shouldShowWorkspaceExplorerSidebar(input: {
+  isRouteFocused: boolean;
+  isFocusModeEnabled: boolean;
+  isMobile: boolean;
+}): boolean {
+  return input.isRouteFocused && shouldShowWorkspaceScreenHeader(input);
+}
+
+function canCreateWorkspaceTerminal(input: {
+  isRouteFocused: boolean;
+  client: unknown;
+  isConnected: boolean;
+  workspaceDirectory: string | null;
+}): boolean {
+  return Boolean(
+    input.isRouteFocused && input.client && input.isConnected && input.workspaceDirectory,
+  );
+}
+
+function buildWorkspaceTerminalScopeKey(serverId: string, workspaceId: string): string | null {
+  if (!serverId || !workspaceId) {
+    return null;
+  }
+  return `${serverId}:${workspaceId}`;
+}
+
 function WorkspaceScreenContent({
  serverId,
  workspaceId,
@@ -1169,12 +1349,11 @@ function WorkspaceScreenContent({
    [workspaceId],
  );
  const workspaceDescriptor = useWorkspace(normalizedServerId, normalizedWorkspaceId);
+  const { handleRetryHost, handleManageHost, handleDismissMissingWorkspace } =
+    useWorkspaceRouteActions(normalizedServerId);

  const workspaceTerminalScopeKey = useMemo(
-    () =>
-      normalizedServerId && normalizedWorkspaceId
-        ? `${normalizedServerId}:${normalizedWorkspaceId}`
-        : null,
+    () => buildWorkspaceTerminalScopeKey(normalizedServerId, normalizedWorkspaceId),
    [normalizedServerId, normalizedWorkspaceId],
  );
  useWorkspaceTerminalSessionRetention({
@@ -1202,7 +1381,7 @@ function WorkspaceScreenContent({
    paneId?: string;
  } | null>(null);
  const canCreateTerminalNow = useMemo(
-    () => Boolean(isRouteFocused && client && isConnected && workspaceDirectory),
+    () => canCreateWorkspaceTerminal({ isRouteFocused, client, isConnected, workspaceDirectory }),
    [isRouteFocused, client, isConnected, workspaceDirectory],
  );

@@ -1351,7 +1530,7 @@ function WorkspaceScreenContent({
  }, [client, isConnected, isRouteFocused, queryClient, terminalsQueryKey, workspaceDirectory]);

  const isCheckoutQueryEnabled = useMemo(
-    () => Boolean(isRouteFocused && client && isConnected && workspaceDirectory),
+    () => canCreateWorkspaceTerminal({ isRouteFocused, client, isConnected, workspaceDirectory }),
    [isRouteFocused, client, isConnected, workspaceDirectory],
  );
  const checkoutQuery = useQuery({
@@ -1381,6 +1560,11 @@ function WorkspaceScreenContent({
  const hasHydratedAgents = useSessionStore(
    (state) => state.sessions[normalizedServerId]?.hasHydratedAgents ?? false,
  );
+  const workspaceRouteState = useResolvedWorkspaceRouteState({
+    serverId: normalizedServerId,
+    workspace: workspaceDescriptor,
+    hasHydratedWorkspaces,
+  });
  useEffect(() => {
    if (!pendingTerminalCreateInput) {
      return;
@@ -2602,12 +2786,7 @@ function WorkspaceScreenContent({
    },
    [buildPaneContentModel],
  );
-  const showMissingWorkspaceDescriptor = shouldRenderMissingWorkspaceDescriptor({
-    workspace: workspaceDescriptor,
-    hasHydratedWorkspaces,
-  });
  const content = renderWorkspaceContent({
-    showMissingWorkspaceDescriptor,
    isMissingWorkspaceExecutionAuthority,
    activeTabDescriptor,
    hasHydratedAgents,
@@ -2718,6 +2897,22 @@ function WorkspaceScreenContent({
  const menuNewTerminalIcon = MENU_NEW_TERMINAL_ICON;
  const menuCopyIcon = MENU_COPY_ICON;
  const menuSettingsIcon = MENU_SETTINGS_ICON;
+  const workspaceScreenGate = renderWorkspaceRouteGate({
+    state: workspaceRouteState,
+    actions: {
+      onRetryHost: handleRetryHost,
+      onManageHost: handleManageHost,
+      onDismissMissingWorkspace: handleDismissMissingWorkspace,
+    },
+  });
+  const gatedWorkspaceScreen = renderWorkspaceScreenGateShell({
+    gate: workspaceScreenGate,
+    workspaceKey: persistenceKey,
+  });
+  const reconnectBanner = renderWorkspaceReconnectIndicator({
+    state: workspaceRouteState,
+    onRetryHost: handleRetryHost,
+  });

  const headerRight = useMemo(
    () => (
@@ -2855,16 +3050,12 @@ function WorkspaceScreenContent({
    ],
  );

-  const documentTitleEffectTab = useMemo(
-    () => (isRouteFocused && isWeb ? activeTabDescriptor : null),
-    [isRouteFocused, activeTabDescriptor],
-  );
  const showScreenHeader = useMemo(
-    () => !isFocusModeEnabled || isMobile,
+    () => shouldShowWorkspaceScreenHeader({ isFocusModeEnabled, isMobile }),
    [isFocusModeEnabled, isMobile],
  );
  const showExplorerSidebar = useMemo(
-    () => isRouteFocused && (!isFocusModeEnabled || isMobile),
+    () => shouldShowWorkspaceExplorerSidebar({ isRouteFocused, isFocusModeEnabled, isMobile }),
    [isRouteFocused, isFocusModeEnabled, isMobile],
  );
  const createTerminalDisabled = useMemo(
@@ -2951,134 +3142,129 @@ function WorkspaceScreenContent({
  ]);

  return (
-    <WorkspaceFocusProvider workspaceKey={persistenceKey}>
-      <View style={containerStyle}>
-        {documentTitleEffectTab ? (
-          <WorkspaceTabPresentationResolver
-            tab={documentTitleEffectTab}
+    gatedWorkspaceScreen ?? (
+      <WorkspaceFocusProvider workspaceKey={persistenceKey}>
+        <View style={containerStyle}>
+          <WorkspaceDocumentTitleEffectSlot
+            tab={activeTabDescriptor}
            serverId={normalizedServerId}
            workspaceId={normalizedWorkspaceId}
-          >
-            {(presentation) => (
-              <WorkspaceDocumentTitleEffect
-                label={presentation.label}
-                titleState={presentation.titleState}
-              />
-            )}
-          </WorkspaceTabPresentationResolver>
-        ) : null}
-        <View style={styles.threePaneRow}>
-          <View style={styles.centerColumn}>
-            {showScreenHeader && (
-              <ScreenHeader
-                onRowLayout={onHeaderLayout}
-                left={
-                  <>
-                    <SidebarMenuToggle />
-                    <WorkspaceHeaderTitleBar
-                      isLoading={isWorkspaceHeaderLoading}
-                      title={workspaceHeaderTitle}
-                      subtitle={workspaceHeaderSubtitle}
-                      showSubtitle={shouldShowWorkspaceHeaderSubtitle}
-                      currentBranchName={currentBranchName}
-                      isGitCheckout={isGitCheckout}
-                      normalizedServerId={normalizedServerId}
-                      normalizedWorkspaceId={normalizedWorkspaceId}
-                      showWorkspaceSetup={showWorkspaceSetup}
-                      showCreateBrowserTab={showCreateBrowserTab}
-                      isMobile={isMobile}
-                      createTerminalDisabled={createTerminalDisabled}
-                      menuNewAgentIcon={menuNewAgentIcon}
-                      menuNewTerminalIcon={menuNewTerminalIcon}
-                      menuNewBrowserIcon={MENU_NEW_BROWSER_ICON}
-                      menuCopyIcon={menuCopyIcon}
-                      menuSettingsIcon={menuSettingsIcon}
-                      onCreateDraftTab={handleCreateDraftTab}
-                      onCreateTerminal={handleCreateTerminal}
-                      onCreateBrowser={handleCreateBrowserTab}
-                      onCopyWorkspacePath={handleCopyWorkspacePath}
-                      onCopyBranchName={handleCopyBranchName}
-                      onOpenSetupTab={handleOpenSetupTab}
-                    />
-                  </>
-                }
-                right={headerRight}
-              />
-            )}
-
-            {isMobile ? (
-              <MobileWorkspaceTabSwitcher
-                tabs={tabs}
-                activeTabKey={activeTabKey}
-                activeTab={activeTabDescriptor}
-                tabSwitcherOptions={tabSwitcherOptions}
-                tabByKey={tabByKey}
-                normalizedServerId={normalizedServerId}
-                normalizedWorkspaceId={normalizedWorkspaceId}
-                onSelectSwitcherTab={handleSelectSwitcherTab}
-                onCopyResumeCommand={handleCopyResumeCommand}
-                onCopyAgentId={handleCopyAgentId}
-                onReloadAgent={handleReloadAgent}
-                onCloseTab={handleCloseTabById}
-                onCloseTabsAbove={handleCloseTabsToLeft}
-                onCloseTabsBelow={handleCloseTabsToRight}
-                onCloseOtherTabs={handleCloseOtherTabs}
-              />
-            ) : null}
-
-            {shouldRenderDesktopPaneFallback ? (
-              <WorkspaceDesktopTabsRow
-                paneId={focusedPaneIdOrUndefined}
-                isFocused={isRouteFocused}
-                tabs={desktopTabRowItems}
-                normalizedServerId={normalizedServerId}
-                normalizedWorkspaceId={normalizedWorkspaceId}
-                setHoveredTabKey={setHoveredTabKey}
-                setHoveredCloseTabKey={setHoveredCloseTabKey}
-                onNavigateTab={navigateToTabId}
-                onCloseTab={handleCloseTabById}
-                onCopyResumeCommand={handleCopyResumeCommand}
-                onCopyAgentId={handleCopyAgentId}
-                onReloadAgent={handleReloadAgent}
-                onCloseTabsToLeft={handleCloseTabsToLeft}
-                onCloseTabsToRight={handleCloseTabsToRight}
-                onCloseOtherTabs={handleCloseOtherTabs}
-                onCreateDraftTab={handleCreateDraftTab}
-                onCreateTerminalTab={handleCreateTerminal}
-                onCreateBrowserTab={handleCreateBrowserTab}
-                showCreateBrowserTab={showCreateBrowserTab}
-                disableCreateTerminal={createTerminalMutation.isPending}
-                isWaitingOnTerminalReadiness={pendingTerminalCreateInput !== null}
-                onReorderTabs={handleReorderTabsInFocusedPane}
-                onSplitRight={noop}
-                onSplitDown={noop}
-                showPaneSplitActions={false}
-              />
-            ) : null}
-
-            <View style={styles.centerContent}>
-              {isMobile ? (
-                <GestureDetector gesture={explorerOpenGesture} touchAction="pan-y">
-                  <View style={styles.content}>{content}</View>
-                </GestureDetector>
-              ) : (
-                <View style={styles.content}>{desktopContent}</View>
+            isRouteFocused={isRouteFocused}
+          />
+          <View style={styles.threePaneRow}>
+            <View style={styles.centerColumn}>
+              {reconnectBanner}
+              {showScreenHeader && (
+                <ScreenHeader
+                  onRowLayout={onHeaderLayout}
+                  left={
+                    <>
+                      <SidebarMenuToggle />
+                      <WorkspaceHeaderTitleBar
+                        isLoading={isWorkspaceHeaderLoading}
+                        title={workspaceHeaderTitle}
+                        subtitle={workspaceHeaderSubtitle}
+                        showSubtitle={shouldShowWorkspaceHeaderSubtitle}
+                        currentBranchName={currentBranchName}
+                        isGitCheckout={isGitCheckout}
+                        normalizedServerId={normalizedServerId}
+                        normalizedWorkspaceId={normalizedWorkspaceId}
+                        showWorkspaceSetup={showWorkspaceSetup}
+                        showCreateBrowserTab={showCreateBrowserTab}
+                        isMobile={isMobile}
+                        createTerminalDisabled={createTerminalDisabled}
+                        menuNewAgentIcon={menuNewAgentIcon}
+                        menuNewTerminalIcon={menuNewTerminalIcon}
+                        menuNewBrowserIcon={MENU_NEW_BROWSER_ICON}
+                        menuCopyIcon={menuCopyIcon}
+                        menuSettingsIcon={menuSettingsIcon}
+                        onCreateDraftTab={handleCreateDraftTab}
+                        onCreateTerminal={handleCreateTerminal}
+                        onCreateBrowser={handleCreateBrowserTab}
+                        onCopyWorkspacePath={handleCopyWorkspacePath}
+                        onCopyBranchName={handleCopyBranchName}
+                        onOpenSetupTab={handleOpenSetupTab}
+                      />
+                    </>
+                  }
+                  right={headerRight}
+                />
              )}
-            </View>
-          </View>

-          {showExplorerSidebar && workspaceDirectory ? (
-            <ExplorerSidebar
-              serverId={normalizedServerId}
-              workspaceId={normalizedWorkspaceId}
-              workspaceRoot={workspaceDirectory}
-              isGit={isGitCheckout}
-              onOpenFile={handleOpenFileFromExplorer}
-            />
-          ) : null}
+              {isMobile ? (
+                <MobileWorkspaceTabSwitcher
+                  tabs={tabs}
+                  activeTabKey={activeTabKey}
+                  activeTab={activeTabDescriptor}
+                  tabSwitcherOptions={tabSwitcherOptions}
+                  tabByKey={tabByKey}
+                  normalizedServerId={normalizedServerId}
+                  normalizedWorkspaceId={normalizedWorkspaceId}
+                  onSelectSwitcherTab={handleSelectSwitcherTab}
+                  onCopyResumeCommand={handleCopyResumeCommand}
+                  onCopyAgentId={handleCopyAgentId}
+                  onReloadAgent={handleReloadAgent}
+                  onCloseTab={handleCloseTabById}
+                  onCloseTabsAbove={handleCloseTabsToLeft}
+                  onCloseTabsBelow={handleCloseTabsToRight}
+                  onCloseOtherTabs={handleCloseOtherTabs}
+                />
+              ) : null}
+
+              {shouldRenderDesktopPaneFallback ? (
+                <WorkspaceDesktopTabsRow
+                  paneId={focusedPaneIdOrUndefined}
+                  isFocused={isRouteFocused}
+                  tabs={desktopTabRowItems}
+                  normalizedServerId={normalizedServerId}
+                  normalizedWorkspaceId={normalizedWorkspaceId}
+                  setHoveredTabKey={setHoveredTabKey}
+                  setHoveredCloseTabKey={setHoveredCloseTabKey}
+                  onNavigateTab={navigateToTabId}
+                  onCloseTab={handleCloseTabById}
+                  onCopyResumeCommand={handleCopyResumeCommand}
+                  onCopyAgentId={handleCopyAgentId}
+                  onReloadAgent={handleReloadAgent}
+                  onCloseTabsToLeft={handleCloseTabsToLeft}
+                  onCloseTabsToRight={handleCloseTabsToRight}
+                  onCloseOtherTabs={handleCloseOtherTabs}
+                  onCreateDraftTab={handleCreateDraftTab}
+                  onCreateTerminalTab={handleCreateTerminal}
+                  onCreateBrowserTab={handleCreateBrowserTab}
+                  showCreateBrowserTab={showCreateBrowserTab}
+                  disableCreateTerminal={createTerminalMutation.isPending}
+                  isWaitingOnTerminalReadiness={pendingTerminalCreateInput !== null}
+                  onReorderTabs={handleReorderTabsInFocusedPane}
+                  onSplitRight={noop}
+                  onSplitDown={noop}
+                  showPaneSplitActions={false}
+                />
+              ) : null}
+
+              <View style={styles.centerContent}>
+                {isMobile ? (
+                  <GestureDetector gesture={explorerOpenGesture} touchAction="pan-y">
+                    <View style={styles.content}>{content}</View>
+                  </GestureDetector>
+                ) : (
+                  <View style={styles.content}>{desktopContent}</View>
+                )}
+              </View>
+            </View>
+
+            {showExplorerSidebar && workspaceDirectory ? (
+              <ExplorerSidebar
+                serverId={normalizedServerId}
+                workspaceId={normalizedWorkspaceId}
+                workspaceRoot={workspaceDirectory}
+                isGit={isGitCheckout}
+                onOpenFile={handleOpenFileFromExplorer}
+              />
+            ) : null}
+          </View>
        </View>
-      </View>
-    </WorkspaceFocusProvider>
+      </WorkspaceFocusProvider>
+    )
  );
 }