@tradejs/app 1.0.5 → 1.0.8

package/src/app/components/Shared/Sidebar/index.tsx

@@ -4,6 +4,7 @@ import { Box, Flex, IconButton, VStack } from '@chakra-ui/react';
 import { useRouter, usePathname } from 'next/navigation';
 import { signOut } from 'next-auth/react';
 import { FiActivity, FiBarChart2, FiLogOut, FiPlay } from 'react-icons/fi';
+import { AccountSettingsDrawer } from './AccountSettingsDrawer';
 
 export const Sidebar = () => {
   const router = useRouter();
@@ -57,15 +58,18 @@ export const Sidebar = () => {
           ))}
         </VStack>
 
-        <IconButton
-          aria-label="Sign out"
-          size="md"
-          colorPalette="teal"
-          variant="outline"
-          onClick={() => signOut({ callbackUrl: '/routes/signin' })}
-        >
-          <FiLogOut />
-        </IconButton>
+        <VStack gap={2}>
+          <AccountSettingsDrawer />
+          <IconButton
+            aria-label="Sign out"
+            size="md"
+            colorPalette="teal"
+            variant="outline"
+            onClick={() => signOut({ callbackUrl: '/routes/signin' })}
+          >
+            <FiLogOut />
+          </IconButton>
+        </VStack>
       </Flex>
     </Box>
   );

package/src/app/components/UI/ColorMode/index.tsx

@@ -8,18 +8,9 @@ import {
   type IconButtonProps,
   type SpanProps,
 } from '@chakra-ui/react';
-import { ThemeProvider, useTheme, type ThemeProviderProps } from 'next-themes';
 import * as React from 'react';
 import { LuMoon, LuSun } from 'react-icons/lu';
 
-export interface ColorModeProviderProps extends ThemeProviderProps {}
-
-export function ColorModeProvider(props: ColorModeProviderProps) {
-  return (
-    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  );
-}
-
 export type ColorMode = 'light' | 'dark';
 
 export interface UseColorModeReturn {
@@ -28,16 +19,72 @@ export interface UseColorModeReturn {
   toggleColorMode: () => void;
 }
 
-export function useColorMode(): UseColorModeReturn {
-  const { resolvedTheme, setTheme } = useTheme();
+export interface ColorModeProviderProps {
+  children: React.ReactNode;
+  forcedTheme?: ColorMode;
+}
+
+const ColorModeContext = React.createContext<UseColorModeReturn | null>(null);
+
+export function ColorModeProvider({
+  children,
+  forcedTheme,
+}: ColorModeProviderProps) {
+  const [colorMode, setColorModeState] = React.useState<ColorMode>(
+    forcedTheme ?? 'dark',
+  );
+
+  React.useEffect(() => {
+    if (!forcedTheme) {
+      return;
+    }
+
+    setColorModeState(forcedTheme);
+  }, [forcedTheme]);
+
+  React.useEffect(() => {
+    const root = document.documentElement;
+    const nextColorMode = forcedTheme ?? colorMode;
+    const previousColorMode = nextColorMode === 'dark' ? 'light' : 'dark';
+
+    root.classList.remove(previousColorMode);
+    root.classList.add(nextColorMode);
+    root.style.colorScheme = nextColorMode;
+  }, [colorMode, forcedTheme]);
+
+  const setColorMode = (nextColorMode: ColorMode) => {
+    if (forcedTheme) {
+      return;
+    }
+
+    setColorModeState(nextColorMode);
+  };
+
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    setColorMode(colorMode === 'dark' ? 'light' : 'dark');
   };
-  return {
-    colorMode: resolvedTheme as ColorMode,
-    setColorMode: setTheme,
+
+  const value: UseColorModeReturn = {
+    colorMode: forcedTheme ?? colorMode,
+    setColorMode,
     toggleColorMode,
   };
+
+  return (
+    <ColorModeContext.Provider value={value}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}
+
+export function useColorMode(): UseColorModeReturn {
+  return (
+    React.useContext(ColorModeContext) ?? {
+      colorMode: 'dark',
+      setColorMode: () => {},
+      toggleColorMode: () => {},
+    }
+  );
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {

package/src/app/components/UI/Select/index.tsx

@@ -19,6 +19,7 @@ interface SelectProps {
   multiple?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const Select = ({
@@ -30,6 +31,7 @@ export const Select = ({
   width = '320px',
   size = 'sm',
   onChange,
+  onOpenChange,
 }: SelectProps) => {
   const collection = useMemo(
     () =>
@@ -44,6 +46,7 @@ export const Select = ({
       collection={collection}
       {...(value ? { value } : { defaultValue })}
       onValueChange={(details) => onChange?.(details.value)}
+      onOpenChange={(details) => onOpenChange?.(details.open)}
       size={size}
       multiple={multiple}
       width={width}

package/src/app/components/UI/SelectWithSearch/index.tsx

@@ -23,6 +23,7 @@ interface SelectWithSearchProps {
   multiple?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   onChange?: (value: string[]) => void;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const SelectWithSearch = ({
@@ -35,6 +36,7 @@ export const SelectWithSearch = ({
   width = '320px',
   size = 'sm',
   onChange,
+  onOpenChange,
 }: SelectWithSearchProps) => {
   const { contains } = useFilter({ sensitivity: 'base' });
   const [inputValue, setInputValue] = useState(
@@ -61,6 +63,7 @@ export const SelectWithSearch = ({
         setInputValue(e.inputValue);
       }}
       onOpenChange={(details) => {
+        onOpenChange?.(details.open);
         if (details.open) {
           filter('');
           setInputValue('');

package/src/app/globals.css

@@ -3,3 +3,14 @@
 [data-nextjs-devtools] {
   left: 76px !important;
 } */
+
+body {
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}

package/src/app/layout.tsx

@@ -1,15 +1,51 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import { ClientOnly } from '@chakra-ui/react';
 import { AppShell } from '@shared/AppShell';
 import Provider from './provider';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
+const fallbackMetadataBase = 'http://localhost:3000';
+
+const metadataBase = (() => {
+  const rawAppUrl = String(process.env.APP_URL || '').trim();
+
+  if (!rawAppUrl) {
+    return new URL(fallbackMetadataBase);
+  }
+
+  try {
+    return new URL(rawAppUrl);
+  } catch {
+    return new URL(fallbackMetadataBase);
+  }
+})();
 
 export const metadata: Metadata = {
+  metadataBase,
   title: 'TradeJS App',
-  description: 'Trading Strategies Framework',
+  description:
+    'TradeJS app for dashboards, backtests, charts, derivatives, and runtime data.',
+  applicationName: 'TradeJS App',
+  openGraph: {
+    title: 'TradeJS App',
+    description:
+      'TradeJS app for dashboards, backtests, charts, derivatives, and runtime data.',
+    type: 'website',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'TradeJS App',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'TradeJS App',
+    description:
+      'Dashboards, backtests, charts, derivatives, and runtime data in one UI.',
+    images: ['/og-image.png'],
+  },
 };
 
 export default function RootLayout({
@@ -18,13 +54,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ClientOnly>
-          <Provider>
-            <AppShell>{children}</AppShell>
-          </Provider>
-        </ClientOnly>
+    <html
+      lang="en"
+      className="dark"
+      style={{ colorScheme: 'dark' }}
+      suppressHydrationWarning
+    >
+      <body suppressHydrationWarning>
+        <Provider>
+          <AppShell>{children}</AppShell>
+        </Provider>
       </body>
     </html>
   );

package/src/app/lib/currentUser.ts

@@ -0,0 +1,27 @@
+import { auth } from '@app/auth';
+
+type SessionLike = {
+  user?: {
+    id?: string;
+    name?: string | null;
+  };
+} | null;
+
+const readSessionUserName = (session: SessionLike) => {
+  const fromId = session?.user?.id;
+  if (typeof fromId === 'string' && fromId.trim()) {
+    return fromId.trim();
+  }
+
+  const fromName = session?.user?.name;
+  if (typeof fromName === 'string' && fromName.trim()) {
+    return fromName.trim();
+  }
+
+  return null;
+};
+
+export const getCurrentUserName = async (): Promise<string | null> => {
+  const session = (await auth()) as SessionLike;
+  return readSessionUserName(session);
+};

package/src/app/lib/klineWindow.ts

@@ -0,0 +1,17 @@
+import { intervalToMs } from '@tradejs/core/data';
+import { Interval } from '@tradejs/types';
+
+export const normalizeEndToIntervalBoundary = (
+  end: number,
+  interval: Interval,
+): number => {
+  const stepMs = intervalToMs(interval);
+  if (!Number.isFinite(end) || stepMs <= 0) {
+    return end;
+  }
+
+  return Math.floor(end / stepMs) * stepMs;
+};
+
+export const getCurrentIntervalBoundary = (interval: Interval) =>
+  normalizeEndToIntervalBoundary(Date.now(), interval);

package/src/app/routes/dashboard/[provider]/[symbol]/[interval]/page.tsx

@@ -11,8 +11,14 @@ import { Interval, OnChangeFilters, Provider } from '@tradejs/types';
 const Dashboard = () => {
   const searchParams = useSearchParams();
   const { filters, setFilters } = useFilters();
-  const { tickers } = useTickers(filters.provider || 'bybit');
-  const { tests } = useTestList({ symbol: filters.symbol });
+  const { tickers, ensureLoaded: ensureTickersLoaded } = useTickers(
+    filters.provider || 'bybit',
+    { enabled: false },
+  );
+  const { tests, ensureLoaded: ensureBacktestsLoaded } = useTestList({
+    symbol: filters.symbol,
+    enabled: false,
+  });
   const hasBacktestId = searchParams.has('backtestId');
   const hasBacktestStrategy = searchParams.has('backtestStrategy');
   const backtestId = searchParams.get('backtestId');
@@ -103,6 +109,8 @@ const Dashboard = () => {
             tickers={tickers}
             backtestFiles={tests}
             onChangeFilters={onChangeFilters}
+            ensureTickersLoaded={ensureTickersLoaded}
+            ensureBacktestsLoaded={ensureBacktestsLoaded}
           >
             <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
               <Filters.SelectProvider />

package/src/app/routes/signin/page.tsx

@@ -75,8 +75,17 @@ const SigninContent = () => {
               <Text fontSize="sm" opacity={0.7} letterSpacing="0.2em">
                 SIGN IN
               </Text>
-              <Text fontSize="2xl" fontWeight="600">
-                TradeJS
+              <Text
+                fontSize="2xl"
+                fontWeight="700"
+                letterSpacing="-0.03em"
+                lineHeight="1"
+                color="white"
+              >
+                <Box as="span">Trade</Box>
+                <Box as="span" color="#20c5bd">
+                  JS
+                </Box>
               </Text>
             </Stack>
 

package/src/app/store/ai.ts

@@ -0,0 +1,174 @@
+import { create } from 'zustand';
+import { getHistory, sendMessage } from '@actions/ai';
+import { AIChatHistory, AIChatMessage, Filters } from '@tradejs/types';
+
+type AiChatEntry = {
+  loading: boolean;
+  sending: boolean;
+  loaded: boolean;
+  error: string | null;
+  messages: AIChatHistory;
+};
+
+interface AiChatState {
+  chats: Record<string, AiChatEntry>;
+  getChat: (symbol: string) => AiChatEntry;
+  loadHistory: (symbol: string) => Promise<void>;
+  sendPrompt: (filters: Filters, input: string) => Promise<void>;
+  sendQuickCommand: (filters: Filters, command: string) => Promise<void>;
+}
+
+const EMPTY_CHAT: AiChatEntry = {
+  loading: false,
+  sending: false,
+  loaded: false,
+  error: null,
+  messages: [],
+};
+
+const normalizeSymbolKey = (symbol: string) => symbol.trim().toUpperCase();
+
+const getQuickMessage = (command: string): AIChatMessage | null => {
+  if (command === '/line') {
+    return {
+      from: 'user',
+      text: 'Какие наклонные линии можно построить на данном графике',
+      command,
+    };
+  }
+
+  return null;
+};
+
+const updateChat = (
+  chats: Record<string, AiChatEntry>,
+  symbol: string,
+  patch: Partial<AiChatEntry>,
+) => ({
+  ...chats,
+  [symbol]: {
+    ...(chats[symbol] ?? EMPTY_CHAT),
+    ...patch,
+  },
+});
+
+export const useAiChatStore = create<AiChatState>((set, get) => ({
+  chats: {},
+
+  getChat: (symbol) => get().chats[normalizeSymbolKey(symbol)] ?? EMPTY_CHAT,
+
+  loadHistory: async (symbol) => {
+    const symbolKey = normalizeSymbolKey(symbol);
+    if (!symbolKey) {
+      return;
+    }
+
+    const existing = get().chats[symbolKey];
+    if (existing?.loading) {
+      return;
+    }
+
+    set((state) => ({
+      chats: updateChat(state.chats, symbolKey, {
+        loading: true,
+        error: null,
+      }),
+    }));
+
+    try {
+      const history = await getHistory(symbol);
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          loading: false,
+          loaded: true,
+          messages: history,
+        }),
+      }));
+    } catch (error) {
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          loading: false,
+          error: error instanceof Error ? error.message : 'Failed to load chat',
+        }),
+      }));
+    }
+  },
+
+  sendPrompt: async (filters, input) => {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    const message: AIChatMessage = {
+      from: 'user',
+      text: trimmed,
+      command: 'prompt',
+    };
+
+    const symbolKey = normalizeSymbolKey(filters.symbol);
+
+    set((state) => ({
+      chats: updateChat(state.chats, symbolKey, {
+        sending: true,
+        error: null,
+        loaded: true,
+        messages: [...(state.chats[symbolKey]?.messages ?? []), message],
+      }),
+    }));
+
+    try {
+      const response = await sendMessage({ message, filters });
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          sending: false,
+          messages: [...(state.chats[symbolKey]?.messages ?? []), response],
+        }),
+      }));
+    } catch (error) {
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          sending: false,
+          error:
+            error instanceof Error ? error.message : 'Failed to send message',
+        }),
+      }));
+    }
+  },
+
+  sendQuickCommand: async (filters, command) => {
+    const message = getQuickMessage(command);
+    if (!message) {
+      return;
+    }
+
+    const symbolKey = normalizeSymbolKey(filters.symbol);
+
+    set((state) => ({
+      chats: updateChat(state.chats, symbolKey, {
+        sending: true,
+        error: null,
+        loaded: true,
+        messages: [...(state.chats[symbolKey]?.messages ?? []), message],
+      }),
+    }));
+
+    try {
+      const response = await sendMessage({ message, filters });
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          sending: false,
+          messages: [...(state.chats[symbolKey]?.messages ?? []), response],
+        }),
+      }));
+    } catch (error) {
+      set((state) => ({
+        chats: updateChat(state.chats, symbolKey, {
+          sending: false,
+          error:
+            error instanceof Error ? error.message : 'Failed to send message',
+        }),
+      }));
+    }
+  },
+}));