@lobehub/lobehub 2.0.0-next.327 → 2.0.0-next.329

package/src/features/Conversation/Messages/Task/ClientTaskDetail/ProcessingState.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { type AssistantContentBlock } from '@lobechat/types';
+import { Block, Flexbox, ScrollShadow, Text } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { type RefObject, memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import AnimatedNumber from '@/features/Conversation/Messages/components/Extras/Usage/UsageDetail/AnimatedNumber';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
+
+import ContentBlock from '../../AssistantGroup/components/ContentBlock';
+import { accumulateUsage, formatElapsedTime } from '../../Tasks/shared/utils';
+import Usage from '../../components/Extras/Usage';
+
+const styles = createStaticStyles(({ css }) => ({
+  contentScroll: css`
+    max-height: min(50vh, 300px);
+  `,
+}));
+
+interface ProcessingStateProps {
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  model?: string;
+  provider?: string;
+  startTime?: number;
+}
+
+const ProcessingState = memo<ProcessingStateProps>(
+  ({ blocks, assistantId, startTime, model, provider }) => {
+    const { t } = useTranslation('chat');
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+      deps: [blocks],
+      enabled: true,
+    });
+
+    const totalToolCalls = useMemo(
+      () => blocks.reduce((sum, block) => sum + (block.tools?.length || 0), 0),
+      [blocks],
+    );
+
+    // Accumulate usage from all blocks
+    const accumulatedUsage = useMemo(() => accumulateUsage(blocks), [blocks]);
+
+    // Calculate initial elapsed time
+    useEffect(() => {
+      if (startTime) {
+        setElapsedTime(Math.max(0, Date.now() - startTime));
+      }
+    }, [startTime]);
+
+    // Timer for updating elapsed time every second
+    useEffect(() => {
+      if (!startTime) return;
+
+      const timer = setInterval(() => {
+        setElapsedTime(Math.max(0, Date.now() - startTime));
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }, [startTime]);
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox align="center" gap={8} horizontal paddingInline={4}>
+          <Block
+            align="center"
+            flex="none"
+            gap={4}
+            height={24}
+            horizontal
+            justify="center"
+            style={{ fontSize: 12 }}
+            variant="outlined"
+            width={24}
+          >
+            <NeuralNetworkLoading size={16} />
+          </Block>
+          <Flexbox align="center" gap={4} horizontal>
+            <Text as="span" type="secondary" weight={500}>
+              <AnimatedNumber
+                duration={500}
+                formatter={(v) => Math.round(v).toString()}
+                value={totalToolCalls}
+              />
+            </Text>
+            <Text as="span" type="secondary">
+              {t('task.metrics.toolCallsShort')}
+            </Text>
+            {startTime && (
+              <Text as="span" type="secondary">
+                ({formatElapsedTime(elapsedTime)})
+              </Text>
+            )}
+          </Flexbox>
+        </Flexbox>
+        <ScrollShadow
+          className={styles.contentScroll}
+          offset={12}
+          onScroll={handleScroll}
+          ref={ref as RefObject<HTMLDivElement>}
+          size={8}
+        >
+          <Flexbox gap={8}>
+            {blocks.map((block) => (
+              <ContentBlock {...block} assistantId={assistantId} disableEditing key={block.id} />
+            ))}
+          </Flexbox>
+        </ScrollShadow>
+
+        {/* Usage display */}
+        {model && provider && <Usage model={model} provider={provider} usage={accumulatedUsage} />}
+      </Flexbox>
+    );
+  },
+);
+
+ProcessingState.displayName = 'ClientProcessingState';
+
+export default ProcessingState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/index.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { type TaskDetail, ThreadStatus } from '@lobechat/types';
+import { Flexbox } from '@lobehub/ui';
+import { memo, useMemo } from 'react';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { useChatStore } from '@/store/chat';
+import { displayMessageSelectors } from '@/store/chat/selectors';
+import { messageMapKey } from '@/store/chat/utils/messageMapKey';
+
+import CompletedState from './CompletedState';
+import InitializingState from './InitializingState';
+import InstructionAccordion from './InstructionAccordion';
+import ProcessingState from './ProcessingState';
+
+interface ClientTaskDetailProps {
+  content?: string;
+  messageId: string;
+  taskDetail?: TaskDetail;
+}
+
+const ClientTaskDetail = memo<ClientTaskDetailProps>(({ taskDetail }) => {
+  const threadId = taskDetail?.threadId;
+  const isExecuting = taskDetail?.status === ThreadStatus.Processing;
+
+  const [activeAgentId, activeTopicId, useFetchMessages] = useChatStore((s) => [
+    s.activeAgentId,
+    s.activeTopicId,
+    s.useFetchMessages,
+  ]);
+
+  const threadContext = useMemo(
+    () => ({
+      agentId: activeAgentId,
+      scope: 'thread' as const,
+      threadId,
+      topicId: activeTopicId,
+    }),
+    [activeAgentId, activeTopicId, threadId],
+  );
+
+  const threadMessageKey = useMemo(
+    () => (threadId ? messageMapKey(threadContext) : null),
+    [threadId],
+  );
+
+  // Fetch thread messages (skip when executing - messages come from real-time updates)
+  useFetchMessages(threadContext, isExecuting);
+
+  // Get thread messages from store using selector
+  const threadMessages = useChatStore((s) =>
+    threadMessageKey
+      ? displayMessageSelectors.getDisplayMessagesByKey(threadMessageKey)(s)
+      : undefined,
+  );
+
+  if (!threadMessages) return <BubblesLoading />;
+
+  // Find the assistantGroup message which contains the children blocks
+  const assistantGroupMessage = threadMessages.find((item) => item.role === 'assistantGroup');
+  const instruction = threadMessages.find((item) => item.role === 'user')?.content;
+  const childrenCount = assistantGroupMessage?.children?.length ?? 0;
+
+  // Get model/provider from assistantGroup message
+  const model = assistantGroupMessage?.model;
+  const provider = assistantGroupMessage?.provider;
+
+  // Initializing state: no status yet (task just created, waiting for client execution)
+  if (threadMessages.length === 0 || !assistantGroupMessage?.children || childrenCount === 0) {
+    return <InitializingState />;
+  }
+
+  return (
+    <Flexbox gap={4}>
+      {instruction && (
+        <InstructionAccordion childrenCount={childrenCount} instruction={instruction} />
+      )}
+
+      {isExecuting ? (
+        <ProcessingState
+          assistantId={assistantGroupMessage.id}
+          blocks={assistantGroupMessage.children}
+          model={model ?? undefined}
+          provider={provider ?? undefined}
+          startTime={assistantGroupMessage.createdAt}
+        />
+      ) : (
+        <CompletedState
+          assistantId={assistantGroupMessage.id}
+          blocks={assistantGroupMessage.children}
+          duration={taskDetail?.duration}
+          model={model ?? undefined}
+          provider={provider ?? undefined}
+          totalCost={taskDetail?.totalCost}
+          totalTokens={taskDetail?.totalTokens}
+          totalToolCalls={taskDetail?.totalToolCalls}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+ClientTaskDetail.displayName = 'ClientClientTaskDetail';
+
+export default ClientTaskDetail;

package/src/features/Conversation/Messages/Task/TaskDetailPanel/index.tsx

@@ -17,6 +17,7 @@ interface TaskDetailPanelProps {
 }
 
 const TaskDetailPanel = memo<TaskDetailPanelProps>(({ taskDetail, content, messageId }) => {
+  // Default: server-side task execution
   return <StatusContent content={content} messageId={messageId} taskDetail={taskDetail} />;
 });
 

package/src/features/Conversation/Messages/Task/index.tsx

@@ -19,6 +19,7 @@ import { useAgentMeta, useDoubleClickEdit } from '../../hooks';
 import { dataSelectors, messageStateSelectors, useConversationStore } from '../../store';
 import { normalizeThinkTags, processWithArtifact } from '../../utils/markdown';
 import { AssistantActionsBar } from './Actions';
+import ClientTaskDetail from './ClientTaskDetail';
 import TaskDetailPanel from './TaskDetailPanel';
 
 interface TaskMessageProps {
@@ -91,12 +92,16 @@ const TaskMessage = memo<TaskMessageProps>(({ id, index, disableEditing, isLates
       time={createdAt}
       titleAddon={<Tag>{t('task.subtask')}</Tag>}
     >
-      <TaskDetailPanel
-        content={content}
-        instruction={metadata?.instruction}
-        messageId={id}
-        taskDetail={taskDetail}
-      />
+      {taskDetail?.clientMode ? (
+        <ClientTaskDetail messageId={id} taskDetail={taskDetail} />
+      ) : (
+        <TaskDetailPanel
+          content={content}
+          instruction={metadata?.instruction}
+          messageId={id}
+          taskDetail={taskDetail}
+        />
+      )}
     </ChatItem>
   );
 }, isEqual);

package/src/features/Conversation/Messages/Tasks/TaskItem/TaskTitle.tsx

@@ -2,9 +2,10 @@
 
 import { Block, Flexbox, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import { ListChecksIcon, Loader2, XIcon } from 'lucide-react';
+import { ListChecksIcon, XIcon } from 'lucide-react';
 import { memo } from 'react';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import { ThreadStatus } from '@/types/index';
 
 import { isProcessingStatus } from '../shared';
@@ -27,7 +28,7 @@ const TaskStatusIndicator = memo<{ status?: ThreadStatus }>(({ status }) => {
   } else if (isError) {
     icon = <Icon color={cssVar.colorError} icon={XIcon} />;
   } else if (isProcessing || isInitializing) {
-    icon = <Icon color={cssVar.colorTextDescription} icon={Loader2} spin />;
+    icon = <NeuralNetworkLoading size={16} />;
   } else {
     return null;
   }

package/src/features/Conversation/Messages/Tasks/shared/InitializingState.tsx

@@ -57,10 +57,6 @@ const InitializingState = memo(() => {
           {t('task.status.initializing')}
         </Text>
       </Flexbox>
-
-      <div className={styles.progress}>
-        <div className={styles.progressShimmer} />
-      </div>
     </Flexbox>
   );
 });

package/src/features/Conversation/Messages/Tasks/shared/utils.ts

@@ -1,4 +1,9 @@
-import { type TaskCurrentActivity, ThreadStatus } from '@/types/index';
+import {
+  type AssistantContentBlock,
+  type ModelUsage,
+  type TaskCurrentActivity,
+  ThreadStatus,
+} from '@lobechat/types';
 
 /**
  * Format duration in milliseconds to human-readable string
@@ -68,3 +73,19 @@ export const isProcessingStatus = (status?: ThreadStatus): boolean => {
     status === ThreadStatus.Todo
   );
 };
+
+/**
+ * Accumulate usage from all blocks
+ */
+export const accumulateUsage = (blocks: AssistantContentBlock[]): ModelUsage => {
+  return blocks.reduce((acc, block) => {
+    const usage = block.usage;
+    if (!usage) return acc;
+    return {
+      cost: (acc.cost || 0) + (usage.cost || 0),
+      totalInputTokens: (acc.totalInputTokens || 0) + (usage.totalInputTokens || 0),
+      totalOutputTokens: (acc.totalOutputTokens || 0) + (usage.totalOutputTokens || 0),
+      totalTokens: (acc.totalTokens || 0) + (usage.totalTokens || 0),
+    };
+  }, {} as ModelUsage);
+};

package/src/features/Conversation/Messages/components/ContentLoading.tsx

@@ -18,7 +18,7 @@ interface ContentLoadingProps {
 const ContentLoading = memo<ContentLoadingProps>(({ id }) => {
   const { t } = useTranslation('chat');
   const runningOp = useChatStore(operationSelectors.getDeepestRunningOperationByMessage(id));
-  console.log('runningOp', runningOp);
+
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const [startTime, setStartTime] = useState(runningOp?.metadata?.startTime);
 

package/src/features/Conversation/components/Thinking/index.tsx

@@ -6,11 +6,11 @@ import {
   type RefObject,
   memo,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 
 import MarkdownMessage from '@/features/Conversation/Markdown';
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 import { type ChatCitationItem } from '@/types/index';
 
 import Title from './Title';
@@ -40,39 +40,17 @@ interface ThinkingProps {
 const Thinking = memo<ThinkingProps>((props) => {
   const { content, duration, thinking, citations, thinkingAnimated } = props;
   const [showDetail, setShowDetail] = useState(false);
-  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+    deps: [content, showDetail],
+    enabled: thinking && showDetail,
+    threshold: 120,
+  });
 
   useEffect(() => {
     setShowDetail(!!thinking);
   }, [thinking]);
 
-  // 当内容变更且正在思考时，如果用户接近底部则自动滚动到底部
-  useEffect(() => {
-    if (!thinking || !showDetail) return;
-    const container = contentRef.current;
-    if (!container) return;
-
-    // 仅当用户接近底部时才自动滚动，避免打断用户查看上方内容
-    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const isNearBottom = distanceToBottom < 120;
-
-    if (isNearBottom) {
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
-      });
-    }
-  }, [content, thinking, showDetail]);
-
-  // 展开时滚动到底部，便于查看最新内容
-  useEffect(() => {
-    if (!showDetail) return;
-    const container = contentRef.current;
-    if (!container) return;
-    requestAnimationFrame(() => {
-      container.scrollTop = container.scrollHeight;
-    });
-  }, [showDetail]);
-
   return (
     <Accordion
       expandedKeys={showDetail ? ['thinking'] : []}
@@ -88,7 +66,8 @@ const Thinking = memo<ThinkingProps>((props) => {
         <ScrollShadow
           className={styles.contentScroll}
           offset={12}
-          ref={contentRef as unknown as RefObject<HTMLDivElement>}
+          onScroll={handleScroll}
+          ref={ref as RefObject<HTMLDivElement>}
           size={12}
         >
           {typeof content === 'string' ? (

package/src/features/Conversation/store/slices/data/action.ts

@@ -106,12 +106,11 @@ export const dataSlice: StateCreator<
     // Also skip fetch when topicId is null (new conversation state) - there's no server data,
     // only local optimistic updates. Fetching would return empty array and overwrite local data.
     const shouldFetch = !skipFetch && !!context.agentId && !!context.topicId;
+
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,
 
-      async () => {
-        return messageService.getMessages(context);
-      },
+      () => messageService.getMessages(context),
       {
         onData: (data) => {
           if (!data) return;

package/src/features/NavPanel/components/BackButton.tsx

@@ -1,26 +1,23 @@
 import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
 import { ChevronLeftIcon } from 'lucide-react';
 import { memo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
 export const BACK_BUTTON_ID = 'lobe-back-button';
 
 const BackButton = memo<ActionIconProps & { to?: string }>(({ to = '/', onClick, ...rest }) => {
-  const navigate = useNavigate();
-
   return (
-    <ActionIcon
-      icon={ChevronLeftIcon}
-      id={BACK_BUTTON_ID}
-      onClick={(e) => {
-        navigate(to);
-        onClick?.(e);
-      }}
-      size={DESKTOP_HEADER_ICON_SIZE}
-      {...rest}
-    />
+    // @ts-expect-error
+    <Link onClick={onClick} to={to}>
+      <ActionIcon
+        icon={ChevronLeftIcon}
+        id={BACK_BUTTON_ID}
+        size={DESKTOP_HEADER_ICON_SIZE}
+        {...rest}
+      />
+    </Link>
   );
 });
 

package/src/features/NavPanel/components/NavPanelDraggable.tsx

@@ -13,6 +13,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import { isMacOS } from '@/utils/platform';
 
 import { useNavPanelSizeChangeHandler } from '../hooks/useNavPanel';
+import { BACK_BUTTON_ID } from './BackButton';
 
 const motionVariants = {
   animate: { opacity: 1, x: 0 },
@@ -76,6 +77,9 @@ const draggableStyles = createStaticStyles(({ css, cssVar }) => ({
         opacity,
         width 0.2s ${cssVar.motionEaseOut};
     }
+    #${BACK_BUTTON_ID} {
+      width: 24px !important;
+    }
 
     &:hover {
       #${TOGGLE_BUTTON_ID} {

package/src/hooks/useAutoScroll.ts

@@ -0,0 +1,117 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseAutoScrollOptions {
+  /**
+   * Dependencies that trigger auto-scroll when changed
+   */
+  deps?: unknown[];
+  /**
+   * Whether auto-scroll is enabled (e.g., only when streaming/executing)
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Distance threshold from bottom to consider "near bottom" (in pixels)
+   * @default 20
+   */
+  threshold?: number;
+}
+
+interface UseAutoScrollReturn<T extends HTMLElement> {
+  /**
+   * Callback to handle scroll events, attach to onScroll
+   */
+  handleScroll: () => void;
+  /**
+   * Ref to attach to the scrollable container
+   */
+  ref: RefObject<T | null>;
+  /**
+   * Reset the scroll lock state (e.g., when new content starts)
+   */
+  resetScrollLock: () => void;
+  /**
+   * Whether user has scrolled away from bottom (scroll lock active)
+   */
+  userHasScrolled: boolean;
+}
+
+/**
+ * Hook for auto-scrolling content with user scroll detection
+ *
+ * Features:
+ * - Auto-scrolls to bottom when dependencies change
+ * - Detects when user scrolls away from bottom and stops auto-scrolling
+ * - Provides reset function for when new content starts
+ * - Ignores scroll events triggered by auto-scroll itself
+ *
+ * @example
+ * ```tsx
+ * const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+ *   deps: [content],
+ *   enabled: isStreaming,
+ * });
+ *
+ * return (
+ *   <ScrollShadow ref={ref} onScroll={handleScroll}>
+ *     {content}
+ *   </ScrollShadow>
+ * );
+ * ```
+ */
+export function useAutoScroll<T extends HTMLElement = HTMLDivElement>(
+  options: UseAutoScrollOptions = {},
+): UseAutoScrollReturn<T> {
+  const { deps = [], enabled = true, threshold = 20 } = options;
+
+  const ref = useRef<T | null>(null);
+  const [userHasScrolled, setUserHasScrolled] = useState(false);
+  const isAutoScrollingRef = useRef(false);
+
+  // Handle user scroll detection
+  const handleScroll = useCallback(() => {
+    // Ignore scroll events triggered by auto-scroll
+    if (isAutoScrollingRef.current) return;
+
+    const container = ref.current;
+    if (!container) return;
+
+    // Check if user scrolled away from bottom
+    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    const isAtBottom = distanceToBottom < threshold;
+
+    // If user scrolled up, stop auto-scrolling
+    if (!isAtBottom) {
+      setUserHasScrolled(true);
+    }
+  }, [threshold]);
+
+  // Reset scroll lock state
+  const resetScrollLock = useCallback(() => {
+    setUserHasScrolled(false);
+  }, []);
+
+  // Auto scroll to bottom when deps change (unless user has scrolled or disabled)
+  useEffect(() => {
+    if (!enabled || userHasScrolled) return;
+
+    const container = ref.current;
+    if (!container) return;
+
+    isAutoScrollingRef.current = true;
+    requestAnimationFrame(() => {
+      container.scrollTop = container.scrollHeight;
+      // Reset the flag after scroll completes
+      requestAnimationFrame(() => {
+        isAutoScrollingRef.current = false;
+      });
+    });
+  }, [enabled, userHasScrolled, ...deps]);
+
+  return {
+    handleScroll,
+    ref,
+    resetScrollLock,
+    userHasScrolled,
+  };
+}

package/src/libs/better-auth/auth-client.ts

@@ -7,9 +7,6 @@ import {
 import { createAuthClient } from 'better-auth/react';
 
 import type { auth } from '@/auth';
-import { getAuthConfig } from '@/envs/auth';
-
-const { NEXT_PUBLIC_AUTH_URL } = getAuthConfig();
 
 export const {
   linkSocial,
@@ -24,12 +21,6 @@ export const {
   unlinkAccount,
   useSession,
 } = createAuthClient({
-  /** The base URL of the server (optional if you're using the same domain) */
-  ...(NEXT_PUBLIC_AUTH_URL
-    ? {
-        baseURL: NEXT_PUBLIC_AUTH_URL,
-      }
-    : {}),
   plugins: [
     adminClient(),
     inferAdditionalFields<typeof auth>(),

package/src/libs/better-auth/define-config.ts

@@ -14,6 +14,7 @@ import { admin, emailOTP, genericOAuth, magicLink } from 'better-auth/plugins';
 import { type BetterAuthPlugin } from 'better-auth/types';
 
 import { businessEmailValidator } from '@/business/server/better-auth';
+import { appEnv } from '@/envs/app';
 import { authEnv } from '@/envs/auth';
 import {
   getMagicLinkEmailTemplate,
@@ -32,13 +33,13 @@ import { UserService } from '@/server/services/user';
 const VERIFICATION_LINK_EXPIRES_IN = 3600;
 
 /**
- * Safely extract hostname from AUTH_URL for passkey rpID.
- * Returns undefined if AUTH_URL is not set (e.g., in e2e tests).
+ * Safely extract hostname from APP_URL for passkey rpID.
+ * Returns undefined if APP_URL is not set (e.g., in e2e tests).
  */
 const getPasskeyRpID = (): string | undefined => {
-  if (!authEnv.NEXT_PUBLIC_AUTH_URL) return undefined;
+  if (!appEnv.APP_URL) return undefined;
   try {
-    return new URL(authEnv.NEXT_PUBLIC_AUTH_URL).hostname;
+    return new URL(appEnv.APP_URL).hostname;
   } catch {
     return undefined;
   }
@@ -46,14 +47,15 @@ const getPasskeyRpID = (): string | undefined => {
 
 /**
  * Get passkey origins array.
- * Returns undefined if AUTH_URL is not set (e.g., in e2e tests).
+ * Returns undefined if APP_URL is not set (e.g., in e2e tests).
  */
 const getPasskeyOrigins = (): string[] | undefined => {
-  if (!authEnv.NEXT_PUBLIC_AUTH_URL) return undefined;
-  return [
-    // Web origin
-    authEnv.NEXT_PUBLIC_AUTH_URL,
-  ];
+  if (!appEnv.APP_URL) return undefined;
+  try {
+    return [new URL(appEnv.APP_URL).origin];
+  } catch {
+    return undefined;
+  }
 };
 const MAGIC_LINK_EXPIRES_IN = 900;
 // OTP expiration time (in seconds) - 5 minutes for mobile OTP verification
@@ -81,8 +83,7 @@ export function defineConfig(customOptions: CustomBetterAuthOptions) {
       },
     },
 
-    // Use renamed env vars (fallback to next-auth vars is handled in src/envs/auth.ts)
-    baseURL: authEnv.NEXT_PUBLIC_AUTH_URL,
+    baseURL: appEnv.APP_URL,
     secret: authEnv.AUTH_SECRET,
     trustedOrigins: getTrustedOrigins(enabledSSOProviders),