@nextclaw/ui 0.18.3 → 0.19.0

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -14,6 +14,7 @@ import type {
 } from '@/features/right-panel-resources/types/right-panel-resource.types';
 import {
   createPanelAppContentPath,
+  readPanelAppIdFromParsedResourceUri,
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_APPS_TAB_KIND,
   RIGHT_PANEL_HOME_TAB_KIND,
@@ -58,39 +59,25 @@ function createDocsResourceUriFromUrl(url: string): string {
   return createDocsResourceUriFromSegments(pathname.split('/'));
 }
 
-function getPanelAppId(uri: ParsedResourceUri): string {
-  if (uri.scheme === 'nextclaw' && uri.authority === 'panel-app') {
-    return uri.pathSegments[0] ?? '';
-  }
-  const [apiSegment, collectionSegment, appId, contentSegment] = uri.pathSegments;
-  return apiSegment === 'api'
-    && collectionSegment === 'panel-apps'
-    && appId !== undefined
-    && appId.length > 0
-    && contentSegment === 'content'
-    ? appId
-    : '';
-}
-
 function isPanelAppContentUri(uri: ParsedResourceUri): boolean {
-  return getPanelAppId(uri).length > 0;
+  return readPanelAppIdFromParsedResourceUri(uri) !== null;
 }
 
 function resolvePanelAppPlaceholderUrl(uri: ParsedResourceUri): string {
-  const appId = getPanelAppId(uri);
+  const appId = readPanelAppIdFromParsedResourceUri(uri);
   if (!appId) {
     return 'nextclaw://panel-app';
   }
   const path = uri.searchParams.get('path')?.trim();
-  return createPanelAppContentPath(decodeURIComponent(appId), path);
+  return createPanelAppContentPath(appId, path);
 }
 
 function createPanelAppResourceUri(uri: ParsedResourceUri): string {
-  const appId = getPanelAppId(uri);
+  const appId = readPanelAppIdFromParsedResourceUri(uri);
   if (!appId) {
     return 'nextclaw://panel-app';
   }
-  const resourceUri = `nextclaw://panel-app/${encodeURIComponent(decodeURIComponent(appId))}`;
+  const resourceUri = `nextclaw://panel-app/${encodeURIComponent(appId)}`;
   const path = uri.searchParams.get('path')?.trim();
   return path ? `${resourceUri}?${new URLSearchParams({ path }).toString()}` : resourceUri;
 }
@@ -98,12 +85,12 @@ function createPanelAppResourceUri(uri: ParsedResourceUri): string {
 function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
   const leftUri = parseResourceUri(left);
   const rightUri = parseResourceUri(right);
-  const leftAppId = getPanelAppId(leftUri);
-  const rightAppId = getPanelAppId(rightUri);
+  const leftAppId = readPanelAppIdFromParsedResourceUri(leftUri);
+  const rightAppId = readPanelAppIdFromParsedResourceUri(rightUri);
   const leftPath = leftUri.searchParams.get('path')?.trim() ?? '';
   const rightPath = rightUri.searchParams.get('path')?.trim() ?? '';
-  return leftAppId.length > 0 && rightAppId.length > 0
-    ? decodeURIComponent(leftAppId) === decodeURIComponent(rightAppId) && leftPath === rightPath
+  return leftAppId !== null && rightAppId !== null
+    ? leftAppId === rightAppId && leftPath === rightPath
     : left === right;
 }
 
@@ -181,10 +168,10 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
     match: (uri) => (uri.scheme === 'nextclaw' && uri.authority === 'panel-app') || isPanelAppContentUri(uri),
     resolve: (uri) => {
       const url = resolvePanelAppPlaceholderUrl(uri);
-      const appId = getPanelAppId(uri);
+      const appId = readPanelAppIdFromParsedResourceUri(uri);
       return {
         dedupeKey: appId
-          ? `panel-app:${uri.searchParams.get('path')?.trim() || decodeURIComponent(appId)}`
+          ? `panel-app:${uri.searchParams.get('path')?.trim() || appId}`
           : undefined,
         historyPolicy: 'managed',
         kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,

package/src/features/right-panel-resources/index.ts

@@ -10,6 +10,7 @@ export {
   createPanelAppContentPath,
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
+  readPanelAppIdFromResourceUri,
   RIGHT_PANEL_APPS_TAB_KIND,
   RIGHT_PANEL_APPS_URL,
   RIGHT_PANEL_HOME_TAB_KIND,

package/src/features/right-panel-resources/utils/__tests__/right-panel-resource-uri.utils.test.ts

@@ -5,6 +5,7 @@ import {
   createPanelAppContentPath,
   createPanelAppResourceUri,
   createPanelAppRightPanelResourceTarget,
+  readPanelAppIdFromResourceUri,
 } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';
 
 function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
@@ -15,6 +16,7 @@ function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelA
     contentPath: '/api/panel-apps/demo/content',
     createdAt: '2026-06-02T00:00:00.000Z',
     favorite: false,
+    mainSidebar: false,
     fileName: 'demo.html',
     id: 'demo',
     kind: 'single-file',
@@ -69,6 +71,13 @@ describe('right-panel-resource uri utils', () => {
     );
   });
 
+  it('reads stable panel app ids from resource and content URLs', () => {
+    expect(readPanelAppIdFromResourceUri('nextclaw://panel-app/publisher.todo')).toBe('publisher.todo');
+    expect(readPanelAppIdFromResourceUri('/api/panel-apps/publisher.todo/content')).toBe('publisher.todo');
+    expect(readPanelAppIdFromResourceUri('nextclaw://panel-app/publisher.todo?path=%2Ftmp%2Ftodo.panel')).toBeNull();
+    expect(readPanelAppIdFromResourceUri('nextclaw://apps')).toBeNull();
+  });
+
   it('keeps panel app image icons as dock image icons', () => {
     const target = createPanelAppRightPanelResourceTarget(createPanelAppEntry({
       icon: '/api/panel-apps/demo/assets/icon.png',
@@ -90,4 +99,17 @@ describe('right-panel-resource uri utils', () => {
       value: '🧭',
     });
   });
+
+  it('uses the stable app id for persistent panel app resources', () => {
+    const target = createPanelAppRightPanelResourceTarget(createPanelAppEntry({
+      id: 'installed-directory-name',
+      appId: 'publisher.stable-panel',
+      contentPath: '/api/panel-apps/publisher.stable-panel/content',
+    }));
+
+    expect(target).toEqual(expect.objectContaining({
+      dedupeKey: 'panel-app:publisher.stable-panel',
+      resourceUri: 'nextclaw://panel-app/publisher.stable-panel',
+    }));
+  });
 });

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -6,6 +6,7 @@ import type { PanelAppEntryView } from '@/shared/lib/api';
 import type { DocBrowserDockIcon } from '@/shared/components/doc-browser';
 import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
 import type { RightPanelResourceTarget } from '@/features/right-panel-resources/types/right-panel-resource.types';
+import { parseResourceUri, type ParsedResourceUri } from '@/shared/lib/resource-uri';
 
 export const RIGHT_PANEL_HOME_TAB_KIND = 'home';
 export const RIGHT_PANEL_HOME_URL = 'nextclaw://new-tab';
@@ -78,6 +79,34 @@ export function createPanelAppContentPath(appId: string, sourcePath?: string): s
   return path ? `${url}?${new URLSearchParams({ path }).toString()}` : url;
 }
 
+export function readPanelAppIdFromParsedResourceUri(uri: ParsedResourceUri): string | null {
+  const encodedAppId = uri.scheme === 'nextclaw' && uri.authority === 'panel-app'
+    ? uri.pathSegments[0]
+    : (() => {
+        const [apiSegment, collectionSegment, appId, contentSegment] = uri.pathSegments;
+        return apiSegment === 'api'
+          && collectionSegment === 'panel-apps'
+          && contentSegment === 'content'
+          ? appId
+          : undefined;
+      })();
+  if (!encodedAppId) {
+    return null;
+  }
+  try {
+    return decodeURIComponent(encodedAppId);
+  } catch {
+    return null;
+  }
+}
+
+export function readPanelAppIdFromResourceUri(value: string): string | null {
+  const uri = parseResourceUri(value);
+  return uri.searchParams.has('path')
+    ? null
+    : readPanelAppIdFromParsedResourceUri(uri);
+}
+
 function isPanelAppImageIcon(icon: string): boolean {
   return (
     icon.startsWith('data:image/') ||
@@ -99,11 +128,11 @@ function createPanelAppDockIcon(entry: PanelAppEntryView): DocBrowserDockIcon |
 
 export function createPanelAppRightPanelResourceTarget(entry: PanelAppEntryView): RightPanelResourceTarget {
   return {
-    dedupeKey: `panel-app:${entry.id}`,
+    dedupeKey: `panel-app:${entry.appId}`,
     dockIcon: createPanelAppDockIcon(entry),
     historyPolicy: 'managed',
     kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
-    resourceUri: createPanelAppResourceUri(entry.id),
+    resourceUri: createPanelAppResourceUri(entry.appId),
     title: entry.title,
     url: entry.contentPath,
   };

package/src/main.tsx

@@ -7,15 +7,28 @@ import { ThemeProvider } from '@/components/providers/ThemeProvider';
 import './index.css';
 
 const AppRouter = window.nextclawDesktop?.platform === 'win32' ? MemoryRouter : BrowserRouter;
+const root = createRoot(document.getElementById('root')!);
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <ThemeProvider>
-      <I18nProvider>
-        <AppRouter>
-          <App />
-        </AppRouter>
-      </I18nProvider>
-    </ThemeProvider>
-  </StrictMode>
-);
+if (import.meta.env.DEV && window.location.pathname === '/__debug/chat-tool-call-stress') {
+  void import('@/features/chat/features/message/components/chat-tool-call-stress-harness').then(
+    ({ ChatToolCallStressHarness }) => {
+      root.render(
+        <StrictMode>
+          <ChatToolCallStressHarness />
+        </StrictMode>,
+      );
+    },
+  );
+} else {
+  root.render(
+    <StrictMode>
+      <ThemeProvider>
+        <I18nProvider>
+          <AppRouter>
+            <App />
+          </AppRouter>
+        </I18nProvider>
+      </ThemeProvider>
+    </StrictMode>,
+  );
+}

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -14,11 +14,43 @@ const { navigateMock } = vi.hoisted(() => ({
   navigateMock: vi.fn(),
 }));
 
+const panelAppHooks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+}));
+
 vi.mock("react-router-dom", async () => ({
   ...((await vi.importActual("react-router-dom")) as object),
   useNavigate: () => navigateMock,
 }));
 
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  usePanelApps: () => ({
+    data: {
+      entries: [{
+        appId: "piano",
+        clientDeclared: false,
+        clientGranted: false,
+        contentPath: "/api/panel-apps/piano/content",
+        createdAt: "2026-08-19T00:00:00.000Z",
+        favorite: false,
+        fileName: "piano.panel.html",
+        id: "piano",
+        kind: "single-file",
+        mainSidebar: false,
+        openCount: 0,
+        sizeBytes: 10,
+        title: "Piano",
+        updatedAt: "2026-08-19T00:00:00.000Z",
+      }],
+    },
+  }),
+  useUpdatePanelAppPreferences: () => ({
+    isPending: false,
+    mutate: panelAppHooks.mutate,
+  }),
+}));
+
 const { docBrowserState } = vi.hoisted<{
   docBrowserState: DocBrowserContextValue;
 }>(() => ({
@@ -463,6 +495,50 @@ describe("DocBrowser", () => {
   });
 });
 
+describe("DocBrowser panel app navigation", () => {
+  beforeEach(() => {
+    resetDocBrowserTestState();
+    installDocBrowserPointerTestEnvironment();
+  });
+
+  it("uses browser history as the only back contract for panel apps", async () => {
+    const user = userEvent.setup();
+    const panelAppTab: DocBrowserTab = {
+      id: "piano",
+      kind: "panel-app" as const,
+      title: "Piano",
+      currentUrl: "/api/panel-apps/piano/content",
+      resourceUri: "nextclaw://panel-app/piano",
+      history: ["/api/panel-apps/piano/content"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [panelAppTab];
+    docBrowserState.activeTabId = panelAppTab.id;
+    docBrowserState.activeHistory = [
+      { kind: "apps", tabId: "apps", url: "nextclaw://apps?tab=panel-apps" },
+      { kind: "panel-app", tabId: "piano", resourceUri: "nextclaw://panel-app/piano", url: panelAppTab.currentUrl },
+    ];
+    docBrowserState.activeHistoryIndex = 1;
+    docBrowserState.currentTab = panelAppTab;
+
+    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+
+    expect(screen.getAllByRole("button", { name: "Back" })).toHaveLength(1);
+    expect(screen.queryByRole("button", { name: "Apps" })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    expect(docBrowserState.goBack).toHaveBeenCalledTimes(1);
+
+    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(panelAppHooks.mutate).toHaveBeenCalledWith({
+      id: "piano",
+      preferences: { mainSidebar: true },
+    });
+  });
+});
+
 describe("DocBrowser scroll restoration", () => {
   beforeEach(() => {
     resetDocBrowserTestState();

package/src/shared/lib/api/ncp-session.types.ts

@@ -111,6 +111,7 @@ export type NcpSessionMessagesView = {
   sessionId: string;
   status: NcpSessionStatus;
   messages: NcpMessageView[];
+  deferredToolPayloads?: Record<string, { cursor: string }>;
   contextWindow?: SessionContextWindowView | null;
   total: number;
   pageInfo: NcpSessionMessagePageInfo;

package/src/shared/lib/api/types.ts

@@ -467,6 +467,8 @@ export type PanelAppEntryView = {
   updatedAt: string;
   sizeBytes: number;
   favorite: boolean;
+  mainSidebar: boolean;
+  mainSidebarOrder?: number;
   clientDeclared: boolean;
   clientGranted: boolean;
   lastOpenedAt?: string;
@@ -484,6 +486,7 @@ export type PanelAppListView = {
 
 export type PanelAppPreferencesUpdateView = {
   favorite?: boolean;
+  mainSidebar?: boolean;
 };
 
 export type {

package/src/shared/lib/api/utils/ncp-session.utils.ts

@@ -19,7 +19,12 @@ export async function fetchNcpSessions(params?: {
 // GET /api/ncp/sessions/:sessionId/messages
 export async function fetchNcpSessionMessages(
   sessionId: string,
-  options: { limit?: number; cursor?: string; signal?: AbortSignal } = {},
+  options: {
+    limit?: number;
+    cursor?: string;
+    toolPayload?: "summary";
+    signal?: AbortSignal;
+  } = {},
 ): Promise<NcpSessionMessagesView> {
   return (await nextclawClient.sessions.listMessages(
     sessionId,
@@ -27,6 +32,24 @@ export async function fetchNcpSessionMessages(
   )) as NcpSessionMessagesView;
 }
 
+export async function fetchNcpSessionMessageDetail(
+  sessionId: string,
+  messageId: string,
+  cursor: string,
+  signal?: AbortSignal,
+): Promise<NcpSessionMessagesView["messages"][number]> {
+  const response = await fetchNcpSessionMessages(sessionId, {
+    cursor,
+    limit: 1,
+    ...(signal ? { signal } : {}),
+  });
+  const message = response.messages[0];
+  if (!message || message.id !== messageId) {
+    throw new Error(`Session message detail no longer matches ${messageId}.`);
+  }
+  return message;
+}
+
 // GET /api/ncp/sessions/:sessionId/usage
 export async function fetchNcpSessionTokenUsage(
   sessionId: string,

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -219,6 +219,10 @@
   "chatHistoryLoadFailed": "Couldn’t load earlier messages",
   "chatHistoryRetry": "Retry",
   "chatProcessSummaryProcessed": "Processed",
+  "chatProcessSummaryToolCalls": "{count} tool calls",
+  "chatToolPayloadLoading": "Loading details",
+  "chatToolPayloadLoadFailed": "Couldn’t load details. Try again",
+  "chatToolActivityShowMore": "Show next {count} ({remaining} remaining)",
   "chatAiExecutionInput": "input",
   "chatAiExecutionOutput": "output",
   "chatAiExecutionTokens": "tokens",

package/src/shared/lib/i18n/locales/en-US/doc-browser.json

@@ -165,6 +165,16 @@
   "panelAppsFavorite": "Favorite panel app",
   "panelAppsUnfavorite": "Unfavorite panel app",
   "panelAppsMoreActions": "More panel app actions",
+  "panelAppsAddToMainSidebar": "Add to main sidebar",
+  "panelAppsRemoveFromMainSidebar": "Remove from main sidebar",
+  "panelAppsPreferenceUpdateFailed": "Could not update panel app preferences",
+  "panelAppsOpenInRightPanel": "Open in right panel",
+  "panelAppsOpenApps": "Open app management",
+  "panelAppsMainUnavailable": "This panel app is unavailable. It may be disabled, uninstalled, or removed from the workspace.",
+  "panelAppsCheckingPermission": "Checking this panel app's permissions…",
+  "panelAppsPermissionDenied": "The required NextClaw Client permission was not granted to this panel app.",
+  "panelAppsPermissionFailed": "NextClaw could not confirm this panel app's permissions.",
+  "panelAppsTryAgain": "Try again",
   "panelAppsDelete": "Delete panel app",
   "panelAppsDeleteConfirmTitle": "Delete panel app?",
   "panelAppsDeleteConfirmDescription": "This will delete the panel app file and cannot be undone.",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -219,6 +219,10 @@
   "chatHistoryLoadFailed": "较早消息加载失败",
   "chatHistoryRetry": "重试",
   "chatProcessSummaryProcessed": "已处理",
+  "chatProcessSummaryToolCalls": "{count} 次工具调用",
+  "chatToolPayloadLoading": "正在加载详情",
+  "chatToolPayloadLoadFailed": "详情加载失败，点击重试",
+  "chatToolActivityShowMore": "继续显示 {count} 项（剩余 {remaining} 项）",
   "chatAiExecutionInput": "输入",
   "chatAiExecutionOutput": "输出",
   "chatAiExecutionTokens": "Token",

package/src/shared/lib/i18n/locales/zh-CN/doc-browser.json

@@ -165,6 +165,16 @@
   "panelAppsFavorite": "收藏面板应用",
   "panelAppsUnfavorite": "取消收藏面板应用",
   "panelAppsMoreActions": "更多面板应用操作",
+  "panelAppsAddToMainSidebar": "添加到主侧栏",
+  "panelAppsRemoveFromMainSidebar": "从主侧栏移除",
+  "panelAppsPreferenceUpdateFailed": "无法更新面板应用设置",
+  "panelAppsOpenInRightPanel": "在右侧面板打开",
+  "panelAppsOpenApps": "打开应用管理",
+  "panelAppsMainUnavailable": "此面板应用当前不可用。它可能已被禁用、卸载或从工作区删除。",
+  "panelAppsCheckingPermission": "正在确认此面板应用的权限…",
+  "panelAppsPermissionDenied": "未授予此面板应用所需的 NextClaw Client 权限。",
+  "panelAppsPermissionFailed": "无法确认此面板应用的权限。",
+  "panelAppsTryAgain": "重试",
   "panelAppsDelete": "删除面板应用",
   "panelAppsDeleteConfirmTitle": "删除面板应用？",
   "panelAppsDeleteConfirmDescription": "将删除这个面板应用文件，删除后不可恢复。",