Prevent Android chats from freezing or going blank (#1989)

* fix(app): stabilize streamed chat rendering Use deterministic Markdown AST keys and preserve unique row identities when an assistant message resumes after a tool. Keep native gesture and plan-card children correctly keyed to avoid unsupported Fabric reconciliation paths. * fix(app): stabilize retained native panels Keep retained workspace roots in a stable native order and make active panels present in the selection commit. Hidden panels now stop expensive subscriptions and animations without losing mounted state. * fix(app): harden retained panel activity
2026-07-11 15:39:14 +08:00
parent 860fcb2e35
commit 28a27b02d3
40 changed files with 1244 additions and 543 deletions
@@ -38,6 +38,7 @@ import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
+import { RetainedPanelActivity } from "@/components/retained-panel";
 import { isWeb } from "@/constants/platform";
 import { buildWorkspaceAttachmentScopeKey } from "@/attachments/workspace-attachments-store";

@@ -121,24 +122,26 @@ export function CompactExplorerSidebar({
  );

  return (
-    <MobilePanelOverlay
-      panel="file-explorer"
-      closeGesture={closeGesture}
-      panelStyle={mobileSidebarStyle}
-    >
-      <ExplorerSidebarContent
-        activeTab={explorerTab}
-        onTabPress={handleTabPress}
-        onClose={handleHeaderClose}
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceRoot}
-        isGit={isGit}
-        isMobile
-        isOpen={isOpen}
-        onOpenFile={onOpenFile}
-      />
-    </MobilePanelOverlay>
+    <RetainedPanelActivity active={isOpen}>
+      <MobilePanelOverlay
+        panel="file-explorer"
+        closeGesture={closeGesture}
+        panelStyle={mobileSidebarStyle}
+      >
+        <ExplorerSidebarContent
+          activeTab={explorerTab}
+          onTabPress={handleTabPress}
+          onClose={handleHeaderClose}
+          serverId={serverId}
+          workspaceId={workspaceId}
+          workspaceRoot={workspaceRoot}
+          isGit={isGit}
+          isMobile
+          isOpen={isOpen}
+          onOpenFile={onOpenFile}
+        />
+      </MobilePanelOverlay>
+    </RetainedPanelActivity>
  );
 }

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { FileReadResult } from "@getpaseo/client/internal/daemon-client";
 import {
@@ -29,7 +29,7 @@ import { createPreviewAttachmentId, getFileNameFromPath } from "@/attachments/ut
 import { explorerFileFromReadResult } from "@/file-explorer/read-result";
 import { resolveFilePreviewReadTarget } from "@/file-explorer/preview-target";
 import type { WorkspaceFileLocation } from "@/workspace/file-open";
-import { MountedTabActiveContext } from "@/components/split-container";
+import { useRetainedPanelActive } from "@/components/retained-panel";
 import { useAppVisible } from "@/hooks/use-app-visible";
 import { isFileQueryEnabled } from "@/components/file-pane-enabled";

@@ -414,7 +414,7 @@ export function FilePane({
  // Re-read the file when this pane becomes visible again (#445). `isActive`
  // covers tab switches, `isAppVisible` the whole-app background/foreground; the
  // gate itself lives in isFileQueryEnabled.
-  const isActive = useContext(MountedTabActiveContext);
+  const isActive = useRetainedPanelActive();
  const isAppVisible = useAppVisible();

  const query = useQuery({
@@ -36,8 +36,12 @@ import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { canCreateWorktreeForProjectKind } from "@/projects/host-projects";
 import { useHostFeature } from "@/runtime/host-features";
-import { type SidebarProjectEntry } from "@/hooks/use-sidebar-workspaces-list";
+import {
+  type SidebarProjectEntry,
+  type SidebarWorkspaceEntry,
+} from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarModel } from "@/components/sidebar/sidebar-model";
+import { RetainedPanelActivity } from "@/components/retained-panel";
 import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
 import { type SidebarGroupMode } from "@/stores/sidebar-view-store";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
@@ -75,6 +79,7 @@ interface SidebarSharedProps {
  theme: SidebarTheme;
  statusGroups: StatusGroup[];
  projects: SidebarProjectEntry[];
+  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  projectNamesByKey: Map<string, string>;
  isInitialLoad: boolean;
  isRevalidating: boolean;
@@ -132,6 +137,7 @@ export const LeftSidebar = memo(function LeftSidebar() {

  const {
    projects,
+    workspaceEntriesByKey,
    projectNamesByKey,
    isInitialLoad,
    isRevalidating,
@@ -235,6 +241,7 @@ export const LeftSidebar = memo(function LeftSidebar() {
    theme,
    statusGroups,
    projects,
+    workspaceEntriesByKey,
    projectNamesByKey,
    isInitialLoad,
    isRevalidating,
@@ -250,35 +257,39 @@ export const LeftSidebar = memo(function LeftSidebar() {

  if (isCompactLayout) {
    return (
-      <MobileSidebar
-        {...sharedProps}
-        insetsTop={insets.top}
-        insetsBottom={insets.bottom}
-        closeSidebar={showMobileAgent}
-        handleOpenProject={handleOpenProjectMobile}
-        handleHome={handleHomeMobile}
-        handleSettings={handleSettingsMobile}
-        handleAddHost={handleAddHostMobile}
-        handleOpenHostSettings={handleOpenHostSettingsMobile}
-        handleViewMoreNavigate={handleViewMoreNavigate}
-        handleViewSchedulesNavigate={handleViewSchedulesNavigate}
-      />
+      <RetainedPanelActivity active={isOpen}>
+        <MobileSidebar
+          {...sharedProps}
+          insetsTop={insets.top}
+          insetsBottom={insets.bottom}
+          closeSidebar={showMobileAgent}
+          handleOpenProject={handleOpenProjectMobile}
+          handleHome={handleHomeMobile}
+          handleSettings={handleSettingsMobile}
+          handleAddHost={handleAddHostMobile}
+          handleOpenHostSettings={handleOpenHostSettingsMobile}
+          handleViewMoreNavigate={handleViewMoreNavigate}
+          handleViewSchedulesNavigate={handleViewSchedulesNavigate}
+        />
+      </RetainedPanelActivity>
    );
  }

  return (
-    <DesktopSidebar
-      {...sharedProps}
-      insetsTop={insets.top}
-      isOpen={isOpen}
-      handleOpenProject={handleOpenProjectDesktop}
-      handleHome={handleHomeDesktop}
-      handleSettings={handleSettingsDesktop}
-      handleAddHost={handleAddHostDesktop}
-      handleOpenHostSettings={handleOpenHostSettingsDesktop}
-      handleViewMore={handleViewMoreNavigate}
-      handleViewSchedules={handleViewSchedulesNavigate}
-    />
+    <RetainedPanelActivity active={isOpen}>
+      <DesktopSidebar
+        {...sharedProps}
+        insetsTop={insets.top}
+        isOpen={isOpen}
+        handleOpenProject={handleOpenProjectDesktop}
+        handleHome={handleHomeDesktop}
+        handleSettings={handleSettingsDesktop}
+        handleAddHost={handleAddHostDesktop}
+        handleOpenHostSettings={handleOpenHostSettingsDesktop}
+        handleViewMore={handleViewMoreNavigate}
+        handleViewSchedules={handleViewSchedulesNavigate}
+      />
+    </RetainedPanelActivity>
  );
 });

@@ -533,6 +544,7 @@ function MobileSidebar({
  theme,
  statusGroups,
  projects,
+  workspaceEntriesByKey,
  projectNamesByKey,
  isInitialLoad,
  isRevalidating,
@@ -644,6 +656,7 @@ function MobileSidebar({
            groupMode={groupMode}
            statusGroups={statusGroups}
            projects={projects}
+            workspaceEntriesByKey={workspaceEntriesByKey}
            projectNamesByKey={projectNamesByKey}
            isRefreshing={isManualRefresh && isRevalidating}
            onRefresh={handleRefresh}
@@ -671,6 +684,7 @@ function DesktopSidebar({
  theme,
  statusGroups,
  projects,
+  workspaceEntriesByKey,
  projectNamesByKey,
  isInitialLoad,
  isRevalidating,
@@ -796,6 +810,7 @@ function DesktopSidebar({
            groupMode={groupMode}
            statusGroups={statusGroups}
            projects={projects}
+            workspaceEntriesByKey={workspaceEntriesByKey}
            projectNamesByKey={projectNamesByKey}
            isRefreshing={isManualRefresh && isRevalidating}
            onRefresh={handleRefresh}
@@ -697,7 +697,7 @@ interface LiveElapsedProps {
 }

 /**
- * Ticks every 100ms to render an elapsed duration. Isolated from parents so
+ * Ticks every second to render an elapsed duration. Isolated from parents so
 * only this component re-renders on each tick.
 */
 export const LiveElapsed = memo(function LiveElapsed({
@@ -712,7 +712,7 @@ export const LiveElapsed = memo(function LiveElapsed({
    setElapsedMs(Math.max(0, Date.now() - startedAtMs));
    const handle = setInterval(() => {
      setElapsedMs(Math.max(0, Date.now() - startedAtMs));
-    }, 100);
+    }, 1000);
    return () => clearInterval(handle);
  }, [startedAtMs]);

@@ -9,22 +9,16 @@ import { getMarkdownListMarker } from "@/utils/markdown-list";
 type MarkdownRuleStyles = Record<string, TextStyle & ViewStyle & { [key: string]: unknown }>;

 function MarkdownInlineText({
-  textKey,
  inheritedStyle,
  ruleStyle,
  children,
 }: {
-  textKey: string;
  inheritedStyle: StyleProp<TextStyle>;
  ruleStyle: StyleProp<TextStyle>;
  children: ReactNode;
 }) {
  const style = useMemo(() => [inheritedStyle, ruleStyle], [inheritedStyle, ruleStyle]);
-  return (
-    <Text key={textKey} style={style}>
-      {children}
-    </Text>
-  );
+  return <Text style={style}>{children}</Text>;
 }

 function MarkdownListItemContent({
@@ -39,12 +33,10 @@ function MarkdownListItemContent({
 }

 function MarkdownParagraph({
-  textKey,
  paragraphStyle,
  isLastChild,
  children,
 }: {
-  textKey: string;
  paragraphStyle: StyleProp<ViewStyle>;
  isLastChild: boolean;
  children: ReactNode;
@@ -53,11 +45,7 @@ function MarkdownParagraph({
    () => [paragraphStyle, isLastChild ? PARAGRAPH_LAST_CHILD : null],
    [paragraphStyle, isLastChild],
  );
-  return (
-    <View key={textKey} style={style}>
-      {children}
-    </View>
-  );
+  return <View style={style}>{children}</View>;
 }

 function createPlanMarkdownRules() {
@@ -69,11 +57,7 @@ function createPlanMarkdownRules() {
      styles: MarkdownRuleStyles,
      inheritedStyles: TextStyle = {},
    ) => (
-      <MarkdownInlineText
-        textKey={node.key}
-        inheritedStyle={inheritedStyles}
-        ruleStyle={styles.text}
-      >
+      <MarkdownInlineText key={node.key} inheritedStyle={inheritedStyles} ruleStyle={styles.text}>
        {node.content}
      </MarkdownInlineText>
    ),
@@ -85,7 +69,7 @@ function createPlanMarkdownRules() {
      inheritedStyles: TextStyle = {},
    ) => (
      <MarkdownInlineText
-        textKey={node.key}
+        key={node.key}
        inheritedStyle={inheritedStyles}
        ruleStyle={styles.textgroup}
      >
@@ -100,7 +84,7 @@ function createPlanMarkdownRules() {
      inheritedStyles: TextStyle = {},
    ) => (
      <MarkdownInlineText
-        textKey={node.key}
+        key={node.key}
        inheritedStyle={inheritedStyles}
        ruleStyle={styles.code_block}
      >
@@ -114,11 +98,7 @@ function createPlanMarkdownRules() {
      styles: MarkdownRuleStyles,
      inheritedStyles: TextStyle = {},
    ) => (
-      <MarkdownInlineText
-        textKey={node.key}
-        inheritedStyle={inheritedStyles}
-        ruleStyle={styles.fence}
-      >
+      <MarkdownInlineText key={node.key} inheritedStyle={inheritedStyles} ruleStyle={styles.fence}>
        {node.content}
      </MarkdownInlineText>
    ),
@@ -130,7 +110,7 @@ function createPlanMarkdownRules() {
      inheritedStyles: TextStyle = {},
    ) => (
      <MarkdownInlineText
-        textKey={node.key}
+        key={node.key}
        inheritedStyle={inheritedStyles}
        ruleStyle={styles.code_inline}
      >
@@ -183,7 +163,7 @@ function createPlanMarkdownRules() {
      const isLastChild = parent[0]?.children?.at(-1)?.key === node.key;
      return (
        <MarkdownParagraph
-          textKey={node.key}
+          key={node.key}
          paragraphStyle={styles.paragraph}
          isLastChild={isLastChild}
        >
@@ -0,0 +1,69 @@
+import { createContext, memo, type ReactNode, useContext } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+
+const RetainedPanelActiveContext = createContext(true);
+
+export function useRetainedPanelActive(): boolean {
+  return useContext(RetainedPanelActiveContext);
+}
+
+interface RetainedPanelProps {
+  active: boolean;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+interface RetainedPanelActivityProps {
+  active: boolean;
+  children: ReactNode;
+}
+
+export function RetainedPanelActivity({ active, children }: RetainedPanelActivityProps) {
+  const parentActive = useRetainedPanelActive();
+  return (
+    <RetainedPanelActiveContext value={parentActive && active}>
+      {children}
+    </RetainedPanelActiveContext>
+  );
+}
+
+/**
+ * Keeps expensive panel state mounted without letting an inactive panel render
+ * on screen. The stable, non-collapsible native root is intentional: retained
+ * panels must not detach or reparent their native descendants when visibility
+ * changes.
+ */
+export const RetainedPanel = memo(function RetainedPanel({
+  active,
+  children,
+  style,
+  testID,
+}: RetainedPanelProps) {
+  const visibleStyle = StyleSheet.compose<ViewStyle, ViewStyle, ViewStyle>(styles.root, style);
+  const panelStyle = active
+    ? visibleStyle
+    : StyleSheet.compose<ViewStyle, ViewStyle, ViewStyle>(visibleStyle, styles.hidden);
+
+  return (
+    <RetainedPanelActivity active={active}>
+      <View
+        collapsable={false}
+        pointerEvents={active ? "auto" : "none"}
+        style={panelStyle}
+        testID={testID}
+      >
+        {children}
+      </View>
+    </RetainedPanelActivity>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  hidden: {
+    display: "none",
+  },
+});
@@ -62,7 +62,6 @@ import {
 } from "@/utils/host-routes";
 import {
  shouldShowSidebarHostLabels,
-  useSidebarWorkspaceEntry,
  type SidebarProjectEntry,
  type SidebarWorkspaceEntry,
  type SidebarWorkspacePlacement,
@@ -223,6 +222,7 @@ function selectionForSelectedWorkspace(
 interface SidebarWorkspaceListProps {
  statusGroups: StatusGroup[];
  projects: SidebarProjectEntry[];
+  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  projectNamesByKey: Map<string, string>;
  collapsedProjectKeys: ReadonlySet<string>;
  onToggleProjectCollapsed: (projectKey: string) => void;
@@ -1613,6 +1613,7 @@ function WorkspaceRowWithMenu({

 interface WorkspaceRowItemProps {
  workspace: SidebarWorkspacePlacement;
+  workspaceEntry: SidebarWorkspaceEntry | null;
  subtitle?: string | null;
  shortcutNumber: number | null;
  showShortcutBadge: boolean;
@@ -1628,6 +1629,7 @@ interface WorkspaceRowItemProps {

 function WorkspaceRowItem({
  workspace,
+  workspaceEntry,
  subtitle,
  shortcutNumber,
  showShortcutBadge,
@@ -1650,7 +1652,7 @@ function WorkspaceRowItem({

  return (
    <WorkspaceRow
-      workspace={workspace}
+      workspaceEntry={workspaceEntry}
      subtitle={subtitle}
      shortcutNumber={shortcutNumber}
      showShortcutBadge={showShortcutBadge}
@@ -1688,6 +1690,7 @@ function areWorkspaceRowItemPropsEqual(
  });
  return (
    previous.workspace === next.workspace &&
+    previous.workspaceEntry === next.workspaceEntry &&
    previous.subtitle === next.subtitle &&
    previous.shortcutNumber === next.shortcutNumber &&
    previous.showShortcutBadge === next.showShortcutBadge &&
@@ -1704,7 +1707,7 @@ function areWorkspaceRowItemPropsEqual(
 const MemoWorkspaceRowItem = memo(WorkspaceRowItem, areWorkspaceRowItemPropsEqual);

 function WorkspaceRow({
-  workspace,
+  workspaceEntry,
  subtitle,
  shortcutNumber,
  showShortcutBadge,
@@ -1716,7 +1719,7 @@ function WorkspaceRow({
  isCreating = false,
  selected,
 }: {
-  workspace: SidebarWorkspacePlacement;
+  workspaceEntry: SidebarWorkspaceEntry | null;
  subtitle?: string | null;
  shortcutNumber: number | null;
  showShortcutBadge: boolean;
@@ -1728,15 +1731,13 @@ function WorkspaceRow({
  isCreating?: boolean;
  selected: boolean;
 }) {
-  const hydratedWorkspace = useSidebarWorkspaceEntry(workspace.serverId, workspace.workspaceId);
-
-  if (!hydratedWorkspace) {
+  if (!workspaceEntry) {
    return null;
  }

  return (
    <WorkspaceRowWithMenu
-      workspace={hydratedWorkspace}
+      workspace={workspaceEntry}
      subtitle={subtitle}
      selected={selected}
      shortcutNumber={shortcutNumber}
@@ -1753,6 +1754,7 @@ function WorkspaceRow({

 function ProjectBlock({
  project,
+  workspaceEntriesByKey,
  collapsed,
  displayName,
  iconDataUri,
@@ -1775,6 +1777,7 @@ function ProjectBlock({
  supportsMultiplicityByServerId,
 }: {
  project: SidebarProjectEntry;
+  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  collapsed: boolean;
  displayName: string;
  iconDataUri: string | null;
@@ -1824,6 +1827,7 @@ function ProjectBlock({
      return (
        <MemoWorkspaceRowItem
          workspace={item}
+          workspaceEntry={workspaceEntriesByKey.get(item.workspaceKey) ?? null}
          subtitle={
            showHostLabels ? (hostLabelByServerId.get(item.serverId) ?? item.serverId) : null
          }
@@ -1850,6 +1854,7 @@ function ProjectBlock({
      selectionEnabled,
      shortcutIndexByWorkspaceKey,
      showShortcutBadges,
+      workspaceEntriesByKey,
    ],
  );

@@ -2004,6 +2009,7 @@ type ProjectBlockProps = Parameters<typeof ProjectBlock>[0];
 function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlockProps): boolean {
  return (
    previous.project === next.project &&
+    previous.workspaceEntriesByKey === next.workspaceEntriesByKey &&
    previous.collapsed === next.collapsed &&
    previous.displayName === next.displayName &&
    previous.iconDataUri === next.iconDataUri &&
@@ -2058,6 +2064,7 @@ const MemoProjectBlock = memo(ProjectBlock, areProjectBlockPropsEqual);
 export function SidebarWorkspaceList({
  statusGroups,
  projects,
+  workspaceEntriesByKey,
  projectNamesByKey,
  collapsedProjectKeys,
  onToggleProjectCollapsed,
@@ -2096,6 +2103,7 @@ export function SidebarWorkspaceList({
    ) : (
      <ProjectModeList
        projects={projects}
+        workspaceEntriesByKey={workspaceEntriesByKey}
        collapsedProjectKeys={collapsedProjectKeys}
        onToggleProjectCollapsed={onToggleProjectCollapsed}
        shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
@@ -2145,6 +2153,7 @@ function SidebarStatusModeWrapper({

 function ProjectModeList({
  projects,
+  workspaceEntriesByKey,
  collapsedProjectKeys,
  onToggleProjectCollapsed,
  shortcutIndexByWorkspaceKey,
@@ -2333,6 +2342,7 @@ function ProjectModeList({
      return (
        <MemoProjectBlock
          project={item}
+          workspaceEntriesByKey={workspaceEntriesByKey}
          collapsed={collapsedProjectKeys.has(item.projectKey)}
          displayName={item.projectName}
          iconDataUri={projectIconByProjectKey.get(item.projectKey) ?? null}
@@ -2371,6 +2381,7 @@ function ProjectModeList({
      selectionEnabled,
      shortcutIndexByWorkspaceKey,
      showShortcutBadges,
+      workspaceEntriesByKey,
      creatingWorkspaceIds,
    ],
  );
@@ -1,9 +1,10 @@
 import React, { createContext, useContext, useMemo, type ReactNode } from "react";
 import {
  useSidebarWorkspacesList,
+  type SidebarWorkspaceEntry,
  type SidebarWorkspacesListResult,
 } from "@/hooks/use-sidebar-workspaces-list";
-import { useStatusModeWorkspacePlacements } from "@/hooks/use-status-mode-workspaces";
+import { useSidebarWorkspaceEntries } from "@/hooks/use-sidebar-workspace-entries";
 import { buildStatusGroups, type StatusGroup } from "@/hooks/sidebar-status-view-model";
 import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
 import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
@@ -14,6 +15,7 @@ import {
 } from "@/utils/sidebar-shortcuts";

 interface SidebarModel extends SidebarWorkspacesListResult {
+  workspaceEntriesByKey: ReadonlyMap<string, SidebarWorkspaceEntry>;
  groupMode: SidebarGroupMode;
  statusGroups: StatusGroup[];
  collapsedProjectKeys: ReadonlySet<string>;
@@ -23,7 +25,13 @@ interface SidebarModel extends SidebarWorkspacesListResult {

 const SidebarModelContext = createContext<SidebarModel | null>(null);

-export function SidebarModelProvider({ children }: { children: ReactNode }) {
+export function SidebarModelProvider({
+  active,
+  children,
+}: {
+  active?: boolean;
+  children: ReactNode;
+}) {
  const list = useSidebarWorkspacesList();
  const groupMode = useSidebarViewStore((state) => state.groupMode);
  const collapsedProjectKeys = useSidebarCollapsedSectionsStore(
@@ -36,14 +44,16 @@ export function SidebarModelProvider({ children }: { children: ReactNode }) {
    (state) => state.toggleProjectCollapsed,
  );
  const isStatusMode = groupMode === "status";
-  const statusWorkspacePlacements = useStatusModeWorkspacePlacements({
-    placements: list.workspacePlacements,
-    enabled: isStatusMode,
-  });
+  const workspaceEntriesByKey = useSidebarWorkspaceEntries(
+    list.workspacePlacements,
+    active !== false || isStatusMode,
+  );
  const statusGroups = useMemo(
    () =>
-      isStatusMode ? buildStatusGroups(statusWorkspacePlacements, list.projectNamesByKey) : [],
-    [isStatusMode, list.projectNamesByKey, statusWorkspacePlacements],
+      isStatusMode
+        ? buildStatusGroups(Array.from(workspaceEntriesByKey.values()), list.projectNamesByKey)
+        : [],
+    [isStatusMode, list.projectNamesByKey, workspaceEntriesByKey],
  );
  const shortcutModel = useMemo(() => {
    if (isStatusMode) {
@@ -57,13 +67,22 @@ export function SidebarModelProvider({ children }: { children: ReactNode }) {
  const value = useMemo(
    () => ({
      ...list,
+      workspaceEntriesByKey,
      groupMode,
      statusGroups,
      collapsedProjectKeys,
      toggleProjectCollapsed,
      shortcutModel,
    }),
-    [collapsedProjectKeys, groupMode, list, shortcutModel, statusGroups, toggleProjectCollapsed],
+    [
+      collapsedProjectKeys,
+      groupMode,
+      list,
+      shortcutModel,
+      statusGroups,
+      toggleProjectCollapsed,
+      workspaceEntriesByKey,
+    ],
  );

  return <SidebarModelContext.Provider value={value}>{children}</SidebarModelContext.Provider>;
@@ -4,11 +4,7 @@ import { View, Text, Pressable, ScrollView, type PressableStateCallbackType } fr
 import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
 import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
-import {
-  useSidebarWorkspaceEntry,
-  type SidebarStatusWorkspacePlacement,
-  type SidebarWorkspaceEntry,
-} from "@/hooks/use-sidebar-workspaces-list";
+import { type SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
 import type { StatusGroup } from "@/hooks/sidebar-status-view-model";
 import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
 import { StyleSheet } from "react-native-unistyles";
@@ -286,13 +282,12 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
  showShortcutBadge,
  onWorkspacePress,
 }: {
-  workspace: SidebarStatusWorkspacePlacement;
+  workspace: SidebarWorkspaceEntry;
  subtitle: string;
  shortcutNumber: number | null;
  showShortcutBadge: boolean;
  onWorkspacePress?: () => void;
 }) {
-  const workspaceEntry = useSidebarWorkspaceEntry(workspace.serverId, workspace.workspaceId);
  const activeWorkspaceSelection = useActiveWorkspaceSelection();
  const selected =
    activeWorkspaceSelection?.serverId === workspace.serverId &&
@@ -304,11 +299,9 @@ const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
    navigateToWorkspace(workspace.serverId, workspace.workspaceId);
  }, [onWorkspacePress, workspace.serverId, workspace.workspaceId]);

-  if (!workspaceEntry) return null;
-
  return (
    <StatusWorkspaceRowWithMenu
-      workspace={workspaceEntry}
+      workspace={workspace}
      subtitle={subtitle}
      selected={selected}
      shortcutNumber={shortcutNumber}
@@ -142,7 +142,7 @@ export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowConte
              </Text>
              {scriptIconKind ? <WorkspaceScriptIcon kind={scriptIconKind} /> : null}
            </View>
-            <View style={styles.workspaceRowRight}>{children}</View>
+            <View style={sidebarWorkspaceRowStyles.rowRight}>{children}</View>
          </View>
          {subtitle ? (
            <Text style={styles.workspaceSubtitle} numberOfLines={1}>
@@ -502,7 +502,6 @@ const styles = StyleSheet.create((theme) => ({
    flex: 1,
    minWidth: 0,
  },
-  workspaceRowRight: sidebarWorkspaceRowStyles.rowRight,
  shortcutBadgeOverlay: {
    position: "absolute",
    top: 1,
@@ -1,6 +1,5 @@
 import {
  Fragment,
-  createContext,
  memo,
  useCallback,
  useEffect,
@@ -32,6 +31,7 @@ import { View, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ResizeHandle } from "@/components/resize-handle";
+import { RetainedPanel } from "@/components/retained-panel";
 import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
@@ -74,10 +74,6 @@ import { RenderProfile } from "@/utils/render-profiler";
 import { workspaceTabTargetsEqual } from "@/workspace-tabs/identity";
 import { isNative } from "@/constants/platform";

-// true = this tab slot is the active (visible) tab; false = mounted but hidden.
-// Defaults to true so consumers outside a slot (e.g. web preview) are unaffected.
-export const MountedTabActiveContext = createContext<boolean>(true);
-
 interface SplitContainerProps {
  layout: WorkspaceLayout;
  workspaceKey: string;
@@ -214,26 +210,20 @@ const MountedTabSlot = memo(function MountedTabSlot({
    [buildPaneContentModel, paneId, tabDescriptor],
  );

-  const wrapperStyle = useMemo(() => {
-    const display: "flex" | "none" = isVisible ? "flex" : "none";
-    return { display, flex: 1 };
-  }, [isVisible]);
  const handleFocusPane = useCallback(() => {
    onFocusPane(paneId);
  }, [onFocusPane, paneId]);

  return (
    <RenderProfile id={`DesktopMountedTabSlot:${tabDescriptor.kind}:${tabDescriptor.tabId}`}>
-      <MountedTabActiveContext value={isVisible}>
-        <View style={wrapperStyle}>
-          <WorkspacePaneContent
-            content={content}
-            isWorkspaceFocused={isWorkspaceFocused}
-            isPaneFocused={isPaneFocused}
-            onFocusPane={handleFocusPane}
-          />
-        </View>
-      </MountedTabActiveContext>
+      <RetainedPanel active={isVisible}>
+        <WorkspacePaneContent
+          content={content}
+          isWorkspaceFocused={isWorkspaceFocused}
+          isPaneFocused={isPaneFocused}
+          onFocusPane={handleFocusPane}
+        />
+      </RetainedPanel>
    </RenderProfile>
  );
 });
@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createSharedStepClock } from "@/components/synced-loader-clock";
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("createSharedStepClock", () => {
+  it("advances a shared cadence only while at least one consumer is subscribed", () => {
+    vi.useFakeTimers();
+    const clock = createSharedStepClock(6, 960);
+    const firstListener = vi.fn();
+    const secondListener = vi.fn();
+
+    const unsubscribeFirst = clock.subscribe(firstListener);
+    const unsubscribeSecond = clock.subscribe(secondListener);
+    vi.advanceTimersByTime(320);
+
+    expect(clock.getSnapshot()).toBe(2);
+    expect(firstListener).toHaveBeenCalledTimes(2);
+    expect(secondListener).toHaveBeenCalledTimes(2);
+
+    unsubscribeFirst();
+    vi.advanceTimersByTime(160);
+    expect(firstListener).toHaveBeenCalledTimes(2);
+    expect(secondListener).toHaveBeenCalledTimes(3);
+
+    unsubscribeSecond();
+    vi.advanceTimersByTime(640);
+    expect(clock.getSnapshot()).toBe(3);
+    expect(secondListener).toHaveBeenCalledTimes(3);
+  });
+});
@@ -0,0 +1,36 @@
+export interface SharedStepClock {
+  getSnapshot: () => number;
+  subscribe: (listener: () => void) => () => void;
+}
+
+export function createSharedStepClock(stepCount: number, cycleDurationMs: number): SharedStepClock {
+  const normalizedStepCount = Math.max(1, Math.floor(stepCount));
+  const stepDurationMs = Math.max(1, Math.round(cycleDurationMs / normalizedStepCount));
+  const listeners = new Set<() => void>();
+  let step = 0;
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  function advance(): void {
+    step = (step + 1) % normalizedStepCount;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+
+  return {
+    getSnapshot: () => step,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      if (timer === null) {
+        timer = setInterval(advance, stepDurationMs);
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0 && timer !== null) {
+          clearInterval(timer);
+          timer = null;
+        }
+      };
+    },
+  };
+}
@@ -1,65 +1,26 @@
+import { useMemo, useSyncExternalStore } from "react";
 import { View } from "react-native";
-import Animated, {
-  Easing,
-  makeMutable,
-  type SharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withTiming,
-} from "react-native-reanimated";
-import { useEffect, useMemo } from "react";
+import { useRetainedPanelActive } from "@/components/retained-panel";
+import { createSharedStepClock } from "@/components/synced-loader-clock";

-const SYNCED_LOADER_DURATION_MS = 950;
-const SYNCED_LOADER_EPOCH_MS = 0;
+const SYNCED_LOADER_DURATION_MS = 6_000;
 const DOT_SEQUENCE = [0, 1, 3, 5, 4, 2] as const;
 const DOT_COUNT = DOT_SEQUENCE.length;
 const GRID_COLUMNS = 2;
 const SNAKE_SEGMENT_OFFSETS = [0, -1, -2, -3, -4] as const;
 const SNAKE_OPACITIES = [1, 0.78, 0.56, 0.34, 0] as const;
-const DOT_KEYS = Array.from({ length: DOT_COUNT }, (_, i) => `dot-${i}`);
-const sharedStepProgress = makeMutable(0);
-let sharedLoopStarted = false;
-
-function ensureSharedStepLoopStarted(): void {
-  if (sharedLoopStarted) {
-    return;
-  }
-
-  sharedLoopStarted = true;
-  const elapsedMs = (Date.now() - SYNCED_LOADER_EPOCH_MS) % SYNCED_LOADER_DURATION_MS;
-  sharedStepProgress.value = (elapsedMs / SYNCED_LOADER_DURATION_MS) * DOT_COUNT;
-  sharedStepProgress.value = withTiming(
-    DOT_COUNT,
-    {
-      duration: Math.max(1, Math.round(SYNCED_LOADER_DURATION_MS - elapsedMs)),
-      easing: Easing.linear,
-    },
-    (finished) => {
-      if (!finished) {
-        sharedLoopStarted = false;
-        return;
-      }
-      sharedStepProgress.value = 0;
-      sharedStepProgress.value = withRepeat(
-        withTiming(DOT_COUNT, {
-          duration: SYNCED_LOADER_DURATION_MS,
-          easing: Easing.linear,
-        }),
-        -1,
-        false,
-      );
-    },
-  );
-}
+const DOT_INDEXES = Array.from({ length: DOT_COUNT }, (_, dotIndex) => dotIndex);
+const DOT_KEYS = DOT_INDEXES.map((dotIndex) => `dot-${dotIndex}`);
+const sharedStepClock = createSharedStepClock(DOT_COUNT, SYNCED_LOADER_DURATION_MS);
+const subscribePaused = () => () => {};

 export function SyncedLoader({ size = 10, color }: { size?: number; color: string }) {
-  useEffect(() => {
-    ensureSharedStepLoopStarted();
-  }, []);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: 1,
-  }));
+  const active = useRetainedPanelActive();
+  const step = useSyncExternalStore(
+    active ? sharedStepClock.subscribe : subscribePaused,
+    sharedStepClock.getSnapshot,
+    sharedStepClock.getSnapshot,
+  );

  const gap = Math.max(1, Math.round(size * 0.12));
  const dotSize = Math.max(2, Math.floor((size - gap * 2) / 3));
@@ -67,10 +28,9 @@ export function SyncedLoader({ size = 10, color }: { size?: number; color: strin
  const gridHeight = dotSize * 3 + gap * 2;

  const gridStyle = useMemo(
-    () => [animatedStyle, { width: gridWidth, height: gridHeight }],
-    [animatedStyle, gridWidth, gridHeight],
+    () => ({ width: gridWidth, height: gridHeight }),
+    [gridHeight, gridWidth],
  );
-
  const containerStyle = useMemo(
    () =>
      ({
@@ -84,8 +44,8 @@ export function SyncedLoader({ size = 10, color }: { size?: number; color: strin

  return (
    <View style={containerStyle}>
-      <Animated.View style={gridStyle}>
-        {Array.from({ length: DOT_COUNT }).map((_, dotIndex) => {
+      <View style={gridStyle}>
+        {DOT_INDEXES.map((dotIndex) => {
          const rowIndex = Math.floor(dotIndex / GRID_COLUMNS);
          const columnIndex = dotIndex % GRID_COLUMNS;
          const sequenceIndex = DOT_SEQUENCE.indexOf(dotIndex as (typeof DOT_SEQUENCE)[number]);
@@ -96,13 +56,13 @@ export function SyncedLoader({ size = 10, color }: { size?: number; color: strin
              color={color}
              dotSize={dotSize}
              sequenceIndex={sequenceIndex}
-              progress={sharedStepProgress}
+              step={step}
              left={columnIndex * (dotSize + gap)}
              top={rowIndex * (dotSize + gap)}
            />
          );
        })}
-      </Animated.View>
+      </View>
    </View>
  );
 }
@@ -111,50 +71,41 @@ function SpinnerDot({
  color,
  dotSize,
  sequenceIndex,
-  progress,
+  step,
  left,
  top,
 }: {
  color: string;
  dotSize: number;
  sequenceIndex: number;
-  progress: SharedValue<number>;
+  step: number;
  left: number;
  top: number;
 }) {
-  const animatedStyle = useAnimatedStyle(() => {
-    const headIndex = Math.floor(progress.value) % DOT_COUNT;
-    let opacity = 0;
+  let opacity = 0;

-    for (let segmentIndex = 0; segmentIndex < SNAKE_SEGMENT_OFFSETS.length; segmentIndex += 1) {
-      const activeSequenceIndex =
-        (headIndex + SNAKE_SEGMENT_OFFSETS[segmentIndex] + DOT_COUNT) % DOT_COUNT;
-      if (sequenceIndex === activeSequenceIndex) {
-        opacity = SNAKE_OPACITIES[segmentIndex] ?? 0;
-        break;
-      }
+  for (let segmentIndex = 0; segmentIndex < SNAKE_SEGMENT_OFFSETS.length; segmentIndex += 1) {
+    const activeSequenceIndex =
+      (step + SNAKE_SEGMENT_OFFSETS[segmentIndex] + DOT_COUNT) % DOT_COUNT;
+    if (sequenceIndex === activeSequenceIndex) {
+      opacity = SNAKE_OPACITIES[segmentIndex] ?? 0;
+      break;
    }
-
-    return {
-      opacity,
-    };
-  });
+  }

  const dotStyle = useMemo(
-    () => [
-      animatedStyle,
-      {
-        width: dotSize,
-        height: dotSize,
-        borderRadius: dotSize / 2,
-        backgroundColor: color,
-        position: "absolute" as const,
-        left,
-        top,
-      },
-    ],
-    [animatedStyle, dotSize, color, left, top],
+    () => ({
+      width: dotSize,
+      height: dotSize,
+      borderRadius: dotSize / 2,
+      backgroundColor: color,
+      position: "absolute" as const,
+      left,
+      top,
+      opacity,
+    }),
+    [color, dotSize, left, opacity, top],
  );

-  return <Animated.View style={dotStyle} />;
+  return <View style={dotStyle} />;
 }