@nextclaw/ui 0.12.11 → 0.12.13

package/src/features/channels/pages/channels-list-page.test.tsx

@@ -0,0 +1,288 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type * as ReactQueryModule from '@tanstack/react-query';
+import { ChannelsList } from '@/features/channels/pages/channels-list-page';
+
+const mocks = vi.hoisted(() => ({
+  updateChannelMutate: vi.fn(),
+  updateChannelMutateAsync: vi.fn(),
+  startChannelAuthMutateAsync: vi.fn(),
+  pollChannelAuthMutateAsync: vi.fn(),
+  configQuery: {
+    data: {
+      channels: {
+        weixin: {
+          enabled: false,
+          defaultAccountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com',
+          pollTimeoutMs: 35000,
+          allowFrom: ['o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat'],
+          accounts: {
+            '1344b2b24720@im.bot': {
+              enabled: true
+            }
+          }
+        }
+      }
+    },
+    isLoading: false
+  },
+  metaQuery: {
+    data: {
+      channels: [
+        {
+          name: 'weixin',
+          displayName: 'Weixin',
+          enabled: false
+        }
+      ]
+    }
+  },
+  schemaQuery: {
+    data: {
+      uiHints: {
+        'channels.weixin': {
+          label: 'Weixin',
+          help: 'Weixin QR login + getupdates long-poll channel'
+        },
+        'channels.weixin.baseUrl': {
+          label: 'API Base URL'
+        }
+      },
+      actions: []
+    }
+  }
+}));
+
+vi.mock('qrcode', () => ({
+  toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
+}));
+
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual<typeof ReactQueryModule>('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries: vi.fn().mockResolvedValue(undefined)
+    }),
+    useQuery: () => ({
+      data: 'data:image/png;base64,weixin-qr'
+    })
+  };
+});
+
+vi.mock('@/shared/hooks/use-config', () => ({
+  useConfig: () => mocks.configQuery,
+  useConfigMeta: () => mocks.metaQuery,
+  useConfigSchema: () => mocks.schemaQuery,
+  useUpdateChannel: () => ({
+    mutate: mocks.updateChannelMutate,
+    mutateAsync: mocks.updateChannelMutateAsync,
+    isPending: false
+  }),
+  useExecuteConfigAction: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false
+  })
+}));
+
+vi.mock('@/features/channels/hooks/use-channel-auth', () => ({
+  useStartChannelAuth: () => ({
+    mutateAsync: mocks.startChannelAuthMutateAsync,
+    isPending: false
+  }),
+  usePollChannelAuth: () => ({
+    mutateAsync: mocks.pollChannelAuthMutateAsync,
+    isPending: false
+  })
+}));
+
+describe('ChannelsList', () => {
+  beforeEach(() => {
+    mocks.updateChannelMutate.mockReset();
+    mocks.updateChannelMutateAsync.mockReset();
+    mocks.startChannelAuthMutateAsync.mockReset();
+    mocks.pollChannelAuthMutateAsync.mockReset();
+    mocks.configQuery.data = {
+      channels: {
+        weixin: {
+          enabled: false,
+          defaultAccountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com',
+          pollTimeoutMs: 35000,
+          allowFrom: ['o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat'],
+          accounts: {
+            '1344b2b24720@im.bot': {
+              enabled: true
+            }
+          }
+        }
+      }
+    };
+    mocks.metaQuery.data = {
+      channels: [
+        {
+          name: 'weixin',
+          displayName: 'Weixin',
+          enabled: false
+        }
+      ]
+    };
+  });
+
+  it('renders weixin qr auth card and starts channel auth', async () => {
+    const user = userEvent.setup();
+    mocks.startChannelAuthMutateAsync.mockResolvedValue({
+      channel: 'weixin',
+      kind: 'qr_code',
+      sessionId: 'session-1',
+      qrCode: 'qr-token',
+      qrCodeUrl: 'https://example.com/weixin-qr.png',
+      expiresAt: '2026-03-23T10:00:00.000Z',
+      intervalMs: 60_000,
+      note: '请扫码'
+    });
+
+    render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+
+    expect((await screen.findAllByText('Weixin')).length).toBeGreaterThan(0);
+    expect(await screen.findByRole('button', { name: 'Reconnect with QR' })).toBeTruthy();
+    expect(screen.getByText('Weixin now uses QR login as the primary setup flow.')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Reconnect with QR' }));
+
+    await waitFor(() => {
+      expect(mocks.startChannelAuthMutateAsync).toHaveBeenCalledWith({
+        channel: 'weixin',
+        data: expect.objectContaining({
+          accountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com'
+        })
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByAltText('Weixin login QR code').getAttribute('src')).toBe('data:image/png;base64,weixin-qr');
+    });
+  });
+
+  it('keeps Weixin, Feishu, Discord, and QQ at the front of the channel list', async () => {
+    const user = userEvent.setup();
+    mocks.configQuery.data = {
+      channels: {
+        telegram: { enabled: false },
+        qq: { enabled: false },
+        discord: { enabled: false },
+        weixin: { enabled: false },
+        feishu: { enabled: false }
+      }
+    } as unknown as typeof mocks.configQuery.data;
+    mocks.metaQuery.data = {
+      channels: [
+        { name: 'telegram', displayName: 'Telegram', enabled: false },
+        { name: 'qq', displayName: 'QQ', enabled: false },
+        { name: 'discord', displayName: 'Discord', enabled: false },
+        { name: 'weixin', displayName: 'Weixin', enabled: false },
+        { name: 'feishu', displayName: 'Feishu', enabled: false }
+      ]
+    } as typeof mocks.metaQuery.data;
+
+    const { container } = render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+
+    const sidebarSection = container.querySelector('section');
+    if (!(sidebarSection instanceof HTMLElement)) {
+      throw new Error('channel sidebar not found');
+    }
+
+    const channelButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) =>
+      ['Weixin', 'Feishu', 'Discord', 'QQ', 'Telegram'].some((label) => button.textContent?.includes(label))
+    );
+
+    expect(channelButtons.map((button) => button.textContent)).toEqual([
+      expect.stringContaining('Weixin'),
+      expect.stringContaining('Feishu'),
+      expect.stringContaining('Discord'),
+      expect.stringContaining('QQ'),
+      expect.stringContaining('Telegram')
+    ]);
+  });
+
+  it('only enables internal scroll chaining on desktop-sized panes', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+
+    const scrollRegions = Array.from(container.querySelectorAll('div')).filter((node) => {
+      const classTokens = node.className.split(/\s+/).filter(Boolean);
+      return classTokens.includes('xl:overflow-y-auto');
+    });
+
+    expect(scrollRegions.length).toBeGreaterThanOrEqual(2);
+    scrollRegions.forEach((region) => {
+      const classTokens = region.className.split(/\s+/).filter(Boolean);
+      expect(classTokens).toContain('xl:overscroll-contain');
+      expect(classTokens).not.toContain('overflow-y-auto');
+      expect(classTokens).not.toContain('overscroll-contain');
+    });
+  });
+
+  it('saves weixin advanced settings from the advanced section', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+    await user.click(await screen.findByText('Advanced settings'));
+
+    const timeoutInput = await screen.findByLabelText('Long Poll Timeout (ms)');
+    await user.clear(timeoutInput);
+    await user.type(timeoutInput, '45000');
+
+    const accountsJson = container.querySelector('textarea#accounts') as HTMLTextAreaElement | null;
+    expect(accountsJson).toBeTruthy();
+    if (!accountsJson) {
+      throw new Error('accounts textarea not found');
+    }
+    await user.clear(accountsJson);
+    fireEvent.change(accountsJson, {
+      target: {
+        value: JSON.stringify(
+          {
+            '1344b2b24720@im.bot': {
+              enabled: true,
+              baseUrl: 'https://ilinkai.weixin.qq.com'
+            }
+          },
+          null,
+          2
+        )
+      }
+    });
+
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mocks.updateChannelMutate).toHaveBeenCalledWith({
+        channel: 'weixin',
+        data: expect.objectContaining({
+          enabled: false,
+          defaultAccountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com',
+          pollTimeoutMs: 45000,
+          allowFrom: ['o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat'],
+          accounts: {
+            '1344b2b24720@im.bot': {
+              enabled: true,
+              baseUrl: 'https://ilinkai.weixin.qq.com'
+            }
+          }
+        })
+      });
+    });
+  });
+});

package/src/{components/config/ChannelsList.tsx → features/channels/pages/channels-list-page.tsx}

@@ -1,42 +1,34 @@
-import { useEffect, useMemo, useState } from "react";
-import { ExternalLink, MessageSquare, Search } from "lucide-react";
-import { useConfig, useConfigMeta, useConfigSchema } from "@/hooks/useConfig";
-import { LogoBadge } from "@/components/common/LogoBadge";
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import { Input } from "@/components/ui/input";
-import { StatusDot } from "@/components/ui/status-dot";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { hintForPath } from "@/lib/config-hints";
-import { resolveChannelTutorialUrl } from "@/lib/channel-tutorials";
-import { t } from "@/lib/i18n";
-import { getChannelLogo } from "@/lib/logos";
-import { cn } from "@/lib/utils";
-import { ChannelForm } from "./ChannelForm";
-import {
-  ConfigSelectionCard,
-  ConfigSplitEmptyState,
-  ConfigSplitPage,
-  ConfigSplitPaneBody,
-  ConfigSplitPaneHeader,
-  ConfigSplitSidebar,
-} from "./config-split-page";
+import { useMemo, useState } from 'react';
+import { ExternalLink, MessageSquare, Search } from 'lucide-react';
+import { LogoBadge } from '@/shared/components/common/logo-badge';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { Input } from '@/shared/components/ui/input';
+import { StatusDot } from '@/shared/components/ui/status-dot';
+import { Tabs } from '@/shared/components/ui/tabs-custom';
+import { ChannelForm } from '@/features/channels/components/config/channel-form';
+import { useConfig, useConfigMeta, useConfigSchema } from '@/shared/hooks/use-config';
+import { ConfigSelectionCard, ConfigSplitEmptyState, ConfigSplitPage, ConfigSplitPaneBody, ConfigSplitPaneHeader, ConfigSplitSidebar } from '@/shared/components/config-split-page';
+import { hintForPath } from '@/shared/lib/config-hints';
+import { resolveChannelTutorialUrl } from '@/features/channels/utils/channel-tutorials.utils';
+import { t } from '@/shared/lib/i18n';
+import { getChannelLogo } from '@/shared/lib/logos';
+import { cn } from '@/shared/lib/utils';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 
 const channelDescriptionKeys: Record<string, string> = {
-  telegram: "channelDescTelegram",
-  slack: "channelDescSlack",
-  email: "channelDescEmail",
-  webhook: "channelDescWebhook",
-  discord: "channelDescDiscord",
-  feishu: "channelDescFeishu",
-  weixin: "channelDescWeixin",
+  telegram: 'channelDescTelegram',
+  slack: 'channelDescSlack',
+  email: 'channelDescEmail',
+  webhook: 'channelDescWebhook',
+  discord: 'channelDescDiscord',
+  feishu: 'channelDescFeishu',
+  weixin: 'channelDescWeixin'
 };
 
-const prioritizedChannelNames = ["weixin", "feishu", "discord", "qq"] as const;
+const prioritizedChannelNames = ['weixin', 'feishu', 'discord', 'qq'] as const;
 
 function sortChannelsForDisplay<T extends { name: string }>(channels: T[]) {
-  const priorityByName = new Map<string, number>(
-    prioritizedChannelNames.map((name, index) => [name, index]),
-  );
+  const priorityByName = new Map<string, number>(prioritizedChannelNames.map((name, index) => [name, index]));
   return channels
     .map((channel, index) => ({ channel, index }))
     .sort((left, right) => {
@@ -48,19 +40,20 @@ function sortChannelsForDisplay<T extends { name: string }>(channels: T[]) {
 }
 
 export function ChannelsList() {
+  const { isMobile } = useViewportLayout();
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
-  const [activeTab, setActiveTab] = useState("enabled");
-  const [selectedChannel, setSelectedChannel] = useState<string>();
-  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState('enabled');
+  const [selectedChannel, setSelectedChannel] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
   const channels = useMemo(() => sortChannelsForDisplay(meta?.channels ?? []), [meta?.channels]);
   const channelConfigs = config?.channels;
 
   const filteredChannels = useMemo(() => {
     const keyword = query.trim().toLowerCase();
     return channels
-      .filter((channel) => activeTab !== "enabled" || Boolean(channelConfigs?.[channel.name]?.enabled))
+      .filter((channel) => activeTab !== 'enabled' || Boolean(channelConfigs?.[channel.name]?.enabled))
       .filter((channel) => {
         if (!keyword) {
           return true;
@@ -70,32 +63,36 @@ export function ChannelsList() {
       });
   }, [activeTab, channelConfigs, channels, query]);
 
-  useEffect(() => {
-    setSelectedChannel(
-      filteredChannels.some((channel) => channel.name === selectedChannel)
-        ? selectedChannel
-        : filteredChannels[0]?.name,
-    );
-  }, [filteredChannels, selectedChannel]);
+  const resolvedSelectedChannel =
+    selectedChannel && filteredChannels.some((channel) => channel.name === selectedChannel)
+      ? selectedChannel
+      : isMobile
+        ? null
+        : filteredChannels[0]?.name ?? null;
 
   if (!config || !meta) {
-    return <div className="p-8 text-gray-400">{t("channelsLoading")}</div>;
+    return <div className="p-8 text-gray-400">{t('channelsLoading')}</div>;
   }
 
   return (
     <PageLayout className="pb-0 xl:flex xl:h-full xl:min-h-0 xl:flex-col">
-      <PageHeader title={t("channelsPageTitle")} description={t("channelsPageDescription")} />
-      <ConfigSplitPage className="xl:min-h-0">
+      <PageHeader title={t('channelsPageTitle')} description={t('channelsPageDescription')} />
+      <ConfigSplitPage
+        className="xl:min-h-0"
+        mobileView={isMobile ? (resolvedSelectedChannel ? 'detail' : 'list') : undefined}
+        onMobileBack={() => setSelectedChannel(null)}
+        mobileListLabel={t('channelsPageTitle')}
+      >
         <ConfigSplitSidebar>
           <ConfigSplitPaneHeader className="px-4 pt-4">
             <Tabs
               tabs={[
                 {
-                  id: "enabled",
-                  label: t("channelsTabEnabled"),
-                  count: channels.filter((channel) => channelConfigs?.[channel.name]?.enabled).length,
+                  id: 'enabled',
+                  label: t('channelsTabEnabled'),
+                  count: channels.filter((channel) => channelConfigs?.[channel.name]?.enabled).length
                 },
-                { id: "all", label: t("channelsTabAll"), count: channels.length },
+                { id: 'all', label: t('channelsTabAll'), count: channels.length }
               ]}
               activeTab={activeTab}
               onChange={setActiveTab}
@@ -106,12 +103,7 @@ export function ChannelsList() {
           <div className="border-b border-gray-100 px-4 py-3">
             <div className="relative">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-              <Input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder={t("channelsFilterPlaceholder")}
-                className="h-10 rounded-xl pl-9"
-              />
+              <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t('channelsFilterPlaceholder')} className="h-10 rounded-xl pl-9" />
             </div>
           </div>
 
@@ -119,32 +111,21 @@ export function ChannelsList() {
             {filteredChannels.map((channel) => {
               const enabled = Boolean(config.channels[channel.name]?.enabled);
               const tutorialUrl = resolveChannelTutorialUrl(channel);
-              const description =
-                hintForPath(`channels.${channel.name}`, schema?.uiHints)?.help ||
-                t(channelDescriptionKeys[channel.name] || "channelDescriptionDefault");
+              const description = hintForPath(`channels.${channel.name}`, schema?.uiHints)?.help || t(channelDescriptionKeys[channel.name] || 'channelDescriptionDefault');
 
               return (
-                <ConfigSelectionCard
-                  key={channel.name}
-                  onClick={() => setSelectedChannel(channel.name)}
-                  active={selectedChannel === channel.name}
-                >
+                <ConfigSelectionCard key={channel.name} onClick={() => setSelectedChannel(channel.name)} active={resolvedSelectedChannel === channel.name}>
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-3">
                       <LogoBadge
                         name={channel.name}
                         src={getChannelLogo(channel.name)}
-                        className={cn(
-                          "h-10 w-10 rounded-lg border",
-                          enabled ? "border-primary/30 bg-white" : "border-gray-200/70 bg-white",
-                        )}
+                        className={cn('h-10 w-10 rounded-lg border', enabled ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white')}
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-gray-500">{channel.name[0]}</span>}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">
-                          {channel.displayName || channel.name}
-                        </p>
+                        <p className="truncate text-sm font-semibold text-gray-900">{channel.displayName || channel.name}</p>
                         <p className="line-clamp-1 text-[11px] text-gray-500">{description}</p>
                       </div>
                     </div>
@@ -154,29 +135,22 @@ export function ChannelsList() {
                           href={tutorialUrl}
                           onClick={(event) => event.stopPropagation()}
                           className="inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500"
-                          title={t("channelsGuideTitle")}
+                          title={t('channelsGuideTitle')}
                         >
                           <ExternalLink className="h-3.5 w-3.5" />
                         </a>
                       ) : null}
-                      <StatusDot
-                        status={enabled ? "active" : "inactive"}
-                        label={enabled ? t("statusActive") : t("statusInactive")}
-                        className="min-w-[56px] justify-center"
-                      />
+                      <StatusDot status={enabled ? 'active' : 'inactive'} label={enabled ? t('statusActive') : t('statusInactive')} className="min-w-[56px] justify-center" />
                     </div>
                   </div>
                 </ConfigSelectionCard>
               );
             })}
-
-            {filteredChannels.length === 0 ? (
-              <ConfigSplitEmptyState icon={MessageSquare} title={t("channelsNoMatch")} />
-            ) : null}
+            {filteredChannels.length === 0 ? <ConfigSplitEmptyState icon={MessageSquare} title={t('channelsNoMatch')} /> : null}
           </ConfigSplitPaneBody>
         </ConfigSplitSidebar>
 
-        <ChannelForm channelName={selectedChannel} />
+        <ChannelForm channelName={resolvedSelectedChannel ?? undefined} />
       </ConfigSplitPage>
     </PageLayout>
   );

package/src/{components/config/channel-form-fields.test.ts → features/channels/utils/channel-form-fields.utils.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { buildChannelFormDefinitions } from './channel-form-fields';
+import { buildChannelFormDefinitions } from './channel-form-fields.utils';
 
 describe('buildChannelFormDefinitions', () => {
   it('keeps default channels on a single all-fields layout', () => {

package/src/{components/config/channel-form-fields.ts → features/channels/utils/channel-form-fields.utils.ts}

@@ -1,4 +1,4 @@
-import { t } from '@/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 
 export type ChannelFieldType = 'boolean' | 'text' | 'email' | 'password' | 'number' | 'tags' | 'select' | 'json';
 export type ChannelOption = { value: string; label: string };

package/src/{lib/channel-tutorials.ts → features/channels/utils/channel-tutorials.utils.ts}

@@ -1,5 +1,5 @@
-import type { ChannelSpecView } from '@/api/types';
-import { getLanguage } from '@/lib/i18n';
+import type { ChannelSpecView } from '@/shared/lib/api';
+import { getLanguage } from '@/shared/lib/i18n';
 
 export function resolveChannelTutorialUrl(channel: Pick<ChannelSpecView, 'tutorialUrl' | 'tutorialUrls'>): string | undefined {
   const lang = getLanguage();

package/src/{components/chat → features/chat/components}/chat-session-type-option-item.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { ChatSessionTypeOptionItem } from "@/components/chat/chat-session-type-option-item";
+import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
 
 describe("ChatSessionTypeOptionItem", () => {
   it("renders a runtime icon image when the session type option provides an app resource URI", () => {

package/src/{components/chat → features/chat/components}/chat-session-type-option-item.tsx

@@ -1,7 +1,7 @@
-import type { ChatInputSnapshot } from "@/components/chat/stores/chat-input.store";
-import { SessionContextIconNode } from "@/components/common/session-context-icon";
-import { t } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
 

package/src/{components/chat → features/chat/components}/chat-session-workspace-file-preview.test.tsx

@@ -1,12 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { t } from "@/lib/i18n";
+import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { t } from "@/shared/lib/i18n";
 
 const serverPathReadMock = vi.fn();
 
-vi.mock("@/hooks/server-path/use-server-path-read", () => ({
+vi.mock("@/shared/hooks/use-server-path-read", () => ({
   useServerPathRead: (...args: unknown[]) => serverPathReadMock(...args),
 }));
 

package/src/{components/chat → features/chat/components}/chat-session-workspace-file-preview.tsx

@@ -1,22 +1,13 @@
 import { useMemo } from "react";
-import type {
-  ChatFileOpenActionViewModel,
-  ChatFileOperationBlockViewModel,
-} from "@nextclaw/agent-chat-ui";
-import {
-  ChatMessageMarkdown,
-  FileOperationCodeSurface,
-} from "@nextclaw/agent-chat-ui";
-import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
-import { ChatSessionWorkspaceFileBreadcrumbs } from "@/components/chat/workspace/chat-session-workspace-file-breadcrumbs";
-import { useServerPathRead } from "@/hooks/server-path/use-server-path-read";
-import {
-  buildLineDiff,
-  buildPreviewLines,
-} from "@/components/chat/adapters/file-operation/line-builder";
-import { t } from "@/lib/i18n";
-import { buildWorkspaceFileBreadcrumb } from "@/lib/session-project/workspace-file-breadcrumb";
-import { cn } from "@/lib/utils";
+import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from "@nextclaw/agent-chat-ui";
+import { ChatMessageMarkdown, FileOperationCodeSurface } from "@nextclaw/agent-chat-ui";
+import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "./workspace/chat-session-workspace-file-breadcrumbs";
+import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
+import { buildLineDiff, buildPreviewLines } from "@/features/chat/utils/file-operation/line-builder.utils";
+import { t } from "@/shared/lib/i18n";
+import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
+import { cn } from "@/shared/lib/utils";
 
 function inferPreviewKind(params: {
   path: string;
@@ -128,10 +119,7 @@ function WorkspaceDiffBody({
   if (!diffBlock) {
     return <WorkspaceFilePreviewStatus text={t("chatWorkspaceDiffEmpty")} />;
   }
-
-  return (
-    <WorkspaceCodeSurface block={diffBlock} />
-  );
+  return <WorkspaceCodeSurface block={diffBlock} />;
 }
 
 function WorkspaceCodeSurface({
@@ -139,11 +127,7 @@ function WorkspaceCodeSurface({
 }: {
   block: ChatFileOperationBlockViewModel;
 }) {
-  return (
-    <div className="h-full overflow-auto custom-scrollbar bg-white">
-      <FileOperationCodeSurface block={block} layout="workspace" />
-    </div>
-  );
+  return <div className="h-full overflow-auto custom-scrollbar bg-white"><FileOperationCodeSurface block={block} layout="workspace" /></div>;
 }
 
 function WorkspacePreviewBody({
@@ -205,11 +189,7 @@ function WorkspacePreviewBody({
   return <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewEmpty")} />;
 }
 
-type ChatSessionWorkspaceFilePreviewProps = {
-  file: ChatWorkspaceFileTab;
-  sessionProjectRoot: string | null;
-  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
-};
+type ChatSessionWorkspaceFilePreviewProps = { file: ChatWorkspaceFileTab; sessionProjectRoot: string | null; onFileOpen: (action: ChatFileOpenActionViewModel) => void };
 
 export function ChatSessionWorkspaceFilePreview({
   file,