@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.346

package/src/app/[variants]/(main)/settings/skill/index.tsx

@@ -2,30 +2,32 @@
 
 import { Button, Icon } from '@lobehub/ui';
 import { Store } from 'lucide-react';
-import { useState } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 
 import SkillList from './features/SkillList';
 
 const Page = () => {
   const { t } = useTranslation('setting');
-  const [open, setOpen] = useState(false);
+
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
 
   return (
     <>
       <SettingHeader
         extra={
-          <Button icon={<Icon icon={Store} />} onClick={() => setOpen(true)}>
+          <Button icon={<Icon icon={Store} />} onClick={handleOpenStore}>
             {t('skillStore.button')}
           </Button>
         }
         title={t('tab.skill')}
       />
       <SkillList />
-      <SkillStore open={open} setOpen={setOpen} />
     </>
   );
 };

package/src/app/[variants]/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -31,48 +31,16 @@ vi.mock('@/const/version', () => ({
   isDesktop: false,
 }));
 
-// Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: false },
-}));
-
-vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
-}));
-
 afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = false;
   mockNavigate.mockReset();
 });
 
 describe('UserBanner', () => {
-  it('should render UserInfo and DataStatistics when auth is disabled', () => {
-    act(() => {
-      useUserStore.setState({ isSignedIn: false });
-    });
-    enableAuth.value = false;
-
-    render(<UserBanner />);
-
-    expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
-    expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
-    expect(screen.queryByText('Mocked UserLoginOrSignup')).not.toBeInTheDocument();
-  });
-
-  it('should render UserInfo and DataStatistics when user is logged in with auth enabled', () => {
+  it('should render UserInfo and DataStatistics when user is logged in', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
 
-    enableClerk.value = true;
-
     render(<UserBanner />);
 
     expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
@@ -80,11 +48,10 @@ describe('UserBanner', () => {
     expect(screen.queryByText('Mocked UserLoginOrSignup')).not.toBeInTheDocument();
   });
 
-  it('should render UserLoginOrSignup when user is not logged in with auth enabled', () => {
+  it('should render UserLoginOrSignup when user is not logged in', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableClerk.value = true;
 
     render(<UserBanner />);
 

package/src/app/[variants]/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -22,21 +22,6 @@ vi.mock('react-i18next', () => ({
   })),
 }));
 
-// Use vi.hoisted to ensure variables exist before vi.mock factory executes
-const { enableAuth, enableClerk } = vi.hoisted(() => ({
-  enableAuth: { value: true },
-  enableClerk: { value: true },
-}));
-
-vi.mock('@/envs/auth', () => ({
-  get enableAuth() {
-    return enableAuth.value;
-  },
-  get enableClerk() {
-    return enableClerk.value;
-  },
-}));
-
 // Mock version constants
 vi.mock('@/const/version', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/const/version')>();
@@ -47,8 +32,6 @@ vi.mock('@/const/version', async (importOriginal) => {
 });
 
 afterEach(() => {
-  enableAuth.value = true;
-  enableClerk.value = true;
   mockNavigate.mockReset();
 });
 
@@ -57,8 +40,6 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: true });
     });
-    enableAuth.value = true;
-    enableClerk.value = false;
 
     const mockOpenChangelogModal = vi.fn();
     const { result } = renderHook(() => useCategory(mockOpenChangelogModal), { wrapper });
@@ -77,7 +58,6 @@ describe('useCategory', () => {
     act(() => {
       useUserStore.setState({ isSignedIn: false });
     });
-    enableAuth.value = true;
 
     const mockOpenChangelogModal = vi.fn();
     const { result } = renderHook(() => useCategory(mockOpenChangelogModal), { wrapper });

package/src/app/[variants]/(mobile)/me/(home)/features/UserBanner.tsx

@@ -4,7 +4,6 @@ import { Flexbox } from '@lobehub/ui';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { enableAuth } from '@/envs/auth';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';
@@ -17,7 +16,7 @@ const UserBanner = memo(() => {
 
   return (
     <Flexbox gap={12} paddingBlock={8}>
-      {!enableAuth || (enableAuth && isLoginWithAuth) ? (
+      {isLoginWithAuth ? (
         <>
           <Link style={{ color: 'inherit' }} to="/settings/profile">
             <UserInfo />

package/src/app/[variants]/(mobile)/me/profile/features/Category.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChartColumnBigIcon, LogOut, ShieldCheck, UserCircle } from 'lucide-react';
+import { ChartColumnBigIcon, LogOut, UserCircle } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,11 +11,7 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const Category = memo(() => {
-  const [isLogin, isLoginWithClerk, signOut] = useUserStore((s) => [
-    authSelectors.isLogin(s),
-    authSelectors.isLoginWithClerk(s),
-    s.logout,
-  ]);
+  const [isLogin, signOut] = useUserStore((s) => [authSelectors.isLogin(s), s.logout]);
   const navigate = useNavigate();
   const { t } = useTranslation('auth');
   const items: CellProps[] = [
@@ -25,12 +21,6 @@ const Category = memo(() => {
       label: t('tab.profile'),
       onClick: () => navigate('/settings/profile'),
     },
-    isLoginWithClerk && {
-      icon: ShieldCheck,
-      key: ProfileTabs.Security,
-      label: t('tab.security'),
-      onClick: () => navigate('/settings/security'),
-    },
     {
       icon: ChartColumnBigIcon,
       key: ProfileTabs.Stats,
@@ -46,7 +36,7 @@ const Category = memo(() => {
       label: t('signout', { ns: 'auth' }),
       onClick: () => {
         signOut();
-        navigate('/login');
+        navigate('/signin');
       },
     },
   ].filter(Boolean) as CellProps[];

package/src/app/[variants]/(mobile)/settings/_layout/Header.tsx

@@ -6,7 +6,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { enableAuth } from '@/envs/auth';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { type SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
@@ -16,7 +15,7 @@ const Header = memo(() => {
   const { t } = useTranslation('setting');
   const showMobileWorkspace = useShowMobileWorkspace();
   const navigate = useNavigate();
-  const params = useParams<{ providerId?: string, tab?: string; }>();
+  const params = useParams<{ providerId?: string; tab?: string }>();
 
   const isSessionActive = useSessionStore((s) => !!s.activeId);
   const isProvider = params.providerId && params.providerId !== 'all';
@@ -27,7 +26,7 @@ const Header = memo(() => {
     } else if (isProvider) {
       navigate('/settings/provider/all');
     } else {
-      navigate(enableAuth ? '/me/settings' : '/me');
+      navigate('/me/settings');
     }
   };
 

package/src/app/[variants]/share/t/[id]/_layout/index.tsx

@@ -65,7 +65,7 @@ const ShareTopicLayout = memo<PropsWithChildren>(({ children }) => {
                 <UserAvatar size={32} />
               </Link>
             ) : (
-              <NextLink href="/login">
+              <NextLink href="/signin">
                 <ProductLogo size={32} />
               </NextLink>
             )}

package/src/app/[variants]/share/t/[id]/index.tsx

@@ -56,7 +56,7 @@ const ShareTopicPage = memo(() => {
           <NotFound
             desc={t('sharePage.error.unauthorized.subtitle')}
             extra={
-              <Button href="/login" type="primary">
+              <Button href="/signin" type="primary">
                 {t('sharePage.error.unauthorized.action')}
               </Button>
             }

package/src/app/robots.tsx

@@ -26,7 +26,7 @@ const robots = (): MetadataRoute.Robots => {
       },
       {
         allow: ['/'],
-        disallow: ['/api/*', '/login', '/signup', '/knowledge/*', '/share/*'],
+        disallow: ['/api/*', '/signin', '/signup', '/knowledge/*', '/share/*'],
         userAgent: '*',
       },
     ],

package/src/envs/auth.ts

@@ -6,11 +6,6 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv {
-      // ===== Clerk ===== //
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?: string;
-      CLERK_SECRET_KEY?: string;
-      CLERK_WEBHOOK_SECRET?: string;
-
       // ===== Auth (shared by Better Auth / Next Auth) ===== //
       AUTH_SECRET?: string;
       AUTH_EMAIL_VERIFICATION?: string;
@@ -136,10 +131,6 @@ declare global {
 export const getAuthConfig = () => {
   return createEnv({
     client: {
-      // ---------------------------------- clerk ----------------------------------
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH: z.boolean().optional().default(false),
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: z.boolean().optional(),
 
@@ -147,10 +138,6 @@ export const getAuthConfig = () => {
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
     },
     server: {
-      // ---------------------------------- clerk ----------------------------------
-      CLERK_SECRET_KEY: z.string().optional(),
-      CLERK_WEBHOOK_SECRET: z.string().optional(),
-
       // ---------------------------------- better auth ----------------------------------
       AUTH_SECRET: z.string().optional(),
       AUTH_SSO_PROVIDERS: z.string().optional().default(''),
@@ -261,14 +248,6 @@ export const getAuthConfig = () => {
     },
 
     runtimeEnv: {
-      // Clerk
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH:
-        process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1' ||
-        !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-      CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
-      CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
-
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1',
       // Fallback to NEXT_PUBLIC_* for seamless migration
@@ -396,13 +375,9 @@ export const getAuthConfig = () => {
 export const authEnv = getAuthConfig();
 
 // Auth flags - use process.env directly for build-time dead code elimination
-export const enableClerk =
-  process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1'
-    ? true
-    : !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
-export const enableBetterAuth = process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1';
+// Better Auth is the default auth solution when NextAuth is not explicitly enabled
 export const enableNextAuth = process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1';
-export const enableAuth = enableClerk || enableBetterAuth || enableNextAuth || false;
+export const enableBetterAuth = !enableNextAuth;
 
 // Auth headers and constants
 export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';

package/src/envs/llm.ts

@@ -241,7 +241,7 @@ export const getLLMConfig = () => {
       ENABLED_DEEPSEEK: !!process.env.DEEPSEEK_API_KEY,
       DEEPSEEK_API_KEY: process.env.DEEPSEEK_API_KEY,
 
-      ENABLED_GOOGLE: !!process.env.GOOGLE_API_KEY,
+      ENABLED_GOOGLE: process.env.ENABLED_GOOGLE !== '0',
       GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
 
       ENABLED_VERTEXAI: !!process.env.VERTEXAI_CREDENTIALS,
@@ -252,7 +252,7 @@ export const getLLMConfig = () => {
       ENABLED_PERPLEXITY: !!process.env.PERPLEXITY_API_KEY,
       PERPLEXITY_API_KEY: process.env.PERPLEXITY_API_KEY,
 
-      ENABLED_ANTHROPIC: !!process.env.ANTHROPIC_API_KEY,
+      ENABLED_ANTHROPIC: process.env.ENABLED_ANTHROPIC !== '0',
       ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
 
       ENABLED_MINIMAX: !!process.env.MINIMAX_API_KEY,

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -5,14 +5,14 @@ import { Center, Flexbox } from '@lobehub/ui';
 import { Space, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideTrash2, Plug2, Store } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import PluginTag from '@/components/Plugins/PluginTag';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
@@ -27,10 +27,12 @@ import PluginAction from './PluginAction';
 const AgentPlugin = memo(() => {
   const { t } = useTranslation('setting');
 
-  const [showStore, setShowStore] = useState(false);
-
   const navigate = useNavigate();
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   const [userEnabledPlugins, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
     s.toggleAgentPlugin,
@@ -120,7 +122,7 @@ const AgentPlugin = memo(() => {
             icon={Store}
             onClick={(e) => {
               e.stopPropagation();
-              setShowStore(true);
+              handleOpenStore();
             }}
             size={'small'}
           />
@@ -139,7 +141,7 @@ const AgentPlugin = memo(() => {
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                setShowStore(true);
+                handleOpenStore();
                 navigate('/community/mcp');
               }}
               to={'/community/mcp'}
@@ -168,12 +170,7 @@ const AgentPlugin = memo(() => {
     title: t('settingPlugin.title'),
   };
 
-  return (
-    <>
-      <SkillStore open={showStore} setOpen={setShowStore} />
-      <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />
-    </>
-  );
+  return <Form items={[plugin]} itemsType={'group'} variant={'borderless'} {...FORM_STYLE} />;
 });
 
 export default AgentPlugin;

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -1,8 +1,8 @@
 import { Blocks } from 'lucide-react';
-import { Suspense, memo, useState } from 'react';
+import { Suspense, memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
@@ -15,7 +15,6 @@ import { useControls } from './useControls';
 
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
-  const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
   const { marketItems } = useControls({
     setUpdating,
@@ -29,6 +28,10 @@ const Tools = memo(() => {
 
   const enableFC = useModelSupportToolUse(model, provider);
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   if (!enableFC)
     return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
 
@@ -42,7 +45,7 @@ const Tools = memo(() => {
             <PopoverContent
               enableKlavis={enableKlavis}
               items={marketItems}
-              onOpenStore={() => setModalOpen(true)}
+              onOpenStore={handleOpenStore}
             />
           ),
           maxWidth: 320,
@@ -56,7 +59,6 @@ const Tools = memo(() => {
         showTooltip={false}
         title={t('tools.title')}
       />
-      <SkillStore open={modalOpen} setOpen={setModalOpen} />
     </Suspense>
   );
 });

package/src/features/ChatMiniMap/utils.ts

@@ -1,4 +1,4 @@
-import { markdownToTxt } from 'markdown-to-txt';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 const MIN_WIDTH = 12;
 const MAX_WIDTH = 24;

package/src/features/CommandMenu/SearchResults.tsx

@@ -11,12 +11,12 @@ import {
   Puzzle,
   Sparkles,
 } from 'lucide-react';
-import { markdownToTxt } from 'markdown-to-txt';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import type { SearchResult } from '@/database/repositories/search';
+import { markdownToTxt } from '@/utils/markdownToTxt';
 
 import { CommandItem } from './components';
 import { styles } from './styles';

package/src/features/Conversation/ChatList/components/AutoScroll/DebugInspector.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+
+import { messageStateSelectors, useConversationStore, virtuaListSelectors } from '../../../store';
+
+/**
+ * 判断是否在底部的阈值（单位：px）
+ * 当距离底部小于等于此值时，认为在底部
+ */
+export const AT_BOTTOM_THRESHOLD = 300;
+
+/**
+ * 是否开启调试面板
+ * 设为 true 可以显示滚动位置调试信息
+ */
+export const OPEN_DEV_INSPECTOR = false;
+
+const DebugInspector = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const virtuaScrollMethods = useConversationStore((s) => s.virtuaScrollMethods);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+  const scrollOffset = virtuaScrollMethods?.getScrollOffset?.() ?? 0;
+  const scrollSize = virtuaScrollMethods?.getScrollSize?.() ?? 0;
+  const viewportSize = virtuaScrollMethods?.getViewportSize?.() ?? 0;
+  const distanceToBottom = scrollSize - scrollOffset - viewportSize;
+  // 可视化计算
+  const visualHeight = 120;
+  const scale = scrollSize > 0 ? visualHeight / scrollSize : 0;
+  const viewportVisualHeight = Math.max(viewportSize * scale, 10);
+  const scrollVisualOffset = scrollOffset * scale;
+  const thresholdVisualHeight = Math.min(AT_BOTTOM_THRESHOLD * scale, visualHeight * 0.3);
+
+  const panel = (
+    <div
+      style={{
+        background: 'rgba(0,0,0,0.9)',
+        borderRadius: 8,
+        bottom: 80,
+        display: 'flex',
+        fontFamily: 'monospace',
+        fontSize: 11,
+        gap: 16,
+        left: 12,
+        padding: '10px 14px',
+        position: 'fixed',
+        zIndex: 9999,
+      }}
+    >
+      {/* 滚动条可视化 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>Scroll Position</div>
+        <div
+          style={{
+            background: '#374151',
+            borderRadius: 3,
+            height: visualHeight,
+            position: 'relative',
+            width: 24,
+          }}
+        >
+          {/* threshold 区域 (底部 200px) */}
+          <div
+            style={{
+              background: atBottom ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)',
+              borderRadius: '0 0 3px 3px',
+              bottom: 0,
+              height: thresholdVisualHeight,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+          {/* 当前视口位置 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#3b82f6',
+              borderRadius: 2,
+              height: viewportVisualHeight,
+              left: 2,
+              position: 'absolute',
+              right: 2,
+              top: scrollVisualOffset,
+              transition: 'top 0.1s',
+            }}
+          />
+          {/* threshold 线 */}
+          <div
+            style={{
+              background: '#f59e0b',
+              bottom: thresholdVisualHeight,
+              height: 1,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+        </div>
+        <div style={{ color: '#f59e0b', fontSize: 9, textAlign: 'center' }}>
+          {AT_BOTTOM_THRESHOLD}px
+        </div>
+      </div>
+
+      {/* 数值信息 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          scrollSize: <span style={{ color: 'white' }}>{Math.round(scrollSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          viewport: <span style={{ color: 'white' }}>{Math.round(viewportSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          offset: <span style={{ color: 'white' }}>{Math.round(scrollOffset)}px</span>
+        </div>
+        <div
+          style={{
+            color: atBottom ? '#22c55e' : '#ef4444',
+            fontSize: 10,
+            fontWeight: 'bold',
+          }}
+        >
+          toBottom: {Math.round(distanceToBottom)}px
+          {distanceToBottom <= AT_BOTTOM_THRESHOLD ? ' ≤' : ' >'} {AT_BOTTOM_THRESHOLD}
+        </div>
+
+        <div style={{ borderTop: '1px solid #374151', marginTop: 4, paddingTop: 4 }}>
+          <div style={{ color: atBottom ? '#22c55e' : '#ef4444', fontSize: 10 }}>
+            atBottom: {atBottom ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isGenerating ? '#3b82f6' : '#6b7280', fontSize: 10 }}>
+            generating: {isGenerating ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isScrolling ? '#f59e0b' : '#6b7280', fontSize: 10 }}>
+            scrolling: {isScrolling ? 'YES' : 'NO'}
+          </div>
+        </div>
+
+        <div
+          style={{
+            background: shouldAutoScroll ? '#22c55e' : '#ef4444',
+            borderRadius: 3,
+            color: 'white',
+            fontSize: 10,
+            marginTop: 4,
+            padding: '2px 6px',
+            textAlign: 'center',
+          }}
+        >
+          autoScroll: {shouldAutoScroll ? 'YES' : 'NO'}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(panel, document.body);
+});
+
+DebugInspector.displayName = 'DebugInspector';
+
+export default DebugInspector;