@nextclaw/ui 0.13.12 → 0.14.0

package/src/features/marketplace/hooks/__tests__/use-marketplace.test.tsx

@@ -0,0 +1,109 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { useMarketplaceItems } from "@/features/marketplace/hooks/use-marketplace";
+import type { MarketplaceListView } from "@/shared/lib/api";
+
+const mocks = vi.hoisted(() => ({
+  fetchMarketplaceItems: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/api", async () => {
+  const actual = await vi.importActual("@/shared/lib/api");
+  return {
+    ...(actual as object),
+    fetchMarketplaceItems: mocks.fetchMarketplaceItems,
+  };
+});
+
+function createMarketplaceList(name: string): MarketplaceListView {
+  return {
+    total: 1,
+    page: 1,
+    pageSize: 20,
+    totalPages: 1,
+    sort: "relevance",
+    items: [
+      {
+        id: name,
+        slug: name,
+        type: "skill",
+        name,
+        summary: name,
+        summaryI18n: { en: name },
+        tags: [],
+        author: "NextClaw",
+        install: {
+          kind: "marketplace",
+          spec: `@nextclaw/${name}`,
+          command: `nextclaw skills install @nextclaw/${name}`,
+        },
+        updatedAt: "2026-06-08T00:00:00.000Z",
+      },
+    ],
+  };
+}
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+}
+
+describe("useMarketplaceItems", () => {
+  beforeEach(() => {
+    mocks.fetchMarketplaceItems.mockReset();
+  });
+
+  it("keeps previous marketplace items while search results refresh", async () => {
+    let resolveSearch:
+      | ((value: MarketplaceListView) => void)
+      | undefined;
+    mocks.fetchMarketplaceItems
+      .mockResolvedValueOnce(createMarketplaceList("Initial Skill"))
+      .mockReturnValueOnce(
+        new Promise<MarketplaceListView>((resolve) => {
+          resolveSearch = resolve;
+        }),
+      );
+
+    const { result, rerender } = renderHook(
+      ({ q }: { q?: string }) =>
+        useMarketplaceItems({
+          type: "skill",
+          q,
+          sort: "relevance",
+          pageSize: 20,
+        }),
+      {
+        initialProps: {},
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.data?.items[0]?.name).toBe("Initial Skill");
+    });
+
+    rerender({ q: "search" });
+
+    expect(result.current.data?.items[0]?.name).toBe("Initial Skill");
+    expect(result.current.isFetching).toBe(true);
+
+    resolveSearch?.(createMarketplaceList("Search Skill"));
+
+    await waitFor(() => {
+      expect(result.current.data?.items[0]?.name).toBe("Search Skill");
+    });
+  });
+});

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/hooks/use-marketplace.ts

@@ -38,7 +38,7 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
       }
 
       const previousType = 'type' in previousParams ? previousParams.type : undefined;
-      return previousType === params.type && hasSameMarketplaceListIdentity(
+      return previousType === params.type && hasSameMarketplaceListSurface(
         previousParams as MarketplaceListParams,
         params
       )
@@ -56,14 +56,12 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
   };
 }
 
-function hasSameMarketplaceListIdentity(
+function hasSameMarketplaceListSurface(
   previousParams: MarketplaceListParams,
   nextParams: MarketplaceListParams
 ): boolean {
-  return previousParams.q === nextParams.q
-    && previousParams.tag === nextParams.tag
+  return previousParams.tag === nextParams.tag
     && previousParams.scene === nextParams.scene
-    && previousParams.sort === nextParams.sort
     && previousParams.pageSize === nextParams.pageSize;
 }
 

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/utils/{panel-app-view.utils.test.ts → __tests__/panel-app-view.utils.test.ts}

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { PanelAppEntryView } from '@/shared/lib/api';
-import { getPanelAppViewEntries } from './panel-app-view.utils';
+import { getPanelAppViewEntries } from '../panel-app-view.utils';
 
 function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
   const createdAt = overrides.createdAt ?? '2026-05-01T00:00:00.000Z';

package/src/features/pwa/managers/{pwa-service-worker-cache.manager.test.ts → __tests__/pwa-service-worker-cache.manager.test.ts}

@@ -1,4 +1,4 @@
-import serviceWorkerSource from '../../../../public/sw.js?raw';
+import serviceWorkerSource from '../../../../../public/sw.js?raw';
 
 describe('NextClaw service worker cache policy', () => {
   it('does not precache the app shell entrypoint', () => {

package/src/features/remote/components/remote-access-page.tsx

@@ -7,8 +7,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/shared/components/ui/card";
-import { NoticeCard } from "@/shared/components/ui/notice-card";
-import { StatusDot } from "@/shared/components/ui/status-dot";
+import { NoticeCard } from "@/shared/components/feedback/notice-card";
+import { StatusDot } from "@/shared/components/status/status-dot";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import {
   buildRemoteAccessFeedbackView,

package/src/features/remote/services/{remote-access-feedback.service.test.ts → __tests__/remote-access-feedback.service.test.ts}

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import type { RemoteAccessView } from '@/shared/lib/api';
 import { setLanguage } from '@/shared/lib/i18n';
-import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from './remote-access-feedback.service';
+import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from '../remote-access-feedback.service';
 
 function createRemoteAccessView(overrides: Partial<RemoteAccessView> = {}): RemoteAccessView {
   return {

package/src/{shared → features/settings}/components/config/provider-form.tsx

@@ -27,8 +27,8 @@ import {
   ConfigSplitPaneFooter,
   ConfigSplitPaneHeader
 } from '@/shared/components/config-split-page';
-import { ProviderAdvancedSettingsSection } from '@/shared/components/provider-advanced-settings-section';
-import { ProviderAuthSection } from '@/shared/components/provider-auth-section';
+import { ProviderAdvancedSettingsSection } from '@/features/settings/components/config/provider-advanced-settings-section';
+import { ProviderAuthSection } from '@/features/settings/components/config/provider-auth-section';
 import {
   EMPTY_PROVIDER_CONFIG,
   formatThinkingLevelLabel,
@@ -47,11 +47,11 @@ import {
   toProviderLocalModelId,
   type ModelConfig,
   type WireApiType
-} from './provider-form-support';
+} from '@/features/settings/utils/provider-form-support.utils';
 import { ProviderModelsSection } from './provider-models-section';
-import type { PillSelectOption } from '@/shared/components/provider-pill-selector';
-import { ProviderStatusBadge } from '@/shared/components/provider-status-badge';
-
+import type { PillSelectOption } from '@/features/settings/components/config/provider-pill-selector';
+import { ProviderStatusBadge } from '@/features/settings/components/config/provider-status-badge';
+import { hostCapabilityManager } from '@/shared/lib/host-capabilities';
 type ProviderFormProps = {
   providerName?: string;
   onProviderDeleted?: (providerName: string) => void;
@@ -488,7 +488,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       }
       setAuthSessionId(result.sessionId);
       setAuthStatusMessage(`${t('providerAuthOpenPrompt')}${result.userCode}${t('providerAuthOpenPromptSuffix')}`);
-      window.open(result.verificationUri, '_blank', 'noopener,noreferrer');
+      await hostCapabilityManager.openExternalUrl(result.verificationUri);
       scheduleProviderAuthPoll(result.sessionId, result.intervalMs);
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);

package/src/{shared/components → features/settings/components/config}/provider-status-badge.tsx

@@ -1,4 +1,4 @@
-import { StatusDot } from '@/shared/components/ui/status-dot';
+import { StatusDot } from '@/shared/components/status/status-dot';
 import { t } from '@/shared/lib/i18n';
 
 type ProviderStatusBadgeProps = {