fix goal pill workspace navigation

Author: ThomasK33

src/browser/components/AgentListItem/AgentListItem.test.tsx

@@ -1,7 +1,7 @@
 import "../../../../tests/ui/dom";
 
 import { afterEach, beforeEach, describe, expect, mock, spyOn, test } from "bun:test";
-import { cleanup, render, within } from "@testing-library/react";
+import { cleanup, fireEvent, render, within } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { installDom } from "../../../../tests/ui/dom";
 import type * as ReactDndModuleType from "react-dnd";
@@ -17,9 +17,12 @@ import type * as RuntimeStatusStoreModuleType from "@/browser/stores/RuntimeStat
 import type * as WorkspaceStoreModule from "@/browser/stores/WorkspaceStore";
 import * as TooltipModule from "../Tooltip/Tooltip";
 import * as WorkspaceStatusIndicatorModule from "../WorkspaceStatusIndicator/WorkspaceStatusIndicator";
+import { parseRightSidebarLayoutState } from "@/browser/utils/rightSidebarLayout";
+import { getRightSidebarLayoutKey } from "@/common/constants/storage";
 import type { AgentRowRenderMeta } from "@/browser/utils/ui/workspaceFiltering";
 import type { StreamAbortReasonSnapshot } from "@/common/types/stream";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
+import type { WorkspaceSelection } from "./AgentListItem";
 import type { AgentListItem as AgentListItemComponent } from "./AgentListItem";
 
 let AgentListItem!: typeof AgentListItemComponent;
@@ -225,6 +228,7 @@ function renderWorkspaceItem(
     subAgentConnectorLayout?: "default" | "task-group-member";
     completedChildrenExpanded?: boolean;
     onToggleCompletedChildren?: (workspaceId: string) => void;
+    onSelectWorkspace?: (selection: WorkspaceSelection) => void;
   } = {}
 ) {
   const metadata = options.metadata ?? createMetadata();
@@ -240,7 +244,7 @@ function renderWorkspaceItem(
       subAgentConnectorLayout={options.subAgentConnectorLayout}
       completedChildrenExpanded={options.completedChildrenExpanded}
       onToggleCompletedChildren={options.onToggleCompletedChildren}
-      onSelectWorkspace={() => undefined}
+      onSelectWorkspace={options.onSelectWorkspace ?? (() => undefined)}
       onForkWorkspace={() => Promise.resolve()}
       onArchiveWorkspace={() => Promise.resolve()}
       onCancelCreation={() => Promise.resolve()}
@@ -311,6 +315,47 @@ describe("AgentListItem", () => {
     expect(pill.getAttribute("aria-label")).toBe("Goal budget limited, $5.25 of $5.00 spent");
   });
 
+  test("goal pill selects the workspace and persists the Goal tab before navigation", () => {
+    mockWorkspaceHeartbeatsEnabled = true;
+    mockWorkspaceSidebarState = createWorkspaceSidebarState({
+      goal: {
+        goalId: "22222222-2222-4222-8222-222222222222",
+        status: "active",
+        objective: "Open the goal tab",
+        budgetCents: 100_000,
+        costCents: 5_294,
+        turnsUsed: 2,
+        turnCap: null,
+        startedAtMs: Date.now(),
+      },
+    });
+    const onSelectWorkspace = mock((_: WorkspaceSelection) => undefined);
+
+    const { row, metadata } = renderWorkspaceItem({ onSelectWorkspace });
+    const pill = within(row).getByTestId(`workspace-goal-pill-${TEST_WORKSPACE_ID}`);
+
+    fireEvent.click(pill);
+
+    expect(onSelectWorkspace).toHaveBeenCalledWith({
+      projectPath: metadata.projectPath,
+      projectName: metadata.projectName,
+      namedWorkspacePath: metadata.namedWorkspacePath,
+      workspaceId: metadata.id,
+    });
+    const persistedLayout = window.localStorage.getItem(getRightSidebarLayoutKey(metadata.id));
+    if (persistedLayout === null) {
+      throw new Error("expected target workspace right sidebar layout to be persisted");
+    }
+    const rawLayout: unknown = JSON.parse(persistedLayout);
+    const layout = parseRightSidebarLayoutState(rawLayout, "costs");
+    expect(layout.root.type).toBe("tabset");
+    if (layout.root.type !== "tabset") {
+      throw new Error("expected default right sidebar layout to be a tabset");
+    }
+    expect(layout.root.activeTab).toBe("goal");
+    expect(layout.root.tabs).toContain("goal");
+  });
+
   test("renders a heartbeat icon directly in the leading slot for seen rows when the heartbeat experiment is enabled", () => {
     mockWorkspaceHeartbeatsEnabled = true;
 

src/browser/components/AgentListItem/AgentListItem.tsx

@@ -1,5 +1,11 @@
 import { useTitleEdit } from "@/browser/contexts/WorkspaceTitleEditContext";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
+import {
+  getDefaultRightSidebarLayoutState,
+  parseRightSidebarLayoutState,
+  selectOrAddTab,
+  type RightSidebarLayoutState,
+} from "@/browser/utils/rightSidebarLayout";
 import { useContextMenuPosition } from "@/browser/hooks/useContextMenuPosition";
 import { useExperimentValue } from "@/browser/hooks/useExperiments";
 import {
@@ -20,9 +26,8 @@ import {
   normalizeTaskGroupLabel,
 } from "@/common/utils/tools/taskGroups";
 import { EXPERIMENT_IDS } from "@/common/constants/experiments";
-import { CUSTOM_EVENTS, createCustomEvent } from "@/common/constants/events";
 import { isDevcontainerRuntime } from "@/common/types/runtime";
-import { getWorkspaceLastReadKey } from "@/common/constants/storage";
+import { getRightSidebarLayoutKey, getWorkspaceLastReadKey } from "@/common/constants/storage";
 import type { GoalSnapshot } from "@/common/types/goal";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import React, { useState, useEffect, useRef, useCallback } from "react";
@@ -446,6 +451,16 @@ function getGoalPillText(goal: GoalSnapshot): string {
   return `Target  ${formatGoalCents(goal.costCents)}`;
 }
 
+function persistGoalTabSelection(workspaceId: string): void {
+  const defaultLayout = getDefaultRightSidebarLayoutState("costs");
+
+  updatePersistedState<RightSidebarLayoutState>(
+    getRightSidebarLayoutKey(workspaceId),
+    (rawLayout) => selectOrAddTab(parseRightSidebarLayoutState(rawLayout, "costs"), "goal"),
+    defaultLayout
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Regular Workspace Item (persisted workspace)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -700,6 +715,13 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
 
   const paddingLeft = getSidebarItemPaddingLeft(depth);
 
+  const workspaceSelection: WorkspaceSelection = {
+    projectPath,
+    projectName,
+    namedWorkspacePath,
+    workspaceId,
+  };
+
   // Drag handle for moving workspace between sections
   const [{ isDragging }, drag, dragPreview] = useDrag(
     () => ({
@@ -748,12 +770,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
         onClick={() => {
           if (isDisabled) return;
           if (ctxMenu.suppressClickIfLongPress()) return;
-          onSelectWorkspace({
-            projectPath,
-            projectName,
-            namedWorkspacePath,
-            workspaceId,
-          });
+          onSelectWorkspace(workspaceSelection);
         }}
         onDoubleClick={(event) => {
           if (isDisabled || isEditing) {
@@ -797,12 +814,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
           }
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            onSelectWorkspace({
-              projectPath,
-              projectName,
-              namedWorkspacePath,
-              workspaceId,
-            });
+            onSelectWorkspace(workspaceSelection);
           }
         }}
         onContextMenu={ctxMenu.onContextMenu}
@@ -1089,9 +1101,10 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                     data-testid={`workspace-goal-pill-${workspaceId}`}
                     onClick={(event) => {
                       event.stopPropagation();
-                      window.dispatchEvent(
-                        createCustomEvent(CUSTOM_EVENTS.OPEN_GOAL_TAB, { workspaceId })
-                      );
+                      // Persist the Goal tab before selecting so the target workspace opens
+                      // directly there even when its RightSidebar is not mounted yet.
+                      persistGoalTabSelection(workspaceId);
+                      onSelectWorkspace(workspaceSelection);
                     }}
                     onKeyDown={stopKeyboardPropagation}
                   >