@nextclaw/ui 0.18.4 → 0.19.1

package/src/features/chat/features/message/utils/chat-tool-call-stress-fixture.utils.ts

@@ -0,0 +1,122 @@
+import type { ChatMessageViewModel } from "@nextclaw/agent-chat-ui";
+import type { NcpMessage } from "@nextclaw/ncp";
+import { adaptNcpMessagePartsForChat, adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
+import { adaptChatMessage } from "./chat-message.utils";
+
+export type ChatToolCallStressConfig = {
+  toolCallCount: number;
+  argumentBytesPerCall: number;
+  resultBytesPerCall: number;
+};
+
+export const DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG: ChatToolCallStressConfig = {
+  toolCallCount: 200,
+  argumentBytesPerCall: 8_192,
+  resultBytesPerCall: 8_192,
+};
+
+const STRESS_TOOL_NAMES = ["exec_command", "read_file", "web_fetch"];
+const FILLER = "0123456789abcdefghijklmnopqrstuvwxyz";
+
+const STRESS_ADAPTER_TEXTS = {
+  roleLabels: {
+    user: "User",
+    assistant: "Assistant",
+    tool: "Tool",
+    system: "System",
+    fallback: "Message",
+  },
+  reasoningLabel: "Reasoning",
+  toolCallLabel: "Tool call",
+  toolResultLabel: "Tool result",
+  toolInputLabel: "Input",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "Output",
+  toolStatusPreparingLabel: "Preparing",
+  toolStatusRunningLabel: "Running",
+  toolStatusCompletedLabel: "Completed",
+  toolStatusFailedLabel: "Failed",
+  toolStatusCancelledLabel: "Cancelled",
+  imageAttachmentLabel: "Image attachment",
+  fileAttachmentLabel: "File attachment",
+  unknownPartLabel: "Unknown part",
+};
+
+function createPayload(bytes: number, callIndex: number, kind: "argument" | "result") {
+  return {
+    request: {
+      id: `${kind}-${callIndex}`,
+      metadata: {
+        callIndex,
+        kind,
+        labels: ["chat", "stress", "nested-payload"],
+      },
+      nested: {
+        levelOne: {
+          levelTwo: {
+            levelThree: {
+              payload: FILLER.repeat(Math.ceil(bytes / FILLER.length)).slice(0, bytes),
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+export function createChatToolCallStressMessage(
+  config: ChatToolCallStressConfig = DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG,
+  messageId = "chat-tool-call-stress-message",
+): NcpMessage {
+  const parts: NcpMessage["parts"] = [
+    {
+      type: "reasoning",
+      text: "Simulating a dense tool-call execution trace.",
+    },
+  ];
+  for (let index = 0; index < config.toolCallCount; index += 1) {
+    parts.push({
+      type: "tool-invocation",
+      toolCallId: `stress-call-${index}`,
+      toolName: STRESS_TOOL_NAMES[index % STRESS_TOOL_NAMES.length]!,
+      state: "result",
+      args: createPayload(config.argumentBytesPerCall, index, "argument"),
+      result: createPayload(config.resultBytesPerCall, index, "result"),
+      execution: {
+        durationMs: 15 + (index % 200),
+      },
+    });
+  }
+  parts.push({
+    type: "text",
+    text: "Stress fixture completed.",
+  });
+  return {
+    id: messageId,
+    sessionId: "chat-tool-call-stress-session",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-08-19T00:00:00.000Z",
+    parts,
+  };
+}
+
+export function createChatToolCallStressViewModel(
+  config: ChatToolCallStressConfig = DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG,
+  messageId?: string,
+): ChatMessageViewModel {
+  const message = createChatToolCallStressMessage(config, messageId);
+  const uiMessage = adaptNcpMessageToUiMessage(message);
+  return adaptChatMessage(
+    {
+      id: uiMessage.id,
+      role: uiMessage.role,
+      meta: uiMessage.meta,
+      parts: adaptNcpMessagePartsForChat(message.parts),
+    },
+    {
+      texts: STRESS_ADAPTER_TEXTS,
+      formatTimestamp: (value) => value,
+    },
+  );
+}

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-conversation.test.tsx

@@ -10,6 +10,7 @@ import {
 const mocks = vi.hoisted(() => ({
   acceptRun: vi.fn(),
   continueRun: vi.fn(),
+  fetchNcpSessionMessageDetail: vi.fn(),
   fetchNcpSessionMessages: vi.fn(),
   editMessage: vi.fn(),
   prependHistory: vi.fn(),
@@ -47,6 +48,7 @@ vi.mock("@/shared/lib/api", async (importOriginal) => {
   const actual = await importOriginal<typeof SharedApi>();
   return {
     ...actual,
+    fetchNcpSessionMessageDetail: mocks.fetchNcpSessionMessageDetail,
     fetchNcpSessionMessages: mocks.fetchNcpSessionMessages,
     nextclawClient: {
       ...actual.nextclawClient,
@@ -89,6 +91,7 @@ vi.mock("@/features/system-status", () => ({
 function resetConversationMocks(): void {
   mocks.acceptRun.mockReset();
   mocks.continueRun.mockReset();
+  mocks.fetchNcpSessionMessageDetail.mockReset();
   mocks.fetchNcpSessionMessages.mockReset();
   mocks.editMessage.mockReset();
   mocks.prependHistory.mockReset();
@@ -134,6 +137,7 @@ describe("useNcpSessionConversation", () => {
 
     expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledWith("session-1", {
       limit: 300,
+      toolPayload: "summary",
       signal: expect.any(AbortSignal),
     });
     expect(result).toEqual({
@@ -152,6 +156,7 @@ describe("useNcpSessionConversation", () => {
         compactedMessageCount: 0,
         updatedAt: "2026-05-05T00:00:00.000Z",
       },
+      deferredToolPayloads: {},
       total: 1,
       pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
     });
@@ -171,6 +176,7 @@ describe("useNcpSessionConversation", () => {
       messages: [],
       status: "idle",
       total: 0,
+      deferredToolPayloads: {},
       pageInfo: { startCursor: null, hasPreviousPage: false },
     });
   });
@@ -433,6 +439,7 @@ describe("useNcpSessionConversation history and hydration", () => {
       {
         limit: 40,
         cursor: "cursor-2",
+        toolPayload: "summary",
         signal: expect.any(AbortSignal),
       },
     );
@@ -448,6 +455,68 @@ describe("useNcpSessionConversation history and hydration", () => {
     expect(result.current.messageTotal).toBe(5);
   });
 
+  it("loads and caches one complete message when deferred tool details are requested", async () => {
+    const summaryMessage: NcpMessage = {
+      id: "assistant-large",
+      sessionId: "session-1",
+      role: "assistant",
+      status: "final",
+      timestamp: "2026-08-19T00:00:00.000Z",
+      parts: [{
+        type: "tool-invocation",
+        toolCallId: "tool-1",
+        toolName: "exec_command",
+        state: "result",
+        args: { command: "pnpm test" },
+      }],
+    };
+    const fullMessage: NcpMessage = {
+      ...summaryMessage,
+      parts: [{
+        ...summaryMessage.parts[0] as Extract<NcpMessage["parts"][number], { type: "tool-invocation" }>,
+        result: { output: "complete output" },
+      }],
+    };
+    mocks.visibleMessages.push(summaryMessage);
+    mocks.fetchNcpSessionMessages
+      .mockResolvedValueOnce({
+        sessionId: "session-1",
+        status: "idle",
+        total: 1,
+        pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
+        messages: [summaryMessage],
+        deferredToolPayloads: { "assistant-large": { cursor: "cursor-detail" } },
+      });
+    mocks.fetchNcpSessionMessageDetail.mockResolvedValue(fullMessage);
+    const { result } = renderHook(() => useNcpSessionConversation("session-1"));
+    const loadSeed = mocks.hydratedCalls[0]?.loadSeed as (
+      sessionId: string,
+      signal: AbortSignal,
+    ) => Promise<{ messages: unknown[]; status: string }>;
+    await act(async () => {
+      await loadSeed("session-1", new AbortController().signal);
+    });
+    expect(result.current.messageDetailStates["assistant-large"]).toBe("summary");
+
+    await act(async () => {
+      await Promise.all([
+        result.current.loadMessageDetails("assistant-large"),
+        result.current.loadMessageDetails("assistant-large"),
+      ]);
+    });
+
+    expect(mocks.fetchNcpSessionMessageDetail).toHaveBeenCalledWith(
+      "session-1",
+      "assistant-large",
+      "cursor-detail",
+      expect.any(AbortSignal),
+    );
+    expect(mocks.fetchNcpSessionMessageDetail).toHaveBeenCalledTimes(1);
+    expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledTimes(1);
+    expect(result.current.messageDetailStates["assistant-large"]).toBe("ready");
+    expect(result.current.visibleMessages[0]).toBe(fullMessage);
+  });
+
   it("drops an in-flight history page when the viewer switches sessions", async () => {
     let resolvePreviousPage = (_value: unknown): void => {
       throw new Error("Previous page request was not initialized.");

package/src/features/chat/features/ncp/hooks/use-ncp-session-conversation.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
 import { useHydratedNcpAgent } from "@nextclaw/ncp-react";
 import type {
+  NcpMessage,
   NcpRunHandle,
 } from "@nextclaw/ncp";
 import type {
@@ -74,6 +75,21 @@ function useSyncReadyRetryVersion(
   }, [readyRetrySignature, syncReadyRetryVersion]);
 }
 
+function overlaySessionMessageDetails(
+  messages: readonly NcpMessage[],
+  details: Readonly<Record<string, NcpMessage>>,
+) {
+  return messages.map((message) => {
+    const detail = details[message.id];
+    if (!detail) return message;
+    if (!message.metadata && !detail.metadata) return detail;
+    return {
+      ...detail,
+      metadata: { ...(message.metadata ?? {}), ...(detail.metadata ?? {}) },
+    };
+  });
+}
+
 export function useNcpSessionConversation(
   sessionId: string | undefined,
   options: UseNcpSessionConversationOptions = {},
@@ -85,6 +101,7 @@ export function useNcpSessionConversation(
   const pendingCommandSessionIdRef = useRef<string | null>(null);
   const {
     loadSeed,
+    loadMessageDetails,
     loadPreviousMessages: loadPreviousHistory,
     state: visibleHistoryState,
   } = useNcpSessionMessageHistory({
@@ -180,9 +197,17 @@ export function useNcpSessionConversation(
   useSyncReadyRetryVersion(readyRetrySignature, () => {
     setHydrationRetryVersion((current) => current + 1);
   });
+  const visibleMessages = useMemo(
+    () => overlaySessionMessageDetails(
+      agent.visibleMessages,
+      visibleHistoryState.messageDetails,
+    ),
+    [agent.visibleMessages, visibleHistoryState.messageDetails],
+  );
   return useMemo(
     () => ({
       ...agent,
+      visibleMessages,
       isSending:
         agent.isSending || pendingCommandSessionId === sessionId,
       editMessage,
@@ -196,16 +221,20 @@ export function useNcpSessionConversation(
       historyError: visibleHistoryState.error,
       isLoadingPreviousMessages: visibleHistoryState.isLoading,
       loadPreviousMessages,
+      loadMessageDetails,
+      messageDetailStates: visibleHistoryState.messageDetailStates,
       messageTotal: visibleHistoryState.total,
     }),
     [
       agent,
       continueRun,
       editMessage,
+      loadMessageDetails,
       loadPreviousMessages,
       pendingCommandSessionId,
       sessionId,
       visibleHistoryState,
+      visibleMessages,
     ],
   );
 }

package/src/features/chat/features/ncp/hooks/use-ncp-session-message-history.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { NcpMessage, NcpSessionMessagePageInfo } from "@nextclaw/ncp";
 import type { NcpConversationSeed } from "@nextclaw/ncp-react";
 import {
+  fetchNcpSessionMessageDetail,
   fetchNcpSessionMessages,
   type SessionContextWindowView,
 } from "@/shared/lib/api";
@@ -10,10 +11,13 @@ export const DEFAULT_NCP_SESSION_MESSAGE_LIMIT = 40;
 
 type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
   contextWindow?: SessionContextWindowView | null;
+  deferredToolPayloads: Record<string, { cursor: string }>;
   total: number;
   pageInfo: NcpSessionMessagePageInfo;
 };
 
+export type SessionMessageToolPayloadState = "summary" | "loading" | "ready" | "error";
+
 type SessionHistoryState = {
   sessionId: string | null;
   contextWindow: SessionContextWindowView | null;
@@ -22,6 +26,9 @@ type SessionHistoryState = {
   hasPreviousPage: boolean;
   isLoading: boolean;
   error: Error | null;
+  deferredToolPayloads: Record<string, { cursor: string }>;
+  messageDetails: Record<string, NcpMessage>;
+  messageDetailStates: Record<string, SessionMessageToolPayloadState>;
 };
 
 const EMPTY_SESSION_HISTORY_STATE: SessionHistoryState = {
@@ -32,6 +39,9 @@ const EMPTY_SESSION_HISTORY_STATE: SessionHistoryState = {
   hasPreviousPage: false,
   isLoading: false,
   error: null,
+  deferredToolPayloads: {},
+  messageDetails: {},
+  messageDetailStates: {},
 };
 
 function isMissingNcpSessionError(error: unknown): boolean {
@@ -49,6 +59,7 @@ export async function fetchNcpSessionConversationSeed(
   try {
     const response = await fetchNcpSessionMessages(sessionId, {
       limit: messageLimit,
+      toolPayload: "summary",
       signal,
     });
     signal.throwIfAborted();
@@ -56,6 +67,7 @@ export async function fetchNcpSessionConversationSeed(
       messages: response.messages,
       status: response.status ?? "idle",
       contextWindow: response.contextWindow ?? null,
+      deferredToolPayloads: response.deferredToolPayloads ?? {},
       total: response.total,
       pageInfo: response.pageInfo,
     };
@@ -68,11 +80,80 @@ export async function fetchNcpSessionConversationSeed(
       messages: [],
       status: "idle",
       total: 0,
+      deferredToolPayloads: {},
       pageInfo: { startCursor: null, hasPreviousPage: false },
     };
   }
 }
 
+type UpdateSessionHistoryState = (
+  sessionId: string,
+  update: (current: SessionHistoryState) => SessionHistoryState,
+) => void;
+
+function useSessionMessageDetailLoader(params: {
+  sessionId: string | undefined;
+  historyStateRef: { current: SessionHistoryState };
+  updateHistoryState: UpdateSessionHistoryState;
+}) {
+  const { historyStateRef, sessionId, updateHistoryState } = params;
+  const requestsRef = useRef(new Map<string, {
+    controller: AbortController;
+    promise: Promise<void>;
+  }>());
+  useEffect(() => {
+    const requests = requestsRef.current;
+    for (const request of requests.values()) request.controller.abort();
+    requests.clear();
+    return () => {
+      for (const request of requests.values()) request.controller.abort();
+      requests.clear();
+    };
+  }, [sessionId]);
+  return useCallback(async (messageId: string): Promise<void> => {
+    if (!sessionId) return;
+    const history = historyStateRef.current;
+    if (history.sessionId !== sessionId || history.messageDetails[messageId]) return;
+    const cursor = history.deferredToolPayloads[messageId]?.cursor;
+    if (!cursor) return;
+    const existing = requestsRef.current.get(messageId);
+    if (existing) return await existing.promise;
+    const controller = new AbortController();
+    updateHistoryState(sessionId, (current) => ({
+      ...current,
+      messageDetailStates: { ...current.messageDetailStates, [messageId]: "loading" },
+    }));
+    const promise = (async () => {
+      try {
+        const message = await fetchNcpSessionMessageDetail(
+          sessionId,
+          messageId,
+          cursor,
+          controller.signal,
+        );
+        if (controller.signal.aborted) return;
+        updateHistoryState(sessionId, (current) => ({
+          ...current,
+          messageDetails: { ...current.messageDetails, [messageId]: message },
+          messageDetailStates: { ...current.messageDetailStates, [messageId]: "ready" },
+        }));
+      } catch {
+        if (controller.signal.aborted) return;
+        updateHistoryState(sessionId, (current) => ({
+          ...current,
+          messageDetailStates: { ...current.messageDetailStates, [messageId]: "error" },
+        }));
+      } finally {
+        if (requestsRef.current.get(messageId)?.controller === controller) {
+          requestsRef.current.delete(messageId);
+        }
+      }
+    })();
+    requestsRef.current.set(messageId, { controller, promise });
+    await promise;
+  }, [historyStateRef, sessionId, updateHistoryState]);
+}
+
 export function useNcpSessionMessageHistory(params: {
   sessionId: string | undefined;
   messageLimit: number;
@@ -104,8 +185,15 @@ export function useNcpSessionMessageHistory(params: {
   useEffect(() => {
     historyRequestRef.current?.abort();
     historyRequestRef.current = null;
-    return () => historyRequestRef.current?.abort();
+    return () => {
+      historyRequestRef.current?.abort();
+    };
   }, [sessionId]);
+  const loadMessageDetails = useSessionMessageDetailLoader({
+    historyStateRef,
+    sessionId,
+    updateHistoryState,
+  });
   const loadSeed = useCallback(
     async (targetSessionId: string, signal: AbortSignal) => {
       void hydrationRetryVersion;
@@ -118,6 +206,11 @@ export function useNcpSessionMessageHistory(params: {
         updateHistoryState(targetSessionId, (current) => ({
           ...current,
           contextWindow: seed.contextWindow ?? null,
+          deferredToolPayloads: seed.deferredToolPayloads,
+          messageDetails: {},
+          messageDetailStates: Object.fromEntries(
+            Object.keys(seed.deferredToolPayloads).map((messageId) => [messageId, "summary"]),
+          ),
           total: seed.total,
           cursor: seed.pageInfo.startCursor,
           hasPreviousPage: seed.pageInfo.hasPreviousPage,
@@ -151,6 +244,7 @@ export function useNcpSessionMessageHistory(params: {
         const response = await fetchNcpSessionMessages(sessionId, {
           limit: messageLimit,
           cursor: history.cursor,
+          toolPayload: "summary",
           signal: controller.signal,
         });
         if (
@@ -163,6 +257,16 @@ export function useNcpSessionMessageHistory(params: {
         updateHistoryState(sessionId, (current) => ({
           ...current,
           contextWindow: response.contextWindow ?? current.contextWindow,
+          deferredToolPayloads: {
+            ...current.deferredToolPayloads,
+            ...(response.deferredToolPayloads ?? {}),
+          },
+          messageDetailStates: {
+            ...Object.fromEntries(
+              Object.keys(response.deferredToolPayloads ?? {}).map((messageId) => [messageId, "summary"]),
+            ),
+            ...current.messageDetailStates,
+          },
           total: response.total,
           cursor: response.pageInfo.startCursor,
           hasPreviousPage: response.pageInfo.hasPreviousPage,
@@ -189,6 +293,7 @@ export function useNcpSessionMessageHistory(params: {
   return {
     loadSeed,
     loadPreviousMessages,
+    loadMessageDetails,
     state:
       historyState.sessionId === sessionId
         ? historyState

package/src/features/chat/features/session/utils/ncp-session-adapter.utils.ts

@@ -29,17 +29,6 @@ const SESSION_ACTIVITY_PREVIEW_STATUS_KIND_SET = new Set<NonNullable<SessionActi
   'run-interrupted'
 ]);
 
-function stringifyUnknown(value: unknown): string {
-  if (typeof value === 'string') {
-    return value;
-  }
-  try {
-    return JSON.stringify(value ?? {});
-  } catch {
-    return String(value ?? '');
-  }
-}
-
 function buildNcpAssetContentUrl(assetUri: string): string {
   const query = new URLSearchParams({ uri: assetUri });
   return `${API_BASE}/api/ncp/assets/content?${query.toString()}`;
@@ -283,7 +272,8 @@ function toUiParts(parts: NcpMessagePart[]): UIMessage['parts'] {
           status: mapToolStatus(part),
           toolCallId: part.toolCallId ?? `${part.toolName}-${Math.random().toString(36).slice(2, 8)}`,
           toolName: part.toolName,
-          args: stringifyUnknown(part.args),
+          args: typeof part.args === "string" ? part.args : "",
+          parsedArgs: part.args,
           result: part.result,
           ...(part.execution ? { execution: { ...part.execution } } : {})
         }

package/src/features/chat/managers/__tests__/chat-ui.manager.test.ts

@@ -34,6 +34,7 @@ function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelA
     contentPath: '/api/panel-apps/encoded-reader/content',
     createdAt: '2026-06-09T00:00:00.000Z',
     favorite: false,
+    mainSidebar: false,
     fileName: 'reader.panel',
     id: 'encoded-reader',
     kind: 'folder',
@@ -97,13 +98,14 @@ describe('ChatUiManager content display', () => {
     });
 
     expect(docBrowserManager.openTarget).toHaveBeenCalledWith({
-      dedupeKey: 'panel-app:encoded-reader',
+      dedupeKey: 'panel-app:reader',
       contentParams: {
         file: { path: '/tmp/photo.png' },
       },
+      dockIcon: undefined,
       historyPolicy: 'managed',
       kind: 'panel-app',
-      resourceUri: 'nextclaw://panel-app/encoded-reader',
+      resourceUri: 'nextclaw://panel-app/reader',
       title: 'Reader',
       url: '/api/panel-apps/encoded-reader/content',
     }, {

package/src/features/panel-apps/components/__tests__/panel-app-list-item.test.tsx

@@ -1,7 +1,16 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import { PanelAppListItem } from '../panel-app-list-item';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
+
+const mainSidebarMutation = vi.hoisted(() => ({
+  isPending: false,
+  mutate: vi.fn(),
+}));
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  useUpdatePanelAppPreferences: () => mainSidebarMutation,
+}));
 
 const baseEntry = {
   id: 'demo',
@@ -15,12 +24,18 @@ const baseEntry = {
   updatedAt: '2026-05-28T09:00:00.000Z',
   sizeBytes: 12,
   favorite: false,
+  mainSidebar: false,
   clientDeclared: false,
   clientGranted: false,
   openCount: 0,
 };
 
 describe('PanelAppListItem', () => {
+  beforeEach(() => {
+    mainSidebarMutation.isPending = false;
+    mainSidebarMutation.mutate.mockReset();
+  });
+
   it('keeps panel app metadata compact below the icon-title row', () => {
     const { container } = render(
       <PanelAppListItem
@@ -61,4 +76,44 @@ describe('PanelAppListItem', () => {
 
     expect(onDelete).toHaveBeenCalledTimes(1);
   });
+
+  it('keeps main-sidebar placement in the low-frequency more-actions menu', async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <PanelAppListItem
+        deletePending={false}
+        entry={baseEntry}
+        favoritePending={false}
+        onDelete={vi.fn()}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    await user.click(screen.getByRole('button', { name: 'Add to main sidebar' }));
+    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
+      id: 'demo',
+      preferences: { mainSidebar: true },
+    });
+
+    rerender(
+      <PanelAppListItem
+        deletePending={false}
+        entry={{ ...baseEntry, mainSidebar: true }}
+        favoritePending={false}
+        onDelete={vi.fn()}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: 'Remove from main sidebar' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    await user.click(screen.getByRole('button', { name: 'Remove from main sidebar' }));
+    expect(mainSidebarMutation.mutate).toHaveBeenLastCalledWith({
+      id: 'demo',
+      preferences: { mainSidebar: false },
+    });
+  });
 });