@nextclaw/ui 0.19.2 → 0.19.4

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

@@ -1,20 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { NcpMessage, NcpSessionMessagePageInfo } from "@nextclaw/ncp";
-import type { NcpConversationSeed } from "@nextclaw/ncp-react";
+import type { NcpMessage } from "@nextclaw/ncp";
 import {
   fetchNcpSessionMessageDetail,
   fetchNcpSessionMessages,
   type SessionContextWindowView,
 } from "@/shared/lib/api";
-
-export const DEFAULT_NCP_SESSION_MESSAGE_LIMIT = 40;
-
-type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
-  contextWindow?: SessionContextWindowView | null;
-  deferredToolPayloads: Record<string, { cursor: string }>;
-  total: number;
-  pageInfo: NcpSessionMessagePageInfo;
-};
+import {
+  useNcpSessionSeedLoader,
+  type NcpConversationSeedWithContextWindow,
+} from "@/features/chat/features/ncp/hooks/use-ncp-session-seed-loader";
 
 export type SessionMessageToolPayloadState = "summary" | "loading" | "ready" | "error";
 
@@ -44,48 +38,6 @@ const EMPTY_SESSION_HISTORY_STATE: SessionHistoryState = {
   messageDetailStates: {},
 };
 
-function isMissingNcpSessionError(error: unknown): boolean {
-  return (
-    error instanceof Error && error.message.includes("ncp session not found:")
-  );
-}
-
-export async function fetchNcpSessionConversationSeed(
-  sessionId: string,
-  signal: AbortSignal,
-  messageLimit = DEFAULT_NCP_SESSION_MESSAGE_LIMIT,
-): Promise<NcpConversationSeedWithContextWindow> {
-  signal.throwIfAborted();
-  try {
-    const response = await fetchNcpSessionMessages(sessionId, {
-      limit: messageLimit,
-      toolPayload: "summary",
-      signal,
-    });
-    signal.throwIfAborted();
-    return {
-      messages: response.messages,
-      status: response.status ?? "idle",
-      contextWindow: response.contextWindow ?? null,
-      deferredToolPayloads: response.deferredToolPayloads ?? {},
-      total: response.total,
-      pageInfo: response.pageInfo,
-    };
-  } catch (error) {
-    signal.throwIfAborted();
-    if (!isMissingNcpSessionError(error)) {
-      throw error;
-    }
-    return {
-      messages: [],
-      status: "idle",
-      total: 0,
-      deferredToolPayloads: {},
-      pageInfo: { startCursor: null, hasPreviousPage: false },
-    };
-  }
-}
-
 type UpdateSessionHistoryState = (
   sessionId: string,
   update: (current: SessionHistoryState) => SessionHistoryState,
@@ -194,35 +146,33 @@ export function useNcpSessionMessageHistory(params: {
     sessionId,
     updateHistoryState,
   });
-  const loadSeed = useCallback(
-    async (targetSessionId: string, signal: AbortSignal) => {
-      void hydrationRetryVersion;
-      const seed = await fetchNcpSessionConversationSeed(
-        targetSessionId,
-        signal,
-        messageLimit,
-      );
-      if (!signal.aborted) {
-        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,
-          error: null,
-        }));
-      }
-      return { messages: seed.messages, status: seed.status };
-    },
-    [hydrationRetryVersion, messageLimit, updateHistoryState],
-  );
+  const onSeedLoaded = useCallback((
+    targetSessionId: string,
+    seed: NcpConversationSeedWithContextWindow,
+  ) => {
+    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,
+      error: null,
+    }));
+  }, [updateHistoryState]);
+  const loadSeed = useNcpSessionSeedLoader({
+    hydrationRetryVersion,
+    messageLimit,
+    onSeedLoaded,
+  });
   const loadPreviousMessages = useCallback(
-    async (prependHistory: (messages: ReadonlyArray<NcpMessage>) => void) => {
+    async (
+      prependHistory: (messages: ReadonlyArray<NcpMessage>) => void,
+    ) => {
       const history = historyStateRef.current;
       if (
         !sessionId ||

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

@@ -0,0 +1,134 @@
+import { useCallback, useRef } from "react";
+import type { NcpSessionMessagePageInfo } from "@nextclaw/ncp";
+import type { NcpConversationSeed } from "@nextclaw/ncp-react";
+import {
+  fetchNcpSessionMessages,
+  type NcpSessionMessagesView,
+  type SessionContextWindowView,
+} from "@/shared/lib/api";
+
+export const DEFAULT_NCP_SESSION_MESSAGE_LIMIT = 20;
+
+export type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
+  contextWindow?: SessionContextWindowView | null;
+  deferredToolPayloads: Record<string, { cursor: string }>;
+  total: number;
+  pageInfo: NcpSessionMessagePageInfo;
+};
+
+function isMissingNcpSessionError(error: unknown): boolean {
+  return error instanceof Error && error.message.includes("ncp session not found:");
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+async function waitForPrefetch<T>(promise: Promise<T>, signal: AbortSignal): Promise<T> {
+  signal.throwIfAborted();
+  return await new Promise<T>((resolve, reject) => {
+    const abort = () => reject(new DOMException("Aborted", "AbortError"));
+    signal.addEventListener("abort", abort, { once: true });
+    void promise.then(resolve, reject).finally(() => {
+      signal.removeEventListener("abort", abort);
+    });
+  });
+}
+
+async function takeInitialSessionMessagesPrefetch(params: {
+  sessionId: string;
+  messageLimit: number;
+  signal: AbortSignal;
+}): Promise<NcpSessionMessagesView | null> {
+  const { messageLimit, sessionId, signal } = params;
+  const prefetch = window.__NEXTCLAW_INITIAL_SESSION_MESSAGES_PREFETCH__;
+  if (
+    !prefetch ||
+    prefetch.consumed ||
+    prefetch.sessionId !== sessionId ||
+    prefetch.limit !== messageLimit
+  ) {
+    return null;
+  }
+  prefetch.consumed = true;
+  const result = await waitForPrefetch(prefetch.promise, signal);
+  signal.throwIfAborted();
+  if (!result?.responseOk || !isRecord(result.payload)) return null;
+  const { payload } = result;
+  if (payload.ok !== true || !isRecord(payload.data)) return null;
+  const { data } = payload;
+  if (
+    data.sessionId !== sessionId ||
+    !Array.isArray(data.messages) ||
+    !isRecord(data.pageInfo)
+  ) {
+    return null;
+  }
+  return data as NcpSessionMessagesView;
+}
+
+export async function fetchNcpSessionConversationSeed(
+  sessionId: string,
+  signal: AbortSignal,
+  messageLimit = DEFAULT_NCP_SESSION_MESSAGE_LIMIT,
+  payloadMode: "compact" | "standard" = "compact",
+): Promise<NcpConversationSeedWithContextWindow> {
+  signal.throwIfAborted();
+  try {
+    const prefetchedResponse = payloadMode === "compact"
+      ? await takeInitialSessionMessagesPrefetch({ sessionId, messageLimit, signal })
+      : null;
+    const response = prefetchedResponse ?? await fetchNcpSessionMessages(sessionId, {
+      limit: messageLimit,
+      toolPayload: "summary",
+      initialPayload: payloadMode === "compact" ? "compact" : undefined,
+      signal,
+    });
+    signal.throwIfAborted();
+    return {
+      messages: response.messages,
+      status: response.status ?? "idle",
+      contextWindow: response.contextWindow ?? null,
+      deferredToolPayloads: response.deferredToolPayloads ?? {},
+      total: response.total,
+      pageInfo: response.pageInfo,
+    };
+  } catch (error) {
+    signal.throwIfAborted();
+    if (!isMissingNcpSessionError(error)) throw error;
+    return {
+      messages: [],
+      status: "idle",
+      total: 0,
+      deferredToolPayloads: {},
+      pageInfo: { startCursor: null, hasPreviousPage: false },
+    };
+  }
+}
+
+export function useNcpSessionSeedLoader(params: {
+  hydrationRetryVersion: number;
+  messageLimit: number;
+  onSeedLoaded: (
+    sessionId: string,
+    seed: NcpConversationSeedWithContextWindow,
+  ) => void;
+}) {
+  const { hydrationRetryVersion, messageLimit, onSeedLoaded } = params;
+  const hydratedSessionsRef = useRef(new Set<string>());
+  return useCallback(async (sessionId: string, signal: AbortSignal) => {
+    void hydrationRetryVersion;
+    const payloadMode = hydratedSessionsRef.current.has(sessionId) ? "standard" : "compact";
+    const seed = await fetchNcpSessionConversationSeed(
+      sessionId,
+      signal,
+      messageLimit,
+      payloadMode,
+    );
+    if (!signal.aborted) {
+      hydratedSessionsRef.current.add(sessionId);
+      onSeedLoaded(sessionId, seed);
+    }
+    return { messages: seed.messages, status: seed.status };
+  }, [hydrationRetryVersion, messageLimit, onSeedLoaded]);
+}

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

@@ -7,7 +7,7 @@ import type {
   SessionEntryView,
   ThinkingLevel
 } from '@/shared/lib/api';
-import { API_BASE } from '@/shared/lib/api';
+import { buildNcpAssetContentUrl } from '@/shared/lib/api';
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -29,11 +29,6 @@ const SESSION_ACTIVITY_PREVIEW_STATUS_KIND_SET = new Set<NonNullable<SessionActi
   'run-interrupted'
 ]);
 
-function buildNcpAssetContentUrl(assetUri: string): string {
-  const query = new URLSearchParams({ uri: assetUri });
-  return `${API_BASE}/api/ncp/assets/content?${query.toString()}`;
-}
-
 function readOptionalString(value: unknown): string | null {
   if (typeof value !== 'string') {
     return null;

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

@@ -1,6 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
+import { useViewportLayoutStore } from '@/app/stores/viewport-layout.store';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
 
 const mainSidebarMutation = vi.hoisted(() => ({
@@ -32,6 +34,8 @@ const baseEntry = {
 
 describe('PanelAppListItem', () => {
   beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
     mainSidebarMutation.isPending = false;
     mainSidebarMutation.mutate.mockReset();
   });
@@ -79,6 +83,7 @@ describe('PanelAppListItem', () => {
 
   it('keeps main-sidebar placement in the low-frequency more-actions menu', async () => {
     const user = userEvent.setup();
+    viewportLayoutManager.setMainSidebarAppGroupCollapsed(true);
     const { rerender } = render(
       <PanelAppListItem
         deletePending={false}
@@ -97,6 +102,9 @@ describe('PanelAppListItem', () => {
       id: 'demo',
       preferences: { mainSidebar: true },
     });
+    expect(
+      useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,
+    ).toBe(false);
 
     rerender(
       <PanelAppListItem

package/src/features/panel-apps/components/__tests__/panel-app-main-sidebar-nav.test.tsx

@@ -2,6 +2,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import {
   getMainSidebarPanelApps,
   PanelAppMainSidebarNav,
@@ -21,7 +23,9 @@ vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
   }),
 }));
 
-function createEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
+function createEntry(
+  overrides: Partial<PanelAppEntryView> = {},
+): PanelAppEntryView {
   return {
     appId: "demo",
     clientDeclared: false,
@@ -43,6 +47,8 @@ function createEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryV
 
 describe("PanelAppMainSidebarNav", () => {
   beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
     mocks.entries = [];
     mocks.mutate.mockReset();
   });
@@ -50,19 +56,32 @@ describe("PanelAppMainSidebarNav", () => {
   it("projects only manually added apps in persisted order", () => {
     const entries = [
       createEntry({ appId: "hidden", title: "Hidden" }),
-      createEntry({ appId: "second", mainSidebar: true, mainSidebarOrder: 1, title: "Second" }),
-      createEntry({ appId: "first", mainSidebar: true, mainSidebarOrder: 0, title: "First" }),
+      createEntry({
+        appId: "second",
+        mainSidebar: true,
+        mainSidebarOrder: 1,
+        title: "Second",
+      }),
+      createEntry({
+        appId: "first",
+        mainSidebar: true,
+        mainSidebarOrder: 0,
+        title: "First",
+      }),
     ];
 
-    expect(getMainSidebarPanelApps(entries).map((entry) => entry.appId)).toEqual([
-      "first",
-      "second",
-    ]);
+    expect(
+      getMainSidebarPanelApps(entries).map((entry) => entry.appId),
+    ).toEqual(["first", "second"]);
   });
 
   it("renders stable app routes and hides unbound apps", () => {
     mocks.entries = [
-      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+      createEntry({
+        appId: "publisher.todo",
+        mainSidebar: true,
+        title: "Todo",
+      }),
       createEntry({ appId: "hidden", title: "Hidden" }),
     ];
 
@@ -76,12 +95,62 @@ describe("PanelAppMainSidebarNav", () => {
     expect(link.getAttribute("href")).toBe("/apps/panel/publisher.todo");
     expect(link.getAttribute("aria-current")).toBe("page");
     expect(screen.queryByText("Hidden")).toBeNull();
+    const groupButton = screen.getByRole("button", { name: "Collapse apps" });
+    expect(groupButton.getAttribute("aria-expanded")).toBe("true");
+    expect(groupButton.className).toContain("text-[13px]");
+    expect(groupButton.className).toContain("font-medium");
+    expect(groupButton.className).not.toContain("text-[11px]");
+  });
+
+  it("collapses the ordered app group and persists the device layout preference", async () => {
+    const user = userEvent.setup();
+    mocks.entries = [
+      createEntry({
+        appId: "first",
+        mainSidebar: true,
+        mainSidebarOrder: 0,
+        title: "First",
+      }),
+      createEntry({
+        appId: "second",
+        mainSidebar: true,
+        mainSidebarOrder: 1,
+        title: "Second",
+      }),
+    ];
+
+    render(
+      <MemoryRouter>
+        <PanelAppMainSidebarNav isCollapsed={false} />
+      </MemoryRouter>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Collapse apps" }));
+
+    expect(screen.queryByRole("link", { name: "First" })).toBeNull();
+    expect(screen.queryByRole("link", { name: "Second" })).toBeNull();
+    expect(
+      screen
+        .getByRole("button", { name: "Expand apps" })
+        .getAttribute("aria-expanded"),
+    ).toBe("false");
+    expect(
+      useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,
+    ).toBe(true);
+    const persisted = JSON.parse(
+      window.localStorage.getItem("nextclaw.app.viewport-layout") ?? "{}",
+    ) as { state?: { isMainSidebarAppGroupCollapsed?: boolean } };
+    expect(persisted.state?.isMainSidebarAppGroupCollapsed).toBe(true);
   });
 
   it("removes an expanded entry from its hover actions without nesting the button in the link", async () => {
     const user = userEvent.setup();
     mocks.entries = [
-      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+      createEntry({
+        appId: "publisher.todo",
+        mainSidebar: true,
+        title: "Todo",
+      }),
     ];
 
     render(
@@ -98,7 +167,9 @@ describe("PanelAppMainSidebarNav", () => {
     expect(menuButton.className).toContain("group-hover/panel-app:opacity-100");
 
     await user.click(menuButton);
-    await user.click(screen.getByRole("button", { name: "Remove from main sidebar" }));
+    await user.click(
+      screen.getByRole("button", { name: "Remove from main sidebar" }),
+    );
 
     expect(mocks.mutate).toHaveBeenCalledWith({
       id: "demo",
@@ -107,9 +178,19 @@ describe("PanelAppMainSidebarNav", () => {
     expect(link.getAttribute("aria-current")).toBe("page");
   });
 
-  it("keeps the collapsed rail as one navigation target", () => {
+  it("aggregates collapsed-rail apps behind one navigation menu", async () => {
+    const user = userEvent.setup();
     mocks.entries = [
-      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+      createEntry({
+        appId: "publisher.todo",
+        mainSidebar: true,
+        title: "Todo",
+      }),
+      createEntry({
+        appId: "publisher.notes",
+        mainSidebar: true,
+        title: "Notes",
+      }),
     ];
 
     render(
@@ -118,8 +199,13 @@ describe("PanelAppMainSidebarNav", () => {
       </MemoryRouter>,
     );
 
+    expect(screen.queryByRole("link", { name: "Todo" })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "More panel app actions: Todo" }),
+    ).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Apps" }));
     expect(screen.getByRole("link", { name: "Todo" })).toBeTruthy();
-    expect(screen.queryByRole("button", { name: "More panel app actions: Todo" })).toBeNull();
+    expect(screen.getByRole("link", { name: "Notes" })).toBeTruthy();
   });
 
   it("renders no section when no app was manually added", () => {

package/src/features/panel-apps/components/panel-app-main-sidebar-menu-item.tsx

@@ -1,4 +1,5 @@
 import { PanelLeft, PanelLeftDashed } from 'lucide-react';
+import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import { useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
@@ -24,6 +25,9 @@ export function PanelAppMainSidebarMenuItem({
       className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50"
       onClick={() => {
         onSelect?.();
+        if (!entry.mainSidebar) {
+          viewportLayoutManager.setMainSidebarAppGroupCollapsed(false);
+        }
         updatePreferences.mutate({
           id: entry.id,
           preferences: { mainSidebar: !entry.mainSidebar },