@nextclaw/ui 0.13.13 → 0.14.1-beta.0

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -29,7 +29,7 @@ import {
   DoctorDialog,
   InstallDialog,
 } from "@/features/marketplace/components/mcp/mcp-marketplace-dialogs";
-import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { NoticeCard } from "@/shared/components/feedback/notice-card";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import {
   useInstallMcpMarketplaceItem,

package/src/features/marketplace/hooks/use-marketplace-item-actions.ts

@@ -0,0 +1,101 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceManageAction,
+} from "@/shared/lib/api";
+import {
+  useInstallMarketplaceItem,
+  useManageMarketplaceItem,
+} from "@/features/marketplace/hooks/use-marketplace";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { t } from "@/shared/lib/i18n";
+import { useState } from "react";
+
+export function useMarketplaceItemActions() {
+  const installMutation = useInstallMarketplaceItem();
+  const manageMutation = useManageMarketplaceItem();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const [installingSpecs, setInstallingSpecs] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  const [managingTargets, setManagingTargets] = useState<
+    ReadonlyMap<string, MarketplaceManageAction>
+  >(new Map());
+
+  const handleInstall = async (item: MarketplaceItemSummary) => {
+    const installSpec = item.install.spec;
+    if (installingSpecs.has(installSpec)) {
+      return;
+    }
+
+    setInstallingSpecs((previous) => new Set(previous).add(installSpec));
+
+    try {
+      await installMutation.mutateAsync({
+        type: item.type,
+        spec: installSpec,
+        kind: item.install.kind,
+        skill: item.slug,
+        installPath: `skills/${item.slug}`,
+      });
+    } catch {
+      // handled in mutation onError
+    } finally {
+      setInstallingSpecs((previous) => {
+        const next = new Set(previous);
+        next.delete(installSpec);
+        return next;
+      });
+    }
+  };
+
+  const handleManage = async (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => {
+    const targetId =
+      action === "update"
+        ? record.catalogSlug || record.id || record.spec
+        : record.id || record.spec;
+    if (!targetId || managingTargets.has(targetId)) {
+      return;
+    }
+
+    if (action === "uninstall") {
+      const confirmed = await confirm({
+        title: `${t("marketplaceUninstallTitle")} ${targetId}?`,
+        description: t("marketplaceUninstallDescription"),
+        confirmLabel: t("marketplaceUninstall"),
+        variant: "destructive",
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+
+    setManagingTargets((previous) => new Map(previous).set(targetId, action));
+
+    try {
+      await manageMutation.mutateAsync({
+        type: record.type,
+        action,
+        id: targetId,
+        spec: record.spec,
+      });
+    } finally {
+      setManagingTargets((previous) => {
+        const next = new Map(previous);
+        next.delete(targetId);
+        return next;
+      });
+    }
+  };
+
+  return {
+    installState: { installingSpecs },
+    manageState: { actionsByTarget: managingTargets },
+    handleInstall,
+    handleManage,
+    ConfirmDialog,
+  };
+}

package/src/features/marketplace/hooks/use-marketplace-item-detail.ts

@@ -0,0 +1,109 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+} from "@/shared/lib/api";
+import { fetchMarketplaceSkillContent } from "@/shared/lib/api";
+import { useDocBrowser } from "@/shared/components/doc-browser";
+import { buildGenericDetailDataUrl } from "@/features/marketplace/components/marketplace-detail-doc";
+import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
+import { t } from "@/shared/lib/i18n";
+import { useRef } from "react";
+
+export function useMarketplaceItemDetail(localeFallbacks: string[]) {
+  const docBrowser = useDocBrowser();
+  const detailRequestRef = useRef({ byKey: new Map<string, number>(), seq: 0 });
+
+  const openItemDetail = async (
+    item?: MarketplaceItemSummary,
+    record?: MarketplaceInstalledRecord,
+  ) => {
+    const title =
+      item?.name ??
+      record?.label ??
+      record?.id ??
+      record?.spec ??
+      t("marketplaceUnknownItem");
+    const dedupeKey = item
+      ? `marketplace:${item.type}:${item.slug}`
+      : `marketplace:${record?.type ?? "unknown"}:${record?.id ?? record?.spec ?? title}`;
+    const openOptions = { title, kind: "content" as const, dedupeKey };
+    const updateOptions = { ...openOptions, activate: false };
+    const typeLabel = t("marketplaceTypeSkill");
+
+    if (!item) {
+      docBrowser.open(
+        buildGenericDetailDataUrl({
+          title,
+          typeLabel,
+          spec: record?.spec ?? "-",
+          summary: t("marketplaceInstalledLocalSummary"),
+          metadataRaw: JSON.stringify(record ?? {}, null, 2),
+          contentRaw: "-",
+        }),
+        openOptions,
+      );
+      return;
+    }
+
+    const requestId = detailRequestRef.current.seq + 1;
+    detailRequestRef.current.seq = requestId;
+    detailRequestRef.current.byKey.set(dedupeKey, requestId);
+    const summary = pickLocalizedText(
+      item.summaryI18n,
+      item.summary,
+      localeFallbacks,
+    );
+    docBrowser.open(
+      buildGenericDetailDataUrl({
+        title,
+        typeLabel,
+        spec: item.install.spec,
+        loading: true,
+      }),
+      openOptions,
+    );
+
+    try {
+      const content = await fetchMarketplaceSkillContent(item.slug);
+      if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
+        return;
+      }
+      docBrowser.open(
+        buildGenericDetailDataUrl({
+          title,
+          typeLabel,
+          spec: item.install.spec,
+          summary,
+          metadataRaw: content.metadataRaw,
+          contentRaw: content.bodyRaw || content.raw,
+          sourceUrl: content.sourceUrl,
+          sourceLabel: `Source (${content.source})`,
+          tags: item.tags,
+          author: item.author,
+        }),
+        updateOptions,
+      );
+    } catch (error) {
+      if (detailRequestRef.current.byKey.get(dedupeKey) !== requestId) {
+        return;
+      }
+      docBrowser.open(
+        buildGenericDetailDataUrl({
+          title,
+          typeLabel,
+          spec: item.install.spec,
+          summary,
+          metadataRaw: JSON.stringify(
+            { error: error instanceof Error ? error.message : String(error) },
+            null,
+            2,
+          ),
+          contentRaw: t("marketplaceOperationFailed"),
+        }),
+        updateOptions,
+      );
+    }
+  };
+
+  return { openItemDetail };
+}

package/src/features/marketplace/hooks/use-marketplace-list-model.ts

@@ -0,0 +1,160 @@
+import type {
+  MarketplaceInstalledView,
+  MarketplaceItemType,
+  MarketplaceListView,
+} from "@/shared/lib/api";
+import type {
+  MarketplaceItemListEntry,
+  MarketplaceItemListViewModel,
+} from "@/features/marketplace/components/marketplace-item-list-view";
+import {
+  buildCatalogLookup,
+  buildInstalledRecordLookup,
+  findCatalogItemForRecord,
+  findInstalledRecordForItem,
+  matchInstalledSearch,
+} from "@/features/marketplace/components/marketplace-page-data";
+import { useMemo } from "react";
+import { t } from "@/shared/lib/i18n";
+
+type MarketplaceListModelParams = {
+  scope: "all" | "installed";
+  typeFilter: MarketplaceItemType;
+  query: string;
+  localeFallbacks: string[];
+  catalogView?: MarketplaceListView;
+  installedView?: MarketplaceInstalledView;
+  isCatalogLoading: boolean;
+  isCatalogFetching: boolean;
+  isCatalogFetchingNextPage: boolean;
+  catalogError?: Error | null;
+  isInstalledLoading: boolean;
+  installedError?: Error | null;
+};
+
+export function useMarketplaceListModel(params: MarketplaceListModelParams) {
+  const {
+    scope,
+    typeFilter,
+    query,
+    localeFallbacks,
+    catalogView,
+    installedView,
+    isCatalogLoading,
+    isCatalogFetching,
+    isCatalogFetchingNextPage,
+    catalogError,
+    isInstalledLoading,
+    installedError,
+  } = params;
+  const installedRecords = useMemo(
+    () => installedView?.records ?? [],
+    [installedView?.records],
+  );
+  const allItems = useMemo(() => catalogView?.items ?? [], [catalogView?.items]);
+  const catalogLookup = useMemo(() => buildCatalogLookup(allItems), [allItems]);
+  const installedRecordLookup = useMemo(
+    () => buildInstalledRecordLookup(installedRecords),
+    [installedRecords],
+  );
+  const installedEntries = useMemo(
+    () =>
+      installedRecords
+        .filter((record) => record.type === typeFilter)
+        .map((record) => ({
+          key: `${record.type}:${record.spec}:${record.id ?? ""}`,
+          record,
+          item: findCatalogItemForRecord(record, catalogLookup),
+        }))
+        .filter((entry) =>
+          matchInstalledSearch(
+            entry.record,
+            entry.item,
+            query,
+            localeFallbacks,
+          ),
+        )
+        .sort((left, right) => compareInstalledRecords(left.record, right.record)),
+    [installedRecords, typeFilter, catalogLookup, query, localeFallbacks],
+  );
+  const listEntries = useMemo<MarketplaceItemListEntry[]>(
+    () =>
+      scope === "installed"
+        ? installedEntries
+        : allItems.map((item) => ({
+            key: item.id,
+            item,
+            record: findInstalledRecordForItem(item, installedRecordLookup),
+          })),
+    [allItems, installedEntries, installedRecordLookup, scope],
+  );
+  const showListSkeleton =
+    (scope === "all" && isCatalogLoading && !catalogView) ||
+    (scope === "installed" && isInstalledLoading && !installedView);
+  const isRefreshingList =
+    scope === "all" &&
+    !showListSkeleton &&
+    Boolean(catalogView) &&
+    isCatalogFetching &&
+    !isCatalogFetchingNextPage;
+  const listSummary =
+    scope === "installed"
+      ? isInstalledLoading && !installedView
+        ? t("loading")
+        : `${installedEntries.length} ${t("marketplaceInstalledSkillsCountSuffix")}`
+      : catalogView
+        ? `${allItems.length} / ${catalogView.total}`
+        : t("loading");
+  const error =
+    scope === "all" && catalogError
+      ? catalogError
+      : scope === "installed" && installedError
+        ? installedError
+        : undefined;
+
+  const itemListView: MarketplaceItemListViewModel = {
+    scope,
+    entries: listEntries,
+    header: {
+      title:
+        scope === "installed"
+          ? t("marketplaceSectionInstalledSkills")
+          : t("marketplaceAllSkills"),
+      summary: listSummary,
+      refreshingLabel: t("marketplaceRefreshingResults"),
+    },
+    status: {
+      showSkeleton: showListSkeleton,
+      isRefreshing: isRefreshingList,
+      error,
+    },
+    emptyLabel:
+      scope === "installed"
+        ? t("marketplaceNoInstalledSkills")
+        : t("marketplaceNoSkills"),
+    errorLabel:
+      scope === "installed"
+        ? t("marketplaceErrorLoadingInstalledSkills")
+        : t("marketplaceErrorLoadingSkillsData"),
+  };
+
+  return {
+    allItems,
+    installedRecordLookup,
+    installedTotal: installedView?.total ?? 0,
+    itemListView,
+    showListSkeleton,
+    isRefreshingList,
+  };
+}
+
+function compareInstalledRecords(
+  left: { installedAt?: string; spec: string },
+  right: { installedAt?: string; spec: string },
+) {
+  const leftTs = Date.parse(left.installedAt ?? "");
+  const rightTs = Date.parse(right.installedAt ?? "");
+  return Number.isNaN(leftTs) || Number.isNaN(rightTs) || leftTs === rightTs
+    ? left.spec.localeCompare(right.spec)
+    : rightTs - leftTs;
+}

package/src/features/marketplace/utils/{marketplace-installed-cache.utils.test.ts → __tests__/marketplace-installed-cache.utils.test.ts}

@@ -8,7 +8,7 @@ import type {
 import {
   applyInstallResultToInstalledView,
   applyManageResultToInstalledView
-} from './marketplace-installed-cache.utils';
+} from '../marketplace-installed-cache.utils';
 
 describe('marketplace-installed-cache', () => {
   it('adds an MCP record immediately after install success', () => {

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

@@ -1,7 +1,7 @@
 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 { PanelAppListItem } from '../panel-app-list-item';
 
 const baseEntry = {
   id: 'demo',

package/src/features/panel-apps/components/{panel-app-toolbar.test.tsx → __tests__/panel-app-toolbar.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { PanelAppToolbar } from './panel-app-toolbar';
+import { PanelAppToolbar } from '../panel-app-toolbar';
 
 describe('PanelAppToolbar', () => {
   it('shows the current panel app title in the detail header', async () => {

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();
+  });
+});