@nextclaw/ui 0.13.13 → 0.14.1-beta.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/stores/recent-selection.store.ts

@@ -0,0 +1,85 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type RecentSelectionScope = {
+  namespace?: string | null;
+};
+
+type RecentSelectionStoreState = {
+  entriesByKey: Record<string, string[]>;
+  setEntries: (key: string, values: string[]) => void;
+};
+
+const RECENT_SELECTION_STORE_KEY = 'nextclaw.chat.recent-selection.store';
+
+export function normalizeRecentSelectionValue(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+}
+
+export function normalizeRecentSelectionList(values: unknown, limit: number): string[] {
+  if (!Array.isArray(values)) {
+    return [];
+  }
+  return Array.from(
+    new Set(values.map(normalizeRecentSelectionValue).filter((value): value is string => Boolean(value))),
+  ).slice(0, limit);
+}
+
+export function resolveRecentSelectionKey(
+  options: { storageKey: string },
+  scope?: RecentSelectionScope,
+): string {
+  const namespace = normalizeRecentSelectionValue(scope?.namespace);
+  return namespace
+    ? `${options.storageKey}.${encodeURIComponent(namespace.toLowerCase())}`
+    : options.storageKey;
+}
+
+function normalizePersistedEntries(value: unknown): Record<string, string[]> {
+  if (!value || typeof value !== 'object') {
+    return {};
+  }
+  const entries: Record<string, string[]> = {};
+  for (const [key, values] of Object.entries(value)) {
+    const normalizedKey = normalizeRecentSelectionValue(key);
+    if (!normalizedKey) {
+      continue;
+    }
+    const normalizedValues = normalizeRecentSelectionList(values, Number.POSITIVE_INFINITY);
+    if (normalizedValues.length > 0) {
+      entries[normalizedKey] = normalizedValues;
+    }
+  }
+  return entries;
+}
+
+export const useRecentSelectionStore = create<RecentSelectionStoreState>()(
+  persist(
+    (set) => ({
+      entriesByKey: {},
+      setEntries: (key, values) => set((state) => ({
+        entriesByKey: {
+          ...state.entriesByKey,
+          [key]: normalizeRecentSelectionList(values, Number.POSITIVE_INFINITY),
+        },
+      })),
+    }),
+    {
+      name: RECENT_SELECTION_STORE_KEY,
+      storage: createJSONStorage(() => window.localStorage),
+      partialize: (state) => ({
+        entriesByKey: state.entriesByKey,
+      }),
+      merge: (persistedState, currentState) => ({
+        ...currentState,
+        entriesByKey: normalizePersistedEntries(
+          (persistedState as { entriesByKey?: Record<string, unknown> } | undefined)?.entriesByKey,
+        ),
+      }),
+    },
+  ),
+);

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

@@ -37,7 +37,6 @@ export type ChatInputBarAdapterTexts = {
   modelNoOptionsLabel: string;
   recentModelsLabel: string;
   allModelsLabel: string;
-  sessionTypePlaceholder: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;

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>
+  );
+}