Fix inconsistent app icon active states in chat-first rail (#4834)

* Give the chat-first rail one owner for active icon state

Search Chats rendered outside the nav tablist with hover-only styling and had
no ChatFirstPrimaryTab member, so it could never show an active state. The apps
rail derived its inactive treatment from activeAppId alone, which could not
distinguish an unresolved surface from a nav surface owning the rail, so every
app icon kept its in-color active treatment whenever Search Chats, Scheduled,
Integrations, or New chat took the main area.

Both surfaces now resolve active state through a shared active-surface module,
so exactly one rail entry reads as active.

* Make the desktop rail's active nav surface a tested pure resolver

Scheduled tasks and the chats view are rail surfaces without an appId, so they
have to name a primary tab or the rail cannot tell them from an unresolved
surface. That derivation was an inline useMemo with no coverage; extracting it
lets a test fail if a future surface stops naming its tab.

---------

Co-authored-by: Builder.io <builder-bot@builder.io>

Author: builder-io-integration[bot]

.changeset/chat-first-rail-active-state.md

@@ -0,0 +1,17 @@
+---
+"@agent-native/core": patch
+"@agent-native/dispatch": patch
+---
+
+Give the chat-first rail one owner for active state so exactly one entry ever
+reads as active. `activeAppId` alone could not distinguish "no surface resolved
+yet" from "a nav surface is active with no app selected", so every app icon kept
+its in-color active treatment whenever Search Chats, Scheduled, Integrations, or
+New chat owned the main area. Search Chats was worse: it rendered outside the
+tablist with hover-only styling and no `ChatFirstPrimaryTab` member, so it could
+never show an active state at all.
+
+`ChatFirstPrimaryTab` now includes `search`, `ChatFirstAppsRail` accepts
+`activeTab`, and both the rail and the primary navigation derive their
+active/inactive presentation from the shared `chatFirstActiveSurface`,
+`chatFirstAppIconState`, and `chatFirstNavTabActive` helpers.

packages/code-agents-ui/src/CodeAgentsApp.spec.ts

@@ -10,6 +10,7 @@ import {
   getCodeAgentWorktreeRecoveryState,
   groupCodeAgentModelOptions,
   normalizeModelSelection,
+  resolveCodeAgentsPrimaryTab,
   resolveNewSessionExtensionComposerState,
   shouldShowCodeAgentCredentialCallout,
   shouldCloseWatchedChatFirstSession,
@@ -679,3 +680,43 @@ describe("chat-first session watch bounds", () => {
     ).toBe(false);
   });
 });
+
+describe("resolveCodeAgentsPrimaryTab", () => {
+  it("activates Search while its panel owns the main area", () => {
+    expect(
+      resolveCodeAgentsPrimaryTab({
+        chatFirstMainKind: "code",
+        searchPanelOpen: true,
+        hostActiveTab: "new-chat",
+      }),
+    ).toBe("search");
+  });
+
+  it("keeps the host tab when the search panel is closed", () => {
+    expect(
+      resolveCodeAgentsPrimaryTab({
+        chatFirstMainKind: "code",
+        searchPanelOpen: false,
+        hostActiveTab: "scheduled",
+      }),
+    ).toBe("scheduled");
+  });
+
+  it("releases Search when another surface takes the main area", () => {
+    expect(
+      resolveCodeAgentsPrimaryTab({
+        chatFirstMainKind: "agent",
+        searchPanelOpen: true,
+      }),
+    ).toBeUndefined();
+  });
+
+  it("resolves no tab when nothing owns the rail", () => {
+    expect(
+      resolveCodeAgentsPrimaryTab({
+        chatFirstMainKind: "code",
+        searchPanelOpen: false,
+      }),
+    ).toBeUndefined();
+  });
+});

packages/code-agents-ui/src/CodeAgentsApp.tsx

@@ -331,6 +331,21 @@ export function shouldCloseWatchedChatFirstSession(input: {
   return !input.watchedRunPresent;
 }
 
+/**
+ * Search owns the rail only while its panel owns the main area, so the tab
+ * highlight can never disagree with what is actually on screen.
+ */
+export function resolveCodeAgentsPrimaryTab(input: {
+  chatFirstMainKind: "agent" | "code";
+  searchPanelOpen: boolean;
+  hostActiveTab?: ChatFirstPrimaryTab;
+}): ChatFirstPrimaryTab | undefined {
+  if (input.chatFirstMainKind === "code" && input.searchPanelOpen) {
+    return "search";
+  }
+  return input.hostActiveTab;
+}
+
 export interface CodeAgentsAppProps {
   apps: AppConfig[];
   host: CodeAgentsHost;
@@ -2752,10 +2767,18 @@ export default function CodeAgentsApp({
     [host.transferRun, requestPortalTransfer],
   );
 
+  const activePrimaryTab = resolveCodeAgentsPrimaryTab({
+    chatFirstMainKind,
+    searchPanelOpen,
+    ...(chatFirstNavigation?.activeTab
+      ? { hostActiveTab: chatFirstNavigation.activeTab }
+      : {}),
+  });
+  const searchPanelActive = activePrimaryTab === "search";
   const showingSelectedRunDetail =
     !workbenchOpen &&
     !mobilePanelOpen &&
-    !searchPanelOpen &&
+    !searchPanelActive &&
     Boolean(selectedRun);
 
   return (
@@ -2782,7 +2805,7 @@ export default function CodeAgentsApp({
             onOpenIntegrations={() => chatFirstNavigation?.onOpenIntegrations()}
             onOpenScheduled={() => chatFirstNavigation?.onOpenScheduled()}
             onSearch={openSearchPanel}
-            activeTab={chatFirstNavigation?.activeTab}
+            activeTab={activePrimaryTab}
             collapsed={railCollapsed}
             stickyNewChat
           />
@@ -2929,7 +2952,7 @@ export default function CodeAgentsApp({
                     onCopyLink={copyMobileLink}
                     onOpenSettings={onOpenSettings}
                   />
-                ) : searchPanelOpen ? (
+                ) : searchPanelActive ? (
                   <SearchChatsPanel
                     query={searchQuery}
                     results={searchResults}

packages/core/src/client/chat-first/active-surface.spec.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  chatFirstActiveSurface,
+  chatFirstAppIconState,
+  chatFirstNavTabActive,
+} from "./active-surface.js";
+
+describe("chatFirstActiveSurface", () => {
+  it("keeps an unresolved surface distinct from an active nav surface", () => {
+    expect(chatFirstActiveSurface({})).toBeUndefined();
+    expect(chatFirstActiveSurface({ activeTab: "new-chat" })).toEqual({
+      kind: "nav",
+      tab: "new-chat",
+    });
+  });
+
+  it("reports the selected app when no nav surface is named", () => {
+    expect(chatFirstActiveSurface({ activeAppId: "mail" })).toEqual({
+      kind: "app",
+      appId: "mail",
+    });
+  });
+
+  it("lets the named nav surface win over a stale app selection", () => {
+    expect(
+      chatFirstActiveSurface({ activeAppId: "dispatch", activeTab: "search" }),
+    ).toEqual({ kind: "nav", tab: "search" });
+  });
+});
+
+describe("chatFirstAppIconState", () => {
+  it("marks nothing active or inactive before a surface resolves", () => {
+    expect(chatFirstAppIconState(undefined, "mail")).toEqual({
+      isActive: false,
+      isInactive: false,
+    });
+  });
+
+  it("activates only the selected app", () => {
+    const surface = chatFirstActiveSurface({ activeAppId: "mail" });
+
+    expect(chatFirstAppIconState(surface, "mail")).toEqual({
+      isActive: true,
+      isInactive: false,
+    });
+    expect(chatFirstAppIconState(surface, "calendar")).toEqual({
+      isActive: false,
+      isInactive: true,
+    });
+  });
+
+  it("deactivates every app while a nav surface owns the rail", () => {
+    for (const tab of [
+      "new-chat",
+      "integrations",
+      "scheduled",
+      "search",
+    ] as const) {
+      const surface = chatFirstActiveSurface({ activeTab: tab });
+      for (const appId of ["mail", "calendar", "design", "clips"]) {
+        expect(chatFirstAppIconState(surface, appId)).toEqual({
+          isActive: false,
+          isInactive: true,
+        });
+      }
+    }
+  });
+});
+
+describe("chatFirstNavTabActive", () => {
+  it("activates only the named nav tab", () => {
+    const surface = chatFirstActiveSurface({ activeTab: "search" });
+
+    expect(chatFirstNavTabActive(surface, "search")).toBe(true);
+    for (const tab of ["new-chat", "integrations", "scheduled"] as const) {
+      expect(chatFirstNavTabActive(surface, tab)).toBe(false);
+    }
+  });
+
+  it("activates no nav tab while an app owns the rail", () => {
+    const surface = chatFirstActiveSurface({ activeAppId: "mail" });
+
+    for (const tab of [
+      "new-chat",
+      "integrations",
+      "scheduled",
+      "search",
+    ] as const) {
+      expect(chatFirstNavTabActive(surface, tab)).toBe(false);
+    }
+  });
+});

packages/core/src/client/chat-first/active-surface.ts

@@ -0,0 +1,44 @@
+import type { ChatFirstAppIconRenderOptions } from "./types.js";
+
+export type ChatFirstPrimaryTab =
+  | "new-chat"
+  | "integrations"
+  | "scheduled"
+  | "search";
+
+/**
+ * The one rail entry that owns the active presentation. `undefined` means the
+ * host has not resolved a surface yet, which must stay distinguishable from a
+ * nav surface owning the rail while no app is selected.
+ */
+export type ChatFirstActiveSurface =
+  | { kind: "app"; appId: string }
+  | { kind: "nav"; tab: ChatFirstPrimaryTab };
+
+export function chatFirstActiveSurface({
+  activeAppId,
+  activeTab,
+}: {
+  activeAppId?: string;
+  activeTab?: ChatFirstPrimaryTab;
+}): ChatFirstActiveSurface | undefined {
+  if (activeTab !== undefined) return { kind: "nav", tab: activeTab };
+  if (activeAppId !== undefined) return { kind: "app", appId: activeAppId };
+  return undefined;
+}
+
+export function chatFirstAppIconState(
+  surface: ChatFirstActiveSurface | undefined,
+  appId: string,
+): ChatFirstAppIconRenderOptions {
+  if (!surface) return { isActive: false, isInactive: false };
+  const isActive = surface.kind === "app" && surface.appId === appId;
+  return { isActive, isInactive: !isActive };
+}
+
+export function chatFirstNavTabActive(
+  surface: ChatFirstActiveSurface | undefined,
+  tab: ChatFirstPrimaryTab,
+): boolean {
+  return surface?.kind === "nav" && surface.tab === tab;
+}

packages/core/src/client/chat-first/apps-rail.spec.tsx

@@ -109,7 +109,7 @@ describe("ChatFirstAppsRail", () => {
     ).toBe("true");
   });
 
-  it("keeps app icons in color when no app is selected", () => {
+  it("keeps app icons in color before any surface resolves", () => {
     act(() => {
       root.render(
         <ChatFirstAppsRail
@@ -134,6 +134,100 @@ describe("ChatFirstAppsRail", () => {
     ).toBe("false");
   });
 
+  it("grays every app icon while a nav surface owns the rail", () => {
+    act(() => {
+      root.render(
+        <ChatFirstAppsRail
+          apps={[
+            { id: "content", name: "Content" },
+            { id: "analytics", name: "Analytics" },
+          ]}
+          activeTab="search"
+          collapsed
+          onOpenApp={vi.fn()}
+          renderIcon={(app, options) => (
+            <span data-icon-inactive={options.isInactive}>{app.name}</span>
+          )}
+        />,
+      );
+    });
+
+    const icons = [
+      ...container.querySelectorAll<HTMLElement>("[data-chat-first-app-icon]"),
+    ];
+    expect(icons).toHaveLength(2);
+    for (const icon of icons) {
+      expect(icon.className).toContain("grayscale");
+      expect(
+        icon
+          .querySelector("[data-icon-inactive]")
+          ?.getAttribute("data-icon-inactive"),
+      ).toBe("true");
+      expect(
+        icon.closest("[data-chat-first-app]")?.className.split(" "),
+      ).not.toContain("bg-sidebar-accent");
+    }
+  });
+
+  it("grays every expanded app row while a nav surface owns the rail", () => {
+    act(() => {
+      root.render(
+        <ChatFirstAppsRail
+          apps={[
+            { id: "content", name: "Content" },
+            { id: "analytics", name: "Analytics" },
+          ]}
+          activeTab="new-chat"
+          onOpenApp={vi.fn()}
+          renderIcon={(app, options) => (
+            <span data-icon-inactive={options.isInactive}>{app.name}</span>
+          )}
+        />,
+      );
+    });
+
+    const rows = [
+      ...container.querySelectorAll<HTMLElement>("[data-chat-first-app]"),
+    ];
+    expect(rows).toHaveLength(2);
+    for (const row of rows) {
+      expect(row.className.split(" ")).not.toContain("bg-sidebar-accent");
+      expect(
+        row.querySelector("[data-chat-first-app-icon]")?.className,
+      ).toContain("grayscale");
+    }
+  });
+
+  it("keeps the selected app active when a nav tab is not resolved", () => {
+    act(() => {
+      root.render(
+        <ChatFirstAppsRail
+          apps={[
+            { id: "content", name: "Content" },
+            { id: "analytics", name: "Analytics" },
+          ]}
+          activeAppId="analytics"
+          collapsed
+          onOpenApp={vi.fn()}
+          renderIcon={(app, options) => (
+            <span data-icon-inactive={options.isInactive}>{app.name}</span>
+          )}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector<HTMLElement>(
+        '[data-app-id="analytics"] [data-chat-first-app-icon]',
+      )?.className,
+    ).not.toContain("grayscale");
+    expect(
+      container.querySelector<HTMLElement>(
+        '[data-app-id="content"] [data-chat-first-app-icon]',
+      )?.className,
+    ).toContain("grayscale");
+  });
+
   it("shows a collapsed app name immediately on hover", async () => {
     act(() => {
       root.render(