@nextclaw/ui 0.12.8 → 0.12.10

package/src/components/chat/chat-child-session-panel.tsx

@@ -1,270 +0,0 @@
-import { useEffect, useRef } from "react";
-import { ArrowLeft, Loader2, X } from "lucide-react";
-import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import { ChatMessageListContainer } from "@/components/chat/containers/chat-message-list.container";
-import {
-  useNcpChildSessionTabsView,
-  type ResolvedChildSessionTab,
-} from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
-import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
-import {
-  shouldShowUnreadSessionIndicator,
-  useChatSessionListStore,
-} from "@/components/chat/stores/chat-session-list.store";
-import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
-import type { ChatChildSessionTab } from "@/components/chat/stores/chat-thread.store";
-import { AgentIdentityAvatar } from "@/components/common/agent-identity";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
-import type { ChatToolActionViewModel } from "@nextclaw/agent-chat-ui";
-
-type ChatChildSessionPanelProps = {
-  tabs: readonly ChatChildSessionTab[];
-  activeSessionKey: string;
-  onSelectSession: (sessionKey: string) => void;
-  onClose: () => void;
-  onBackToParent: () => void;
-  onToolAction?: (action: ChatToolActionViewModel) => void;
-};
-
-function ChildSessionPanelConversation({
-  sessionKey,
-  onToolAction,
-}: {
-  sessionKey: string;
-  onToolAction?: (action: ChatToolActionViewModel) => void;
-}) {
-  const agent = useNcpSessionConversation(sessionKey);
-  const messages = agent.visibleMessages;
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const { onScroll } = useStickyBottomScroll({
-    scrollRef,
-    resetKey: sessionKey,
-    isLoading: agent.isHydrating,
-    hasContent: messages.length > 0,
-    contentVersion: messages[messages.length - 1] ?? null,
-    stickyThresholdPx: 20,
-  });
-
-  return (
-    <div
-      ref={scrollRef}
-      onScroll={onScroll}
-      className="h-full overflow-y-auto custom-scrollbar"
-    >
-      {agent.isHydrating ? (
-        <div className="flex h-full items-center justify-center text-sm text-gray-500">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          {t("chatChildSessionLoading")}
-        </div>
-      ) : agent.hydrateError ? (
-        <div className="px-4 py-5 text-sm text-rose-600">
-          {agent.hydrateError.message}
-        </div>
-      ) : messages.length === 0 && !agent.isRunning ? (
-        <div className="px-4 py-5 text-sm text-gray-500">
-          {t("chatChildSessionEmpty")}
-        </div>
-      ) : (
-        <div className="px-4 py-5">
-          <ChatMessageListContainer
-            messages={messages}
-            isSending={agent.isRunning}
-            onToolAction={onToolAction}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ChildSessionPanelMetaChip({ value }: { value: string }) {
-  return (
-    <span className="inline-flex max-w-full items-center rounded-full border border-gray-200/80 bg-gray-50/90 px-2.5 py-1 text-[11px] font-medium text-gray-600">
-      <span className="truncate">{value}</span>
-    </span>
-  );
-}
-
-function ChildSessionPanelMetaStrip({ tab }: { tab: ResolvedChildSessionTab }) {
-  const metaItems = [
-    tab.sessionTypeLabel,
-    tab.preferredModel,
-    tab.projectName,
-  ].filter((value): value is string => Boolean(value?.trim()));
-
-  if (metaItems.length === 0 && !tab.projectRoot) {
-    return null;
-  }
-
-  return (
-    <div className="mt-3 space-y-2">
-      {metaItems.length > 0 ? (
-        <div className="flex flex-wrap gap-1.5">
-          {metaItems.map((item) => (
-            <ChildSessionPanelMetaChip key={item} value={item} />
-          ))}
-        </div>
-      ) : null}
-      {tab.projectRoot ? (
-        <div
-          title={tab.projectRoot}
-          className="truncate rounded-xl border border-gray-200/70 bg-gray-50/80 px-2.5 py-2 font-mono text-[11px] text-gray-500"
-        >
-          {tab.projectRoot}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export function ChatChildSessionPanel({
-  tabs,
-  activeSessionKey,
-  onSelectSession,
-  onClose,
-  onBackToParent,
-  onToolAction,
-}: ChatChildSessionPanelProps) {
-  const presenter = usePresenter();
-  const resolvedTabs = useNcpChildSessionTabsView(tabs);
-  const optimisticReadAtBySessionKey = useChatSessionListStore(
-    (state) => state.optimisticReadAtBySessionKey,
-  );
-  const activeTab =
-    resolvedTabs.find((tab) => tab.sessionKey === activeSessionKey) ??
-    resolvedTabs[0] ??
-    null;
-  const activeTabSessionKey = activeTab?.sessionKey ?? null;
-  const activeTabReadAt = activeTab?.lastMessageAt?.trim() ?? null;
-  const hasParentSession = resolvedTabs.some((tab) =>
-    Boolean(tab.parentSessionKey),
-  );
-  const shouldShowTabs = resolvedTabs.length > 1;
-
-  useEffect(() => {
-    const syncActiveTabReadState = () => {
-      if (!activeTabSessionKey || !activeTabReadAt) {
-        return;
-      }
-      presenter.chatSessionListManager.markSessionRead(
-        activeTabSessionKey,
-        activeTabReadAt,
-        activeTab?.readAt ?? null,
-      );
-    };
-    syncActiveTabReadState();
-  }, [activeTab?.readAt, activeTabReadAt, activeTabSessionKey, presenter]);
-
-  if (!activeTab) {
-    return null;
-  }
-
-  return (
-    <aside className="hidden md:flex md:w-[24rem] lg:w-[28rem] shrink-0 border-l border-gray-200/70 bg-white/90 backdrop-blur-sm">
-      <div className="flex h-full min-h-0 w-full flex-col">
-        <div className="border-b border-gray-200/70 px-4 py-3">
-          <div className="flex items-center justify-between gap-3">
-            <button
-              type="button"
-              onClick={onBackToParent}
-              className={cn(
-                "inline-flex items-center gap-1 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900",
-                !hasParentSession && "pointer-events-none opacity-0",
-              )}
-            >
-              <ArrowLeft className="h-3.5 w-3.5" />
-              <span>{t("chatBackToParent")}</span>
-            </button>
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-full border border-gray-200/80 p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
-              aria-label={t("chatChildSessionClosePanel")}
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-          {!shouldShowTabs ? (
-            <div className="mt-3 flex min-w-0 items-center gap-2 text-sm font-semibold text-gray-900">
-              {activeTab.agentId ? (
-                <AgentIdentityAvatar
-                  agentId={activeTab.agentId}
-                  className="h-5 w-5 shrink-0"
-                />
-              ) : null}
-              <span className="truncate" title={activeTab.sessionKey}>
-                {activeTab.title}
-              </span>
-            </div>
-          ) : null}
-          {shouldShowTabs ? (
-            <div className="mt-3 overflow-x-auto custom-scrollbar">
-              <Tabs value={activeSessionKey} onValueChange={onSelectSession}>
-                <TabsList className="h-auto min-w-max justify-start gap-1.5 rounded-none bg-transparent p-0 text-gray-500">
-                  {resolvedTabs.map((tab) => {
-                    const optimisticReadAt = optimisticReadAtBySessionKey[tab.sessionKey];
-                    const effectiveReadAt =
-                      optimisticReadAt && tab.readAt
-                        ? (optimisticReadAt.localeCompare(tab.readAt) > 0
-                            ? optimisticReadAt
-                            : tab.readAt)
-                        : optimisticReadAt ?? tab.readAt;
-                    const showUnreadDot = shouldShowUnreadSessionIndicator({
-                      active: tab.sessionKey === activeSessionKey,
-                      lastMessageAt: tab.lastMessageAt,
-                      readAt: effectiveReadAt,
-                      runStatus: tab.runStatus,
-                    });
-                    return (
-                      <TabsTrigger
-                        key={tab.sessionKey}
-                        value={tab.sessionKey}
-                        className="gap-2 rounded-full border border-gray-200/80 bg-white/85 px-2.5 py-1.5 text-xs font-medium text-gray-600 shadow-none hover:border-primary/30 hover:text-primary data-[state=active]:border-primary/30 data-[state=active]:bg-primary-50/70 data-[state=active]:text-primary data-[state=active]:shadow-sm"
-                      >
-                        {tab.agentId ? (
-                          <AgentIdentityAvatar
-                            agentId={tab.agentId}
-                            className="h-4 w-4 shrink-0"
-                          />
-                        ) : null}
-                        <span className="max-w-[132px] truncate">
-                          {tab.title}
-                        </span>
-                        {showUnreadDot ? (
-                          <span
-                            aria-label={t("chatSessionUnread")}
-                            className="h-2 w-2 shrink-0 rounded-full bg-primary"
-                          />
-                        ) : null}
-                      </TabsTrigger>
-                    );
-                  })}
-                </TabsList>
-              </Tabs>
-            </div>
-          ) : null}
-          <ChildSessionPanelMetaStrip tab={activeTab} />
-        </div>
-
-        <div className="flex-1 min-h-0">
-          {resolvedTabs.map((tab) => (
-            <div
-              key={tab.sessionKey}
-              className={cn(
-                "h-full",
-                tab.sessionKey === activeSessionKey ? "block" : "hidden",
-              )}
-            >
-              <ChildSessionPanelConversation
-                sessionKey={tab.sessionKey}
-                onToolAction={onToolAction}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    </aside>
-  );
-}

package/src/components/config/config-layout.ts

@@ -1,10 +0,0 @@
-export const CONFIG_SPLIT_GRID_CLASS = 'grid min-h-0 grid-cols-1 gap-5 xl:grid-cols-[340px_minmax(0,1fr)]';
-
-export const CONFIG_SIDEBAR_CARD_CLASS =
-  'flex min-h-[520px] min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';
-
-export const CONFIG_DETAIL_CARD_CLASS =
-  'flex min-h-[520px] min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';
-
-export const CONFIG_EMPTY_DETAIL_CARD_CLASS =
-  'flex min-h-[520px] min-w-0 items-center justify-center overflow-hidden rounded-2xl border border-gray-200/70 bg-white px-6 text-center xl:h-[calc(100vh-180px)] xl:min-h-[600px] xl:max-h-[860px]';

package/src/components/marketplace/MarketplacePage.test.tsx

@@ -1,322 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
-import type {
-  MarketplaceInstalledRecord,
-  MarketplaceInstalledView,
-  MarketplaceItemSummary,
-  MarketplaceListView
-} from '@/api/types';
-
-type ItemsQueryState = {
-  data?: MarketplaceListView;
-  isLoading: boolean;
-  isFetching: boolean;
-  isError: boolean;
-  error: Error | null;
-};
-
-type InstalledQueryState = {
-  data?: MarketplaceInstalledView;
-  isLoading: boolean;
-  isFetching: boolean;
-  isError: boolean;
-  error: Error | null;
-};
-
-const mocks = vi.hoisted(() => ({
-  navigate: vi.fn(),
-  docOpen: vi.fn(),
-  confirm: vi.fn(),
-  itemsQuery: null as unknown as ItemsQueryState,
-  installedQuery: null as unknown as InstalledQueryState,
-  installMutation: {
-    mutateAsync: vi.fn(),
-    isPending: false,
-    variables: undefined
-  },
-  manageMutation: {
-    mutate: vi.fn(),
-    mutateAsync: vi.fn(),
-    isPending: false,
-    variables: undefined
-  }
-}));
-
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
-  return {
-    ...(actual as object),
-    useNavigate: () => mocks.navigate,
-    useParams: () => ({})
-  };
-});
-
-vi.mock('@/components/doc-browser', () => ({
-  useDocBrowser: () => ({
-    open: mocks.docOpen
-  })
-}));
-
-vi.mock('@/components/providers/I18nProvider', () => ({
-  useI18n: () => ({
-    language: 'en'
-  })
-}));
-
-vi.mock('@/hooks/useConfirmDialog', () => ({
-  useConfirmDialog: () => ({
-    confirm: mocks.confirm,
-    ConfirmDialog: () => null
-  })
-}));
-
-vi.mock('@/hooks/useMarketplace', () => ({
-  useMarketplaceItems: () => mocks.itemsQuery,
-  useMarketplaceInstalled: () => mocks.installedQuery,
-  useInstallMarketplaceItem: () => mocks.installMutation,
-  useManageMarketplaceItem: () => mocks.manageMutation
-}));
-
-function createMarketplaceItem(overrides: Partial<MarketplaceItemSummary> = {}): MarketplaceItemSummary {
-  return {
-    id: 'skill-web-search',
-    slug: 'web-search',
-    type: 'skill',
-    name: 'Web Search',
-    summary: 'Search the web from the marketplace',
-    summaryI18n: { en: 'Search the web from the marketplace' },
-    tags: ['search'],
-    author: 'NextClaw',
-    install: {
-      kind: 'marketplace',
-      spec: '@nextclaw/web-search',
-      command: 'nextclaw skills install @nextclaw/web-search'
-    },
-    updatedAt: '2026-03-17T00:00:00.000Z',
-    ...overrides
-  };
-}
-
-function createPluginMarketplaceItem(overrides: Partial<MarketplaceItemSummary> = {}): MarketplaceItemSummary {
-  return createMarketplaceItem({
-    id: 'plugin-codex-runtime',
-    slug: 'codex-runtime',
-    type: 'plugin',
-    name: 'Codex SDK NCP Runtime',
-    summary: 'Optional Codex runtime for NextClaw',
-    summaryI18n: { en: 'Optional Codex runtime for NextClaw' },
-    install: {
-      kind: 'npm',
-      spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
-      command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'
-    },
-    ...overrides
-  });
-}
-
-function createInstalledRecord(overrides: Partial<MarketplaceInstalledRecord> = {}): MarketplaceInstalledRecord {
-  return {
-    type: 'plugin',
-    id: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
-    spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
-    label: 'Codex SDK NCP Runtime',
-    enabled: true,
-    origin: 'marketplace',
-    source: 'marketplace',
-    installedAt: '2026-03-19T00:00:00.000Z',
-    ...overrides
-  };
-}
-
-function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
-  return {
-    data: undefined as MarketplaceListView | undefined,
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    error: null,
-    ...overrides
-  };
-}
-
-function createInstalledQuery(overrides: Partial<Record<string, unknown>> = {}) {
-  return {
-    data: {
-      type: 'skill',
-      total: 0,
-      specs: [],
-      records: []
-    } satisfies MarketplaceInstalledView,
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    error: null,
-    ...overrides
-  };
-}
-
-describe('MarketplacePage', () => {
-  beforeEach(() => {
-    mocks.navigate.mockReset();
-    mocks.docOpen.mockReset();
-    mocks.confirm.mockReset();
-    mocks.installMutation.mutateAsync.mockReset();
-    mocks.manageMutation.mutate.mockReset();
-    mocks.manageMutation.mutateAsync.mockReset();
-    mocks.installMutation.isPending = false;
-    mocks.installMutation.variables = undefined;
-    mocks.manageMutation.isPending = false;
-    mocks.manageMutation.variables = undefined;
-    mocks.itemsQuery = createItemsQuery();
-    mocks.installedQuery = createInstalledQuery();
-  });
-
-  it('renders skeleton cards during initial skills loading', () => {
-    mocks.itemsQuery = createItemsQuery({
-      isLoading: true,
-      isFetching: true
-    });
-
-    const { container } = render(<MarketplacePage forcedType="skills" />);
-
-    expect(screen.getByTestId('marketplace-list-skeleton')).toBeTruthy();
-    expect(container.querySelectorAll('[data-testid="marketplace-list-skeleton"] > article')).toHaveLength(12);
-  });
-
-  it('keeps loaded cards visible during background refresh', () => {
-    mocks.itemsQuery = createItemsQuery({
-      data: {
-        total: 1,
-        page: 1,
-        pageSize: 12,
-        totalPages: 1,
-        sort: 'relevance',
-        items: [createMarketplaceItem()]
-      } satisfies MarketplaceListView,
-      isFetching: true
-    });
-
-    render(<MarketplacePage forcedType="skills" />);
-
-    expect(screen.queryByTestId('marketplace-list-skeleton')).toBeNull();
-    expect(screen.getByText('Web Search')).toBeTruthy();
-  });
-
-  it('does not render the redundant plugin type label in plugin cards', () => {
-    mocks.itemsQuery = createItemsQuery({
-      data: {
-        total: 1,
-        page: 1,
-        pageSize: 12,
-        totalPages: 1,
-        sort: 'relevance',
-        items: [
-          createMarketplaceItem({
-            id: 'plugin-codex-runtime',
-            slug: 'codex-runtime',
-            type: 'plugin',
-            name: 'Codex SDK NCP Runtime',
-            summary: 'Optional Codex runtime for NextClaw',
-            summaryI18n: { en: 'Optional Codex runtime for NextClaw' },
-            install: {
-              kind: 'npm',
-              spec: '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
-              command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk'
-            }
-          })
-        ]
-      } satisfies MarketplaceListView
-    });
-
-    const { container } = render(<MarketplacePage forcedType="plugins" />);
-    const card = container.querySelector('article');
-
-    expect(card?.textContent).toContain('@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk');
-    expect(card?.textContent).not.toContain('Plugin');
-  });
-
-  it('does not dim the loaded list during background refresh', () => {
-    mocks.itemsQuery = createItemsQuery({
-      data: {
-        total: 1,
-        page: 1,
-        pageSize: 12,
-        totalPages: 1,
-        sort: 'relevance',
-        items: [createPluginMarketplaceItem()]
-      } satisfies MarketplaceListView,
-      isFetching: true
-    });
-
-    const { container } = render(<MarketplacePage forcedType="plugins" />);
-
-    expect(screen.getByText('Codex SDK NCP Runtime')).toBeTruthy();
-    expect(container.querySelector('.opacity-70')).toBeNull();
-  });
-
-  it('only disables the targeted plugin action while a manage request is pending', async () => {
-    const user = userEvent.setup();
-    let resolveMutation: (() => void) | undefined;
-    mocks.itemsQuery = createItemsQuery({
-      data: {
-        total: 2,
-        page: 1,
-        pageSize: 12,
-        totalPages: 1,
-        sort: 'relevance',
-        items: [
-          createPluginMarketplaceItem(),
-          createPluginMarketplaceItem({
-            id: 'plugin-claude-runtime',
-            slug: 'claude-runtime',
-            name: 'Claude Agent Runtime',
-            install: {
-              kind: 'npm',
-              spec: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
-              command: 'npm install @nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk'
-            }
-          })
-        ]
-      } satisfies MarketplaceListView
-    });
-    mocks.installedQuery = createInstalledQuery({
-      data: {
-        type: 'plugin',
-        total: 2,
-        specs: [
-          '@nextclaw/nextclaw-ncp-runtime-plugin-codex-sdk',
-          '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk'
-        ],
-        records: [
-          createInstalledRecord(),
-          createInstalledRecord({
-            id: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
-            spec: '@nextclaw/nextclaw-ncp-runtime-plugin-claude-code-sdk',
-            label: 'Claude Agent Runtime'
-          })
-        ]
-      } satisfies MarketplaceInstalledView
-    });
-    mocks.manageMutation.mutateAsync.mockImplementation(
-      () => new Promise<void>((resolve) => {
-        resolveMutation = resolve;
-      })
-    );
-
-    render(<MarketplacePage forcedType="plugins" />);
-
-    const disableButtons = screen.getAllByRole('button', { name: 'Disable' });
-    const firstDisableButton = disableButtons[0];
-    const secondDisableButton = disableButtons[1];
-
-    await user.click(firstDisableButton);
-
-    expect(mocks.manageMutation.mutateAsync).toHaveBeenCalledTimes(1);
-    expect(firstDisableButton.hasAttribute('disabled')).toBe(true);
-    expect(firstDisableButton.textContent).toContain('Disabling');
-    expect(secondDisableButton.hasAttribute('disabled')).toBe(false);
-
-    resolveMutation?.();
-  });
-});