@nextclaw/ui 0.12.24 → 0.12.26

package/src/features/chat/pages/sessions-config-page.test.tsx

@@ -1,152 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SessionsConfig } from '@/features/chat/pages/sessions-config-page';
-import type { NcpMessageView, NcpSessionMessagesView, NcpSessionsListView } from '@/shared/lib/api';
-import { setLanguage } from '@/shared/lib/i18n';
-
-const mocks = vi.hoisted(() => ({
-  confirm: vi.fn(),
-  refetch: vi.fn(),
-  updateMutate: vi.fn(),
-  deleteMutate: vi.fn(),
-  sessionsQuery: null as unknown as {
-    data?: NcpSessionsListView;
-    isLoading: boolean;
-    isFetching: boolean;
-    refetch: () => void;
-  },
-  messagesQuery: null as unknown as {
-    data?: NcpSessionMessagesView;
-    isLoading: boolean;
-    error: Error | null;
-  }
-}));
-
-vi.mock('@/shared/hooks/use-confirm-dialog', () => ({
-  useConfirmDialog: () => ({
-    confirm: mocks.confirm,
-    ConfirmDialog: () => null
-  })
-}));
-
-vi.mock('@/shared/hooks/use-config', () => ({
-  useNcpSessions: () => mocks.sessionsQuery,
-  useNcpSessionMessages: () => mocks.messagesQuery,
-  useUpdateNcpSession: () => ({
-    mutate: mocks.updateMutate,
-    isPending: false
-  }),
-  useDeleteNcpSession: () => ({
-    mutate: mocks.deleteMutate,
-    isPending: false
-  })
-}));
-
-function createSessionSummary(overrides: Partial<NcpSessionsListView['sessions'][number]> = {}) {
-  return {
-    sessionId: 'discord:session-1',
-    messageCount: 2,
-    updatedAt: '2026-04-20T20:00:00.000Z',
-    status: 'running' as const,
-    metadata: {
-      label: 'Release 42',
-      preferredModel: 'gpt-4.1'
-    },
-    ...overrides
-  };
-}
-
-function createMessage(overrides: Partial<NcpMessageView> = {}): NcpMessageView {
-  return {
-    id: 'message-1',
-    sessionId: 'discord:session-1',
-    role: 'assistant',
-    status: 'final',
-    timestamp: '2026-04-20T20:00:00.000Z',
-    parts: [{ type: 'text', text: 'History payload' }],
-    ...overrides
-  };
-}
-
-describe('SessionsConfig', () => {
-  beforeEach(() => {
-    setLanguage('en');
-    mocks.confirm.mockReset();
-    mocks.refetch.mockReset();
-    mocks.updateMutate.mockReset();
-    mocks.deleteMutate.mockReset();
-    mocks.confirm.mockResolvedValue(true);
-    mocks.sessionsQuery = {
-      data: {
-        total: 1,
-        sessions: [createSessionSummary()]
-      },
-      isLoading: false,
-      isFetching: false,
-      refetch: mocks.refetch
-    };
-    mocks.messagesQuery = {
-      data: {
-        sessionId: 'discord:session-1',
-        status: 'idle',
-        total: 1,
-        messages: [createMessage()]
-      },
-      isLoading: false,
-      error: null
-    };
-    if (!HTMLElement.prototype.hasPointerCapture) {
-      HTMLElement.prototype.hasPointerCapture = () => false;
-    }
-    if (!HTMLElement.prototype.setPointerCapture) {
-      HTMLElement.prototype.setPointerCapture = () => {};
-    }
-    if (!HTMLElement.prototype.releasePointerCapture) {
-      HTMLElement.prototype.releasePointerCapture = () => {};
-    }
-  });
-
-  it('saves session metadata through the feature-root page', async () => {
-    const user = userEvent.setup();
-
-    render(<SessionsConfig />);
-
-    expect(screen.getByText('No Session Selected')).toBeTruthy();
-
-    await user.click(screen.getByRole('button', { name: /Release 42/i }));
-    expect(screen.getByText('History payload')).toBeTruthy();
-
-    await user.click(screen.getByRole('button', { name: 'Metadata' }));
-    await user.clear(screen.getByPlaceholderText('Session label (optional)'));
-    await user.type(screen.getByPlaceholderText('Session label (optional)'), '  Batch 30  ');
-    await user.clear(screen.getByPlaceholderText('Preferred model (optional)'));
-    await user.type(screen.getByPlaceholderText('Preferred model (optional)'), '  gpt-5.4  ');
-    await user.click(screen.getByRole('button', { name: 'Save metadata' }));
-
-    expect(mocks.updateMutate).toHaveBeenCalledWith({
-      sessionId: 'discord:session-1',
-      data: {
-        label: 'Batch 30',
-        preferredModel: 'gpt-5.4'
-      }
-    });
-  });
-
-  it('deletes the selected session after confirmation', async () => {
-    const user = userEvent.setup();
-
-    render(<SessionsConfig />);
-
-    await user.click(screen.getByRole('button', { name: /Release 42/i }));
-    await user.click(screen.getByRole('button', { name: 'Delete' }));
-
-    expect(mocks.confirm).toHaveBeenCalledTimes(1);
-    expect(mocks.deleteMutate).toHaveBeenCalledWith(
-      { sessionId: 'discord:session-1' },
-      expect.objectContaining({
-        onSuccess: expect.any(Function)
-      })
-    );
-  });
-});

package/src/features/chat/pages/sessions-config-page.tsx

@@ -1,192 +0,0 @@
-import { useMemo, useState } from 'react';
-import type { NcpSessionSummaryView, SessionEntryView } from '@/shared/lib/api';
-import { useNcpSessions } from '@/shared/hooks/use-config';
-import { Button } from '@/shared/components/ui/button';
-import { Input } from '@/shared/components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
-import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
-import { adaptNcpSessionSummaries, sessionDisplayName, sessionMatchesQuery } from '@/features/chat';
-import { cn } from '@/shared/lib/utils';
-import { formatDateShort, t } from '@/shared/lib/i18n';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
-import { Clock, Inbox, MessageCircle, RefreshCw, Search } from 'lucide-react';
-import { SessionsConfigDetailPane } from '@/features/chat/components/config/sessions-config-detail-pane';
-import { ConfigSplitPage, ConfigSplitSidebar, ConfigSplitPaneBody, ConfigSplitPaneHeader } from '@/shared/components/config-split-page';
-import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
-const UNKNOWN_CHANNEL_KEY = '__unknown_channel__';
-function resolveChannelFromSessionKey(key: string): string {
-  const separator = key.indexOf(':');
-  if (separator <= 0) {
-    return UNKNOWN_CHANNEL_KEY;
-  }
-  return key.slice(0, separator).trim() || UNKNOWN_CHANNEL_KEY;
-}
-function displayChannelName(channel: string): string {
-  return channel === UNKNOWN_CHANNEL_KEY ? t('sessionsUnknownChannel') : channel;
-}
-function SessionListItem(props: {
-  session: SessionEntryView;
-  summary: NcpSessionSummaryView;
-  channelLabel: string;
-  isSelected: boolean;
-  onSelect: () => void;
-}) {
-  return (
-    <button
-      onClick={props.onSelect}
-      className={cn(
-        'w-full text-left p-3.5 rounded-xl transition-all duration-200 outline-none focus:outline-none focus:ring-0 group',
-        props.isSelected ? 'bg-brand-50 border border-brand-100/50' : 'bg-transparent border border-transparent hover:bg-gray-50/80'
-      )}
-    >
-      <div className="flex items-start justify-between mb-1.5">
-        <div
-          className={cn('font-semibold truncate pr-2 flex-1 text-sm', props.isSelected ? 'text-brand-800' : 'text-gray-900')}
-        >
-          {sessionDisplayName(props.session)}
-        </div>
-        <div
-          className={cn(
-            'text-[10px] font-bold px-2 py-0.5 rounded-full shrink-0 capitalize',
-            props.isSelected ? 'bg-white text-brand-600 shadow-[0_1px_2px_rgba(0,0,0,0.02)]' : 'bg-gray-100 text-gray-500'
-          )}
-        >
-          {props.channelLabel}
-        </div>
-      </div>
-      <div
-        className={cn('flex items-center text-xs justify-between mt-2 font-medium', props.isSelected ? 'text-brand-600/80' : 'text-gray-400')}
-      >
-        <div className="flex items-center gap-1.5">
-          <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-            {props.summary.status === 'running' ? <SessionRunBadge status="running" /> : null}
-          </span>
-          <Clock className="w-3.5 h-3.5 opacity-70" />
-          <span className="truncate max-w-[100px]">{formatDateShort(props.summary.updatedAt)}</span>
-        </div>
-        <div className="flex items-center gap-1">
-          <MessageCircle className="w-3.5 h-3.5 opacity-70" />
-          <span>{props.summary.messageCount}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
-export function SessionsConfig() {
-  const { isMobile } = useViewportLayout();
-  const [query, setQuery] = useState('');
-  const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
-  const [selectedChannel, setSelectedChannel] = useState('all');
-  const sessionsQuery = useNcpSessions({ limit: 100 });
-  const sessionSummaries = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
-  const sessionEntries = useMemo(() => adaptNcpSessionSummaries(sessionSummaries), [sessionSummaries]);
-  const sessionSummaryById = useMemo(() => new Map(sessionSummaries.map((session) => [session.sessionId, session])), [
-    sessionSummaries
-  ]);
-  const filteredSessions = useMemo(
-    () =>
-      sessionEntries.filter((session) => {
-        if (selectedChannel !== 'all' && resolveChannelFromSessionKey(session.key) !== selectedChannel) {
-          return false;
-        }
-        return sessionMatchesQuery(session, query);
-      }),
-    [query, selectedChannel, sessionEntries]
-  );
-  const channels = useMemo(() => {
-    const set = new Set<string>();
-    for (const session of sessionEntries) {
-      set.add(resolveChannelFromSessionKey(session.key));
-    }
-    return Array.from(set).sort((a, b) => {
-      if (a === UNKNOWN_CHANNEL_KEY) {
-        return 1;
-      }
-      if (b === UNKNOWN_CHANNEL_KEY) {
-        return -1;
-      }
-      return a.localeCompare(b);
-    });
-  }, [sessionEntries]);
-  const selectedSessionKey = selectedSessionId && sessionSummaryById.has(selectedSessionId) ? selectedSessionId : null;
-  const selectedSession = useMemo(() => sessionEntries.find((session) => session.key === selectedSessionKey) ?? null, [
-    selectedSessionKey,
-    sessionEntries
-  ]);
-  const selectedSummary = selectedSessionKey ? sessionSummaryById.get(selectedSessionKey) ?? null : null;
-  const selectedChannelLabel = selectedSession ? displayChannelName(resolveChannelFromSessionKey(selectedSession.key)) : null;
-  return (
-    <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t('sessionsPageTitle')} description={t('sessionsPageDescription')} />
-      <ConfigSplitPage
-        className="xl:min-h-0"
-        mobileView={isMobile ? (selectedSessionKey ? 'detail' : 'list') : undefined}
-        onMobileBack={() => setSelectedSessionId(null)}
-        mobileListLabel={t('sessionsPageTitle')}
-      >
-        <ConfigSplitSidebar className="xl:w-[320px] xl:flex-none">
-          <ConfigSplitPaneHeader className="space-y-3 px-4 py-4">
-            <div className="flex items-center justify-between">
-              <span className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider">{sessionEntries.length} {t('sessionsListTitle')}</span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100"
-                onClick={() => sessionsQuery.refetch()}
-              >
-                <RefreshCw className={cn('h-3.5 w-3.5', sessionsQuery.isFetching && 'animate-spin')} />
-              </Button>
-            </div>
-            <Select value={selectedChannel} onValueChange={setSelectedChannel}>
-              <SelectTrigger className="w-full h-8.5 rounded-lg bg-gray-50/50 hover:bg-gray-100 border-gray-200 focus:ring-0 shadow-none text-xs font-medium text-gray-700">
-                <SelectValue placeholder={t('sessionsAllChannels')} />
-              </SelectTrigger>
-              <SelectContent className="rounded-xl shadow-lg border-gray-100 max-w-[280px]">
-                <SelectItem value="all" className="rounded-lg text-xs">{t('sessionsAllChannels')}</SelectItem>
-                {channels.map((channel) => (
-                  <SelectItem key={channel} value={channel} className="rounded-lg text-xs truncate pr-6">
-                    {displayChannelName(channel)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <div className="relative w-full">
-              <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
-              <Input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder={t('sessionsSearchPlaceholder')}
-                className="pl-8 h-8.5 rounded-lg bg-gray-50/50 border-gray-200 focus-visible:bg-white text-xs"
-              />
-            </div>
-          </ConfigSplitPaneHeader>
-          <ConfigSplitPaneBody className="space-y-1 p-3 pb-10">
-            {sessionsQuery.isLoading ? (
-              <div className="text-sm text-gray-400 p-4 text-center">{t('sessionsLoading')}</div>
-            ) : filteredSessions.length === 0 ? (
-              <div className="text-sm text-gray-400 p-4 text-center border-2 border-dashed border-gray-100 rounded-xl mt-4">
-                <Inbox className="w-8 h-8 mx-auto mb-2 text-gray-300" />
-                {t('sessionsEmpty')}
-              </div>
-            ) : (
-              filteredSessions.map((session) => {
-                const summary = sessionSummaryById.get(session.key);
-                if (!summary) {
-                  return null;
-                }
-                return <SessionListItem key={session.key} session={session} summary={summary} channelLabel={displayChannelName(resolveChannelFromSessionKey(session.key))} isSelected={selectedSessionKey === session.key} onSelect={() => setSelectedSessionId(session.key)} />;
-              })
-            )}
-          </ConfigSplitPaneBody>
-        </ConfigSplitSidebar>
-        <SessionsConfigDetailPane
-          sessionKey={selectedSessionKey}
-          session={selectedSession}
-          summary={selectedSummary}
-          channelLabel={selectedChannelLabel}
-          onClearSelection={() => setSelectedSessionId(null)}
-        />
-      </ConfigSplitPage>
-    </PageLayout>
-  );
-}