,
+ dependencies: React.DependencyList = [],
+) {
+ useEffect(() => {
+ const handleResize = () => {
+ chartInstance.current?.resize();
+ };
+
+ // add resize event listener
+ window.addEventListener("resize", handleResize);
+
+ // cleanup function: remove event listener
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [chartInstance, ...dependencies]);
+}
diff --git a/frontend/src/lib/time.ts b/frontend/src/lib/time.ts
new file mode 100644
index 000000000..b433c8dda
--- /dev/null
+++ b/frontend/src/lib/time.ts
@@ -0,0 +1,233 @@
+import dayjs, { type Dayjs } from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+// Extend dayjs with plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+
+/**
+ * Common time format constants
+ */
+export const TIME_FORMATS = {
+ DATE: "YYYY-MM-DD",
+ TIME: "HH:mm:ss",
+ DATETIME: "YYYY-MM-DD HH:mm:ss",
+ DATETIME_SHORT: "YYYY-MM-DD HH:mm",
+ MARKET: "MM/DD HH:mm",
+} as const;
+
+/**
+ * Time input types
+ */
+export type TimeInput = string | number | Date | Dayjs;
+
+/**
+ * Time format type
+ */
+export type TimeFormat = (typeof TIME_FORMATS)[keyof typeof TIME_FORMATS];
+
+/**
+ * Timezone string type
+ */
+export type TimezoneString = string;
+
+/**
+ * Time unit type
+ */
+export type TimeUnit =
+ | "year"
+ | "month"
+ | "day"
+ | "hour"
+ | "minute"
+ | "second"
+ | "millisecond";
+
+/**
+ * Get current UTC time
+ * @returns Current UTC time as Dayjs instance
+ */
+export function nowUTC(): Dayjs {
+ return dayjs.utc();
+}
+
+/**
+ * Get current local time
+ * @returns Current local time as Dayjs instance
+ */
+export function now(): Dayjs {
+ return dayjs();
+}
+
+/**
+ * Create UTC time from input
+ * @param input - Time input (optional, defaults to current time)
+ * @returns UTC time as Dayjs instance
+ */
+export function createUTC(input?: TimeInput): Dayjs {
+ return input ? dayjs.utc(input) : dayjs.utc();
+}
+
+/**
+ * Convert time to UTC
+ * @param time - Time input to convert
+ * @returns UTC time as Dayjs instance
+ */
+export function toUTC(time: TimeInput): Dayjs {
+ return dayjs(time).utc();
+}
+
+/**
+ * Convert UTC time to local time
+ * @param time - UTC time input
+ * @returns Local time as Dayjs instance
+ */
+export function fromUTC(time: TimeInput): Dayjs {
+ return dayjs.utc(time).local();
+}
+
+/**
+ * Convert time to specific timezone
+ * @param time - Time input to convert
+ * @param timezone - Target timezone string
+ * @returns Time in specified timezone as Dayjs instance
+ */
+export function toTimezone(time: TimeInput, timezone: TimezoneString): Dayjs {
+ return dayjs(time).tz(timezone);
+}
+
+/**
+ * Format time with specified format
+ * @param time - Time input to format
+ * @param fmt - Format string (defaults to DATETIME)
+ * @returns Formatted time string
+ */
+export function format(
+ time: TimeInput,
+ fmt: string = TIME_FORMATS.DATETIME,
+): string {
+ return dayjs(time).format(fmt);
+}
+
+/**
+ * Format UTC time with specified format
+ * @param time - Time input to format as UTC
+ * @param fmt - Format string (defaults to DATETIME)
+ * @returns Formatted UTC time string
+ */
+export function formatUTC(
+ time: TimeInput,
+ fmt: string = TIME_FORMATS.DATETIME,
+): string {
+ return dayjs.utc(time).format(fmt);
+}
+
+/**
+ * Get relative time from now (e.g., "2 hours ago")
+ * @param time - Time input to get relative time for
+ * @returns Relative time string
+ */
+export function fromNow(time: TimeInput): string {
+ return dayjs(time).fromNow();
+}
+
+/**
+ * Get time difference in milliseconds
+ * @param time1 - End time
+ * @param time2 - Start time
+ * @returns Time difference in milliseconds
+ */
+export function diff(time1: TimeInput, time2: TimeInput): number {
+ return dayjs(time1).diff(dayjs(time2));
+}
+
+/**
+ * Get time difference in specified unit
+ * @param time1 - End time
+ * @param time2 - Start time
+ * @param unit - Time unit for difference calculation
+ * @returns Time difference in specified unit
+ */
+export function diffIn(
+ time1: TimeInput,
+ time2: TimeInput,
+ unit: TimeUnit,
+): number {
+ return dayjs(time1).diff(dayjs(time2), unit);
+}
+
+/**
+ * Check if time is valid
+ * @param time - Time input to validate
+ * @returns True if time is valid, false otherwise
+ */
+export function isValid(time: TimeInput): boolean {
+ return dayjs(time).isValid();
+}
+
+/**
+ * Check if two times are the same day
+ * @param time1 - First time
+ * @param time2 - Second time
+ * @param useUTC - Whether to compare in UTC (defaults to false)
+ * @returns True if same day, false otherwise
+ */
+export function isSameDay(
+ time1: TimeInput,
+ time2: TimeInput,
+ useUTC: boolean = false,
+): boolean {
+ if (useUTC) {
+ return dayjs.utc(time1).isSame(dayjs.utc(time2), "day");
+ }
+ return dayjs(time1).isSame(dayjs(time2), "day");
+}
+
+/**
+ * Add time to a given time
+ * @param time - Base time
+ * @param amount - Amount to add
+ * @param unit - Time unit
+ * @returns New time with added amount
+ */
+export function add(time: TimeInput, amount: number, unit: TimeUnit): Dayjs {
+ return dayjs(time).add(amount, unit);
+}
+
+/**
+ * Subtract time from a given time
+ * @param time - Base time
+ * @param amount - Amount to subtract
+ * @param unit - Time unit
+ * @returns New time with subtracted amount
+ */
+export function subtract(
+ time: TimeInput,
+ amount: number,
+ unit: TimeUnit,
+): Dayjs {
+ return dayjs(time).subtract(amount, unit);
+}
+
+/**
+ * Get start of day
+ * @param time - Time input
+ * @param useUTC - Whether to use UTC (defaults to false)
+ * @returns Start of day as Dayjs instance
+ */
+export function startOfDay(time: TimeInput, useUTC: boolean = false): Dayjs {
+ return useUTC ? dayjs.utc(time).startOf("day") : dayjs(time).startOf("day");
+}
+
+/**
+ * Get end of day
+ * @param time - Time input
+ * @param useUTC - Whether to use UTC (defaults to false)
+ * @returns End of day as Dayjs instance
+ */
+export function endOfDay(time: TimeInput, useUTC: boolean = false): Dayjs {
+ return useUTC ? dayjs.utc(time).endOf("day") : dayjs(time).endOf("day");
+}
diff --git a/frontend/src/mock/agent-data.tsx b/frontend/src/mock/agent-data.tsx
index 16c9f0b67..1956ef5e5 100644
--- a/frontend/src/mock/agent-data.tsx
+++ b/frontend/src/mock/agent-data.tsx
@@ -10,8 +10,8 @@ import {
TrendingUp,
User,
} from "lucide-react";
-import type { AgentRecommendation } from "@/app/_home/components/agent-recommend-list";
-import type { AgentSuggestion } from "@/app/_home/components/agent-suggestions-list";
+import type { AgentRecommendation } from "@/app/home/components/agent-recommend-list";
+import type { AgentSuggestion } from "@/app/home/components/agent-suggestions-list";
const UserAvatar = ({ bgColor, text }: { bgColor: string; text: string }) => (
diff --git a/frontend/src/mock/stock-data.ts b/frontend/src/mock/stock-data.ts
index fc4bc9ed4..1336bb34d 100644
--- a/frontend/src/mock/stock-data.ts
+++ b/frontend/src/mock/stock-data.ts
@@ -1,5 +1,7 @@
-import type { SparklineStock } from "@/app/_home/components/sparkline-stock-list";
+import type { SparklineStock } from "@/app/home/components/sparkline-stock-list";
import type { StockGroup } from "@/components/valuecell/menus/stock-menus";
+import { nowUTC, subtract } from "@/lib/time";
+import type { SparklineData } from "@/types/chart";
export const stockData: StockGroup[] = [
{
@@ -172,16 +174,32 @@ export const stockData: StockGroup[] = [
},
];
-// generate random sparkline data
-function generateSparklineData(): number[] {
- const data = [];
- let value = 100 + Math.random() * 50; // start value between 100-150
+// Generate random sparkline data in [utctime, value] format
+function generateSparklineData(): SparklineData {
+ const data: SparklineData = [];
+ const startValue = 100 + Math.random() * 50; // start value between 100-150
+ let value = startValue;
+ const currentTime = nowUTC();
+
+ // Add some overall trend bias (slightly bearish to bullish)
+ const trendBias = (Math.random() - 0.5) * 0.002; // -0.1% to +0.1% per step
for (let i = 0; i < 30; i++) {
- // add random fluctuation, between -5% and +5%
- const change = (Math.random() - 0.5) * 0.1 * value;
- value = Math.max(0, value + change);
- data.push(value);
+ // Generate time points going backwards from current time (each point is 30 minutes apart)
+ const timePoint = subtract(currentTime, (29 - i) * 30, "minute").valueOf();
+
+ // Random walk with trend bias
+ const randomChange = (Math.random() - 0.5) * 0.06; // -3% to +3% random
+ const changePercent = randomChange + trendBias;
+
+ // Apply change
+ value = value * (1 + changePercent);
+
+ // Prevent negative values and extreme deviations
+ value = Math.max(value, startValue * 0.3); // Don't go below 30% of start
+ value = Math.min(value, startValue * 3); // Don't go above 300% of start
+
+ data.push([timePoint, Number(value.toFixed(2))]);
}
return data;
diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
index efab42d28..5c121d1b9 100644
--- a/frontend/src/root.tsx
+++ b/frontend/src/root.tsx
@@ -1,6 +1,7 @@
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
import AppSidebar from "@/components/valuecell/app-sidebar";
+import "overlayscrollbars/overlayscrollbars.css";
import "./global.css";
export function Layout({ children }: { children: React.ReactNode }) {
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index dad9f7e84..a404f1c81 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -1,9 +1,13 @@
-import { type RouteConfig, route } from "@react-router/dev/routes";
-import { flatRoutes } from "@react-router/fs-routes";
+import {
+ index,
+ layout,
+ type RouteConfig,
+ route,
+} from "@react-router/dev/routes";
export default [
- route("/", "app/_home/route.tsx"),
- ...(await flatRoutes({
- rootDirectory: "app",
- })),
+ layout("app/home/_layout.tsx", [
+ index("app/home/home.tsx"),
+ route("/stock/:stockId", "app/home/stock.tsx"),
+ ]),
] satisfies RouteConfig;
diff --git a/frontend/src/types/chart.ts b/frontend/src/types/chart.ts
new file mode 100644
index 000000000..ddbfe7ea5
--- /dev/null
+++ b/frontend/src/types/chart.ts
@@ -0,0 +1,5 @@
+/**
+ * Sparkline data type: [timestamp, value] pairs
+ * timestamp can be number (unix timestamp), string (ISO), or Date object
+ */
+export type SparklineData = Array<[number | string | Date, number]>;
diff --git a/python/third_party/ai-hedge-fund/app/frontend/src/index.css b/python/third_party/ai-hedge-fund/app/frontend/src/index.css
index e9f2f3a0b..8c67ef1f6 100644
--- a/python/third_party/ai-hedge-fund/app/frontend/src/index.css
+++ b/python/third_party/ai-hedge-fund/app/frontend/src/index.css
@@ -31,15 +31,17 @@
--sidebar-background: 0 0% 98%;
--panel-bg: 0 0% 100%;
--node-bg: 0 0% 100%;
-
+
/* Hover colors for light theme */
- --hover-background: rgb(156 163 175 / 0.3); /* gray-400/30 */
+ --hover-background: rgb(156 163 175 / 0.3);
+ /* gray-400/30 */
--hover-foreground: 0 0% 15%;
-
+
/* Active/selected colors for light theme */
- --active-background: rgb(229 231 235 / 0.8); /* gray-200/80 */
+ --active-background: rgb(229 231 235 / 0.8);
+ /* gray-200/80 */
--active-foreground: 0 0% 10%;
-
+
/* Ramp Grey Colors */
--ramp-grey-100: #f5f5f5;
--ramp-grey-200: #e6e6e6;
@@ -72,13 +74,6 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
- --sidebar-foreground: 240 5.3% 26.1%;
- --sidebar-primary: 240 5.9% 10%;
- --sidebar-primary-foreground: 0 0% 98%;
- --sidebar-accent: 240 4.8% 95.9%;
- --sidebar-accent-foreground: 240 5.9% 10%;
- --sidebar-border: 220 13% 91%;
- --sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
@@ -108,13 +103,15 @@
--panel-bg: 240 3% 11%;
--node-bg: 240 3% 11%;
--sidebar-background: 240 5.9% 16%;
-
+
/* Hover colors for dark theme */
- --hover-background: rgb(55 65 81 / 0.5); /* gray-700/50 */
+ --hover-background: rgb(55 65 81 / 0.5);
+ /* gray-700/50 */
--hover-foreground: 0 0% 95%;
-
+
/* Active/selected colors for dark theme */
- --active-background: rgb(55 65 81 / 0.8); /* gray-700/80 */
+ --active-background: rgb(55 65 81 / 0.8);
+ /* gray-700/80 */
--active-foreground: 0 0% 98%;
/* Tab Colors - Dark Theme */
@@ -128,19 +125,6 @@
--tab-icon-active: #007acc;
--tab-icon-inactive: #858585;
--tab-close-hover: #464647;
-
- --chart-1: 220 70% 50%;
- --chart-2: 160 60% 45%;
- --chart-3: 30 80% 55%;
- --chart-4: 280 65% 60%;
- --chart-5: 340 75% 55%;
- --sidebar-foreground: 240 4.8% 95.9%;
- --sidebar-primary: 224.3 76.3% 48%;
- --sidebar-primary-foreground: 0 0% 100%;
- --sidebar-accent: 240 3.7% 15.9%;
- --sidebar-accent-foreground: 240 4.8% 95.9%;
- --sidebar-border: 240 3.7% 15.9%;
- --sidebar-ring: 217.2 91.2% 59.8%;
}
}
@@ -148,43 +132,43 @@
.bg-node {
background-color: hsl(var(--node-bg));
}
-
+
.border-status {
border-color: hsl(var(--status-border));
}
-
+
.border-node {
border-color: hsl(var(--node-border));
}
-
+
.border-node-hover {
border-color: hsl(var(--node-border-hover));
}
-
+
.border-node-selected {
border-color: hsl(var(--node-border-selected));
}
-
+
.hover-bg {
@apply hover:bg-[var(--hover-background)];
}
-
+
.hover-text {
@apply hover:text-[hsl(var(--hover-foreground))];
}
-
+
.hover-item {
@apply hover:bg-[var(--hover-background)] hover:text-[hsl(var(--hover-foreground))];
}
-
+
.active-bg {
@apply bg-[var(--active-background)];
}
-
+
.active-text {
@apply text-[hsl(var(--active-foreground))];
}
-
+
.active-item {
@apply bg-[var(--active-background)] text-[hsl(var(--active-foreground))];
}
@@ -303,13 +287,12 @@
position: absolute;
inset: 0;
border-radius: 0.5rem;
- background: linear-gradient(90deg,
- #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
- );
+ background: linear-gradient(90deg,
+ #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
- -webkit-mask:
- linear-gradient(#fff 0 0) content-box,
+ -webkit-mask:
+ linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -320,6 +303,7 @@
0% {
background-position: 0% 0%;
}
+
100% {
background-position: 200% 0%;
}
@@ -327,18 +311,16 @@
/* Gradient animation for in-progress elements */
.gradient-animation {
- background: linear-gradient(90deg,
- #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
- );
+ background: linear-gradient(90deg,
+ #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
}
/* Gradient text animation */
.gradient-text {
- background: linear-gradient(90deg,
- #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
- );
+ background: linear-gradient(90deg,
+ #2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
background-clip: text;
@@ -351,6 +333,6 @@
border-right: none !important;
}
-.react-flow__controls .react-flow__controls-button + .react-flow__controls-button {
+.react-flow__controls .react-flow__controls-button+.react-flow__controls-button {
border-left: none !important;
}
\ No newline at end of file