@nextclaw/ui 0.13.13 → 0.14.0

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

@@ -1,14 +1,11 @@
 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';
 import type {
-  AgentProfileView,
   SessionContextWindowView,
   SessionTypeIconView
 } from '@/shared/lib/api';
-import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -48,24 +45,16 @@ export type ChatWorkspaceNavigationEntry =
     };
 
 export type ChatThreadSnapshot = {
-  isProviderStateResolved: boolean;
-  modelOptions: ChatModelOption[];
-  sessionTypeUnavailable: boolean;
-  sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
   sessionTypeIcon?: SessionTypeIconView | null;
   sessionKey: string | null;
   agentId?: string | null;
-  agentDisplayName?: string | null;
-  agentAvatarUrl?: string | null;
-  availableAgents?: AgentProfileView[];
   sessionDisplayName?: string;
   sessionProjectRoot?: string | null;
   sessionWorkingDir?: string | null;
   sessionProjectName?: string | null;
   canDeleteSession: boolean;
   isDeletePending: boolean;
-  threadRef: MutableRefObject<HTMLDivElement | null> | null;
   isHistoryLoading: boolean;
   messages: readonly NcpMessage[];
   isSending: boolean;
@@ -117,24 +106,16 @@ type PersistedChatWorkspaceSnapshot = Pick<
 >;
 
 const initialSnapshot: ChatThreadSnapshot = {
-  isProviderStateResolved: false,
-  modelOptions: [],
-  sessionTypeUnavailable: false,
-  sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
   sessionTypeIcon: null,
   sessionKey: null,
   agentId: null,
-  agentDisplayName: null,
-  agentAvatarUrl: null,
-  availableAgents: [],
   sessionDisplayName: undefined,
   sessionProjectRoot: null,
   sessionWorkingDir: null,
   sessionProjectName: null,
   canDeleteSession: false,
   isDeletePending: false,
-  threadRef: null,
   isHistoryLoading: false,
   messages: [],
   isSending: false,

package/src/features/chat/stores/ncp-chat-query.store.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { ChatSessionTypesView, ConfigView, NcpSessionSkillsView, NcpSessionsListView, ProviderTemplatesView, ProvidersView } from '@/shared/lib/api';
+
+type Query<TData> = UseQueryResult<TData, Error>;
+
+export type ChatQuerySnapshot = Partial<{
+  configQuery: Query<ConfigView> | null;
+  providersQuery: Query<ProvidersView> | null;
+  providerTemplatesQuery: Query<ProviderTemplatesView> | null;
+  sessionsQuery: Query<NcpSessionsListView> | null;
+  sessionTypesQuery: Query<ChatSessionTypesView> | null;
+  sessionSkillsSessionId: string | null;
+  sessionSkillsQuery: Query<NcpSessionSkillsView> | null;
+}>;
+
+type ChatQueryStore = {
+  snapshot: ChatQuerySnapshot;
+  setSnapshot: (patch: Partial<ChatQuerySnapshot>) => void;
+};
+
+export const useChatQueryStore = create<ChatQueryStore>((set) => ({
+  snapshot: {},
+  setSnapshot: (patch) => set(({ snapshot }) => ({ snapshot: { ...snapshot, ...patch } })),
+}));

package/src/features/chat/types/chat-input.types.ts

@@ -9,6 +9,7 @@ export type ChatModelOption = {
   value: string;
   modelLabel: string;
   providerLabel: string;
+  isRuntimeDefault?: boolean;
   thinkingCapability?: ChatModelThinkingCapability | null;
 };
 

package/src/features/chat/types/chat-message.types.ts

@@ -17,6 +17,7 @@ export type ChatMessageAdapterTexts = {
   toolStatusCompletedLabel: string;
   toolStatusFailedLabel: string;
   toolStatusCancelledLabel: string;
+  showContentActionLabel?: string;
   imageAttachmentLabel: string;
   fileAttachmentLabel: string;
   unknownPartLabel: string;

package/src/features/chat/types/chat-run.types.ts

@@ -0,0 +1,41 @@
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type {
+  NcpAgentSendEnvelope,
+  NcpMessage,
+  NcpMessagePart,
+  NcpRunHandle,
+} from '@nextclaw/ncp';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
+import type { SessionContextWindowView, ThinkingLevel } from '@/shared/lib/api';
+
+export type SendMessageParams = {
+  message: string;
+  sessionKey?: string;
+  agentId: string;
+  sessionType?: string;
+  model?: string;
+  thinkingLevel?: ThinkingLevel;
+  projectRoot?: string | null;
+  requestedSkills?: string[];
+  attachments?: NcpDraftAttachment[];
+  parts?: NcpMessagePart[];
+  composerNodes?: ChatComposerNode[];
+};
+
+export type ChatRunRuntime = {
+  sessionKey: string | null;
+  sendEnvelope: (envelope: NcpAgentSendEnvelope) => Promise<NcpRunHandle | null>;
+  abortCurrentRun: () => Promise<void>;
+  resumeCurrentSessionRun: () => Promise<void>;
+};
+
+export type ChatRunSnapshot = {
+  routeSessionKey: string | null;
+  isHydrating: boolean;
+  isSending: boolean;
+  isRunning: boolean;
+  visibleMessages: readonly NcpMessage[];
+  contextWindow: SessionContextWindowView | null;
+  sendErrorMessage: string | null;
+  materializedSessionKey: string | null;
+};

package/src/{shared → features/cron}/components/cron-config.tsx

@@ -6,7 +6,7 @@ import {
   useDeleteCronJob,
   useToggleCronJob,
   useRunCronJob,
-} from "@/shared/hooks/use-config";
+} from "@/features/cron/hooks/use-cron-jobs";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
 import { Switch } from "@/shared/components/ui/switch";

package/src/features/cron/hooks/use-cron-jobs.ts

@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  deleteCronJob,
+  fetchCronJobs,
+  runCronJob,
+  setCronJobEnabled
+} from '@/shared/lib/api';
+import { toast } from 'sonner';
+import { t } from '@/shared/lib/i18n';
+
+export function useCronJobs(params: { all?: boolean } = { all: true }) {
+  return useQuery({
+    queryKey: ['cron', params],
+    queryFn: () => fetchCronJobs(params),
+    staleTime: 10_000
+  });
+}
+
+function useCronMutationFeedback() {
+  const queryClient = useQueryClient();
+
+  return {
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cron'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  };
+}
+
+export function useDeleteCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string }) => deleteCronJob(id),
+    ...feedback
+  });
+}
+
+export function useToggleCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) => setCronJobEnabled(id, { enabled }),
+    ...feedback
+  });
+}
+
+export function useRunCronJob() {
+  const feedback = useCronMutationFeedback();
+
+  return useMutation({
+    mutationFn: ({ id, force }: { id: string; force?: boolean }) => runCronJob(id, { force }),
+    ...feedback
+  });
+}

package/src/features/cron/index.ts

@@ -0,0 +1,7 @@
+export { CronConfig } from "./components/cron-config";
+export {
+  useCronJobs,
+  useDeleteCronJob,
+  useRunCronJob,
+  useToggleCronJob,
+} from "./hooks/use-cron-jobs";

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

@@ -23,11 +23,9 @@ import {
   type MarketplaceShelfLocalizedText,
   type MarketplaceShelfSceneVisual,
 } from "@/features/marketplace/components/curated-shelves/marketplace-curated-shelves.config";
-import { Skeleton } from "@/shared/components/ui/skeleton";
 
 const SCENE_CARD_GRID_CLASS =
   "grid grid-cols-[repeat(auto-fill,minmax(240px,320px))] justify-start gap-3";
-const SCENE_SKELETON_CARD_COUNT = 24;
 
 export type MarketplaceShelfEntry = {
   item: MarketplaceItemSummary;
@@ -76,7 +74,14 @@ export function MarketplaceCuratedShelves(props: {
           )}
         />
         {isScenesLoading ? (
-          <SceneGoalSkeletons />
+          <div
+            data-testid="marketplace-scenes-skeleton"
+            className="grid auto-rows-[104px] grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+          >
+            <MarketplaceListSkeleton
+              count={MARKETPLACE_SHELF_SCENE_VISUALS.length}
+            />
+          </div>
         ) : (
           <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
             {scenes.map((scene) => (
@@ -115,29 +120,6 @@ export function MarketplaceCuratedShelves(props: {
   );
 }
 
-function SceneGoalSkeletons() {
-  return (
-    <div
-      data-testid="marketplace-scenes-skeleton"
-      className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-    >
-      {MARKETPLACE_SHELF_SCENE_VISUALS.map((scene) => (
-        <div
-          key={scene.scene}
-          className="flex min-h-[74px] flex-col justify-center rounded-lg border border-gray-200/70 bg-white px-3 py-2.5 shadow-sm"
-        >
-          <div className="flex min-w-0 items-center gap-2">
-            <Skeleton className="h-7 w-7 shrink-0 rounded-md" />
-            <Skeleton className="h-3.5 min-w-0 flex-1" />
-            <Skeleton className="h-3 w-8 shrink-0" />
-          </div>
-          <Skeleton className="mt-2 h-3 w-4/5" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function GoalCard(props: {
   scene: MarketplaceSceneView;
   language: string;
@@ -259,7 +241,7 @@ export function MarketplaceCuratedSceneView(props: {
             "min-h-0 flex-1 auto-rows-[166px] content-start",
           )}
         >
-          <MarketplaceListSkeleton count={SCENE_SKELETON_CARD_COUNT} />
+          <MarketplaceListSkeleton count={24} />
         </div>
       ) : entries.length > 0 ? (
         <div className={SCENE_CARD_GRID_CLASS}>
@@ -314,7 +296,12 @@ function ShelfItemRow(props: {
     <section className="space-y-2.5">
       <ShelfHeader icon={Icon} title={title} description={description} />
       {isLoading ? (
-        <RecentShelfSkeletons />
+        <div
+          data-testid="marketplace-recent-skeleton"
+          className="-mx-1 grid auto-rows-[166px] grid-cols-[repeat(4,260px)] gap-2.5 overflow-hidden px-1 pb-1.5"
+        >
+          <MarketplaceListSkeleton count={4} />
+        </div>
       ) : (
         <div className="-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 custom-scrollbar">
           {entries.map((entry) => (
@@ -334,39 +321,6 @@ function ShelfItemRow(props: {
   );
 }
 
-function RecentShelfSkeletons() {
-  return (
-    <div
-      data-testid="marketplace-recent-skeleton"
-      className="-mx-1 flex gap-2.5 overflow-hidden px-1 pb-1.5"
-    >
-      {Array.from({ length: 4 }, (_, index) => (
-        <article
-          key={`marketplace-recent-skeleton-${index}`}
-          className="flex min-h-[166px] w-[260px] shrink-0 flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm"
-        >
-          <div>
-            <div className="mb-2.5 flex min-w-0 items-start gap-2.5">
-              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
-              <div className="min-w-0 flex-1 space-y-1.5 pt-0.5">
-                <Skeleton className="h-3.5 w-32 max-w-full" />
-                <Skeleton className="h-3 w-24 max-w-full" />
-              </div>
-            </div>
-            <Skeleton className="h-3 w-full" />
-            <Skeleton className="mt-1.5 h-3 w-4/5" />
-            <Skeleton className="mt-2 h-3 w-24" />
-          </div>
-          <div className="mt-3 flex items-center justify-between gap-3 border-t border-gray-100 pt-2.5">
-            <Skeleton className="h-3 w-20" />
-            <Skeleton className="h-7 w-16 rounded-md" />
-          </div>
-        </article>
-      ))}
-    </div>
-  );
-}
-
 function ShelfHeader({
   icon: Icon,
   title,

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

@@ -1,4 +1,4 @@
-import { ExternalActionLink } from "@/shared/components/ui/action-link";
+import { ExternalActionLink } from "@/shared/components/actions/action-link";
 import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
 import { t } from "@/shared/lib/i18n";
 

package/src/features/marketplace/components/marketplace-item-list-view.tsx

@@ -0,0 +1,167 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceManageAction,
+} from "@/shared/lib/api";
+import {
+  MarketplaceListCard,
+  type InstallState,
+  type ManageState,
+} from "@/features/marketplace/components/marketplace-list-card";
+import { cn } from "@/shared/lib/utils";
+import type { Ref } from "react";
+import {
+  MarketplaceInfiniteScrollStatus,
+  MarketplaceListSkeleton,
+} from "@/features/marketplace/components/marketplace-page-parts";
+
+export type MarketplaceItemListEntry = {
+  key: string;
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+};
+
+export type MarketplaceItemListViewModel = {
+  scope: "all" | "installed";
+  entries: MarketplaceItemListEntry[];
+  header: {
+    title: string;
+    summary: string;
+    refreshingLabel: string;
+  };
+  status: {
+    showSkeleton: boolean;
+    isRefreshing: boolean;
+    error?: Error;
+  };
+  emptyLabel: string;
+  errorLabel: string;
+};
+
+type MarketplaceItemListActions = {
+  onOpen: (
+    item?: MarketplaceItemSummary,
+    record?: MarketplaceInstalledRecord,
+  ) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+};
+
+export function MarketplaceItemListView({
+  model,
+  showTitle,
+  operationState,
+  scroll,
+  actions,
+}: {
+  model: MarketplaceItemListViewModel;
+  showTitle: boolean;
+  operationState: {
+    installState: InstallState;
+    manageState: ManageState;
+  };
+  scroll: {
+    hasMore: boolean;
+    loadingMore: boolean;
+    sentinelRef: Ref<HTMLDivElement>;
+  };
+  actions: MarketplaceItemListActions;
+}) {
+  const {
+    scope,
+    entries,
+    header,
+    status,
+    emptyLabel,
+    errorLabel,
+  } = model;
+  const {
+    showSkeleton,
+    isRefreshing,
+    error,
+  } = status;
+  const {
+    hasMore,
+    loadingMore,
+    sentinelRef,
+  } = scroll;
+  const { installState, manageState } = operationState;
+  const { onOpen, onInstall, onManage } = actions;
+
+  return (
+    <section className={cn("flex min-h-full flex-col", showTitle && "gap-3")}>
+      {showTitle && (
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="text-[14px] font-semibold text-gray-950">
+            {header.title}
+          </h3>
+          <div className="flex items-center gap-2 text-[12px] text-gray-500">
+            {isRefreshing && (
+              <span className="font-medium text-primary">
+                {header.refreshingLabel}
+              </span>
+            )}
+            <span>{header.summary}</span>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
+          {errorLabel}: {error.message}
+        </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>
+      )}
+
+      <div
+        data-testid={showSkeleton ? "marketplace-list-skeleton" : undefined}
+        className={cn(
+          "grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3",
+          showSkeleton && "min-h-0 flex-1 auto-rows-[104px] content-start",
+        )}
+      >
+        {showSkeleton && <MarketplaceListSkeleton count={36} />}
+
+        {!showSkeleton &&
+          !error &&
+          entries.map((entry) => (
+            <MarketplaceListCard
+              key={entry.key}
+              item={entry.item}
+              record={entry.record}
+              installState={installState}
+              manageState={manageState}
+              onOpen={() => onOpen(entry.item, entry.record)}
+              onInstall={onInstall}
+              onManage={onManage}
+            />
+          ))}
+      </div>
+
+      {!showSkeleton && !error && entries.length === 0 && (
+        <div className="py-8 text-center text-[13px] text-gray-500">
+          {emptyLabel}
+        </div>
+      )}
+
+      {scope === "all" && !showSkeleton && !error && (
+        <MarketplaceInfiniteScrollStatus
+          hasMore={hasMore}
+          loading={loadingMore}
+          sentinelRef={sentinelRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -3,6 +3,7 @@ import type {
   MarketplaceItemSummary,
   MarketplaceManageAction,
 } from "@/shared/lib/api";
+import { useI18n } from "@/app/components/i18n-provider";
 import {
   Tooltip,
   TooltipContent,
@@ -34,13 +35,13 @@ export type ManageState = {
 type MarketplaceListCardActionProps = {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
-  isInstalling: boolean;
-  isDisabled: boolean;
-  canUpdate: boolean;
-  canUninstall: boolean;
-  busyAction?: MarketplaceManageAction;
-  busyForRecord: boolean;
-  language: string;
+  state: {
+    isInstalling: boolean;
+    isDisabled: boolean;
+    canUpdate: boolean;
+    canUninstall: boolean;
+    busyAction?: MarketplaceManageAction;
+  };
   onInstall: (item: MarketplaceItemSummary) => void;
   onManage: (
     action: MarketplaceManageAction,
@@ -96,16 +97,18 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
   const {
     item,
     record,
+    state,
+    onInstall,
+    onManage,
+  } = props;
+  const {
     isInstalling,
     isDisabled,
     canUpdate,
     canUninstall,
     busyAction,
-    busyForRecord,
-    language,
-    onInstall,
-    onManage,
-  } = props;
+  } = state;
+  const busyForRecord = Boolean(busyAction);
   const hasActions = Boolean((item && !record) || (record && (canUpdate || canUninstall)));
 
   return (
@@ -122,10 +125,7 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
         )}
       >
         {record ? (
-          <MarketplaceInstalledStatusIcon
-            disabled={isDisabled}
-            language={language}
-          />
+          <MarketplaceInstalledStatusIcon disabled={isDisabled} />
         ) : null}
       </div>
 
@@ -187,11 +187,9 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
   );
 }
 
-function MarketplaceInstalledStatusIcon(props: {
-  disabled: boolean;
-  language: string;
-}) {
-  const { disabled, language } = props;
+function MarketplaceInstalledStatusIcon(props: { disabled: boolean }) {
+  const { disabled } = props;
+  const { language } = useI18n();
   const label = disabled
     ? readLocalized({ zh: "已禁用", en: "Disabled" }, language)
     : readLocalized({ zh: "已安装", en: "Installed" }, language);
@@ -223,7 +221,6 @@ function MarketplaceInstalledStatusIcon(props: {
 export function MarketplaceListCard(props: {
   item?: MarketplaceItemSummary;
   record?: MarketplaceInstalledRecord;
-  language: string;
   installState: InstallState;
   manageState: ManageState;
   onOpen: () => void;
@@ -236,13 +233,13 @@ export function MarketplaceListCard(props: {
   const {
     item,
     record,
-    language,
     installState,
     manageState,
     onOpen,
     onInstall,
     onManage,
   } = props;
+  const { language } = useI18n();
   const localeFallbacks = buildLocaleFallbacks(language);
   const title =
     item?.name ??
@@ -258,7 +255,6 @@ export function MarketplaceListCard(props: {
   const busyAction = targetId
     ? manageState.actionsByTarget.get(targetId)
     : undefined;
-  const busyForRecord = Boolean(busyAction);
   const canUninstall = record?.type === "skill" && record.source === "workspace";
   const canUpdate = record?.type === "skill" && record.origin === "marketplace";
   const isDisabled = record
@@ -287,13 +283,13 @@ export function MarketplaceListCard(props: {
       <MarketplaceListCardActions
         item={item}
         record={record}
-        isInstalling={isInstalling}
-        isDisabled={isDisabled}
-        canUpdate={canUpdate}
-        canUninstall={canUninstall}
-        busyAction={busyAction}
-        busyForRecord={busyForRecord}
-        language={language}
+        state={{
+          isInstalling,
+          isDisabled,
+          canUpdate,
+          canUninstall,
+          busyAction,
+        }}
         onInstall={onInstall}
         onManage={onManage}
       />

package/src/features/marketplace/components/marketplace-page-data.ts

@@ -4,12 +4,6 @@ import type {
 } from "@/shared/lib/api";
 import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
 
-export type InstalledRenderEntry = {
-  key: string;
-  record: MarketplaceInstalledRecord;
-  item?: MarketplaceItemSummary;
-};
-
 function normalizeMarketplaceKey(value: string | undefined): string {
   return (value ?? "").trim().toLowerCase();
 }