@nextclaw/ui 0.12.35-beta.3 → 0.12.35-beta.4

package/src/features/apps/components/apps-panel.tsx

@@ -0,0 +1,43 @@
+import { AppWindow, Server } from 'lucide-react';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { PanelAppsList } from '@/features/panel-apps';
+import { ServiceAppsPanel } from '@/features/service-apps';
+import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
+import { t } from '@/shared/lib/i18n';
+
+export type AppsPanelTab = 'panel-apps' | 'service-apps';
+
+export function AppsPanel({
+  activeTab,
+  onActiveTabChange,
+  onOpenPanelApp,
+}: {
+  activeTab: AppsPanelTab;
+  onActiveTabChange: (tab: AppsPanelTab) => void;
+  onOpenPanelApp: (entry: PanelAppEntryView) => void;
+}) {
+  const headerTabs = (
+    <Tabs value={activeTab} onValueChange={(value) => onActiveTabChange(value as AppsPanelTab)}>
+      <TabsList className="grid h-auto w-[min(340px,100%)] grid-cols-2 rounded-lg bg-gray-100/70 p-0.5">
+        <TabsTrigger value="panel-apps" className="gap-1.5 px-2 py-1.5 text-xs">
+          <AppWindow className="h-3.5 w-3.5" />
+          {t('panelAppsTitle')}
+        </TabsTrigger>
+        <TabsTrigger value="service-apps" className="gap-1.5 px-2 py-1.5 text-xs">
+          <Server className="h-3.5 w-3.5" />
+          {t('serviceAppsTitle')}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+
+  return (
+    <div className="h-full min-h-0 bg-white">
+      {activeTab === 'panel-apps' ? (
+        <PanelAppsList headerContent={headerTabs} onOpenPanelApp={onOpenPanelApp} />
+      ) : (
+        <ServiceAppsPanel headerContent={headerTabs} />
+      )}
+    </div>
+  );
+}

package/src/features/apps/index.ts

@@ -0,0 +1 @@
+export { AppsPanel, type AppsPanelTab } from './components/apps-panel';

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -6,7 +6,7 @@ import type { UiTheme } from '@/shared/lib/theme';
 import {
   BookOpen,
   ChevronRight,
-  AppWindow,
+  Boxes,
   Languages,
   Palette,
   Settings,
@@ -30,7 +30,7 @@ type ChatSidebarUtilityMenuProps = {
   languageOptions: ChatSidebarUtilityOption<I18nLanguage>[];
   onSelectLanguage: (language: I18nLanguage) => void;
   onOpenDocs: () => void;
-  onOpenPanelApps: () => void;
+  onOpenApps: () => void;
 };
 
 export function ChatSidebarUtilityMenu({
@@ -45,15 +45,15 @@ export function ChatSidebarUtilityMenu({
   languageOptions,
   onSelectLanguage,
   onOpenDocs,
-  onOpenPanelApps,
+  onOpenApps,
 }: ChatSidebarUtilityMenuProps) {
   const handleOpenDocs = () => {
     onOpenDocs();
     onOpenChange(false);
   };
 
-  const handleOpenPanelApps = () => {
-    onOpenPanelApps();
+  const handleOpenApps = () => {
+    onOpenApps();
     onOpenChange(false);
   };
 
@@ -92,11 +92,11 @@ export function ChatSidebarUtilityMenu({
           </button>
           <button
             type="button"
-            onClick={handleOpenPanelApps}
+            onClick={handleOpenApps}
             className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
           >
-            <AppWindow className="h-4 w-4 text-gray-400" />
-            <span className="flex-1 text-left">{t('panelAppsTitle')}</span>
+            <Boxes className="h-4 w-4 text-gray-400" />
+            <span className="flex-1 text-left">{t('appsTitle')}</span>
           </button>
         </div>
 

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -30,7 +30,7 @@ import {
   ChatSidebarMobileToolbar,
 } from '@/features/chat/components/layout/chat-sidebar-toolbar';
 import { ChatSidebarUtilityMenu } from '@/features/chat/components/layout/chat-sidebar-utility-menu';
-import { openPanelApps } from '@/features/panel-apps';
+import { openApps } from '@/features/panel-apps';
 import { isWindowsDesktopHost } from '@/platforms/desktop';
 
 type DateGroup = {
@@ -379,7 +379,8 @@ export function ChatSidebar({
             currentLanguageLabel={currentLanguageLabel}
             languageOptions={utilityLanguageOptions}
             onSelectLanguage={handleLanguageSwitch}
-            onOpenDocs={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })} onOpenPanelApps={() => openPanelApps(docBrowser)}
+            onOpenDocs={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
+            onOpenApps={() => openApps(docBrowser)}
           />
         </div>
       ) : null}

package/src/features/chat/managers/chat-session-list.manager.test.ts

@@ -5,6 +5,16 @@ import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
 
+const chatSessionListModeStorageKey = 'nextclaw.chat.session-list.mode';
+
+function createLocalStoragePersistStorage() {
+  return {
+    getItem: (name: string) => JSON.parse(window.localStorage.getItem(name) ?? 'null'),
+    setItem: (name: string, value: unknown) => window.localStorage.setItem(name, JSON.stringify(value)),
+    removeItem: (name: string) => window.localStorage.removeItem(name)
+  };
+}
+
 const mocks = vi.hoisted(() => ({
   updateNcpSession: vi.fn(),
 }));
@@ -19,6 +29,8 @@ vi.mock('@/shared/lib/api', async (importOriginal) => {
 
 describe('ChatSessionListManager', () => {
   beforeEach(() => {
+    window.localStorage.clear();
+    useChatSessionListStore.persist.setOptions({ storage: createLocalStoragePersistStorage() });
     mocks.updateNcpSession.mockReset();
     mocks.updateNcpSession.mockResolvedValue({});
     useChatInputStore.setState({
@@ -193,6 +205,13 @@ describe('ChatSessionListManager', () => {
 
     expect(useChatSessionListStore.getState().snapshot.listMode).toBe('project-first');
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(JSON.parse(window.localStorage.getItem(chatSessionListModeStorageKey) ?? '{}')).toMatchObject({
+      state: {
+        snapshot: {
+          listMode: 'project-first'
+        }
+      }
+    });
   });
 
   it('marks a session as read through the session list owner boundary', () => {
@@ -252,3 +271,42 @@ describe('ChatSessionListManager', () => {
     expect(uiManager.goToSession).toHaveBeenCalledWith('ncp-materialized-session', { replace: true });
   });
 });
+
+describe('ChatSessionListStore persistence', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    useChatSessionListStore.persist.setOptions({ storage: createLocalStoragePersistStorage() });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'time-first'
+      }
+    });
+  });
+
+  it('falls back to time-first when the persisted sidebar list mode is invalid', () => {
+    useChatSessionListStore.persist.setOptions({
+      storage: {
+        getItem: () => ({ state: { snapshot: { listMode: 'sideways' } } }),
+        setItem: vi.fn(),
+        removeItem: vi.fn()
+      }
+    });
+
+    useChatSessionListStore.persist.rehydrate();
+
+    expect(useChatSessionListStore.getState().snapshot.listMode).toBe('time-first');
+  });
+
+  it('hydrates the sidebar list mode from persisted preference on store initialization', async () => {
+    window.localStorage.setItem(
+      chatSessionListModeStorageKey,
+      JSON.stringify({ state: { snapshot: { listMode: 'project-first' } }, version: 0 })
+    );
+    vi.resetModules();
+
+    const hydratedStoreModule = await import('@/features/chat/stores/chat-session-list.store');
+
+    expect(hydratedStoreModule.useChatSessionListStore.getState().snapshot.listMode).toBe('project-first');
+  });
+});

package/src/features/chat/stores/chat-session-list.store.ts

@@ -1,4 +1,5 @@
 import { create, type StateCreator } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 export type ChatSessionListMode = 'time-first' | 'project-first';
 export type ChatSessionListSnapshot = {
@@ -8,6 +9,30 @@ export type ChatSessionListSnapshot = {
   listMode: ChatSessionListMode;
 };
 
+const CHAT_SESSION_LIST_MODE_STORAGE_KEY = 'nextclaw.chat.session-list.mode';
+const CHAT_SESSION_LIST_DEFAULT_MODE: ChatSessionListMode = 'time-first';
+
+type PersistedChatSessionListStore = {
+  snapshot?: {
+    listMode?: unknown;
+  };
+};
+
+function isChatSessionListMode(value: unknown): value is ChatSessionListMode {
+  return value === 'time-first' || value === 'project-first';
+}
+
+function resolvePersistedChatSessionListMode(persistedState: unknown): ChatSessionListMode | null {
+  if (!persistedState || typeof persistedState !== 'object') {
+    return null;
+  }
+  const { snapshot } = persistedState as PersistedChatSessionListStore;
+  if (!snapshot || typeof snapshot !== 'object') {
+    return null;
+  }
+  return isChatSessionListMode(snapshot.listMode) ? snapshot.listMode : null;
+}
+
 export function hasUnreadSessionUpdate(
   lastMessageAt: string | null | undefined,
   readAt: string | undefined,
@@ -50,7 +75,7 @@ const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
   selectedAgentId: 'main',
   query: '',
-  listMode: 'time-first'
+  listMode: CHAT_SESSION_LIST_DEFAULT_MODE
 };
 
 function createSetSnapshotAction(set: ChatSessionListStoreSet) {
@@ -85,9 +110,35 @@ function createMarkSessionReadAction(set: ChatSessionListStoreSet) {
     });
 }
 
-export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
-  snapshot: initialSnapshot,
-  optimisticReadAtBySessionKey: {},
-  setSnapshot: createSetSnapshotAction(set),
-  markSessionRead: createMarkSessionReadAction(set)
-}));
+export const useChatSessionListStore = create<ChatSessionListStore>()(
+  persist(
+    (set) => ({
+      snapshot: initialSnapshot,
+      optimisticReadAtBySessionKey: {},
+      setSnapshot: createSetSnapshotAction(set),
+      markSessionRead: createMarkSessionReadAction(set)
+    }),
+    {
+      name: CHAT_SESSION_LIST_MODE_STORAGE_KEY,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state): PersistedChatSessionListStore => ({
+        snapshot: {
+          listMode: state.snapshot.listMode
+        }
+      }),
+      merge: (persistedState, currentState) => {
+        const listMode = resolvePersistedChatSessionListMode(persistedState);
+        if (!listMode) {
+          return currentState;
+        }
+        return {
+          ...currentState,
+          snapshot: {
+            ...currentState.snapshot,
+            listMode
+          }
+        };
+      }
+    }
+  )
+);

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -2,23 +2,23 @@ import { ArrowLeft, RefreshCw } from 'lucide-react';
 import { t } from '@/shared/lib/i18n';
 
 type PanelAppToolbarProps = {
-  onOpenPanelApps: () => void;
+  onOpenApps: () => void;
   onRefresh: () => void;
 };
 
 export function PanelAppToolbar({
-  onOpenPanelApps,
+  onOpenApps,
   onRefresh,
 }: PanelAppToolbarProps) {
   return (
     <div className="flex items-center justify-between gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
       <button
         type="button"
-        onClick={onOpenPanelApps}
+        onClick={onOpenApps}
         className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        {t('panelAppsTitle')}
+        {t('appsTitle')}
       </button>
       <button
         type="button"

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
 import { HelpCircle, RefreshCw } from 'lucide-react';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
 import { usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
@@ -10,8 +10,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shar
 import { t } from '@/shared/lib/i18n';
 
 export function PanelAppsList({
+  headerContent,
   onOpenPanelApp,
 }: {
+  headerContent?: ReactNode;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const panelApps = usePanelApps();
@@ -54,7 +56,9 @@ export function PanelAppsList({
     <div className="flex h-full min-h-0 flex-col bg-white">
       <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
         <div className="flex min-w-0 items-center gap-1.5">
-          <div className="truncate text-sm font-semibold text-gray-900">{t('panelAppsTitle')}</div>
+          {headerContent ?? (
+            <div className="truncate text-sm font-semibold text-gray-900">{t('panelAppsTitle')}</div>
+          )}
           {panelApps.data?.panelsPath ? (
             <TooltipProvider delayDuration={250}>
               <Tooltip>

package/src/features/panel-apps/index.ts

@@ -1,4 +1,6 @@
+export { PanelAppsList } from './components/panel-apps-list';
+export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';
 export {
-  openPanelApps,
+  openApps,
   PANEL_APPS_DOC_BROWSER_RENDERERS,
 } from './utils/panel-app-doc-browser.utils';

package/src/features/panel-apps/managers/panel-app-bridge.manager.test.ts

@@ -0,0 +1,111 @@
+import { NextClawClientError } from '@nextclaw/client-sdk';
+import { waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { PanelAppBridgeManager } from '@/features/panel-apps/managers/panel-app-bridge.manager';
+import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
+
+const mocks = vi.hoisted(() => ({
+  createBridgeSession: vi.fn(),
+  grantServiceAction: vi.fn(),
+  invokeServiceAction: vi.fn(),
+  listServiceActions: vi.fn(),
+  requestAuthorization: vi.fn(),
+}));
+
+vi.mock('@/shared/lib/api', () => ({
+  nextclawClient: {
+    panelApps: {
+      createBridgeSession: mocks.createBridgeSession,
+    },
+    serviceApps: {
+      grantServiceAction: mocks.grantServiceAction,
+      invokeServiceAction: mocks.invokeServiceAction,
+      listServiceActions: mocks.listServiceActions,
+      revokeServiceAction: vi.fn(),
+    },
+  },
+}));
+
+describe('PanelAppBridgeManager', () => {
+  it('opens the authorization flow before retrying a protected service action', async () => {
+    const manager = new PanelAppBridgeManager({
+      requestAuthorization: mocks.requestAuthorization,
+    } as unknown as ServiceActionAuthorizationManager);
+    const postMessage = vi.fn();
+    const contentWindow = { postMessage } as unknown as Window;
+    const iframe = { contentWindow } as HTMLIFrameElement;
+    const actionId = 'mood-tracker.saveMood';
+    mocks.createBridgeSession.mockResolvedValue({
+      expiresAt: '2026-05-28T00:00:00.000Z',
+      id: 'session-1',
+      panelAppId: 'mood-calendar',
+      tabId: 'tab-1',
+      token: 'token-1',
+    });
+    mocks.invokeServiceAction
+      .mockRejectedValueOnce(new NextClawClientError({
+        code: 'AUTHORIZATION_REQUIRED',
+        message: 'authorization required',
+      }))
+      .mockResolvedValueOnce({ actionId, result: { saved: true } });
+    mocks.listServiceActions.mockResolvedValue({
+      actions: [{
+        appId: 'mood-tracker',
+        description: 'Save daily mood entries',
+        id: actionId,
+        name: 'saveMood',
+        risk: 'write',
+        title: 'Save mood',
+      }],
+    });
+    mocks.requestAuthorization.mockResolvedValue(true);
+    mocks.grantServiceAction.mockResolvedValue({
+      actionId,
+      caller: { surface: 'panel-app', appId: 'mood-calendar' },
+      grantedAt: '2026-05-28T00:00:00.000Z',
+      risk: 'write',
+    });
+
+    manager.handleIframeMessage({
+      event: {
+        data: {
+          method: 'invoke',
+          payload: { actionId, input: { mood: 'happy' } },
+          requestId: 'request-1',
+          type: 'nextclaw:panel-app-service-actions:request',
+        },
+        source: contentWindow,
+      } as MessageEvent,
+      iframe,
+      tab: {
+        currentUrl: '/api/panel-apps/mood-calendar/content',
+        history: [],
+        historyIndex: 0,
+        id: 'tab-1',
+        kind: 'content',
+        navVersion: 0,
+        title: 'Mood Calendar',
+      },
+    });
+
+    await waitFor(() => expect(postMessage).toHaveBeenCalled());
+
+    expect(mocks.requestAuthorization).toHaveBeenCalledWith(expect.objectContaining({
+      actionId,
+      actionTitle: 'Save mood',
+      inputPreview: expect.stringContaining('happy'),
+      panelAppId: 'mood-calendar',
+      risk: 'write',
+    }));
+    expect(mocks.grantServiceAction).toHaveBeenCalledWith(actionId, {
+      bridgeSessionToken: 'token-1',
+    });
+    expect(mocks.invokeServiceAction).toHaveBeenCalledTimes(2);
+    expect(postMessage).toHaveBeenCalledWith({
+      data: { actionId, result: { saved: true } },
+      ok: true,
+      requestId: 'request-1',
+      type: 'nextclaw:panel-app-service-actions:response',
+    }, '*');
+  });
+});