@timecell/web 0.1.2

package/src/components/TemperatureGauge.tsx

@@ -0,0 +1,283 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TemperatureData {
+	score: number;
+	zone: "Extreme Fear" | "Fear" | "Neutral" | "Greed" | "Extreme Greed";
+	mvrv: number;
+	rhodl: number;
+	dataSource: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Map a 0–100 score to a CSS colour string via a blue→green→yellow→orange→red gradient. */
+function scoreToColor(score: number): string {
+	if (score < 20) return "#3b82f6"; // blue-500
+	if (score < 40) return "#22c55e"; // green-500
+	if (score < 60) return "#eab308"; // yellow-500
+	if (score < 75) return "#f97316"; // orange-500
+	return "#ef4444"; // red-500
+}
+
+/** Zone-specific Tailwind text colour class. */
+function zoneTextClass(zone: TemperatureData["zone"]): string {
+	switch (zone) {
+		case "Extreme Fear":
+			return "text-blue-400";
+		case "Fear":
+			return "text-green-400";
+		case "Neutral":
+			return "text-yellow-400";
+		case "Greed":
+			return "text-orange-400";
+		case "Extreme Greed":
+			return "text-red-400";
+	}
+}
+
+/**
+ * Convert a 0–100 score to polar co-ordinates on a semi-circle.
+ *
+ * The semi-circle spans from 180° (left, score 0) to 0° (right, score 100),
+ * sweeping through the top.  We use standard SVG arc math with the arc
+ * centre at (100, 100) and radius 80.
+ */
+function scoreToPoint(score: number, radius: number, cx: number, cy: number): { x: number; y: number } {
+	// angle: 180° at score=0, 0° at score=100
+	const angleDeg = 180 - score * 1.8;
+	const angleRad = (angleDeg * Math.PI) / 180;
+	return {
+		x: cx + radius * Math.cos(angleRad),
+		y: cy - radius * Math.sin(angleRad),
+	};
+}
+
+/**
+ * Build an SVG arc path for the colour-coded foreground arc (score portion).
+ */
+function buildArcPath(score: number, radius: number, cx: number, cy: number): string {
+	const start = scoreToPoint(0, radius, cx, cy);
+	const end = scoreToPoint(score, radius, cx, cy);
+	const largeArc = score > 50 ? 1 : 0;
+	return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} 1 ${end.x} ${end.y}`;
+}
+
+// ---------------------------------------------------------------------------
+// Zone band segments rendered behind the needle
+// ---------------------------------------------------------------------------
+
+interface Band {
+	from: number;
+	to: number;
+	color: string;
+}
+
+const BANDS: Band[] = [
+	{ from: 0, to: 20, color: "#3b82f6" },  // blue — Extreme Fear
+	{ from: 20, to: 40, color: "#22c55e" }, // green — Fear
+	{ from: 40, to: 60, color: "#eab308" }, // yellow — Neutral
+	{ from: 60, to: 75, color: "#f97316" }, // orange — Greed
+	{ from: 75, to: 100, color: "#ef4444" }, // red — Extreme Greed
+];
+
+function BandArc({ from, to, radius, cx, cy }: { from: number; to: number; radius: number; cx: number; cy: number }) {
+	const start = scoreToPoint(from, radius, cx, cy);
+	const end = scoreToPoint(to, radius, cx, cy);
+	const span = to - from;
+	const largeArc = span > 50 ? 1 : 0;
+	const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} 1 ${end.x} ${end.y}`;
+	const band = BANDS.find((b) => b.from === from);
+	return <path d={d} stroke={band?.color ?? "#64748b"} strokeWidth="10" fill="none" strokeOpacity="0.25" />;
+}
+
+// ---------------------------------------------------------------------------
+// Gauge SVG
+// ---------------------------------------------------------------------------
+
+function GaugeSVG({ score }: { score: number }) {
+	const CX = 100;
+	const CY = 100;
+	const RADIUS = 75;
+	const arcColor = scoreToColor(score);
+
+	// Needle tip at the score position, base at centre
+	const tip = scoreToPoint(score, RADIUS - 8, CX, CY);
+
+	return (
+		<svg viewBox="0 0 200 115" className="w-full max-w-xs mx-auto" aria-hidden="true">
+			{/* Background track */}
+			<path
+				d={`M ${CX - RADIUS} ${CY} A ${RADIUS} ${RADIUS} 0 0 1 ${CX + RADIUS} ${CY}`}
+				stroke="#1e293b"
+				strokeWidth="12"
+				fill="none"
+			/>
+
+			{/* Coloured zone bands */}
+			{BANDS.map((b) => (
+				<BandArc key={b.from} from={b.from} to={b.to} radius={RADIUS} cx={CX} cy={CY} />
+			))}
+
+			{/* Filled arc to current score */}
+			<path
+				d={buildArcPath(score, RADIUS, CX, CY)}
+				stroke={arcColor}
+				strokeWidth="12"
+				fill="none"
+				strokeLinecap="round"
+				style={{ transition: "all 0.6s ease" }}
+			/>
+
+			{/* Needle */}
+			<line
+				x1={CX}
+				y1={CY}
+				x2={tip.x}
+				y2={tip.y}
+				stroke={arcColor}
+				strokeWidth="2.5"
+				strokeLinecap="round"
+				style={{ transition: "all 0.6s ease" }}
+			/>
+			{/* Needle hub */}
+			<circle cx={CX} cy={CY} r="5" fill={arcColor} style={{ transition: "fill 0.6s ease" }} />
+			<circle cx={CX} cy={CY} r="2.5" fill="#0f172a" />
+
+			{/* Tick marks at zone boundaries */}
+			{[0, 20, 40, 60, 75, 100].map((tick) => {
+				const outer = scoreToPoint(tick, RADIUS + 10, CX, CY);
+				const inner = scoreToPoint(tick, RADIUS - 10, CX, CY);
+				return (
+					<line
+						key={tick}
+						x1={inner.x}
+						y1={inner.y}
+						x2={outer.x}
+						y2={outer.y}
+						stroke="#475569"
+						strokeWidth="1"
+					/>
+				);
+			})}
+
+			{/* Min/max labels */}
+			<text x={CX - RADIUS - 4} y={CY + 14} fontSize="9" fill="#64748b" textAnchor="middle">
+				0
+			</text>
+			<text x={CX + RADIUS + 4} y={CY + 14} fontSize="9" fill="#64748b" textAnchor="middle">
+				100
+			</text>
+		</svg>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function TemperatureGauge() {
+	const [data, setData] = useState<TemperatureData | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+
+		async function fetchTemperature() {
+			try {
+				const res = await fetch("/api/temperature");
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				const json = (await res.json()) as TemperatureData;
+				if (!cancelled) {
+					setData(json);
+					setError(null);
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err instanceof Error ? err.message : "Failed to load temperature");
+				}
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		}
+
+		fetchTemperature();
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	return (
+		<Card className="border-slate-700 bg-slate-800/50 shadow-none">
+			<CardContent className="p-4 sm:p-6">
+				<h3 className="text-base sm:text-lg font-semibold text-white mb-1">
+					Market Temperature
+				</h3>
+				<p className="text-xs text-slate-400 mb-4">
+					MVRV (60%) + RHODL (40%) composite — where are we in the cycle?
+				</p>
+
+				{loading && (
+					<div className="flex items-center justify-center h-40 text-slate-500 text-sm">
+						Loading…
+					</div>
+				)}
+
+				{error && (
+					<div className="flex items-center justify-center h-40 text-red-400 text-sm">
+						{error}
+					</div>
+				)}
+
+				{!loading && !error && data && (
+					<div className="flex flex-col items-center gap-1">
+						{/* Semi-circular gauge */}
+						<GaugeSVG score={data.score} />
+
+						{/* Score + zone */}
+						<div className="text-center -mt-2">
+							<span
+								className="text-5xl font-black tabular-nums tracking-tight transition-colors duration-500"
+								style={{ color: scoreToColor(data.score) }}
+							>
+								{data.score}
+							</span>
+							<span className="text-lg font-semibold text-slate-400 ml-1">/ 100</span>
+							<p className={`text-sm font-semibold mt-1 transition-colors duration-500 ${zoneTextClass(data.zone)}`}>
+								{data.zone}
+							</p>
+						</div>
+
+						{/* Component breakdown */}
+						<div className="mt-4 w-full grid grid-cols-2 gap-2 text-center">
+							<div className="rounded-lg bg-slate-900/50 border border-slate-700/50 px-3 py-2">
+								<p className="text-xs text-slate-500 uppercase tracking-wider mb-0.5">MVRV</p>
+								<p className="text-lg font-bold text-slate-200 tabular-nums">{data.mvrv.toFixed(2)}</p>
+								<p className="text-xs text-slate-500">60% weight</p>
+							</div>
+							<div className="rounded-lg bg-slate-900/50 border border-slate-700/50 px-3 py-2">
+								<p className="text-xs text-slate-500 uppercase tracking-wider mb-0.5">RHODL</p>
+								<p className="text-lg font-bold text-slate-200 tabular-nums">{data.rhodl.toFixed(2)}</p>
+								<p className="text-xs text-slate-500">40% weight</p>
+							</div>
+						</div>
+
+						{/* Data source note */}
+						{data.dataSource === "mock" && (
+							<p className="mt-3 text-xs text-slate-600 text-center">
+								Mock data — live on-chain feeds coming soon
+							</p>
+						)}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-700">
+      <SliderPrimitive.Range className="absolute h-full bg-orange-500" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-[18px] w-[18px] rounded-full border-2 border-orange-500 bg-orange-500 shadow transition-all hover:scale-[1.3] hover:shadow-[0_0_0_4px_rgba(249,115,22,0.2)] hover:bg-orange-400 active:scale-[1.1] active:shadow-[0_0_0_6px_rgba(249,115,22,0.3)] active:bg-orange-600 focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_rgba(249,115,22,0.4)] disabled:pointer-events-none disabled:opacity-50 cursor-pointer" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/usePortfolio.ts

@@ -0,0 +1,110 @@
+import { useState, useCallback } from "react";
+
+const API_BASE = "/api";
+
+export interface PortfolioInput {
+	totalValueUsd: number;
+	btcPercentage: number;
+	monthlyBurnUsd: number;
+	liquidReserveUsd: number;
+	btcPriceUsd: number;
+}
+
+export interface HedgePosition {
+	strikeUsd: number;
+	quantityBtc: number;
+	expiryDate?: string;
+}
+
+export interface CrashScenario {
+	drawdownPct: number;
+	btcPriceAtCrash: number;
+	btcValueAfterCrash: number;
+	nonBtcValueAfterCrash: number;
+	portfolioValueAfterCrash: number;
+	hedgePayoff: number;
+	netPosition: number;
+	runwayMonths: number;
+	survivalStatus: "safe" | "warning" | "critical";
+}
+
+export interface SurvivalResult {
+	portfolio: PortfolioInput;
+	scenarios: CrashScenario[];
+	maxSurvivableDrawdown: number;
+	ruinTestPassed: boolean;
+}
+
+export function usePortfolio() {
+	const [portfolio, setPortfolio] = useState<PortfolioInput>({
+		totalValueUsd: 5_000_000,
+		btcPercentage: 35,
+		monthlyBurnUsd: 25_000,
+		liquidReserveUsd: 600_000,
+		btcPriceUsd: 84_000,
+	});
+	const [hedgePositions, setHedgePositions] = useState<HedgePosition[]>([]);
+	const [currencySymbol, setCurrencySymbol] = useState("$");
+	const [result, setResult] = useState<SurvivalResult | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [savedAt, setSavedAt] = useState<number | null>(null);
+
+	const calculate = useCallback(async (p: PortfolioInput, h: HedgePosition[]) => {
+		setLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`${API_BASE}/crash-survival`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ portfolio: p, hedgePositions: h }),
+			});
+			if (!res.ok) throw new Error(`API returned ${res.status}`);
+			const data: SurvivalResult = await res.json();
+			setResult(data);
+		} catch (err) {
+			console.error("Failed to calculate:", err);
+			setError("Could not reach the calculation engine. Is the API server running on port 3737?");
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	const loadPortfolio = useCallback(async () => {
+		try {
+			const res = await fetch(`${API_BASE}/portfolio`);
+			const data = await res.json();
+			setPortfolio(data.portfolio);
+			setHedgePositions(data.hedgePositions || []);
+			if (data.currency?.symbol) setCurrencySymbol(data.currency.symbol);
+			await calculate(data.portfolio, data.hedgePositions || []);
+		} catch {
+			// Use defaults and calculate
+			await calculate(portfolio, hedgePositions);
+		}
+	}, [calculate]);
+
+	const updatePortfolio = useCallback(
+		async (updates: Partial<PortfolioInput>) => {
+			const updated = { ...portfolio, ...updates };
+			setPortfolio(updated);
+			await calculate(updated, hedgePositions);
+			setSavedAt(Date.now());
+		},
+		[portfolio, hedgePositions, calculate],
+	);
+
+	return {
+		portfolio,
+		hedgePositions,
+		currencySymbol,
+		result,
+		loading,
+		error,
+		savedAt,
+		loadPortfolio,
+		updatePortfolio,
+		setHedgePositions,
+		calculate,
+	};
+}