fix(app): restore workspace tab focus on refresh

packages/app/e2e/settings-toggle-tab-regression.spec.ts

@@ -0,0 +1,172 @@
+import { buildHostAgentDetailRoute, buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { expect, test, type Page } from "./fixtures";
+import {
+  archiveAgentFromDaemon,
+  connectArchiveTabDaemonClient,
+  createIdleAgent,
+  openWorkspaceWithAgents,
+} from "./helpers/archive-tab";
+import { getActiveTabTestId, waitForTabBar } from "./helpers/launcher";
+import { createTempGitRepo } from "./helpers/workspace";
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+async function pressSettingsToggleShortcut(page: Page) {
+  const modifier = process.platform === "darwin" ? "Meta" : "Control";
+  await page.keyboard.press(`${modifier}+Comma`);
+}
+
+async function expectSendBehavior(page: Page, expected: "interrupt" | "queue") {
+  await expect
+    .poll(async () => {
+      const raw = await page.evaluate(() => localStorage.getItem("@paseo:app-settings"));
+      if (!raw) {
+        return null;
+      }
+      return (JSON.parse(raw) as { sendBehavior?: string }).sendBehavior ?? null;
+    })
+    .toBe(expected);
+}
+
+async function openAgentRouteAndExpectFocused(input: {
+  page: Page;
+  serverId: string;
+  workspaceId: string;
+  agentId: string;
+}) {
+  const expectedActiveTabId = `workspace-tab-agent_${input.agentId}`;
+  await input.page.goto(
+    buildHostAgentDetailRoute(input.serverId, input.agentId, input.workspaceId),
+  );
+  await input.page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+  await waitForTabBar(input.page);
+  await expect(
+    input.page.getByTestId(expectedActiveTabId).filter({ visible: true }),
+  ).toHaveAttribute("aria-selected", "true");
+  await expect(getActiveTabTestId(input.page)).resolves.toBe(expectedActiveTabId);
+}
+
+test.describe("Settings toggle tab regression", () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test("toggling settings after changing a setting returns to the same workspace tab", async ({
+    page,
+  }) => {
+    const serverId = getServerId();
+    const client = await connectArchiveTabDaemonClient();
+    const repo = await createTempGitRepo("settings-toggle-tab-");
+    const agentIds: string[] = [];
+
+    try {
+      const firstAgent = await createIdleAgent(client, {
+        cwd: repo.path,
+        title: `settings-toggle-a-${Date.now()}`,
+      });
+      const secondAgent = await createIdleAgent(client, {
+        cwd: repo.path,
+        title: `settings-toggle-b-${Date.now()}`,
+      });
+      agentIds.push(firstAgent.id, secondAgent.id);
+
+      await openWorkspaceWithAgents(page, [firstAgent, secondAgent]);
+      await waitForTabBar(page);
+
+      const expectedActiveTabId = `workspace-tab-agent_${secondAgent.id}`;
+      await expect(page.getByTestId(expectedActiveTabId).filter({ visible: true })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+      await expect(getActiveTabTestId(page)).resolves.toBe(expectedActiveTabId);
+
+      await pressSettingsToggleShortcut(page);
+      await expect(page).toHaveURL(/\/settings\/general$/);
+
+      await page.getByRole("button", { name: "Queue", exact: true }).click();
+      await expectSendBehavior(page, "queue");
+      await page.getByRole("button", { name: "Interrupt", exact: true }).click();
+      await expectSendBehavior(page, "interrupt");
+
+      await pressSettingsToggleShortcut(page);
+      await expect(page).toHaveURL(buildHostWorkspaceRoute(serverId, repo.path));
+      await waitForTabBar(page);
+      await expect(page.getByTestId(expectedActiveTabId).filter({ visible: true })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+      await expect(getActiveTabTestId(page)).resolves.toBe(expectedActiveTabId);
+
+      await page.reload();
+      await waitForTabBar(page);
+      await expect(page.getByTestId(expectedActiveTabId).filter({ visible: true })).toHaveAttribute(
+        "aria-selected",
+        "true",
+      );
+      await expect(getActiveTabTestId(page)).resolves.toBe(expectedActiveTabId);
+    } finally {
+      for (const agentId of agentIds) {
+        await archiveAgentFromDaemon(client, agentId).catch(() => undefined);
+      }
+      await client.close().catch(() => undefined);
+      await repo.cleanup();
+    }
+  });
+
+  test("refresh after navigating between agent routes keeps the latest agent focused", async ({
+    page,
+  }) => {
+    const serverId = getServerId();
+    const client = await connectArchiveTabDaemonClient();
+    const repo = await createTempGitRepo("agent-route-refresh-");
+    const agentIds: string[] = [];
+
+    try {
+      const firstAgent = await createIdleAgent(client, {
+        cwd: repo.path,
+        title: `agent-route-refresh-a-${Date.now()}`,
+      });
+      const secondAgent = await createIdleAgent(client, {
+        cwd: repo.path,
+        title: `agent-route-refresh-b-${Date.now()}`,
+      });
+      agentIds.push(firstAgent.id, secondAgent.id);
+
+      await openAgentRouteAndExpectFocused({
+        page,
+        serverId,
+        workspaceId: repo.path,
+        agentId: firstAgent.id,
+      });
+      await openAgentRouteAndExpectFocused({
+        page,
+        serverId,
+        workspaceId: repo.path,
+        agentId: secondAgent.id,
+      });
+
+      const expectedActiveTabId = `workspace-tab-agent_${secondAgent.id}`;
+      for (let attempt = 0; attempt < 5; attempt += 1) {
+        await page.reload();
+        await waitForTabBar(page);
+        await expect(
+          page.getByTestId(expectedActiveTabId).filter({ visible: true }),
+        ).toHaveAttribute("aria-selected", "true");
+        await expect(getActiveTabTestId(page)).resolves.toBe(expectedActiveTabId);
+      }
+    } finally {
+      for (const agentId of agentIds) {
+        await archiveAgentFromDaemon(client, agentId).catch(() => undefined);
+      }
+      await client.close().catch(() => undefined);
+      await repo.cleanup();
+    }
+  });
+});

packages/app/src/app/h/[serverId]/workspace/[workspaceId]/_layout.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/stores/navigation-active-workspace-store";
 import type { WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
 import { WorkspaceScreen } from "@/screens/workspace/workspace-screen";
+import { useWorkspaceLayoutStoreHydrated } from "@/stores/workspace-layout-store";
 import {
   buildHostWorkspaceRoute,
   decodeWorkspaceIdFromPathSegment,
@@ -88,6 +89,7 @@ function HostWorkspaceLayoutContent() {
   const navigation = useNavigation();
   const router = useRouter();
   const rootNavigationState = useRootNavigationState();
+  const hasHydratedWorkspaceLayoutStore = useWorkspaceLayoutStoreHydrated();
   const consumedIntentRef = useRef<string | null>(null);
   const [intentConsumed, setIntentConsumed] = useState(false);
   const params = useLocalSearchParams<{
@@ -128,6 +130,9 @@ function HostWorkspaceLayoutContent() {
     if (!rootNavigationState?.key) {
       return;
     }
+    if (!hasHydratedWorkspaceLayoutStore) {
+      return;
+    }
 
     const consumptionKey = `${serverId}:${workspaceId}:${openValue}`;
     if (consumedIntentRef.current === consumptionKey) {
@@ -163,9 +168,17 @@ function HostWorkspaceLayoutContent() {
     });
 
     setIntentConsumed(true);
-  }, [navigation, openValue, rootNavigationState?.key, router, serverId, workspaceId]);
+  }, [
+    hasHydratedWorkspaceLayoutStore,
+    navigation,
+    openValue,
+    rootNavigationState?.key,
+    router,
+    serverId,
+    workspaceId,
+  ]);
 
-  if (openValue && !intentConsumed) {
+  if (openValue && (!intentConsumed || !hasHydratedWorkspaceLayoutStore)) {
     return null;
   }
 

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

@@ -219,7 +219,10 @@ function TabChip({
               onPress={() => {
                 onNavigateTab(tab.tabId);
               }}
+              accessibilityRole="button"
               accessibilityLabel={tooltipLabel}
+              accessibilityState={{ selected: isActive }}
+              aria-selected={isActive}
             >
               {isActive && (
                 <View

packages/app/src/screens/workspace/workspace-empty-draft-seed.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { shouldSeedEmptyWorkspaceDraft } from "./workspace-empty-draft-seed";
+
+const readyEmptyWorkspace = {
+  isRouteFocused: true,
+  hasPersistenceKey: true,
+  hasWorkspaceDirectory: true,
+  hasHydratedWorkspaceLayoutStore: true,
+  hasHydratedAgents: true,
+  hasLoadedTerminals: true,
+  activeAgentCount: 0,
+  terminalCount: 0,
+  tabCount: 0,
+};
+
+describe("shouldSeedEmptyWorkspaceDraft", () => {
+  it("waits for refresh-time hydration before seeding a draft", () => {
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        hasHydratedWorkspaceLayoutStore: false,
+      }),
+    ).toBe(false);
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        hasHydratedAgents: false,
+      }),
+    ).toBe(false);
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        hasLoadedTerminals: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("does not seed when existing workspace content is known", () => {
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        activeAgentCount: 1,
+      }),
+    ).toBe(false);
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        terminalCount: 1,
+      }),
+    ).toBe(false);
+    expect(
+      shouldSeedEmptyWorkspaceDraft({
+        ...readyEmptyWorkspace,
+        tabCount: 1,
+      }),
+    ).toBe(false);
+  });
+
+  it("seeds once an empty focused workspace is fully known", () => {
+    expect(shouldSeedEmptyWorkspaceDraft(readyEmptyWorkspace)).toBe(true);
+  });
+});

packages/app/src/screens/workspace/workspace-empty-draft-seed.ts

@@ -0,0 +1,24 @@
+export function shouldSeedEmptyWorkspaceDraft(input: {
+  isRouteFocused: boolean;
+  hasPersistenceKey: boolean;
+  hasWorkspaceDirectory: boolean;
+  hasHydratedWorkspaceLayoutStore: boolean;
+  hasHydratedAgents: boolean;
+  hasLoadedTerminals: boolean;
+  activeAgentCount: number;
+  terminalCount: number;
+  tabCount: number;
+}): boolean {
+  if (
+    !input.isRouteFocused ||
+    !input.hasPersistenceKey ||
+    !input.hasWorkspaceDirectory ||
+    !input.hasHydratedWorkspaceLayoutStore ||
+    !input.hasHydratedAgents ||
+    !input.hasLoadedTerminals
+  ) {
+    return false;
+  }
+
+  return input.activeAgentCount === 0 && input.terminalCount === 0 && input.tabCount === 0;
+}

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

@@ -55,6 +55,7 @@ import {
   buildWorkspaceTabPersistenceKey,
   collectAllTabs,
   useWorkspaceLayoutStore,
+  useWorkspaceLayoutStoreHydrated,
 } from "@/stores/workspace-layout-store";
 import type { WorkspaceTab, WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
@@ -111,6 +112,7 @@ import {
   type WorkspacePaneContentModel,
 } from "@/screens/workspace/workspace-pane-content";
 import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
+import { shouldSeedEmptyWorkspaceDraft } from "@/screens/workspace/workspace-empty-draft-seed";
 import {
   buildBulkCloseConfirmationMessage,
   classifyBulkClosableTabs,
@@ -977,6 +979,7 @@ function WorkspaceScreenContent({
   const workspaceLayout = useWorkspaceLayoutStore((state) =>
     persistenceKey ? (state.layoutByWorkspace[persistenceKey] ?? null) : null,
   );
+  const hasHydratedWorkspaceLayoutStore = useWorkspaceLayoutStoreHydrated();
   const workspaceSetupSnapshot = useWorkspaceSetupStore((state) =>
     persistenceKey ? (state.snapshots[persistenceKey] ?? null) : null,
   );
@@ -1138,6 +1141,9 @@ function WorkspaceScreenContent({
     if (!normalizedServerId || !normalizedWorkspaceId || !persistenceKey) {
       return;
     }
+    if (!hasHydratedWorkspaceLayoutStore) {
+      return;
+    }
 
     const hasActivePendingDraftCreateInWorkspace = uiTabs.some((tab) => {
       if (tab.target.kind !== "draft") {
@@ -1158,6 +1164,7 @@ function WorkspaceScreenContent({
     });
   }, [
     hasHydratedAgents,
+    hasHydratedWorkspaceLayoutStore,
     isRouteFocused,
     pendingByDraftId,
     persistenceKey,
@@ -1246,17 +1253,19 @@ function WorkspaceScreenContent({
   ]);
 
   useEffect(() => {
-    if (!isRouteFocused) {
+    if (
-      return;
+      !shouldSeedEmptyWorkspaceDraft({
-    }
+        isRouteFocused,
-    if (!persistenceKey) {
+        hasPersistenceKey: Boolean(persistenceKey),
-      return;
+        hasWorkspaceDirectory: Boolean(workspaceDirectory),
-    }
+        hasHydratedWorkspaceLayoutStore,
-    if (workspaceAgentVisibility.activeAgentIds.size > 0 || terminals.length > 0) {
+        hasHydratedAgents,
-      emptyWorkspaceSeedRef.current = null;
+        hasLoadedTerminals: terminalsQuery.isSuccess,
-      return;
+        activeAgentCount: workspaceAgentVisibility.activeAgentIds.size,
-    }
+        terminalCount: terminals.length,
-    if (tabs.length > 0) {
+        tabCount: tabs.length,
+      })
+    ) {
       emptyWorkspaceSeedRef.current = null;
       return;
     }
@@ -1271,9 +1280,13 @@ function WorkspaceScreenContent({
     normalizedWorkspaceId,
     openWorkspaceDraftTab,
     persistenceKey,
+    hasHydratedAgents,
+    hasHydratedWorkspaceLayoutStore,
     isRouteFocused,
     terminals.length,
+    terminalsQuery.isSuccess,
     tabs.length,
+    workspaceDirectory,
     workspaceAgentVisibility.activeAgentIds.size,
   ]);
 

packages/app/src/stores/workspace-layout-store.ts

@@ -1,4 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useEffect, useState } from "react";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 import {
@@ -719,3 +720,22 @@ export const useWorkspaceLayoutStore = create<WorkspaceLayoutStore>()(
     },
   ),
 );
+
+export function useWorkspaceLayoutStoreHydrated(): boolean {
+  const [hasHydrated, setHasHydrated] = useState(() =>
+    useWorkspaceLayoutStore.persist.hasHydrated(),
+  );
+
+  useEffect(() => {
+    if (useWorkspaceLayoutStore.persist.hasHydrated()) {
+      setHasHydrated(true);
+      return;
+    }
+
+    return useWorkspaceLayoutStore.persist.onFinishHydration(() => {
+      setHasHydrated(true);
+    });
+  }, []);
+
+  return hasHydrated;
+}