@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/src/features/chat/stores/recent-selection.store.ts

@@ -0,0 +1,85 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type RecentSelectionScope = {
+  namespace?: string | null;
+};
+
+type RecentSelectionStoreState = {
+  entriesByKey: Record<string, string[]>;
+  setEntries: (key: string, values: string[]) => void;
+};
+
+const RECENT_SELECTION_STORE_KEY = 'nextclaw.chat.recent-selection.store';
+
+export function normalizeRecentSelectionValue(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+}
+
+export function normalizeRecentSelectionList(values: unknown, limit: number): string[] {
+  if (!Array.isArray(values)) {
+    return [];
+  }
+  return Array.from(
+    new Set(values.map(normalizeRecentSelectionValue).filter((value): value is string => Boolean(value))),
+  ).slice(0, limit);
+}
+
+export function resolveRecentSelectionKey(
+  options: { storageKey: string },
+  scope?: RecentSelectionScope,
+): string {
+  const namespace = normalizeRecentSelectionValue(scope?.namespace);
+  return namespace
+    ? `${options.storageKey}.${encodeURIComponent(namespace.toLowerCase())}`
+    : options.storageKey;
+}
+
+function normalizePersistedEntries(value: unknown): Record<string, string[]> {
+  if (!value || typeof value !== 'object') {
+    return {};
+  }
+  const entries: Record<string, string[]> = {};
+  for (const [key, values] of Object.entries(value)) {
+    const normalizedKey = normalizeRecentSelectionValue(key);
+    if (!normalizedKey) {
+      continue;
+    }
+    const normalizedValues = normalizeRecentSelectionList(values, Number.POSITIVE_INFINITY);
+    if (normalizedValues.length > 0) {
+      entries[normalizedKey] = normalizedValues;
+    }
+  }
+  return entries;
+}
+
+export const useRecentSelectionStore = create<RecentSelectionStoreState>()(
+  persist(
+    (set) => ({
+      entriesByKey: {},
+      setEntries: (key, values) => set((state) => ({
+        entriesByKey: {
+          ...state.entriesByKey,
+          [key]: normalizeRecentSelectionList(values, Number.POSITIVE_INFINITY),
+        },
+      })),
+    }),
+    {
+      name: RECENT_SELECTION_STORE_KEY,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state) => ({
+        entriesByKey: state.entriesByKey,
+      }),
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        entriesByKey: normalizePersistedEntries(
+          (persistedState as { entriesByKey?: Record<string, unknown> } | undefined)?.entriesByKey,
+        ),
+      }),
+    },
+  ),
+);

package/src/features/chat/types/chat-input-bar.types.ts

@@ -37,7 +37,11 @@ export type ChatInputBarAdapterTexts = {
   modelNoOptionsLabel: string;
   recentModelsLabel: string;
   allModelsLabel: string;
-  sessionTypePlaceholder: string;
+  favoriteModelsLabel: string;
+  modelSearchPlaceholder: string;
+  modelSearchEmptyLabel: string;
+  favoriteModelLabel: string;
+  unfavoriteModelLabel: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;

package/src/features/marketplace/utils/marketplace-installed-cache.utils.ts

@@ -16,29 +16,30 @@ function buildInstalledRecordFromInstall(params: {
   request: MarketplaceInstallRequest;
   result: MarketplaceInstallResult;
 }): MarketplaceInstalledRecord {
+  const { request, result } = params;
   const installedAt = new Date().toISOString();
 
-  if (params.result.type === 'skill') {
+  if (result.type === 'skill') {
     return {
       type: 'skill',
-      spec: params.result.spec,
-      id: params.request.skill ?? params.result.spec,
-      label: params.request.skill ?? params.result.name ?? params.result.spec,
+      spec: result.spec,
+      id: request.skill ?? result.spec,
+      label: request.skill ?? result.name ?? result.spec,
       source: 'workspace',
-      installPath: params.request.installPath,
+      installPath: request.installPath,
       installedAt
     };
   }
 
   return {
-    type: params.result.type,
-    spec: params.result.spec,
-    id: params.result.name ?? params.result.spec,
-    label: params.result.name ?? params.result.spec,
+    type: result.type,
+    spec: result.spec,
+    id: result.name ?? result.spec,
+    label: result.name ?? result.spec,
     source: 'marketplace',
     origin: 'marketplace',
-    enabled: params.request.enabled ?? true,
-    runtimeStatus: params.request.enabled === false ? 'disabled' : 'ready',
+    enabled: request.enabled ?? true,
+    runtimeStatus: request.enabled === false ? 'disabled' : 'ready',
     installedAt
   };
 }
@@ -47,10 +48,11 @@ function matchesInstalledRecord(record: MarketplaceInstalledRecord, params: {
   id?: string;
   spec?: string;
 }): boolean {
-  if (params.spec && record.spec === params.spec) {
+  const { id, spec } = params;
+  if (spec && record.spec === spec) {
     return true;
   }
-  if (params.id && record.id === params.id) {
+  if (id && record.id === id) {
     return true;
   }
   return false;
@@ -70,7 +72,8 @@ export function applyInstallResultToInstalledView(params: {
   request: MarketplaceInstallRequest;
   result: MarketplaceInstallResult;
 }): MarketplaceInstalledView {
-  const current = ensureInstalledView(params.result.type, params.view);
+  const { result, view } = params;
+  const current = ensureInstalledView(result.type, view);
   const optimisticRecord = buildInstalledRecordFromInstall(params);
   const existingIndex = current.records.findIndex((record) => matchesInstalledRecord(record, {
     id: optimisticRecord.id,
@@ -89,7 +92,7 @@ export function applyInstallResultToInstalledView(params: {
 
   return {
     ...current,
-    type: params.result.type,
+    type: result.type,
     records: nextRecords,
     specs: dedupeSpecs(nextRecords),
     total: nextRecords.length
@@ -101,12 +104,13 @@ export function applyManageResultToInstalledView(params: {
   request: MarketplaceManageRequest;
   result: MarketplaceManageResult;
 }): MarketplaceInstalledView {
-  const current = ensureInstalledView(params.result.type, params.view);
+  const { request, result, view } = params;
+  const current = ensureInstalledView(result.type, view);
 
-  if (params.result.action === 'uninstall' || params.result.action === 'remove') {
+  if (result.action === 'uninstall' || result.action === 'remove') {
     const nextRecords = current.records.filter((record) => !matchesInstalledRecord(record, {
-      id: params.result.id,
-      spec: params.request.spec
+      id: result.id,
+      spec: request.spec
     }));
 
     return {
@@ -119,13 +123,13 @@ export function applyManageResultToInstalledView(params: {
 
   const nextRecords = current.records.map((record) => {
     if (!matchesInstalledRecord(record, {
-      id: params.result.id,
-      spec: params.request.spec
+      id: result.id,
+      spec: request.spec
     })) {
       return record;
     }
 
-    if (params.result.action === 'disable') {
+    if (result.action === 'disable') {
       return {
         ...record,
         enabled: false,
@@ -133,7 +137,7 @@ export function applyManageResultToInstalledView(params: {
       };
     }
 
-    if (params.result.action === 'update') {
+    if (result.action === 'update') {
       return {
         ...record,
         installedAt: new Date().toISOString(),

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

@@ -0,0 +1,137 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { PanelAppsList } from '@/features/panel-apps/components/panel-apps-list';
+
+const mocks = vi.hoisted(() => ({
+  entries: [] as Array<{
+    appId: string;
+    clientDeclared: boolean;
+    clientGranted: boolean;
+    contentPath: string;
+    createdAt: string;
+    description?: string;
+    favorite: boolean;
+    fileName: string;
+    id: string;
+    kind: 'single-file';
+    openCount: number;
+    sizeBytes: number;
+    title: string;
+    updatedAt: string;
+  }>,
+  navigate: vi.fn(),
+  refetchPanelApps: vi.fn(),
+  requestDraft: vi.fn(),
+}));
+
+vi.mock('@/app/components/app-presenter-provider', () => ({
+  useAppPresenter: () => ({
+    chatDraftIntentManager: {
+      requestDraft: mocks.requestDraft,
+    },
+    serviceActionAuthorizationManager: {
+      requestAuthorization: vi.fn(async () => true),
+    },
+  }),
+}));
+
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom') as object),
+  useNavigate: () => mocks.navigate,
+}));
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  useDeletePanelApp: () => ({
+    isPending: false,
+    mutate: vi.fn(),
+  }),
+  useGrantPanelAppClient: () => ({
+    mutateAsync: vi.fn(),
+  }),
+  usePanelApps: () => ({
+    data: {
+      entries: mocks.entries,
+      panelsPath: '/workspace/panels',
+      workspacePath: '/workspace',
+    },
+    isError: false,
+    isLoading: false,
+    refetch: mocks.refetchPanelApps,
+  }),
+  useRecordPanelAppOpened: () => ({
+    mutateAsync: vi.fn(async (id: string) => mocks.entries.find((entry) => entry.id === id)),
+  }),
+  useUpdatePanelAppPreferences: () => ({
+    isPending: false,
+    mutate: vi.fn(),
+  }),
+}));
+
+function createPanelAppEntry(overrides: Partial<(typeof mocks.entries)[number]> = {}) {
+  return {
+    appId: 'demo',
+    clientDeclared: false,
+    clientGranted: false,
+    contentPath: '/api/panel-apps/demo/content',
+    createdAt: '2026-05-28T08:00:00.000Z',
+    description: 'A compact demo panel.',
+    favorite: false,
+    fileName: 'demo.panel.html',
+    id: 'demo',
+    kind: 'single-file' as const,
+    openCount: 0,
+    sizeBytes: 12,
+    title: 'Demo Panel',
+    updatedAt: '2026-05-28T09:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('PanelAppsList', () => {
+  beforeEach(() => {
+    mocks.entries = [];
+    mocks.navigate.mockReset();
+    mocks.refetchPanelApps.mockReset();
+    mocks.requestDraft.mockReset();
+  });
+
+  it('shows first-use guidance when no panel apps exist', async () => {
+    const user = userEvent.setup();
+
+    render(<PanelAppsList onOpenPanelApp={vi.fn()} />);
+
+    expect(screen.getByText('Create your first panel app')).toBeTruthy();
+    expect(screen.getByText('Ask NextClaw to generate one')).toBeTruthy();
+    expect(screen.getByText('/workspace/panels')).toBeTruthy();
+
+    await user.click(screen.getAllByRole('button', { name: 'Refresh panel apps' }).at(-1)!);
+
+    expect(mocks.refetchPanelApps).toHaveBeenCalledTimes(1);
+  });
+
+  it('fills a sample panel app prompt from first-use guidance', async () => {
+    const user = userEvent.setup();
+
+    render(<PanelAppsList onOpenPanelApp={vi.fn()} />);
+
+    await user.click(screen.getByRole('button', { name: /Create sample panel app/ }));
+
+    expect(mocks.requestDraft).toHaveBeenCalledWith(expect.stringContaining('personal task board'));
+    expect(mocks.navigate).toHaveBeenCalledWith('/chat');
+  });
+
+  it('shows a filtered empty state instead of first-use guidance when apps exist', async () => {
+    const user = userEvent.setup();
+    mocks.entries = [createPanelAppEntry()];
+
+    render(<PanelAppsList onOpenPanelApp={vi.fn()} />);
+
+    expect(screen.getByText('Demo Panel')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Favorites' }));
+
+    expect(screen.getByText('No panel apps in this view')).toBeTruthy();
+    expect(screen.queryByText('Create your first panel app')).toBeNull();
+  });
+});

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

@@ -1,5 +1,6 @@
 import { useMemo, useState, type ReactNode } from 'react';
-import { HelpCircle, RefreshCw } from 'lucide-react';
+import { AppWindow, FileCode2, HelpCircle, MessageSquarePlus, RefreshCw } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { useAppPresenter } from '@/app/components/app-presenter-provider';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
 import { useDeletePanelApp, useGrantPanelAppClient, usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
@@ -10,6 +11,8 @@ import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
 import { t } from '@/shared/lib/i18n';
 
+const EMPTY_PANEL_APP_ENTRIES: PanelAppEntryView[] = [];
+
 export function PanelAppsList({
   headerContent,
   onOpenPanelApp,
@@ -23,10 +26,12 @@ export function PanelAppsList({
   const recordOpened = useRecordPanelAppOpened();
   const grantClient = useGrantPanelAppClient();
   const presenter = useAppPresenter();
+  const navigate = useNavigate();
   const [viewMode, setViewMode] = useState<PanelAppViewMode>('smart');
+  const allEntries = panelApps.data?.entries ?? EMPTY_PANEL_APP_ENTRIES;
   const entries = useMemo(
-    () => getPanelAppViewEntries(panelApps.data?.entries ?? [], viewMode),
-    [panelApps.data?.entries, viewMode],
+    () => getPanelAppViewEntries(allEntries, viewMode),
+    [allEntries, viewMode],
   );
 
   const openPanelApp = async (entry: PanelAppEntryView) => {
@@ -71,6 +76,11 @@ export function PanelAppsList({
     deletePanelApp.mutate(entry.id);
   };
 
+  const startExamplePanelAppDraft = () => {
+    navigate('/chat');
+    presenter.chatDraftIntentManager.requestDraft(t('panelAppsExamplePrompt'));
+  };
+
   if (panelApps.isLoading) {
     return (
       <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('panelAppsLoading')}</div>
@@ -122,8 +132,14 @@ export function PanelAppsList({
           </TabsList>
         </Tabs>
       </div>
-      {entries.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">{t('panelAppsEmpty')}</div>
+      {allEntries.length === 0 ? (
+        <PanelAppsEmptyGuide
+          panelsPath={panelApps.data?.panelsPath}
+          onCreateExample={startExamplePanelAppDraft}
+          onRefresh={() => void panelApps.refetch()}
+        />
+      ) : entries.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">{t('panelAppsEmptyFiltered')}</div>
       ) : (
         <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
           <div className="space-y-1.5">
@@ -144,3 +160,101 @@ export function PanelAppsList({
     </div>
   );
 }
+
+function PanelAppsEmptyGuide({
+  onCreateExample,
+  panelsPath,
+  onRefresh,
+}: {
+  onCreateExample: () => void;
+  panelsPath?: string;
+  onRefresh: () => void;
+}) {
+  return (
+    <div className="flex flex-1 items-center justify-center overflow-y-auto px-5 py-6 text-center">
+      <div className="w-full max-w-sm">
+        <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <AppWindow className="h-5 w-5" />
+        </div>
+        <h2 className="mt-3 text-sm font-semibold text-gray-900">{t('panelAppsEmptyTitle')}</h2>
+        <p className="mt-1 text-xs leading-5 text-gray-500">{t('panelAppsEmptyDescription')}</p>
+
+        <div className="mt-4 space-y-2 text-left">
+          <PanelAppsEmptyGuideStep
+            icon={<MessageSquarePlus className="h-4 w-4" />}
+            title={t('panelAppsEmptyAskTitle')}
+            description={t('panelAppsEmptyAskDescription')}
+            actionLabel={t('panelAppsEmptyAskAction')}
+            onAction={onCreateExample}
+          />
+          <PanelAppsEmptyGuideStep
+            icon={<FileCode2 className="h-4 w-4" />}
+            title={t('panelAppsEmptyFileTitle')}
+            description={t('panelAppsEmptyFileDescription')}
+          />
+        </div>
+
+        {panelsPath ? (
+          <div className="mt-4 rounded-md bg-gray-50 px-3 py-2 text-left">
+            <div className="text-[11px] font-medium uppercase text-gray-400">{t('panelAppsPanelsPath')}</div>
+            <code className="mt-1 block break-all text-xs text-gray-600">{panelsPath}</code>
+          </div>
+        ) : null}
+
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+          {t('panelAppsRefresh')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PanelAppsEmptyGuideStep({
+  actionLabel,
+  description,
+  icon,
+  onAction,
+  title,
+}: {
+  actionLabel?: string;
+  description: string;
+  icon: ReactNode;
+  onAction?: () => void;
+  title: string;
+}) {
+  const content = (
+    <>
+      <div className="mt-0.5 text-gray-500">{icon}</div>
+      <div className="min-w-0">
+        <div className="text-xs font-medium text-gray-800">{title}</div>
+        <div className="mt-0.5 text-xs leading-5 text-gray-500">{description}</div>
+        {actionLabel ? (
+          <div className="mt-2 text-xs font-medium text-primary">{actionLabel}</div>
+        ) : null}
+      </div>
+    </>
+  );
+
+  if (onAction) {
+    return (
+      <button
+        type="button"
+        onClick={onAction}
+        className="flex w-full gap-2 rounded-md bg-gray-50 px-3 py-2.5 text-left transition-colors hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex gap-2 rounded-md bg-gray-50 px-3 py-2.5">
+      {content}
+    </div>
+  );
+}

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

@@ -1,5 +1,7 @@
 export { PanelAppsList } from './components/panel-apps-list';
+export { usePanelApps } from './hooks/use-panel-apps';
 export { PanelAppBridgeManager } from './managers/panel-app-bridge.manager';
+export { findPanelAppEntryByDisplayId } from './utils/panel-app-entry-match.utils';
 export {
   openApps,
   PANEL_APPS_DOC_BROWSER_RENDERERS,

package/src/features/panel-apps/utils/panel-app-entry-match.utils.ts

@@ -0,0 +1,17 @@
+import type { PanelAppEntryView } from '@/shared/lib/api';
+
+function isPanelAppEntryMatch(entry: PanelAppEntryView, value: string): boolean {
+  const normalizedValue = value.trim();
+  return [entry.id, entry.appId, entry.fileName, entry.title].some((candidate) => candidate.trim() === normalizedValue);
+}
+
+export function findPanelAppEntryByDisplayId(
+  entries: readonly PanelAppEntryView[],
+  value: string,
+): PanelAppEntryView | null {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return null;
+  }
+  return entries.find((entry) => isPanelAppEntryMatch(entry, normalizedValue)) ?? null;
+}