-
+ Sector rotation
-{props.signal || "No rotation flip detected."}
-{props.signal || "No rotation flip detected."}
+
- No events yet.}>
-
-
+ Activity
--
-
- {e.ticker} — {e.message} {e.date} } -
-
+
{e.ticker} {e.message} {e.date} }
+
-
+ Watchlist
- setTicker(e.currentTarget.value)} style={{ width: "90px" }} /> - -{err()}
- {t} }
+ setTicker(e.currentTarget.value)} />
+ {err()}
-
+
{t} }
-
- {(m) => }
-
- setMsg(e.currentTarget.value)} style={{ width: "220px" }} />
-
-
+ AI Chat
-You: {m.q}
{m.a.slice(0, 500)}
+
+ {(m) => }
+
+
+ You: {m.q}
{m.a.slice(0, 500)}
+ setMsg(e.currentTarget.value)} onKeyDown={(e: KeyboardEvent) => { if (e.key === "Enter") send(); }} />
+
-
- );
-}
-
-export function EmptyState(props: { icon: string; title: string; hint?: string; action?: JSX.Element }) {
- return (
- {props.title}
-{props.value}
-{props.sub}
-
- );
-}
-
-export function Skeleton(props: { rows?: number }) {
- const n = props.rows ?? 3;
- return (
- {props.icon}
- {props.title}
- {props.hint}
{props.action}
- {() => }
-
+
+
- {props.label}
-
- {v}
+
+
+ {([k, v]) => {
+ const n = v as number;
+ const pct = Math.min(100, Math.abs(n));
+ return (
+ }) {
- const entries = () =>
- Object.entries(props.breakdown || {}).filter(([, v]) => typeof v === "number") as [string, number][];
+export function PageHead(props: { title: string; sub?: string }) {
return (
- no signals}>
- {([k, v]) =>
-
+ = ImagePrimitive.ImageRootProps & {
+ class?: string | undefined
+}
+
+const Avatar = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as AvatarRootProps, ["class"])
+ return (
+ = ImagePrimitive.ImageImgProps & {
+ class?: string | undefined
+}
+
+const AvatarImage = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as AvatarImageProps, ["class"])
+ return =
+ ImagePrimitive.ImageFallbackProps & { class?: string | undefined }
+
+const AvatarFallback = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as AvatarFallbackProps, ["class"])
+ return (
+ & {
+ round?: boolean
+ }
+
+const Badge: Component = (props) => {
+ const [local, others] = splitProps(props, ["class", "variant", "round"])
+ return (
+
+ )
+}
+
+export type { BadgeProps }
+export { Badge, badgeVariants }
+
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..fc66652
--- /dev/null
+++ b/web/src/components/ui/button.tsx
@@ -0,0 +1,54 @@
+import type { JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as ButtonPrimitive from "@kobalte/core/button"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline"
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 px-3 text-xs",
+ lg: "h-11 px-8",
+ icon: "size-10"
+ }
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default"
+ }
+ }
+)
+
+type ButtonProps = ButtonPrimitive.ButtonRootProps &
+ VariantProps & { class?: string | undefined; children?: JSX.Element }
+
+const Button = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const CardHeader: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+const CardTitle: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const CardDescription: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+const CardContent: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+const CardFooter: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..f0e1bf8
--- /dev/null
+++ b/web/src/components/ui/dialog.tsx
@@ -0,0 +1,142 @@
+import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as DialogPrimitive from "@kobalte/core/dialog"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "../../lib/utils"
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal: Component = (props) => {
+ const [, rest] = splitProps(props, ["children"])
+ return (
+
+
+ )
+}
+
+type DialogOverlayProps =
+ DialogPrimitive.DialogOverlayProps & { class?: string | undefined }
+
+const DialogOverlay = (
+ props: PolymorphicProps>
+) => {
+ const [, rest] = splitProps(props as DialogOverlayProps, ["class"])
+ return (
+ =
+ DialogPrimitive.DialogContentProps & {
+ class?: string | undefined
+ children?: JSX.Element
+ }
+
+const DialogContent = (
+ props: PolymorphicProps>
+) => {
+ const [, rest] = splitProps(props as DialogContentProps, ["class", "children"])
+ return (
+
+
+ {props.children}
+
+
+ Close
+
+
+
+ )
+}
+
+const DialogHeader: Component> = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const DialogFooter: Component> = (props) => {
+ const [, rest] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+type DialogTitleProps = DialogPrimitive.DialogTitleProps & {
+ class?: string | undefined
+}
+
+const DialogTitle = (
+ props: PolymorphicProps>
+) => {
+ const [, rest] = splitProps(props as DialogTitleProps, ["class"])
+ return (
+ =
+ DialogPrimitive.DialogDescriptionProps & {
+ class?: string | undefined
+ }
+
+const DialogDescription = (
+ props: PolymorphicProps>
+) => {
+ const [, rest] = splitProps(props as DialogDescriptionProps, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+export { Label }
+
diff --git a/web/src/components/ui/progress.tsx b/web/src/components/ui/progress.tsx
new file mode 100644
index 0000000..cb32e83
--- /dev/null
+++ b/web/src/components/ui/progress.tsx
@@ -0,0 +1,35 @@
+import type { Component, JSX, ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+import * as ProgressPrimitive from "@kobalte/core/progress"
+
+import { Label } from "./label"
+
+type ProgressRootProps =
+ ProgressPrimitive.ProgressRootProps & { children?: JSX.Element }
+
+const Progress = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as ProgressRootProps, ["children"])
+ return (
+
+ {local.children}
+
+
+
+ )
+}
+
+const ProgressLabel: Component = (props) => {
+ return = (props) => {
+ return =
+ SeparatorPrimitive.SeparatorRootProps & { class?: string | undefined }
+
+const Separator = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as SeparatorRootProps, ["class", "orientation"])
+ return (
+ =
+ SkeletonPrimitive.SkeletonRootProps & { class?: string | undefined }
+
+const Skeleton = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as SkeletonRootProps, ["class"])
+ return (
+ (
+ props: PolymorphicProps
+) => {
+ const [local, others] = splitProps(props as SwitchControlProps, ["class", "children"])
+ return (
+ <>
+
+ {local.children}
+
+
+ )
+}
+
+type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & { class?: string | undefined }
+
+const SwitchThumb = (
+ props: PolymorphicProps
+) => {
+ const [local, others] = splitProps(props as SwitchThumbProps, ["class"])
+ return (
+ (
+ props: PolymorphicProps
+) => {
+ const [local, others] = splitProps(props as SwitchLabelProps, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+const TableBody: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return
+}
+
+const TableFooter: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+
+ )
+}
+
+const TableRow: Component> = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return (
+ > = (props) => {
+ const [local, others] = splitProps(props, ["class"])
+ return = TabsPrimitive.TabsListProps & {
+ class?: string | undefined
+}
+
+const TabsList = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TabsListProps, ["class"])
+ return (
+ = TabsPrimitive.TabsTriggerProps & {
+ class?: string | undefined
+}
+
+const TabsTrigger = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TabsTriggerProps, ["class"])
+ return (
+ = TabsPrimitive.TabsContentProps & {
+ class?: string | undefined
+}
+
+const TabsContent = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TabsContentProps, ["class"])
+ return (
+ = TabsPrimitive.TabsIndicatorProps & {
+ class?: string | undefined
+}
+
+const TabsIndicator = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TabsIndicatorProps, ["class"])
+ return (
+ =
+ TextFieldPrimitive.TextFieldRootProps & {
+ class?: string | undefined
+ }
+
+const TextField = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TextFieldRootProps, ["class"])
+ return =
+ TextFieldPrimitive.TextFieldInputProps & {
+ class?: string | undefined
+ type?:
+ | "button"
+ | "checkbox"
+ | "color"
+ | "date"
+ | "datetime-local"
+ | "email"
+ | "file"
+ | "hidden"
+ | "image"
+ | "month"
+ | "number"
+ | "password"
+ | "radio"
+ | "range"
+ | "reset"
+ | "search"
+ | "submit"
+ | "tel"
+ | "text"
+ | "time"
+ | "url"
+ | "week"
+ }
+
+const TextFieldInput = (
+ rawProps: PolymorphicProps>
+) => {
+ const props = mergeProps[]>({ type: "text" }, rawProps)
+ const [local, others] = splitProps(props as TextFieldInputProps, ["type", "class"])
+ return (
+ =
+ TextFieldPrimitive.TextFieldTextAreaProps & { class?: string | undefined }
+
+const TextFieldTextArea = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TextFieldTextAreaProps, ["class"])
+ return (
+ =
+ TextFieldPrimitive.TextFieldLabelProps & { class?: string | undefined }
+
+const TextFieldLabel = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TextFieldLabelProps, ["class"])
+ return =
+ TextFieldPrimitive.TextFieldDescriptionProps & {
+ class?: string | undefined
+ }
+
+const TextFieldDescription = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TextFieldDescriptionProps, ["class"])
+ return (
+ =
+ TextFieldPrimitive.TextFieldErrorMessageProps & {
+ class?: string | undefined
+ }
+
+const TextFieldErrorMessage = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TextFieldErrorMessageProps, ["class"])
+ return (
+ = (props) => {
+ return =
+ TooltipPrimitive.TooltipContentProps & { class?: string | undefined }
+
+const TooltipContent = (
+ props: PolymorphicProps>
+) => {
+ const [local, others] = splitProps(props as TooltipContentProps, ["class"])
+ return (
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent }
+
diff --git a/web/src/index.tsx b/web/src/index.tsx
index d0ef895..6bc9cc9 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -3,6 +3,9 @@ import { Router, Route, useLocation, useNavigate, useParams, type RouteSectionPr
import { createSignal, Show } from "solid-js";
import { WatchlistDrawer, ChatSidebar } from "./components/WatchlistChat";
import { ThemeToggle, useAuth, AuthButton } from "./components/auth";
+import { Button } from "./components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./components/ui/card";
+import { TextField, TextFieldInput } from "./components/ui/text-field";
import { api } from "./lib/api";
import Dashboard from "./pages/Dashboard";
import Routines from "./pages/Routines";
@@ -10,24 +13,47 @@ import Screener from "./pages/Screener";
import Alerts from "./pages/Alerts";
import Report from "./pages/Report";
import Portfolio from "./pages/Portfolio";
-import "./styles/tokens.css";
+import "./styles/globals.css";
+
+const NAV = [
+ { href: "/", icon: "📊", label: "Dashboard" },
+ { href: "/routines", icon: "🗓️", label: "Routines" },
+ { href: "/screener", icon: "🔍", label: "Screener" },
+ { href: "/alerts", icon: "🔔", label: "Alerts" },
+ { href: "/portfolio", icon: "💼", label: "Portfolio" },
+];
function Nav() {
const loc = useLocation();
- const link = (href: string, icon: string, label: string) => (
- {icon} {label}
- );
return (
-
+ {k}
+
);
}
-// BreakdownBars renders a screen/report signal breakdown map as bars.
-// Unknown numeric fields are shown; booleans/strings are skipped except flags.
-export function BreakdownBars(props: { breakdown: Record
+
+ );
+ }}
+
= 0, "bg-error": n < 0 }}
+ style={{ width: `${pct}%`, "margin-left": n < 0 ? "auto" : undefined }}
+ />
+
+ {n.toFixed(1)}
+
+
+ );
+}
+
+export function EmptyState(props: { icon: string; title: string; hint?: string; action?: import("solid-js").JSX.Element }) {
+ return (
+ {props.title}
+ {props.sub ?{props.sub}
: null} +
+
);
}
diff --git a/web/src/components/ui/avatar.tsx b/web/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..b84f7d9
--- /dev/null
+++ b/web/src/components/ui/avatar.tsx
@@ -0,0 +1,52 @@
+import type { ValidComponent } from "solid-js"
+import { splitProps } from "solid-js"
+
+import * as ImagePrimitive from "@kobalte/core/image"
+import type { PolymorphicProps } from "@kobalte/core/polymorphic"
+
+import { cn } from "../../lib/utils"
+
+type AvatarRootProps{props.icon}
+ {props.title}
+ {props.hint ?{props.hint}
: null} + {props.action} +
+ {props.children}
+
+
+
+
+ )
+}
+
+const TableHeader: Component