@nextclaw/ui 0.13.13 → 0.14.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/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,10 +47,10 @@ 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;

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 = {

package/src/{shared/components/model-config.test.tsx → features/settings/pages/__tests__/model-config-page.test.tsx}

@@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
-import { ModelConfig } from '@/shared/components/model-config';
+import { ModelConfigPage } from '@/features/settings/pages/model-config-page';
 import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
@@ -49,6 +49,41 @@ const mocks = vi.hoisted(() => ({
 vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
+  useProviders: () => ({
+    data: {
+      providers: Object.fromEntries(
+        Object.entries(mocks.configQuery.data.providers ?? {}).map(([providerId, provider]) => [
+          providerId,
+          {
+            providerId,
+            providerType: providerId,
+            isBuiltInType: false,
+            isCustom: false,
+            enabled: provider.enabled,
+            apiKeySet: provider.apiKeySet,
+            models: provider.models ?? []
+          }
+        ])
+      )
+    },
+    isFetched: true,
+    isSuccess: true
+  }),
+  useProviderTemplates: () => ({
+    data: {
+      providerTemplates: (mocks.metaQuery.data.providers ?? []).map((provider) => ({
+        id: provider.name,
+        providerType: provider.name,
+        displayName: provider.displayName,
+        modelPrefix: provider.modelPrefix,
+        defaultModels: provider.defaultModels,
+        keywords: provider.keywords,
+        envKey: provider.envKey
+      }))
+    },
+    isFetched: true,
+    isSuccess: true
+  }),
   useConfigSchema: () => mocks.schemaQuery,
   useUpdateModel: () => ({
     mutate: mocks.mutate,
@@ -56,7 +91,7 @@ vi.mock('@/shared/hooks/use-config', () => ({
   })
 }));
 
-describe('ModelConfig', () => {
+describe('ModelConfigPage', () => {
   beforeEach(() => {
     mocks.mutate.mockReset();
     setLanguage('en');
@@ -128,7 +163,7 @@ describe('ModelConfig', () => {
   it('submits the workspace together with the selected model', async () => {
     const user = userEvent.setup();
 
-    render(<ModelConfig />);
+    render(<ModelConfigPage />);
 
     const workspaceInput = await screen.findByLabelText('Default Path');
     await user.clear(workspaceInput);
@@ -158,7 +193,7 @@ describe('ModelConfig', () => {
       providers: []
     } as typeof mocks.metaQuery.data;
 
-    render(<ModelConfig />);
+    render(<ModelConfigPage />);
 
     expect(await screen.findByText('No providers configured')).toBeTruthy();
     expect(screen.getByText('Add an AI provider to start using the platform.')).toBeTruthy();
@@ -178,7 +213,7 @@ describe('ModelConfig', () => {
   it('switches to the new provider without clearing the selection and auto-fills its first model', async () => {
     const user = userEvent.setup();
 
-    render(<ModelConfig />);
+    render(<ModelConfigPage />);
 
     const providerTrigger = screen.getByRole('combobox');
     fireEvent.keyDown(providerTrigger, { key: 'ArrowDown' });

package/src/{shared/components/config/providers-list.test.tsx → features/settings/pages/__tests__/providers-config-page.test.tsx}

@@ -1,9 +1,11 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ProvidersList } from '@/shared/components/config/providers-list';
+import { ProvidersConfigPage } from '@/features/settings/pages/providers-config-page';
 
 const mocks = vi.hoisted(() => ({
   createProviderMutateAsync: vi.fn(),
+  deleteProviderMutate: vi.fn(),
+  updateProviderMutate: vi.fn(),
   configQuery: {
     data: {
       providers: {
@@ -33,29 +35,70 @@ const mocks = vi.hoisted(() => ({
 vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
+  useProviders: () => ({
+    data: {
+      providers: Object.fromEntries(
+        Object.entries(mocks.configQuery.data.providers).map(([providerId, provider]) => [
+          providerId,
+          {
+            providerId,
+            providerType: providerId,
+            isBuiltInType: providerId === 'nextclaw',
+            isCustom: false,
+            enabled: provider.enabled,
+            apiKeySet: provider.apiKeySet,
+          },
+        ]),
+      ),
+    },
+    isFetched: true,
+    isSuccess: true,
+  }),
+  useProviderTemplates: () => ({
+    data: {
+      providerTemplates: mocks.metaQuery.data.providers.map((provider) => ({
+        id: provider.name,
+        providerType: provider.name,
+        displayName: provider.displayName,
+        defaultApiBase: provider.defaultApiBase,
+        keywords: [],
+        envKey: '',
+      })),
+    },
+    isFetched: true,
+    isSuccess: true,
+  }),
   useConfigSchema: () => mocks.schemaQuery,
   useCreateProvider: () => ({
     mutateAsync: mocks.createProviderMutateAsync,
     isPending: false,
   }),
+  useDeleteProvider: () => ({
+    mutate: mocks.deleteProviderMutate,
+    isPending: false,
+  }),
+  useUpdateProvider: () => ({
+    mutate: mocks.updateProviderMutate,
+    isPending: false,
+  }),
 }));
 
-vi.mock('@/shared/components/config/provider-form', () => ({
+vi.mock('@/features/settings/components/config/provider-form', () => ({
   ProviderForm: ({ providerName }: { providerName?: string }) => (
     <div data-testid="provider-form">{providerName ?? 'none'}</div>
   ),
 }));
 
-describe('ProvidersList', () => {
+describe('ProvidersConfigPage', () => {
   it('keeps the nextclaw builtin provider at the end of the list', () => {
-    const { container } = render(<ProvidersList />);
+    const { container } = render(<ProvidersConfigPage />);
 
     const sidebarSection = container.querySelector('section');
     if (!(sidebarSection instanceof HTMLElement)) {
       throw new Error('provider sidebar not found');
     }
 
-    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) =>
+    const providerButtons = Array.from(sidebarSection.querySelectorAll('[role="button"]')).filter((button) =>
       ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label)),
     );