opentradex 0.1.0

package/web/src/components/PositionsPanel.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ExternalLink, ChevronDown, ChevronRight } from "lucide-react";
+import type { Trade, PositionPrice } from "@/lib/types";
+import { kalshiUrl } from "@/lib/types";
+
+interface PositionsPanelProps {
+  positions: Trade[];
+  trades: Trade[];
+  prices?: PositionPrice[];
+}
+
+export function PositionsPanel({ positions, trades, prices = [] }: PositionsPanelProps) {
+  const priceMap = new Map(prices.map((p) => [p.ticker, p]));
+  const totalUnrealized = prices.reduce((sum, p) => sum + p.unrealized_pnl, 0);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="h-9 flex items-center justify-between px-3 border-b border-border bg-card shrink-0">
+        <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+          Positions
+        </span>
+        <div className="flex items-center gap-2">
+          {prices.length > 0 && (
+            <span
+              className={`text-[10px] font-mono font-medium ${
+                totalUnrealized >= 0 ? "text-primary" : "text-destructive"
+              }`}
+            >
+              {totalUnrealized >= 0 ? "+" : ""}${totalUnrealized.toFixed(2)}
+            </span>
+          )}
+          <span className="text-[10px] text-muted-foreground/50 font-mono">
+            {positions.length}
+          </span>
+        </div>
+      </div>
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="p-2 space-y-1">
+          {positions.length === 0 && (
+            <p className="text-xs text-muted-foreground/40 py-8 text-center">
+              No open positions
+            </p>
+          )}
+          {positions.map((t) => (
+            <PositionCard key={t.id} trade={t} price={priceMap.get(t.ticker)} />
+          ))}
+
+          {trades.length > 0 && (
+            <div className="pt-2">
+              <p className="text-[10px] text-muted-foreground/50 uppercase tracking-wider font-medium px-2 pb-1">
+                Recent Trades
+              </p>
+              {trades.slice(0, 10).map((t) => (
+                <TradeRow key={t.id} trade={t} />
+              ))}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function PositionCard({ trade: t, price }: { trade: Trade; price?: PositionPrice }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-md bg-secondary/20 overflow-hidden">
+      <button
+        className="w-full text-left px-3 py-2.5 hover:bg-secondary/30 transition-colors"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-muted-foreground/40 shrink-0">
+              {expanded ? (
+                <ChevronDown className="h-3 w-3" />
+              ) : (
+                <ChevronRight className="h-3 w-3" />
+              )}
+            </span>
+            <span className="font-mono text-[11px] font-medium truncate">
+              {t.ticker}
+            </span>
+            <a
+              href={kalshiUrl(t.ticker, t.title)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="shrink-0 text-muted-foreground/30 hover:text-primary transition-colors"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ExternalLink className="h-2.5 w-2.5" />
+            </a>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            {price && (
+              <span
+                className={`text-[10px] font-mono font-medium ${
+                  price.unrealized_pnl >= 0 ? "text-primary" : "text-destructive"
+                }`}
+              >
+                {price.unrealized_pnl >= 0 ? "+" : ""}${price.unrealized_pnl.toFixed(2)}
+              </span>
+            )}
+            <span
+              className={`text-[9px] font-semibold px-1.5 py-0.5 rounded ${
+                t.side === "yes"
+                  ? "bg-primary/15 text-primary"
+                  : "bg-destructive/15 text-destructive"
+              }`}
+            >
+              {t.side.toUpperCase()}
+            </span>
+          </div>
+        </div>
+
+        <p className="text-[10px] text-muted-foreground/50 truncate mt-1 pl-[18px]">
+          {t.title}
+        </p>
+
+        <div className="flex items-center gap-3 mt-1 pl-[18px] text-[10px]">
+          <span className="text-muted-foreground/60 font-mono">
+            {t.contracts}x @ ${t.entry_price.toFixed(2)}
+          </span>
+          {price && (
+            <span className="text-muted-foreground/40 font-mono">
+              now ${price.mark_price.toFixed(2)}
+            </span>
+          )}
+          <span className="text-primary font-medium">
+            {(t.edge * 100).toFixed(1)}pp
+          </span>
+          <span className="text-muted-foreground/40 capitalize text-[9px]">
+            {t.confidence}
+          </span>
+        </div>
+      </button>
+
+      {expanded && t.reasoning && (
+        <div className="px-3 pb-2.5 border-t border-border/20">
+          <div className="pl-[18px] pt-2">
+            <p className="text-[11px] text-foreground/70 leading-relaxed whitespace-pre-wrap">
+              {t.reasoning}
+            </p>
+            {t.estimated_prob > 0 && (
+              <div className="flex gap-4 mt-2 text-[10px] text-muted-foreground/50 font-mono">
+                <span>est {(t.estimated_prob * 100).toFixed(0)}%</span>
+                <span>mkt {(t.entry_price * 100).toFixed(0)}%</span>
+                <span className="text-primary/70">
+                  edge {(t.edge * 100).toFixed(1)}pp
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TradeRow({ trade: t }: { trade: Trade }) {
+  return (
+    <a
+      href={kalshiUrl(t.ticker, t.title)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center justify-between px-2 py-1.5 rounded hover:bg-secondary/20 transition-colors group"
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <span
+          className={`text-[10px] font-mono ${
+            t.outcome === "win"
+              ? "text-primary"
+              : t.outcome === "loss"
+                ? "text-destructive"
+                : "text-muted-foreground/40"
+          }`}
+        >
+          {t.outcome === "win" ? "+" : t.outcome === "loss" ? "-" : "~"}
+        </span>
+        <span className="font-mono text-[10px] truncate text-muted-foreground/70 group-hover:text-foreground/80 transition-colors">
+          {t.ticker}
+        </span>
+        <span
+          className={`text-[9px] ${t.side === "yes" ? "text-primary/50" : "text-destructive/50"}`}
+        >
+          {t.side.toUpperCase()}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 text-[10px] shrink-0">
+        {t.settled ? (
+          <span
+            className={`font-mono ${t.pnl >= 0 ? "text-primary/70" : "text-destructive/70"}`}
+          >
+            {t.pnl >= 0 ? "+" : ""}${t.pnl.toFixed(2)}
+          </span>
+        ) : (
+          <span className="text-muted-foreground/30">open</span>
+        )}
+        <span className="text-muted-foreground/25 text-[9px]">
+          {formatRelativeTime(t.timestamp)}
+        </span>
+      </div>
+    </a>
+  );
+}
+
+function formatRelativeTime(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  return `${Math.floor(hrs / 24)}d`;
+}

package/web/src/components/TopBar.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Activity, Play, Repeat, RotateCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface TopBarProps {
+  liveStatus: string;
+  agentStatus: string;
+  rationale: string;
+  loopInterval: number;
+  onRationaleChange: (v: string) => void;
+  onSubmitRationale: () => void;
+  onRunCycle: () => void;
+  onStartLoop: () => void;
+  onRefresh: () => void;
+  onLoopIntervalChange: (v: number) => void;
+}
+
+const INTERVALS = [
+  { value: 60, label: "1m" },
+  { value: 300, label: "5m" },
+  { value: 600, label: "10m" },
+  { value: 900, label: "15m" },
+  { value: 1800, label: "30m" },
+];
+
+export function TopBar({
+  liveStatus,
+  agentStatus,
+  rationale,
+  loopInterval,
+  onRationaleChange,
+  onSubmitRationale,
+  onRunCycle,
+  onStartLoop,
+  onRefresh,
+  onLoopIntervalChange,
+}: TopBarProps) {
+  return (
+    <header className="h-14 flex items-center gap-4 px-5 border-b border-border bg-card shrink-0 overflow-hidden max-w-full">
+      <div className="flex items-center gap-3 mr-2">
+        <Activity className="h-5 w-5 text-primary" />
+        <span className="font-semibold text-sm tracking-tight">
+          Open Trademaxxxing
+        </span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${
+            liveStatus === "running"
+              ? "bg-primary pulse-glow"
+              : liveStatus === "error"
+                ? "bg-destructive"
+                : "bg-muted-foreground/40"
+          }`}
+        />
+        <span className="text-xs text-muted-foreground whitespace-nowrap">
+          {liveStatus === "running"
+            ? "Running"
+            : liveStatus === "error"
+              ? "Error"
+              : "Idle"}
+        </span>
+      </div>
+
+      {agentStatus && (
+        <span className="text-xs text-muted-foreground/60 truncate max-w-48">
+          {agentStatus}
+        </span>
+      )}
+
+      <div className="flex-1 max-w-lg ml-auto">
+        <div className="relative">
+          <input
+            type="text"
+            value={rationale}
+            onChange={(e) => onRationaleChange(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && onSubmitRationale()}
+            placeholder="Enter a thesis to research & trade..."
+            className="w-full bg-secondary/50 border border-border rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 placeholder:text-muted-foreground/40 transition-all"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1 shrink-0">
+        {INTERVALS.map((i) => (
+          <button
+            key={i.value}
+            onClick={() => onLoopIntervalChange(i.value)}
+            className={`px-2 py-1 rounded text-[10px] font-medium transition-colors ${
+              loopInterval === i.value
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground hover:bg-secondary"
+            }`}
+          >
+            {i.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-1.5 shrink-0">
+        <Button size="sm" onClick={onRunCycle} className="h-7 text-xs gap-1.5">
+          <Play className="h-3 w-3" />
+          Run
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={onStartLoop}
+          className="h-7 text-xs gap-1.5"
+        >
+          <Repeat className="h-3 w-3" />
+          Loop
+        </Button>
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={onRefresh}
+          className="h-7 w-7"
+        >
+          <RotateCw className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </header>
+  );
+}

package/web/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/web/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/web/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/web/src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }