@agent-native/toolkit 0.198.4 → 0.198.6

package/src/app/chat/AgentPanel.tsx

@@ -1,5 +1,11 @@
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
+import { buildSettingsRoute } from "@agent-native/core/navigation";
+import {
+  isSettingsSectionId,
+  SETTINGS_SECTION_ALIASES,
+} from "@agent-native/core/navigation";
 import type { AgentRun } from "@agent-native/core/progress";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
 import { Tooltip as DesignSystemTooltip } from "@agent-native/toolkit/design-system";
 import {
   DropdownMenu,
@@ -36,30 +42,23 @@ import React, {
   Suspense,
   startTransition,
 } from "react";
+import { useLocation, useNavigate } from "react-router";
 
 import { resolveFeedbackUrl } from "../feedback/FeedbackButton.js";
 import { ErrorReportActions, FeedbackButton } from "../feedback/index.js";
 import { RunsTrayMenuItem } from "../progress/index.js";
 import { ShareButton } from "../sharing/index.js";
-import { ThinkingDisplayProvider } from "./thinking-display.js";
-const loadMultiTabAssistantChat = () =>
-  import("./MultiTabAssistantChat.js").then((m) => ({
-    default: m.MultiTabAssistantChat,
-  }));
-const MultiTabAssistantChatLazy = lazy(loadMultiTabAssistantChat);
-import { buildSettingsRoute } from "@agent-native/core/navigation";
-import {
-  isSettingsSectionId,
-  SETTINGS_SECTION_ALIASES,
-} from "@agent-native/core/navigation";
-import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import { useLocation, useNavigate } from "react-router";
-
 import {
   AGENT_PANEL_OPEN_SETTINGS_EVENT,
   AGENT_PANEL_SET_MODE_EVENT,
 } from "./agent-sidebar-events.js";
 import type { AgentChatSurfaceKind } from "./chat/surface-types.js";
+import {
+  MultiTabAssistantChat,
+  type MultiTabAssistantChatHeaderProps,
+  type MultiTabAssistantChatProps,
+} from "./MultiTabAssistantChat.js";
+import { ThinkingDisplayProvider } from "./thinking-display.js";
 export {
   shouldHandleAgentPanelChatShortcut,
   shouldHandleAgentSidebarToggle,
@@ -99,11 +98,6 @@ import {
 } from "./agent-sidebar-url-sync.js";
 import type { AssistantChatProps } from "./chat/surface-types.js";
 import { assistantUiRecoverableRenderErrorKind } from "./composer/assistant-ui-recovery.js";
-import type {
-  MultiTabAssistantChatHeaderProps,
-  MultiTabAssistantChatProps,
-} from "./MultiTabAssistantChat.js";
-
 function parentFrameTargetOrigin(): string {
   return getFramePostMessageTargetOrigin() ?? window.location.origin;
 }
@@ -293,6 +287,7 @@ const AGENT_PANEL_CONTROL_STYLE = {
   lineHeight: 1,
 } satisfies React.CSSProperties;
 const ACTIVATE_KEYS = new Set(["Enter", " "]);
+const AGENT_PANEL_MENU_EXIT_DURATION_MS = 100;
 type AgentPanelOverlayOpenTiming = "animation-frame" | "timeout";
 
 export function deferAgentPanelOverlayOpen(
@@ -304,7 +299,7 @@ export function deferAgentPanelOverlayOpen(
   event.preventDefault();
   closeMenu();
   if (timing === "timeout") {
-    setTimeout(openOverlay, 0);
+    setTimeout(openOverlay, AGENT_PANEL_MENU_EXIT_DURATION_MS);
     return;
   }
   if (
@@ -379,96 +374,6 @@ function IconTooltip({
   );
 }
 
-type ChatHeaderRenderer = (
-  props: MultiTabAssistantChatHeaderProps,
-) => React.ReactNode;
-
-function ChatLoadingSkeleton({
-  renderHeader,
-  centerComposerWhenEmpty = false,
-  composerSlot,
-  composerAreaClassName,
-  composerLayoutVariant = "default",
-}: {
-  renderHeader?: ChatHeaderRenderer;
-  centerComposerWhenEmpty?: boolean;
-  composerSlot?: React.ReactNode;
-  composerAreaClassName?: string;
-  composerLayoutVariant?: AssistantChatProps["composerLayoutVariant"];
-}) {
-  const t = useT();
-  const noop = useCallback(() => {}, []);
-  const noopStr = useCallback((_id: string) => {}, []);
-  const stubProps: MultiTabAssistantChatHeaderProps = {
-    tabs: [],
-    activeTabId: "",
-    activeTabMessageCount: 0,
-    setActiveTabId: noopStr,
-    addTab: noop,
-    closeTab: noopStr,
-    closeOtherTabs: noopStr,
-    closeAllTabs: noop,
-    clearActiveTab: noop,
-    showHistory: false,
-    tabCount: 0,
-    toggleHistory: noop,
-  };
-  if (centerComposerWhenEmpty) {
-    return (
-      <div className="flex flex-col flex-1 min-h-0">
-        {renderHeader ? renderHeader(stubProps) : null}
-        <div
-          data-agent-empty-state="centered"
-          className="relative flex flex-1 flex-col h-full min-h-0 text-foreground"
-        >
-          <div className="agent-chat-scroll flex-1 overflow-y-auto overflow-x-hidden min-h-0">
-            <div className="agent-empty-state sr-only" aria-busy="true">
-              {t("agentChat.empty.loadingChat")}
-            </div>
-          </div>
-          {composerSlot}
-          <div className="agent-composer-stack">
-            <div
-              className={cn(
-                "agent-composer-area shrink-0 px-3 py-2",
-                composerLayoutVariant !== "default" &&
-                  `agent-composer-area--${composerLayoutVariant}`,
-                composerAreaClassName,
-              )}
-            >
-              <div
-                className={cn(
-                  "agent-composer-root flex flex-col rounded-lg border border-input bg-muted/45 transition-colors",
-                  composerLayoutVariant !== "default" &&
-                    `agent-composer-root--${composerLayoutVariant}`,
-                )}
-              >
-                <div className="px-3 pt-3">
-                  <div className="h-5 w-3/5 rounded bg-muted animate-pulse motion-reduce:animate-none" />
-                </div>
-                <div className="mt-auto flex items-center gap-2 px-3 py-2">
-                  <div className="h-5 w-5 rounded bg-muted animate-pulse motion-reduce:animate-none" />
-                  <div className="ml-auto h-4 w-28 rounded bg-muted animate-pulse motion-reduce:animate-none" />
-                  <div className="h-7 w-7 rounded-md bg-muted animate-pulse motion-reduce:animate-none" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-  return (
-    <div className="flex flex-col flex-1 min-h-0">
-      {renderHeader ? renderHeader(stubProps) : null}
-      {/* Composer-shaped placeholder keeps layout stable during chunk load */}
-      <div className="mt-auto shrink-0 border-t border-border p-3">
-        <div className="h-16 rounded-xl bg-muted/40 animate-pulse motion-reduce:animate-none" />
-      </div>
-    </div>
-  );
-}
-
 export function getAgentPanelChatTabGroups(
   tabs: MultiTabAssistantChatHeaderProps["tabs"],
   activeTabId: string,
@@ -2544,13 +2449,9 @@ function AgentPanelInner({
           </Suspense>
         )}
 
-        {/* Chat view — always mounted to preserve state.
-          Header (with tabs + mode buttons) is always visible.
-          Chat content is hidden when CLI or resources mode is active.
-          The wrapper collapses (no flex-1) when another mode is active
-          so it only takes the height of its header.
-          The Suspense boundary renders the header chrome immediately while
-          the lazy assistant-ui chunk loads in the background. */}
+        {/* Chat view stays mounted to preserve state. MultiTabAssistantChat
+          owns its transcript loading state; mounting it here keeps the
+          interactive composer available while that data loads. */}
         <div
           className={cn(
             "flex flex-col min-h-0",
@@ -2558,58 +2459,40 @@ function AgentPanelInner({
           )}
         >
           {mounted && (
-            <Suspense
-              fallback={
-                <ChatLoadingSkeleton
-                  renderHeader={showHeader ? renderChatHeader : undefined}
-                  centerComposerWhenEmpty={
-                    assistantChatProps.centerComposerWhenEmpty
-                  }
-                  composerSlot={assistantChatProps.composerSlot}
-                  composerAreaClassName={
-                    assistantChatProps.composerAreaClassName
-                  }
-                  composerLayoutVariant={
-                    assistantChatProps.composerLayoutVariant
-                  }
-                />
+            <MultiTabAssistantChat
+              {...assistantChatProps}
+              threadContentSlot={assistantChatProps.threadContentSlot}
+              agentChatSurface={effectiveAgentChatSurface}
+              apiUrl={apiUrl}
+              showHeader={false}
+              renderHeader={showHeader ? renderChatHeader : undefined}
+              showTabBar={showTabBar}
+              renderOverlay={
+                showPageHeader && !showHeader
+                  ? renderPageChatOverlay
+                  : undefined
               }
-            >
-              <MultiTabAssistantChatLazy
-                {...assistantChatProps}
-                threadContentSlot={assistantChatProps.threadContentSlot}
-                agentChatSurface={effectiveAgentChatSurface}
-                apiUrl={apiUrl}
-                showHeader={false}
-                renderHeader={showHeader ? renderChatHeader : undefined}
-                showTabBar={showTabBar}
-                renderOverlay={
-                  showPageHeader && !showHeader
-                    ? renderPageChatOverlay
-                    : undefined
-                }
-                contentHidden={mode !== "chat"}
-                emptyStateText={emptyStateText}
-                emptyStateAddon={emptyStateAddon}
-                emptyStateFooter={emptyStateFooter}
-                onMessageCountChange={onMessageCountChange}
-                suggestions={suggestions}
-                dynamicSuggestions={dynamicSuggestions}
-                suggestionPlacement={
-                  assistantChatProps.suggestionPlacement ?? "context-chips"
-                }
-                onSwitchToCli={() => switchMode("cli")}
-                execMode={execMode}
-                onExecModeChange={switchExecMode}
-                storageKey={storageKey}
-                restoreActiveThread={restoreActiveThread}
-                scope={scope}
-                isolateHistoryByScope={isolateHistoryByScope}
-                showScopeBadge={showScopeBadge}
-                browserTabId={browserTabId}
-                threadUrlSync={threadUrlSync}
-              />
-            </Suspense>
+              contentHidden={mode !== "chat"}
+              emptyStateText={emptyStateText}
+              emptyStateAddon={emptyStateAddon}
+              emptyStateFooter={emptyStateFooter}
+              onMessageCountChange={onMessageCountChange}
+              suggestions={suggestions}
+              dynamicSuggestions={dynamicSuggestions}
+              suggestionPlacement={
+                assistantChatProps.suggestionPlacement ?? "context-chips"
+              }
+              onSwitchToCli={() => switchMode("cli")}
+              execMode={execMode}
+              onExecModeChange={switchExecMode}
+              storageKey={storageKey}
+              restoreActiveThread={restoreActiveThread}
+              scope={scope}
+              isolateHistoryByScope={isolateHistoryByScope}
+              showScopeBadge={showScopeBadge}
+              browserTabId={browserTabId}
+              threadUrlSync={threadUrlSync}
+            />
           )}
         </div>
 

package/src/app/chat/AgentSidebar.spec.tsx

@@ -12,7 +12,11 @@ const mockHostedHarness = vi.hoisted(() => ({
 }));
 
 vi.mock("./AgentSidebarPanel.js", () => ({
-  AgentSidebarPanel: () => <div data-agent-sidebar-panel-loaded="true" />,
+  AgentSidebarPanel: () => (
+    <div data-agent-sidebar-panel-loaded="true">
+      <textarea aria-label="Chat composer" />
+    </div>
+  ),
 }));
 vi.mock("./agent-sidebar-url-sync.js", () => ({
   ScreenRefreshBoundary: ({
@@ -146,7 +150,7 @@ beforeEach(() => {
   });
 });
 
-describe("AgentSidebar lazy panel boundary", () => {
+describe("AgentSidebar panel", () => {
   it("pauses screen refresh until the panel is active", () => {
     renderSidebar(false);
 
@@ -229,7 +233,7 @@ describe("AgentSidebar lazy panel boundary", () => {
     ).toBeTruthy();
   });
 
-  it("shows the panel skeleton before the lazy body resolves for open-by-default users", async () => {
+  it("renders an interactive composer without a loading skeleton", () => {
     localStorage.setItem("agent-native-sidebar-open", "true");
     renderSidebar(true);
 
@@ -238,10 +242,11 @@ describe("AgentSidebar lazy panel boundary", () => {
     ).toBeTruthy();
     expect(
       container?.querySelector("[data-agent-sidebar-panel-skeleton='true']"),
-    ).toBeTruthy();
-    expect(
-      container?.querySelector("[data-agent-sidebar-panel-loaded='true']"),
     ).toBeNull();
+    const composer = container?.querySelector<HTMLTextAreaElement>(
+      "textarea[aria-label='Chat composer']",
+    );
+    expect(composer).toBeTruthy();
     const panel = container?.querySelector<HTMLElement>(
       ".agent-sidebar-panel[data-agent-sidebar-layout='desktop']",
     );
@@ -249,16 +254,13 @@ describe("AgentSidebar lazy panel boundary", () => {
       "var(--agent-kit-nav-surface)",
     );
 
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(
-      container?.querySelector("[data-agent-sidebar-panel-loaded='true']"),
-    ).toBeTruthy();
+    expect(composer?.isConnected).toBe(true);
+    expect(composer?.disabled).toBe(false);
+    composer!.value = "hello";
+    expect(composer?.value).toBe("hello");
   });
 
-  it("opens from the global shortcut while the panel body is still loading", async () => {
+  it("opens from the global shortcut with the composer available", async () => {
     renderSidebar(false);
     await act(async () => {});
 
@@ -278,14 +280,12 @@ describe("AgentSidebar lazy panel boundary", () => {
         ".agent-sidebar-panel[data-agent-sidebar-state='open']",
       ),
     ).toBeTruthy();
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-
     expect(
       container?.querySelector("[data-agent-sidebar-panel-loaded='true']"),
     ).toBeTruthy();
+    expect(
+      container?.querySelector("textarea[aria-label='Chat composer']"),
+    ).toBeTruthy();
   });
 
   it("leaves Cmd+I available to the app when the chat shortcut is disabled", async () => {

package/src/app/chat/AgentSidebar.tsx

@@ -58,7 +58,6 @@ import React, {
 import { flushSync } from "react-dom";
 
 import { useFirstRunOnboardingGateOwnsSurface } from "../onboarding/first-run-startup-gate.js";
-import { LazyChunkErrorBoundary } from "../shared/LazyChunkErrorBoundary.js";
 import { AgentSidebarOnboardingContext } from "./agent-sidebar-context.js";
 import {
   AGENT_CHAT_RUNNING_EVENT,
@@ -73,19 +72,14 @@ import {
   SettingsReturnPathRecorder,
   URLSync,
 } from "./agent-sidebar-url-sync.js";
+import { AgentSidebarPanel } from "./AgentSidebarPanel.js";
 import type { AgentChatSurfaceKind } from "./chat/surface-types.js";
 import type { AssistantChatProps } from "./chat/surface-types.js";
 import type { MultiTabAssistantChatProps } from "./MultiTabAssistantChat.js";
 import "@agent-native/core/client/mcp-app-host";
 
-const loadAgentSidebarPanel = () =>
-  import("./AgentSidebarPanel.js").then((m) => ({
-    default: m.AgentSidebarPanel,
-  }));
-const AgentSidebarPanelLazy = lazy(loadAgentSidebarPanel);
-
 export function preloadAgentChatSurface(): Promise<void> {
-  return loadAgentSidebarPanel().then(() => undefined);
+  return Promise.resolve();
 }
 
 const SHOW_FIRST_RUN_ONBOARDING = isFirstRunOnboardingEnabled();
@@ -223,31 +217,6 @@ function parentFrameTargetOrigin(): string {
   return getFramePostMessageTargetOrigin() ?? window.location.origin;
 }
 
-function AgentSidebarPanelSkeleton() {
-  const t = useT();
-  return (
-    <div
-      className="flex min-h-0 flex-1 flex-col bg-background animate-pulse"
-      data-agent-sidebar-panel-skeleton="true"
-      role="status"
-      aria-label={t("agentChat.common.loading")}
-    >
-      <div className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-3">
-        <div className="h-5 w-5 rounded bg-muted" />
-        <div className="h-4 w-24 rounded bg-muted" />
-      </div>
-      <div className="flex-1 space-y-4 p-4">
-        <div className="h-4 w-2/3 rounded bg-muted" />
-        <div className="h-4 w-5/6 rounded bg-muted" />
-        <div className="h-24 rounded-lg bg-muted" />
-      </div>
-      <div className="border-t border-border p-3">
-        <div className="h-10 rounded-lg bg-muted" />
-      </div>
-    </div>
-  );
-}
-
 export interface AgentSidebarProps {
   children: React.ReactNode;
   enabled?: boolean;
@@ -1160,67 +1129,63 @@ export function AgentSidebar({
         aria-hidden={sidebarAnimationEnabled && !panelOpen ? true : undefined}
       >
         <div className="agent-sidebar-panel-inner relative flex min-h-0 flex-1 flex-col">
-          <LazyChunkErrorBoundary fallback={<AgentSidebarPanelSkeleton />}>
-            <Suspense fallback={<AgentSidebarPanelSkeleton />}>
-              <AgentSidebarPanelLazy
-                emptyStateText={emptyStateText}
-                suggestions={suggestions}
-                dynamicSuggestions={dynamicSuggestions}
-                suggestionPlacement="context-chips"
-                composerToolbarSlot={composerToolbarSlot}
-                composerSlot={composerSlot}
-                composerContextProvider={composerContextProvider}
-                onComposerTextChange={onComposerTextChange}
-                imageModelMenu={imageModelMenu}
-                availableAgents={effectiveAvailableAgents}
-                availableModels={availableModels}
-                modelListLoading={modelListLoading}
-                selectedAgent={effectiveSelectedAgent}
-                onAgentChange={effectiveOnAgentChange}
-                hostedHarness={hostedHarnessEnabled}
-                onConnectProvider={onConnectProvider}
-                onConnectLocalRuntime={onConnectLocalRuntime}
-                runtime={runtime}
-                adapterReloadKey={adapterReloadKey}
-                threadFooterSlot={threadFooterSlot}
-                apiUrl={apiUrl}
-                agentChatSurface={agentChatSurface}
-                desktopIdentityUnauthenticated={desktopIdentityUnauthenticated}
-                desktopIdentityAuthenticated={desktopIdentityAuthenticated}
-                showTabBar={effectiveShowTabBar}
-                suppressInlineOpenApp={suppressInlineOpenApp}
-                composerPlaceholder={composerPlaceholder}
-                showMissingApiKeySetup={showMissingApiKeySetup}
-                missingApiKeySetupLayout="sidebar"
-                defaultMode={defaultMode}
-                onCollapse={() => setOpenPersisted(false)}
-                showCollapseButton={showCollapseButton}
-                onSnapTo75Percent={isMobile ? undefined : snapTo75Percent}
-                isWideDrawer={isMobile ? false : isWideDrawer}
-                onExitWideDrawer={isMobile ? undefined : exitWideDrawer}
-                onFullViewRequest={onFullscreenRequest}
-                onOpenSettings={onOpenSettings}
-                onNewCliTab={onNewCliTab}
-                onNewUiTab={onNewUiTab}
-                renderCliTab={renderCliTab}
-                newTabMode={newTabMode}
-                newCliTabLabel={newCliTabLabel}
-                newUiTabLabel={newUiTabLabel}
-                storageKey={storageKey}
-                restoreActiveThread={restoreActiveThread}
-                scope={scope}
-                chatHistory={chatHistory}
-                isolateHistoryByScope={isolateHistoryByScope}
-                showScopeBadge={showScopeBadge}
-                browserTabId={resolvedBrowserTabId}
-                threadUrlSync={threadUrlSync}
-                agentPageHref={agentPageHref}
-                thinkingDisplay={thinkingDisplay}
-                showModelSelector={showModelSelector}
-                chatOnly={chatOnly}
-              />
-            </Suspense>
-          </LazyChunkErrorBoundary>
+          <AgentSidebarPanel
+            emptyStateText={emptyStateText}
+            suggestions={suggestions}
+            dynamicSuggestions={dynamicSuggestions}
+            suggestionPlacement="context-chips"
+            composerToolbarSlot={composerToolbarSlot}
+            composerSlot={composerSlot}
+            composerContextProvider={composerContextProvider}
+            onComposerTextChange={onComposerTextChange}
+            imageModelMenu={imageModelMenu}
+            availableAgents={effectiveAvailableAgents}
+            availableModels={availableModels}
+            modelListLoading={modelListLoading}
+            selectedAgent={effectiveSelectedAgent}
+            onAgentChange={effectiveOnAgentChange}
+            hostedHarness={hostedHarnessEnabled}
+            onConnectProvider={onConnectProvider}
+            onConnectLocalRuntime={onConnectLocalRuntime}
+            runtime={runtime}
+            adapterReloadKey={adapterReloadKey}
+            threadFooterSlot={threadFooterSlot}
+            apiUrl={apiUrl}
+            agentChatSurface={agentChatSurface}
+            desktopIdentityUnauthenticated={desktopIdentityUnauthenticated}
+            desktopIdentityAuthenticated={desktopIdentityAuthenticated}
+            showTabBar={effectiveShowTabBar}
+            suppressInlineOpenApp={suppressInlineOpenApp}
+            composerPlaceholder={composerPlaceholder}
+            showMissingApiKeySetup={showMissingApiKeySetup}
+            missingApiKeySetupLayout="sidebar"
+            defaultMode={defaultMode}
+            onCollapse={() => setOpenPersisted(false)}
+            showCollapseButton={showCollapseButton}
+            onSnapTo75Percent={isMobile ? undefined : snapTo75Percent}
+            isWideDrawer={isMobile ? false : isWideDrawer}
+            onExitWideDrawer={isMobile ? undefined : exitWideDrawer}
+            onFullViewRequest={onFullscreenRequest}
+            onOpenSettings={onOpenSettings}
+            onNewCliTab={onNewCliTab}
+            onNewUiTab={onNewUiTab}
+            renderCliTab={renderCliTab}
+            newTabMode={newTabMode}
+            newCliTabLabel={newCliTabLabel}
+            newUiTabLabel={newUiTabLabel}
+            storageKey={storageKey}
+            restoreActiveThread={restoreActiveThread}
+            scope={scope}
+            chatHistory={chatHistory}
+            isolateHistoryByScope={isolateHistoryByScope}
+            showScopeBadge={showScopeBadge}
+            browserTabId={resolvedBrowserTabId}
+            threadUrlSync={threadUrlSync}
+            agentPageHref={agentPageHref}
+            thinkingDisplay={thinkingDisplay}
+            showModelSelector={showModelSelector}
+            chatOnly={chatOnly}
+          />
         </div>
       </div>
       {showResizeHandle && isLeft && (