@nextclaw/ui 0.15.5 → 0.15.7

package/src/features/chat/features/workspace/components/workspace-file-content-preview.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { WorkspaceDocxPreview } from "./file-content-preview/workspace-docx-preview";
 import { WorkspacePresentationPreview } from "./file-content-preview/workspace-presentation-preview";
 import { WorkspaceSpreadsheetPreview } from "./file-content-preview/workspace-spreadsheet-preview";
@@ -115,14 +116,97 @@ function WorkspaceUnsupportedContent({
   );
 }
 
+function readHtmlDocumentHeight(document: Document): number {
+  const { body, documentElement } = document;
+  return Math.ceil(
+    Math.max(
+      body?.clientHeight ?? 0,
+      body?.offsetHeight ?? 0,
+      body?.scrollHeight ?? 0,
+      documentElement.clientHeight,
+      documentElement.offsetHeight,
+      documentElement.scrollHeight,
+    ),
+  );
+}
+
+function WorkspaceHtmlPreview({
+  contentUrl,
+  label,
+  onContentHeightChange,
+}: {
+  contentUrl: string;
+  label: string;
+  onContentHeightChange?: (height: number) => void;
+}) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const observerCleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(
+    () => () => {
+      observerCleanupRef.current?.();
+    },
+    [],
+  );
+
+  const observeContentHeight = () => {
+    observerCleanupRef.current?.();
+    observerCleanupRef.current = null;
+    const iframe = iframeRef.current;
+    if (
+      !iframe ||
+      !onContentHeightChange ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return;
+    }
+
+    try {
+      const document = iframe.contentDocument;
+      if (!document) {
+        return;
+      }
+      const reportHeight = () => {
+        const height = readHtmlDocumentHeight(document);
+        if (height > 0) {
+          onContentHeightChange(height);
+        }
+      };
+      const observer = new ResizeObserver(reportHeight);
+      observer.observe(document.documentElement);
+      if (document.body) {
+        observer.observe(document.body);
+      }
+      reportHeight();
+      observerCleanupRef.current = () => observer.disconnect();
+    } catch {
+      // Cross-origin documents keep the caller's bounded fallback height.
+    }
+  };
+
+  return (
+    <iframe
+      ref={iframeRef}
+      allowFullScreen
+      className="h-full w-full border-0 bg-white"
+      data-testid="workspace-html-preview"
+      src={contentUrl}
+      title={label}
+      onLoad={observeContentHeight}
+    />
+  );
+}
+
 export function WorkspaceFileContentPreview({
   contentUrl,
   kind,
   label,
+  onHtmlContentHeightChange,
 }: {
   contentUrl: string;
   kind: WorkspaceFileContentKind;
   label: string;
+  onHtmlContentHeightChange?: (height: number) => void;
 }) {
   if (kind === "image") {
     return (
@@ -165,14 +249,21 @@ export function WorkspaceFileContentPreview({
       </div>
     );
   }
-  if (kind === "pdf" || kind === "html") {
+  if (kind === "html") {
+    return (
+      <WorkspaceHtmlPreview
+        contentUrl={contentUrl}
+        label={label}
+        onContentHeightChange={onHtmlContentHeightChange}
+      />
+    );
+  }
+  if (kind === "pdf") {
     return (
       <iframe
         allowFullScreen
         className="h-full w-full border-0 bg-white"
-        data-testid={
-          kind === "pdf" ? "workspace-content-pdf" : "workspace-html-preview"
-        }
+        data-testid="workspace-content-pdf"
         src={contentUrl}
         title={label}
       />

package/src/features/chat/pages/__tests__/ncp-chat-page.test.ts

@@ -215,6 +215,29 @@ describe('buildChatRunMetadata', () => {
     ).not.toHaveProperty('ui_inline_tokens');
   });
 
+  it('adds structured workspace references to run metadata', () => {
+    expect(
+      buildChatRunMetadata({
+        composerNodes: [
+          createChatComposerTokenNode({
+            tokenKind: 'workspace_file',
+            tokenKey: 'src/file name.ts',
+            label: 'file name.ts',
+          }),
+        ],
+      }),
+    ).toMatchObject({
+      ui_inline_tokens: [
+        {
+          kind: 'workspace_file',
+          key: 'src/file name.ts',
+          label: 'file name.ts',
+          rawText: '@file:src%2Ffile%20name.ts',
+        },
+      ],
+    });
+  });
+
   it('serializes child session materialization metadata for side chat drafts', () => {
     expect(
       buildChatRunMetadata({

package/src/features/marketplace/components/__tests__/marketplace-page-detail.test.tsx

@@ -62,6 +62,7 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceRecentItems: () => mocks.itemsQuery,
   useMarketplaceInstalled: () => mocks.installedQuery,
   useMarketplaceSkillScenes: () => ({
     data: { scenes: [] },

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -31,6 +31,7 @@ const mocks = vi.hoisted(() => ({
   openExternalUrl: vi.fn(),
   routeParams: {} as { scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
+  recentItemsQuery: null as unknown as ItemsQueryState,
   installedQuery: null as unknown as InstalledQueryState,
   installMutation: {
     mutateAsync: vi.fn(),
@@ -82,6 +83,7 @@ vi.mock("@/shared/lib/host-capabilities", () => ({
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceRecentItems: () => mocks.recentItemsQuery,
   useMarketplaceSkillScenes: () => ({
     data: {
       scenes: [
@@ -135,6 +137,7 @@ function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
     isError: false,
     error: null,
     hasNextPage: false,
+    fetchNextPage: vi.fn(),
     ...overrides,
   };
 }
@@ -172,6 +175,7 @@ describe("MarketplacePage", () => {
     mocks.manageMutation.isPending = false;
     mocks.manageMutation.variables = undefined;
     mocks.itemsQuery = createItemsQuery();
+    mocks.recentItemsQuery = createItemsQuery();
     mocks.installedQuery = createInstalledQuery();
   });
 
@@ -216,6 +220,64 @@ describe("MarketplacePage", () => {
     expect(screen.getByText("Web Search")).toBeTruthy();
   });
 
+  it("shows the stable catalog total instead of a loaded-page fraction", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 36,
+        page: 1,
+        pageSize: 20,
+        totalPages: 2,
+        sort: "relevance",
+        items: [createMarketplaceItem()],
+      } satisfies MarketplaceListView,
+      hasNextPage: true,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByText("36 skills")).toBeTruthy();
+    expect(screen.queryByText("1 / 36")).toBeNull();
+  });
+
+  it("renders recently updated skills from the dedicated updated query", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 4,
+        page: 1,
+        pageSize: 20,
+        totalPages: 1,
+        sort: "relevance",
+        items: [
+          createMarketplaceItem({ name: "Relevant One" }),
+          createMarketplaceItem({ id: "2", slug: "2", name: "Relevant Two" }),
+          createMarketplaceItem({ id: "3", slug: "3", name: "Relevant Three" }),
+          createMarketplaceItem({ id: "4", slug: "4", name: "Relevant Four" }),
+        ],
+      } satisfies MarketplaceListView,
+    });
+    mocks.recentItemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 6,
+        totalPages: 1,
+        sort: "updated",
+        items: [
+          createMarketplaceItem({
+            id: "recent",
+            slug: "recent",
+            name: "Actually Recent",
+            updatedAt: "2026-07-17T00:00:00.000Z",
+          }),
+        ],
+      } satisfies MarketplaceListView,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByText("Actually Recent")).toBeTruthy();
+  });
+
   it("does not render a redundant type label in skill cards", () => {
     mocks.itemsQuery = createItemsQuery({
       data: {

package/src/features/marketplace/components/curated-shelves/__tests__/marketplace-curated-scene-route.test.tsx

@@ -72,6 +72,7 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
 
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceRecentItems: () => mocks.itemsQuery,
   useMarketplaceSkillScenes: () => mocks.scenesQuery,
   useMarketplaceSkillSceneCounts: () => new Map([["development-debugging", 2]]),
   useMarketplaceInstalled: () => ({

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.tsx

@@ -33,7 +33,7 @@ export type MarketplaceShelfEntry = {
 };
 
 export function MarketplaceCuratedShelves(props: {
-  entries: MarketplaceShelfEntry[];
+  recentEntries: MarketplaceShelfEntry[];
   scenes: MarketplaceSceneView[];
   isScenesLoading: boolean;
   isItemsLoading: boolean;
@@ -44,7 +44,7 @@ export function MarketplaceCuratedShelves(props: {
   onOpenScene: (scene: string) => void;
 }) {
   const {
-    entries,
+    recentEntries,
     scenes,
     isScenesLoading,
     isItemsLoading,
@@ -55,10 +55,6 @@ export function MarketplaceCuratedShelves(props: {
     onOpenScene,
   } = props;
   const localeFallbacks = buildLocaleFallbacks(language);
-  const recentEntries = [...entries]
-    .sort((left, right) => compareUpdatedAt(left.item, right.item))
-    .slice(0, 6);
-
   return (
     <div className="mb-4 space-y-5">
       <section className="space-y-2.5">
@@ -345,15 +341,6 @@ function ShelfHeader({
   );
 }
 
-function compareUpdatedAt(left: MarketplaceItemSummary, right: MarketplaceItemSummary) {
-  const leftTs = Date.parse(left.updatedAt);
-  const rightTs = Date.parse(right.updatedAt);
-  if (Number.isNaN(leftTs) || Number.isNaN(rightTs)) {
-    return right.updatedAt.localeCompare(left.updatedAt);
-  }
-  return rightTs - leftTs;
-}
-
 function readLocalized(text: MarketplaceShelfLocalizedText, language: string) {
   return language.startsWith("zh") ? text.zh : text.en;
 }

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

@@ -6,6 +6,7 @@ import { useI18n } from "@/app/components/i18n-provider";
 import {
   useMarketplaceInstalled,
   useMarketplaceItems,
+  useMarketplaceRecentItems,
 } from "@/features/marketplace/hooks/use-marketplace";
 import {
   FilterPanel,
@@ -77,6 +78,10 @@ export function MarketplacePage({
     sort,
     pageSize: PAGE_SIZE,
   });
+  const recentItemsQuery = useMarketplaceRecentItems(
+    typeFilter,
+    scope === "all" && !searchText.trim() && !query && !sceneParam,
+  );
 
   const {
     containerRef: listContainerRef,
@@ -115,6 +120,7 @@ export function MarketplacePage({
 
   const curatedSceneRoute = useMarketplaceCuratedSceneRoute({
     items: listModel.allItems,
+    recentItems: recentItemsQuery.data?.items ?? [],
     installedRecordLookup: listModel.installedRecordLookup,
     scene: sceneParam,
     forcedType,
@@ -201,10 +207,12 @@ export function MarketplacePage({
 
           {curatedSceneRoute.showShelves && (
             <MarketplaceCuratedShelves
-              entries={curatedSceneRoute.entries}
+              recentEntries={curatedSceneRoute.recentEntries}
               scenes={curatedSceneRoute.scenes}
               isScenesLoading={curatedSceneRoute.isScenesLoading}
-              isItemsLoading={listModel.showListSkeleton}
+              isItemsLoading={
+                listModel.showListSkeleton || recentItemsQuery.isLoading
+              }
               language={language}
               installState={installState}
               onOpen={(entry) => void openItemDetail(entry.item, entry.record)}

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

@@ -1,7 +1,10 @@
 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 {
+  useMarketplaceItems,
+  useMarketplaceRecentItems,
+} from "@/features/marketplace/hooks/use-marketplace";
 import type { MarketplaceListView } from "@/shared/lib/api";
 
 const mocks = vi.hoisted(() => ({
@@ -106,4 +109,26 @@ describe("useMarketplaceItems", () => {
       expect(result.current.data?.items[0]?.name).toBe("Search Skill");
     });
   });
+
+  it("loads the recently updated shelf from its own updated query", async () => {
+    mocks.fetchMarketplaceItems.mockResolvedValueOnce(
+      createMarketplaceList("Recently Updated Skill"),
+    );
+
+    const { result } = renderHook(() => useMarketplaceRecentItems("skill"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.data?.items[0]?.name).toBe(
+        "Recently Updated Skill",
+      );
+    });
+    expect(mocks.fetchMarketplaceItems).toHaveBeenCalledWith({
+      type: "skill",
+      sort: "updated",
+      page: 1,
+      pageSize: 6,
+    });
+  });
 });

package/src/features/marketplace/hooks/use-marketplace-curated-scene-route.ts

@@ -12,6 +12,7 @@ import { useMemo } from "react";
 
 type MarketplaceCuratedSceneRouteParams = {
   items: MarketplaceItemSummary[];
+  recentItems: MarketplaceItemSummary[];
   installedRecordLookup: Map<string, MarketplaceInstalledRecord>;
   scene?: string;
   forcedType?: "skills";
@@ -28,6 +29,7 @@ export function useMarketplaceCuratedSceneRoute(
 ) {
   const {
     items,
+    recentItems,
     installedRecordLookup,
     scene,
     forcedType,
@@ -62,6 +64,14 @@ export function useMarketplaceCuratedSceneRoute(
       })),
     [items, installedRecordLookup],
   );
+  const recentEntries = useMemo(
+    () =>
+      recentItems.map((item) => ({
+        item,
+        record: findInstalledRecordForItem(item, installedRecordLookup),
+      })),
+    [installedRecordLookup, recentItems],
+  );
   const selectedScene = useMemo(() => {
     const normalizedScene = scene?.trim();
     if (!normalizedScene) {
@@ -94,6 +104,7 @@ export function useMarketplaceCuratedSceneRoute(
 
   return {
     entries,
+    recentEntries,
     scenes,
     selectedScene,
     sceneEntries: entries,

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

@@ -103,7 +103,7 @@ export function useMarketplaceListModel(params: MarketplaceListModelParams) {
         ? t("loading")
         : `${installedEntries.length} ${t("marketplaceInstalledSkillsCountSuffix")}`
       : catalogView
-        ? `${allItems.length} / ${catalogView.total}`
+        ? `${catalogView.total} ${t("marketplaceSkillsCountSuffix")}`
         : t("loading");
   const error =
     scope === "all" && catalogError

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

@@ -25,6 +25,8 @@ import type {
 import { collapseMarketplaceListPages } from '@/features/marketplace/utils/marketplace-list-pages.utils';
 import { useMemo } from 'react';
 
+const MARKETPLACE_BACKGROUND_REFRESH_MS = 30_000;
+
 export function useMarketplaceItems(params: MarketplaceListParams) {
   const query = useInfiniteQuery({
     queryKey: ['marketplace-items', params],
@@ -45,7 +47,11 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
         ? previousData
         : undefined;
     },
-    staleTime: 15_000
+    staleTime: 15_000,
+    refetchInterval: params.q ? false : MARKETPLACE_BACKGROUND_REFRESH_MS,
+    refetchOnMount: 'always',
+    refetchOnReconnect: 'always',
+    refetchOnWindowFocus: 'always'
   });
 
   const data = useMemo(() => collapseMarketplaceListPages(query.data), [query.data]);
@@ -56,6 +62,27 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
   };
 }
 
+export function useMarketplaceRecentItems(
+  type: MarketplaceItemType,
+  enabled = true
+) {
+  return useQuery({
+    queryKey: ['marketplace-recent-items', type],
+    queryFn: () => fetchMarketplaceItems({
+      type,
+      sort: 'updated',
+      page: 1,
+      pageSize: 6
+    }),
+    enabled,
+    staleTime: 15_000,
+    refetchInterval: MARKETPLACE_BACKGROUND_REFRESH_MS,
+    refetchOnMount: 'always',
+    refetchOnReconnect: 'always',
+    refetchOnWindowFocus: 'always'
+  });
+}
+
 function hasSameMarketplaceListSurface(
   previousParams: MarketplaceListParams,
   nextParams: MarketplaceListParams

package/src/features/settings/components/config/provider-form.tsx

@@ -230,10 +230,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
 
   const handleAddModel = () => {
     const result = addProviderLocalModel(models, modelDraft, providerModelAliases);
-    if (result.errorKey) {
-      toast.error(t('providerModelInvalidProviderPrefix'));
-      return;
-    }
     setModels(result.models);
     setModelDraft(result.draft);
   };

package/src/features/settings/utils/__tests__/provider-form-support.utils.test.ts

@@ -22,10 +22,9 @@ describe('provider form model defaults', () => {
   });
 
   it('serializes local model ids with the providerId prefix', () => {
-    expect(serializeModelsForSave(['gpt-5.5', 'openai-work/gpt-5.4'], 'openai-work')).toEqual([
-      'openai-work/gpt-5.5',
-      'openai-work/gpt-5.4'
-    ]);
+    expect(
+      serializeModelsForSave(['gpt-5.5', 'openai-work/gpt-5.4', 'bedrock/claude-fable-5'], 'openai-work')
+    ).toEqual(['openai-work/gpt-5.5', 'openai-work/gpt-5.4', 'openai-work/bedrock/claude-fable-5']);
   });
 
   it('builds a minimal save payload from changed provider fields', () => {
@@ -57,15 +56,14 @@ describe('provider form model defaults', () => {
     });
   });
 
-  it('adds local model drafts without accepting provider prefixes', () => {
+  it('adds provider-local model ids with nested namespace segments', () => {
     expect(addProviderLocalModel([], ' gpt-5.5 ', ['openai-work'])).toEqual({
       models: ['gpt-5.5'],
       draft: ''
     });
-    expect(addProviderLocalModel([], ' other/gpt-5.5 ', ['openai-work'])).toEqual({
-      models: [],
-      draft: ' other/gpt-5.5 ',
-      errorKey: 'providerModelInvalidProviderPrefix'
+    expect(addProviderLocalModel([], ' bedrock/claude-fable-5 ', ['openrouter'])).toEqual({
+      models: ['bedrock/claude-fable-5'],
+      draft: ''
     });
   });
 

package/src/features/settings/utils/provider-form-model.utils.ts

@@ -8,7 +8,6 @@ import {
 type AddProviderModelResult = {
   models: string[];
   draft: string;
-  errorKey?: 'providerModelInvalidProviderPrefix';
 };
 
 export function addProviderLocalModel(models: string[], draft: string, aliases: string[]): AddProviderModelResult {
@@ -16,9 +15,6 @@ export function addProviderLocalModel(models: string[], draft: string, aliases:
   if (!next) {
     return { models, draft };
   }
-  if (next.includes('/')) {
-    return { models, draft, errorKey: 'providerModelInvalidProviderPrefix' };
-  }
   if (models.includes(next)) {
     return { models, draft: '' };
   }

package/src/features/system-status/hooks/use-current-version-release-notes-link.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLanguage } from '@/shared/lib/i18n';
+import {
+  fetchReleaseNotesData,
+  resolveReleaseNotesHtmlUrl,
+  resolveVersionReleaseNotesDataUrl,
+  type ReleaseNotesLink,
+  type ReleaseNotesLocale
+} from '@/features/system-status/utils/update-release-notes.utils';
+
+function getReleaseNotesLocale(): ReleaseNotesLocale {
+  return getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
+}
+
+export function useCurrentVersionReleaseNotesLink(productVersion: string | undefined): ReleaseNotesLink | null {
+  const dataUrl = resolveVersionReleaseNotesDataUrl(productVersion);
+  const locale = getReleaseNotesLocale();
+  const releaseNotesQuery = useQuery({
+    queryKey: ['current-release-notes', dataUrl],
+    queryFn: async () => await fetchReleaseNotesData(dataUrl ?? ''),
+    enabled: Boolean(dataUrl),
+    retry: false,
+    staleTime: 5 * 60 * 1000
+  });
+  const url = resolveReleaseNotesHtmlUrl(releaseNotesQuery.data, locale);
+  const version = productVersion?.trim();
+  return url && version
+    ? {
+        url,
+        versionLabel: `v${version}`
+      }
+    : null;
+}

package/src/features/system-status/index.ts

@@ -2,7 +2,16 @@ export { useRuntimeControlPanelView, useRuntimeStatusBadgeView, useSystemStatus,
 export { systemStatusManager } from './managers/system-status.manager';
 export { isTransientRuntimeConnectionErrorMessage } from '@/shared/lib/transport';
 export { runtimeUpdateManager } from './managers/runtime-update.manager';
+export { useCurrentVersionReleaseNotesLink } from './hooks/use-current-version-release-notes-link';
+export {
+  fetchReleaseNotesData,
+  resolveReleaseNotesHtmlUrl,
+  resolveUpdateReleaseNotesLink,
+  resolveVersionReleaseNotesDataUrl,
+} from './utils/update-release-notes.utils';
 export type { SystemStatusState, SystemStatusView } from './types/system-status.types';
 export { useSystemStatusStore } from './stores/system-status.store';
 export { useRuntimeUpdateStore } from './stores/runtime-update.store';
+export type { RuntimeUpdateBusyAction } from './stores/runtime-update.store';
+export type { ReleaseNotesLink, ReleaseNotesLocale } from './utils/update-release-notes.utils';
 export { SecurityConfig } from './components/security-config';