@nextclaw/ui 0.13.11 → 0.13.13

package/src/features/chat/stores/chat-thread.store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
 import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
@@ -33,6 +34,19 @@ export type ChatWorkspaceFileTab = {
   fullLines?: ChatFileOperationLineViewModel[];
 };
 
+export type ChatWorkspaceNavigationEntry =
+  | {
+      kind: 'child-session';
+      key: string;
+    }
+  | {
+      kind: 'file';
+      key: string;
+    }
+  | {
+      kind: 'cron';
+    };
+
 export type ChatThreadSnapshot = {
   isProviderStateResolved: boolean;
   modelOptions: ChatModelOption[];
@@ -47,6 +61,7 @@ export type ChatThreadSnapshot = {
   availableAgents?: AgentProfileView[];
   sessionDisplayName?: string;
   sessionProjectRoot?: string | null;
+  sessionWorkingDir?: string | null;
   sessionProjectName?: string | null;
   canDeleteSession: boolean;
   isDeletePending: boolean;
@@ -64,14 +79,43 @@ export type ChatThreadSnapshot = {
   activeChildSessionKey?: string | null;
   workspaceFileTabs: ChatWorkspaceFileTab[];
   activeWorkspaceFileKey?: string | null;
+  workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
+  workspaceNavigationHistoryIndex: number;
   contextWindow?: SessionContextWindowView | null;
 };
 
+const CHAT_THREAD_WORKSPACE_STORAGE_KEY = 'nextclaw.chat.workspace-panel.state';
+const CHAT_THREAD_WORKSPACE_STORAGE_VERSION = 2;
+const CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS = 8;
+
 type ChatThreadStore = {
   snapshot: ChatThreadSnapshot;
   setSnapshot: (patch: Partial<ChatThreadSnapshot>) => void;
 };
 
+type PersistedChatThreadStore = {
+  snapshot?: {
+    workspacePanelParentKey?: unknown;
+    activeWorkspacePanelKind?: unknown;
+    activeChildSessionKey?: unknown;
+    workspaceFileTabs?: unknown;
+    activeWorkspaceFileKey?: unknown;
+    workspaceNavigationHistory?: unknown;
+    workspaceNavigationHistoryIndex?: unknown;
+  };
+};
+
+type PersistedChatWorkspaceSnapshot = Pick<
+  ChatThreadSnapshot,
+  | 'workspacePanelParentKey'
+  | 'activeWorkspacePanelKind'
+  | 'activeChildSessionKey'
+  | 'workspaceFileTabs'
+  | 'activeWorkspaceFileKey'
+  | 'workspaceNavigationHistory'
+  | 'workspaceNavigationHistoryIndex'
+>;
+
 const initialSnapshot: ChatThreadSnapshot = {
   isProviderStateResolved: false,
   modelOptions: [],
@@ -86,6 +130,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   availableAgents: [],
   sessionDisplayName: undefined,
   sessionProjectRoot: null,
+  sessionWorkingDir: null,
   sessionProjectName: null,
   canDeleteSession: false,
   isDeletePending: false,
@@ -103,16 +148,251 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeChildSessionKey: null,
   workspaceFileTabs: [],
   activeWorkspaceFileKey: null,
+  workspaceNavigationHistory: [],
+  workspaceNavigationHistoryIndex: 0,
   contextWindow: null
 };
 
-export const useChatThreadStore = create<ChatThreadStore>((set) => ({
-  snapshot: initialSnapshot,
-  setSnapshot: (patch) =>
-    set((state) => ({
-      snapshot: {
-        ...state.snapshot,
-        ...patch
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object';
+}
+
+function normalizeOptionalString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : null;
+}
+
+function normalizeOptionalNumber(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : null;
+}
+
+function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
+  return typeof value === 'number' && Number.isInteger(value)
+    ? Math.min(Math.max(0, value), maxIndex)
+    : maxIndex;
+}
+
+function isWorkspacePanelKind(
+  value: unknown,
+): value is NonNullable<ChatThreadSnapshot['activeWorkspacePanelKind']> {
+  return value === 'child-session' || value === 'file' || value === 'cron';
+}
+
+function normalizePersistedWorkspaceNavigationEntry(
+  value: unknown,
+): ChatWorkspaceNavigationEntry | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  if (value.kind === 'cron') {
+    return { kind: 'cron' };
+  }
+  const key = normalizeOptionalString(value.key);
+  if (!key || (value.kind !== 'child-session' && value.kind !== 'file')) {
+    return null;
+  }
+  return {
+    kind: value.kind,
+    key,
+  };
+}
+
+function createWorkspaceNavigationEntryFromSnapshot({
+  activeChildSessionKey,
+  activeWorkspaceFileKey,
+  activeWorkspacePanelKind,
+}: {
+  activeWorkspacePanelKind: ChatThreadSnapshot['activeWorkspacePanelKind'];
+  activeChildSessionKey: string | null;
+  activeWorkspaceFileKey: string | null;
+}): ChatWorkspaceNavigationEntry | null {
+  if (activeWorkspacePanelKind === 'cron') {
+    return { kind: 'cron' };
+  }
+  if (activeWorkspacePanelKind === 'child-session' && activeChildSessionKey) {
+    return {
+      kind: 'child-session',
+      key: activeChildSessionKey,
+    };
+  }
+  if (activeWorkspacePanelKind === 'file' && activeWorkspaceFileKey) {
+    return {
+      kind: 'file',
+      key: activeWorkspaceFileKey,
+    };
+  }
+  return null;
+}
+
+function normalizeOptionalText(value: unknown): string | null {
+  return typeof value === 'string' ? value : null;
+}
+
+function normalizePersistedWorkspaceFileTab(
+  value: unknown,
+): ChatWorkspaceFileTab | null {
+  if (
+    !isRecord(value)
+    || typeof value.key !== 'string'
+    || typeof value.path !== 'string'
+    || (value.viewMode !== 'preview' && value.viewMode !== 'diff')
+  ) {
+    return null;
+  }
+  const key = value.key.trim();
+  const path = value.path.trim();
+  if (!key || !path) {
+    return null;
+  }
+  return {
+    key,
+    parentSessionKey: normalizeOptionalString(value.parentSessionKey),
+    path,
+    label: normalizeOptionalString(value.label),
+    viewMode: value.viewMode,
+    line: normalizeOptionalNumber(value.line),
+    column: normalizeOptionalNumber(value.column),
+    rawText: normalizeOptionalText(value.rawText),
+    beforeText: normalizeOptionalText(value.beforeText),
+    afterText: normalizeOptionalText(value.afterText),
+    patchText: normalizeOptionalText(value.patchText),
+    oldStartLine: normalizeOptionalNumber(value.oldStartLine),
+    newStartLine: normalizeOptionalNumber(value.newStartLine),
+  };
+}
+
+function toPersistedWorkspaceFileTab(
+  tab: ChatWorkspaceFileTab,
+): ChatWorkspaceFileTab {
+  return {
+    key: tab.key,
+    parentSessionKey: tab.parentSessionKey,
+    path: tab.path,
+    label: tab.label,
+    viewMode: tab.viewMode,
+    line: tab.line,
+    column: tab.column,
+    rawText: tab.rawText,
+    beforeText: tab.beforeText,
+    afterText: tab.afterText,
+    patchText: tab.patchText,
+    oldStartLine: tab.oldStartLine,
+    newStartLine: tab.newStartLine,
+  };
+}
+
+function normalizePersistedWorkspaceSnapshot(
+  value: unknown,
+): PersistedChatWorkspaceSnapshot | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  const workspaceFileTabs = Array.isArray(value.workspaceFileTabs)
+    ? value.workspaceFileTabs
+      .map(normalizePersistedWorkspaceFileTab)
+      .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
+      .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+    : [];
+  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const resolvedActiveWorkspaceFileKey =
+    activeWorkspaceFileKey && workspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
+      ? activeWorkspaceFileKey
+      : workspaceFileTabs[0]?.key ?? null;
+  const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
+    ? value.activeWorkspacePanelKind
+    : null;
+  const resolvedActiveWorkspacePanelKind =
+    activeWorkspacePanelKind === 'file' && !resolvedActiveWorkspaceFileKey
+      ? null
+      : activeWorkspacePanelKind;
+  const activeChildSessionKey = normalizeOptionalString(value.activeChildSessionKey);
+  const fallbackHistoryEntry = createWorkspaceNavigationEntryFromSnapshot({
+    activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
+    activeChildSessionKey,
+    activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
+  });
+  const normalizedNavigationHistory = Array.isArray(value.workspaceNavigationHistory)
+    ? value.workspaceNavigationHistory
+      .map(normalizePersistedWorkspaceNavigationEntry)
+      .filter((entry): entry is ChatWorkspaceNavigationEntry => entry !== null)
+      .filter((entry) =>
+        entry.kind !== 'file' || workspaceFileTabs.some((tab) => tab.key === entry.key),
+      )
+    : [];
+  const workspaceNavigationHistory =
+    normalizedNavigationHistory.length > 0
+      ? normalizedNavigationHistory
+      : fallbackHistoryEntry
+        ? [fallbackHistoryEntry]
+        : [];
+  const workspaceNavigationHistoryIndex =
+    workspaceNavigationHistory.length > 0
+      ? normalizeHistoryIndex(
+        value.workspaceNavigationHistoryIndex,
+        workspaceNavigationHistory.length - 1,
+      )
+      : 0;
+
+  return {
+    workspacePanelParentKey: normalizeOptionalString(value.workspacePanelParentKey),
+    activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
+    activeChildSessionKey,
+    workspaceFileTabs,
+    activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
+    workspaceNavigationHistory,
+    workspaceNavigationHistoryIndex,
+  };
+}
+
+export const useChatThreadStore = create<ChatThreadStore>()(
+  persist(
+    (set) => ({
+      snapshot: initialSnapshot,
+      setSnapshot: (patch) =>
+        set((state) => ({
+          snapshot: {
+            ...state.snapshot,
+            ...patch
+          }
+        }))
+    }),
+    {
+      name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
+      version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state): PersistedChatThreadStore => ({
+        snapshot: {
+          workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
+          activeWorkspacePanelKind: state.snapshot.activeWorkspacePanelKind,
+          activeChildSessionKey: state.snapshot.activeChildSessionKey,
+          workspaceFileTabs: state.snapshot.workspaceFileTabs
+            .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+            .map(toPersistedWorkspaceFileTab),
+          activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
+          workspaceNavigationHistory: state.snapshot.workspaceNavigationHistory,
+          workspaceNavigationHistoryIndex: state.snapshot.workspaceNavigationHistoryIndex,
+        }
+      }),
+      merge: (persistedState, currentState) => {
+        const persistedSnapshot = isRecord(persistedState)
+          ? persistedState.snapshot
+          : null;
+        const workspaceSnapshot =
+          normalizePersistedWorkspaceSnapshot(persistedSnapshot);
+        if (!workspaceSnapshot) {
+          return currentState;
+        }
+        return {
+          ...currentState,
+          snapshot: {
+            ...currentState.snapshot,
+            ...workspaceSnapshot
+          }
+        };
       }
-    }))
-}));
+    }
+  )
+);

package/src/features/chat/utils/ncp-session-adapter.utils.test.ts

@@ -22,6 +22,7 @@ describe('adaptNcpSessionSummary', () => {
       createSummary({
         agentId: 'engineer',
         lastMessageAt: '2026-03-18T00:00:00.000Z',
+        workingDir: '/Users/demo/workspace/project-alpha',
         metadata: {
           label: 'NCP Planning Thread',
           model: 'openai/gpt-5',
@@ -40,6 +41,7 @@ describe('adaptNcpSessionSummary', () => {
       preferredModel: 'openai/gpt-5',
       preferredThinking: 'medium',
       projectRoot: '/Users/demo/workspace/project-alpha',
+      workingDir: '/Users/demo/workspace/project-alpha',
       projectName: 'project-alpha',
       lastMessageAt: '2026-03-18T00:00:00.000Z',
       readAt: '2026-03-17T23:59:00.000Z',
@@ -50,6 +52,25 @@ describe('adaptNcpSessionSummary', () => {
     });
   });
 
+  it('uses workingDir as the local file base even when projectRoot is absent', () => {
+    const adapted = adaptNcpSessionSummary(
+      createSummary({
+        workingDir: '/Users/demo/workspace',
+        metadata: {
+          label: 'Workspace Thread',
+          session_type: 'native',
+        },
+      }),
+    );
+
+    expect(adapted).toMatchObject({
+      key: 'ncp-session-1',
+      label: 'Workspace Thread',
+      workingDir: '/Users/demo/workspace',
+    });
+    expect(adapted.projectRoot).toBeUndefined();
+  });
+
   it('marks child sessions from parent_session_id metadata and keeps the request link', () => {
     const adapted = adaptNcpSessionSummary(
       createSummary({

package/src/features/chat/utils/ncp-session-adapter.utils.ts

@@ -120,6 +120,10 @@ function readNcpSessionProjectRoot(summary: NcpSessionSummaryView): string | nul
   return normalizeSessionProjectRootValue(metadata.project_root ?? metadata.projectRoot);
 }
 
+function readNcpSessionWorkingDir(summary: NcpSessionSummaryView): string | null {
+  return readOptionalString(summary.workingDir);
+}
+
 function readNcpSessionReadAt(summary: NcpSessionSummaryView): string | null {
   const metadata = readMetadata(summary);
   if (!metadata) {
@@ -308,6 +312,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
   const preferredModel = readNcpSessionPreferredModel(summary);
   const preferredThinking = readNcpSessionPreferredThinking(summary);
   const projectRoot = readNcpSessionProjectRoot(summary);
+  const workingDir = readNcpSessionWorkingDir(summary) ?? projectRoot;
   const readAt = readNcpSessionReadAt(summary);
   const lastMessageAt = readOptionalString(summary.lastMessageAt);
   const projectName = getSessionProjectName(projectRoot);
@@ -328,6 +333,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
     ...(preferredModel ? { preferredModel } : {}),
     ...(preferredThinking ? { preferredThinking } : {}),
     ...(projectRoot ? { projectRoot } : {}),
+    ...(workingDir ? { workingDir } : {}),
     ...(projectName ? { projectName } : {}),
     sessionType: readNcpSessionType(summary),
     sessionTypeMutable: false,

package/src/features/marketplace/components/marketplace-catalog-grid.tsx

@@ -19,8 +19,10 @@ type MarketplaceCatalogGridProps = {
   scope: "all" | "installed";
   title: string;
   summary: string;
+  refreshingLabel: string;
   showTitle: boolean;
   showListSkeleton: boolean;
+  isRefreshing: boolean;
   skeletonCardCount: number;
   allItems: MarketplaceItemSummary[];
   installedEntries: InstalledRenderEntry[];
@@ -41,8 +43,10 @@ export function MarketplaceCatalogGrid(props: MarketplaceCatalogGridProps) {
     scope,
     title,
     summary,
+    refreshingLabel,
     showTitle,
     showListSkeleton,
+    isRefreshing,
     skeletonCardCount,
     allItems,
     installedEntries,
@@ -60,7 +64,21 @@ export function MarketplaceCatalogGrid(props: MarketplaceCatalogGridProps) {
       {showTitle && (
         <div className="flex items-center justify-between gap-3">
           <h3 className="text-[14px] font-semibold text-gray-950">{title}</h3>
-          <span className="text-[12px] text-gray-500">{summary}</span>
+          <div className="flex items-center gap-2 text-[12px] text-gray-500">
+            {isRefreshing && (
+              <span className="font-medium text-primary">{refreshingLabel}</span>
+            )}
+            <span>{summary}</span>
+          </div>
+        </div>
+      )}
+
+      {isRefreshing && (
+        <div
+          data-testid="marketplace-list-refreshing"
+          className="h-0.5 overflow-hidden rounded-full bg-primary/10"
+        >
+          <div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
         </div>
       )}
 

package/src/features/marketplace/components/marketplace-external-skill-source-action.tsx

@@ -0,0 +1,14 @@
+import { ExternalActionLink } from "@/shared/components/ui/action-link";
+import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
+import { t } from "@/shared/lib/i18n";
+
+const SKILLHUB_URL = "https://skillhub.cn/";
+
+export function MarketplaceExternalSkillSourceAction() {
+  return (
+    <ExternalActionLink
+      label={t("marketplaceExternalSkillSourceTitle")}
+      onClick={() => void hostCapabilityManager.openExternalUrl(SKILLHUB_URL)}
+    />
+  );
+}

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

@@ -8,11 +8,12 @@ import {
 } from "@/shared/components/ui/select";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 import { t } from "@/shared/lib/i18n";
-import { PackageSearch } from "lucide-react";
+import { Loader2, PackageSearch } from "lucide-react";
 import type { Ref } from "react";
 
 export function FilterPanel({
   scope,
+  isRefreshing,
   searchText,
   searchPlaceholder,
   sort,
@@ -20,6 +21,7 @@ export function FilterPanel({
   onSortChange,
 }: {
   scope: "all" | "installed";
+  isRefreshing: boolean;
   searchText: string;
   searchPlaceholder: string;
   sort: MarketplaceSort;
@@ -35,8 +37,14 @@ export function FilterPanel({
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
-            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-9 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
           />
+          {isRefreshing && (
+            <Loader2
+              className="absolute right-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 animate-spin text-primary"
+              aria-label={t("marketplaceRefreshingResults")}
+            />
+          )}
         </div>
 
         {scope === "all" && (

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { MarketplacePage } from "@/features/marketplace";
 import type {
   MarketplaceInstalledView,
@@ -10,8 +10,10 @@ type ItemsQueryState = {
   data?: MarketplaceListView;
   isLoading: boolean;
   isFetching: boolean;
+  isFetchingNextPage: boolean;
   isError: boolean;
   error: Error | null;
+  hasNextPage: boolean;
 };
 
 type InstalledQueryState = {
@@ -26,6 +28,7 @@ const mocks = vi.hoisted(() => ({
   navigate: vi.fn(),
   docOpen: vi.fn(),
   confirm: vi.fn(),
+  openExternalUrl: vi.fn(),
   routeParams: {} as { scene?: string },
   itemsQuery: null as unknown as ItemsQueryState,
   installedQuery: null as unknown as InstalledQueryState,
@@ -70,6 +73,12 @@ vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
   }),
 }));
 
+vi.mock("@/shared/lib/host-capabilities", () => ({
+  hostCapabilityManager: {
+    openExternalUrl: mocks.openExternalUrl,
+  },
+}));
+
 vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
   useMarketplaceItems: () => mocks.itemsQuery,
   useMarketplaceSkillScenes: () => ({
@@ -121,8 +130,10 @@ function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
     data: undefined as MarketplaceListView | undefined,
     isLoading: false,
     isFetching: false,
+    isFetchingNextPage: false,
     isError: false,
     error: null,
+    hasNextPage: false,
     ...overrides,
   };
 }
@@ -150,6 +161,7 @@ describe("MarketplacePage", () => {
     mocks.navigate.mockReset();
     mocks.docOpen.mockReset();
     mocks.confirm.mockReset();
+    mocks.openExternalUrl.mockReset();
     mocks.routeParams = {};
     mocks.installMutation.mutateAsync.mockReset();
     mocks.manageMutation.mutate.mockReset();
@@ -198,6 +210,8 @@ describe("MarketplacePage", () => {
     render(<MarketplacePage forcedType="skills" />);
 
     expect(screen.queryByTestId("marketplace-list-skeleton")).toBeNull();
+    expect(screen.getByTestId("marketplace-list-refreshing")).toBeTruthy();
+    expect(screen.getAllByText("Updating...").length).toBeGreaterThan(0);
     expect(screen.getByText("Web Search")).toBeTruthy();
   });
 
@@ -240,4 +254,26 @@ describe("MarketplacePage", () => {
     expect(screen.getByText("Web Search")).toBeTruthy();
     expect(container.querySelector(".opacity-70")).toBeNull();
   });
+
+  it("opens SkillHub from the marketplace tab row", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 20,
+        totalPages: 1,
+        sort: "relevance",
+        items: [createMarketplaceItem()],
+      } satisfies MarketplaceListView,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    const openButton = screen.getByRole("button", {
+      name: /SkillHub/i,
+    });
+    fireEvent.click(openButton);
+
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
+  });
 });