@timecell/web 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timecell/web",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "TimeCell web application",
   "scripts": {
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@timecell/engine": "*",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-tooltip": "^1.2.8",

package/src/App.tsx

@@ -4,6 +4,10 @@ import { SurvivalHero } from "./components/SurvivalHero";
 import { PortfolioForm } from "./components/PortfolioForm";
 import { CrashChart } from "./components/CrashChart";
 import { CrashGrid } from "./components/CrashGrid";
+import { BtcPriceTicker } from "./components/BtcPriceTicker";
+import { TemperatureGauge } from "./components/TemperatureGauge";
+import { PositionSizing } from "./components/PositionSizing";
+import { ActionPlan } from "./components/ActionPlan";
 import { ConvictionLadder } from "./components/ConvictionLadder";
 import { InfoPanel } from "./components/InfoPanel";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -11,6 +15,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 export default function App() {
 	const { portfolio, currencySymbol, result, loading, error, savedAt, loadPortfolio, updatePortfolio } = usePortfolio();
 	const [detailsOpen, setDetailsOpen] = useState(false);
+	const [temperatureScore, setTemperatureScore] = useState(55);
 
 	useEffect(() => {
 		loadPortfolio();
@@ -25,8 +30,9 @@ export default function App() {
 					<div className="flex items-center gap-3">
 						<img src="/logo.png" alt="TimeCell" className="h-8 brightness-110" />
 						<span className="text-xs text-slate-500 bg-slate-800 px-2 py-0.5 rounded">
-							v0.1
+							v0.2
 						</span>
+						<BtcPriceTicker fallbackPrice={portfolio.btcPriceUsd} currencySymbol={currencySymbol} />
 					</div>
 					<span className="text-xs sm:text-sm text-slate-500">Crash Survival Calculator</span>
 				</div>
@@ -80,7 +86,29 @@ export default function App() {
 					</div>
 				</div>
 
-				{/* ZONE 3: Crash details — collapsed by default */}
+				{/* ZONE 3: Market Intelligence — Temperature + Position Sizing + Action Plan */}
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+					<TemperatureGauge onTemperatureChange={setTemperatureScore} />
+					<PositionSizing
+						totalValueUsd={portfolio.totalValueUsd}
+						currentBtcPct={portfolio.btcPercentage}
+						monthlyBurnUsd={portfolio.monthlyBurnUsd}
+						liquidReserveUsd={portfolio.liquidReserveUsd}
+						btcPriceUsd={portfolio.btcPriceUsd}
+						currencySymbol={currencySymbol}
+					/>
+					<ActionPlan
+						btcPercentage={portfolio.btcPercentage}
+						ruinTestPassed={result?.ruinTestPassed ?? true}
+						runwayMonths={result?.scenarios?.[result.scenarios.length - 1]?.runwayMonths ?? Infinity}
+						temperatureScore={temperatureScore}
+						liquidReserveUsd={portfolio.liquidReserveUsd}
+						monthlyBurnUsd={portfolio.monthlyBurnUsd}
+						totalValueUsd={portfolio.totalValueUsd}
+					/>
+				</div>
+
+				{/* ZONE 4: Crash details — collapsed by default */}
 				{result && !loading && (
 					<div>
 						<button
@@ -98,7 +126,7 @@ export default function App() {
 					</div>
 				)}
 
-				{/* ZONE 4: Framework — below fold */}
+				{/* ZONE 5: Framework — below fold */}
 				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
 					<ConvictionLadder btcPercentage={portfolio.btcPercentage} />
 					<InfoPanel />

package/src/components/ActionPlan.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { generateActionPlanLocally } from "../lib/engine-standalone";
+
+const API_BASE = "/api";
+
+// ---------------------------------------------------------------------------
+// Standalone detection (same pattern as usePortfolio.ts)
+// ---------------------------------------------------------------------------
+
+function detectStandalone(): boolean {
+	if (import.meta.env.VITE_STANDALONE === "true") return true;
+	if (typeof window !== "undefined" && window.location.pathname.startsWith("/app")) return true;
+	return false;
+}
+
+// ---------------------------------------------------------------------------
+// Types (mirroring engine — no direct engine dep in web)
+// ---------------------------------------------------------------------------
+
+type ActionSeverity = "red" | "amber" | "green";
+
+interface ActionItem {
+	severity: ActionSeverity;
+	message: string;
+	rule: string;
+}
+
+// ---------------------------------------------------------------------------
+// Severity styling
+// ---------------------------------------------------------------------------
+
+function severityDotClass(severity: ActionSeverity): string {
+	switch (severity) {
+		case "red":
+			return "bg-red-400";
+		case "amber":
+			return "bg-amber-400";
+		case "green":
+			return "bg-emerald-400";
+	}
+}
+
+function severityTextClass(severity: ActionSeverity): string {
+	switch (severity) {
+		case "red":
+			return "text-red-400";
+		case "amber":
+			return "text-amber-400";
+		case "green":
+			return "text-emerald-400";
+	}
+}
+
+function severityBorderClass(severity: ActionSeverity): string {
+	switch (severity) {
+		case "red":
+			return "border-l-red-400";
+		case "amber":
+			return "border-l-amber-400";
+		case "green":
+			return "border-l-emerald-400";
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export interface ActionPlanProps {
+	btcPercentage: number;
+	ruinTestPassed: boolean;
+	runwayMonths: number;
+	temperatureScore: number;
+	liquidReserveUsd: number;
+	monthlyBurnUsd: number;
+	totalValueUsd: number;
+}
+
+export function ActionPlan({
+	btcPercentage,
+	ruinTestPassed,
+	runwayMonths,
+	temperatureScore,
+	liquidReserveUsd,
+	monthlyBurnUsd,
+	totalValueUsd,
+}: ActionPlanProps) {
+	const [items, setItems] = useState<ActionItem[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	// Sticky standalone flag — once API fails, stay in standalone mode
+	const standaloneRef = useRef<boolean | null>(null);
+
+	function isStandalone(): boolean {
+		if (standaloneRef.current !== null) return standaloneRef.current;
+		standaloneRef.current = detectStandalone();
+		return standaloneRef.current;
+	}
+
+	const input = {
+		btcPercentage,
+		ruinTestPassed,
+		runwayMonths,
+		temperatureScore,
+		liquidReserveUsd,
+		monthlyBurnUsd,
+		totalValueUsd,
+	};
+
+	const calculateStandalone = useCallback(() => {
+		try {
+			const result = generateActionPlanLocally(input);
+			setItems(result as ActionItem[]);
+			setError(null);
+		} catch (err) {
+			console.error("action-plan standalone error:", err);
+			setError("Calculation failed.");
+		}
+	}, [btcPercentage, ruinTestPassed, runwayMonths, temperatureScore, liquidReserveUsd, monthlyBurnUsd, totalValueUsd]);
+
+	const calculate = useCallback(async () => {
+		if (isStandalone()) {
+			setLoading(true);
+			calculateStandalone();
+			setLoading(false);
+			return;
+		}
+
+		setLoading(true);
+		try {
+			const res = await fetch(`${API_BASE}/action-plan`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify(input),
+			});
+			if (!res.ok) throw new Error(`API ${res.status}`);
+			setItems(await res.json());
+			setError(null);
+		} catch (err) {
+			console.error("action-plan API failed, falling back to standalone:", err);
+			// Fall back to local calculation and stay in standalone mode
+			standaloneRef.current = true;
+			calculateStandalone();
+		} finally {
+			setLoading(false);
+		}
+	}, [calculateStandalone, btcPercentage, ruinTestPassed, runwayMonths, temperatureScore, liquidReserveUsd, monthlyBurnUsd, totalValueUsd]);
+
+	useEffect(() => {
+		calculate();
+	}, [calculate]);
+
+	return (
+		<Card className="border-slate-700 bg-slate-800/50 shadow-none">
+			<CardContent className="p-4 sm:p-6">
+				{/* Header */}
+				<h3 className="text-base sm:text-lg font-semibold text-white mb-0.5">
+					What Should I Do?
+				</h3>
+				<p className="text-xs text-slate-400 mb-4">
+					Personalized actions based on your portfolio, market temperature, and risk profile
+				</p>
+
+				{/* Loading */}
+				{loading && (
+					<div className="flex items-center justify-center h-32 text-slate-500 text-sm">
+						<div className="w-4 h-4 rounded-full border-2 border-orange-400/30 border-t-orange-400 animate-spin mr-2" />
+						Analyzing...
+					</div>
+				)}
+
+				{/* Error */}
+				{error && (
+					<div className="flex items-center justify-center h-32 text-red-400 text-sm">
+						{error}
+					</div>
+				)}
+
+				{/* Action items */}
+				{!loading && !error && items.length > 0 && (
+					<div className="space-y-2.5">
+						{items.map((item) => (
+							<div
+								key={item.rule}
+								className={`border-l-2 ${severityBorderClass(item.severity)} rounded-r-lg bg-slate-900/40 px-3 py-2.5`}
+							>
+								<div className="flex items-start gap-2.5">
+									<span
+										className={`mt-1.5 flex-shrink-0 w-2 h-2 rounded-full ${severityDotClass(item.severity)}`}
+									/>
+									<p className={`text-sm leading-snug ${severityTextClass(item.severity)}`}>
+										{item.message}
+									</p>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+
+				{/* All clear */}
+				{!loading && !error && items.length === 0 && (
+					<div className="flex items-center justify-center h-32 text-emerald-400 text-sm font-medium">
+						All clear — your portfolio is well-positioned.
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

package/src/components/BtcPriceTicker.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from "react";
+import { useBtcPrice } from "@/hooks/useBtcPrice";
+
+interface BtcPriceTickerProps {
+	/** Fallback price if live fetch fails (e.g. portfolio's btcPriceUsd) */
+	fallbackPrice?: number;
+	/** Currency symbol to display (e.g. "$", "₹", "€") */
+	currencySymbol?: string;
+}
+
+type FlashDirection = "up" | "down" | null;
+
+function formatPrice(price: number, symbol: string): string {
+	return `${symbol}${price.toLocaleString("en-US", { maximumFractionDigits: 0 })}`;
+}
+
+function secondsAgo(date: Date): number {
+	return Math.floor((Date.now() - date.getTime()) / 1_000);
+}
+
+function useSecondsAgo(lastUpdated: Date | null): number | null {
+	const [secs, setSecs] = useState<number | null>(
+		lastUpdated ? secondsAgo(lastUpdated) : null,
+	);
+
+	useEffect(() => {
+		if (!lastUpdated) return;
+		setSecs(secondsAgo(lastUpdated));
+		const t = setInterval(() => setSecs(secondsAgo(lastUpdated)), 5_000);
+		return () => clearInterval(t);
+	}, [lastUpdated]);
+
+	return secs;
+}
+
+export function BtcPriceTicker({
+	fallbackPrice,
+	currencySymbol = "$",
+}: BtcPriceTickerProps) {
+	const { price, loading, lastUpdated, source } = useBtcPrice(fallbackPrice);
+	const prevPriceRef = useRef<number | null>(null);
+	const [flash, setFlash] = useState<FlashDirection>(null);
+	const flashTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const secs = useSecondsAgo(lastUpdated);
+
+	// Detect price direction change and trigger flash
+	useEffect(() => {
+		if (price === null) return;
+		const prev = prevPriceRef.current;
+
+		if (prev !== null && prev !== price) {
+			const direction: FlashDirection = price > prev ? "up" : "down";
+			setFlash(direction);
+
+			if (flashTimerRef.current) clearTimeout(flashTimerRef.current);
+			flashTimerRef.current = setTimeout(() => setFlash(null), 1_500);
+		}
+
+		prevPriceRef.current = price;
+
+		return () => {
+			if (flashTimerRef.current) clearTimeout(flashTimerRef.current);
+		};
+	}, [price]);
+
+	// Price text colour transitions: green flash on up, red flash on down, neutral otherwise
+	const priceColorClass =
+		flash === "up"
+			? "text-emerald-400"
+			: flash === "down"
+				? "text-red-400"
+				: "text-white";
+
+	const lastUpdatedLabel =
+		secs === null
+			? null
+			: secs < 10
+				? "just now"
+				: secs < 60
+					? `${secs}s ago`
+					: `${Math.floor(secs / 60)}m ago`;
+
+	return (
+		<div className="flex items-center gap-2">
+			{/* Pulsing live indicator dot */}
+			<span className="relative flex h-2 w-2 flex-shrink-0">
+				<span
+					className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
+						source === null ? "bg-slate-500" : "bg-emerald-500"
+					}`}
+				/>
+				<span
+					className={`relative inline-flex h-2 w-2 rounded-full ${
+						source === null ? "bg-slate-500" : "bg-emerald-500"
+					}`}
+				/>
+			</span>
+
+			<div className="flex flex-col items-end leading-none">
+				{/* Price */}
+				<span
+					className={`tabular-nums text-sm font-semibold transition-colors duration-700 ${priceColorClass}`}
+				>
+					{loading && price === null ? (
+						<span className="inline-block h-4 w-20 animate-pulse rounded bg-slate-700" />
+					) : price !== null ? (
+						formatPrice(price, currencySymbol)
+					) : (
+						<span className="text-slate-500">—</span>
+					)}
+				</span>
+
+				{/* "Last updated" sub-label */}
+				<span className="text-[10px] text-slate-500 mt-0.5">
+					{lastUpdatedLabel
+						? `updated ${lastUpdatedLabel}`
+						: source === null
+							? "fetching…"
+							: null}
+				</span>
+			</div>
+		</div>
+	);
+}

package/src/components/TemperatureGauge.tsx

@@ -182,7 +182,11 @@ function GaugeSVG({ score }: { score: number }) {
 // Main component
 // ---------------------------------------------------------------------------
 
-export function TemperatureGauge() {
+export interface TemperatureGaugeProps {
+	onTemperatureChange?: (score: number) => void;
+}
+
+export function TemperatureGauge({ onTemperatureChange }: TemperatureGaugeProps = {}) {
 	const [data, setData] = useState<TemperatureData | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
@@ -198,6 +202,7 @@ export function TemperatureGauge() {
 				if (!cancelled) {
 					setData(json);
 					setError(null);
+					onTemperatureChange?.(json.score);
 				}
 			} catch (err) {
 				if (!cancelled) {

package/src/hooks/useBtcPrice.ts

@@ -0,0 +1,78 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+export interface BtcPriceState {
+	price: number | null;
+	loading: boolean;
+	lastUpdated: Date | null;
+	source: "api" | "coingecko" | null;
+}
+
+const REFRESH_INTERVAL_MS = 60_000;
+const API_PRICE_URL = "/api/price";
+const COINGECKO_URL =
+	"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd";
+
+async function fetchFromApi(): Promise<{ price: number; source: "api" } | null> {
+	try {
+		const res = await fetch(API_PRICE_URL);
+		if (!res.ok) return null;
+		const data = await res.json();
+		const price = typeof data?.price === "number" ? data.price : null;
+		if (!price) return null;
+		return { price, source: "api" };
+	} catch {
+		return null;
+	}
+}
+
+async function fetchFromCoinGecko(): Promise<{ price: number; source: "coingecko" } | null> {
+	try {
+		const res = await fetch(COINGECKO_URL);
+		if (!res.ok) return null;
+		const data = await res.json();
+		const price = data?.bitcoin?.usd ?? null;
+		if (!price) return null;
+		return { price, source: "coingecko" as const };
+	} catch {
+		return null;
+	}
+}
+
+export function useBtcPrice(fallbackPrice?: number): BtcPriceState {
+	const [state, setState] = useState<BtcPriceState>({
+		price: fallbackPrice ?? null,
+		loading: true,
+		lastUpdated: null,
+		source: null,
+	});
+
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+	const refresh = useCallback(async () => {
+		// Try local API first; if unavailable (Vercel / standalone) fall back to CoinGecko direct
+		const result = (await fetchFromApi()) ?? (await fetchFromCoinGecko());
+
+		setState((prev) => ({
+			price: result?.price ?? prev.price ?? fallbackPrice ?? null,
+			loading: false,
+			lastUpdated: result ? new Date() : prev.lastUpdated,
+			source: result?.source ?? prev.source,
+		}));
+	}, [fallbackPrice]);
+
+	useEffect(() => {
+		// Kick off immediately on mount
+		refresh();
+
+		// Then refresh every 60 seconds
+		intervalRef.current = setInterval(refresh, REFRESH_INTERVAL_MS);
+
+		return () => {
+			if (intervalRef.current !== null) {
+				clearInterval(intervalRef.current);
+			}
+		};
+	}, [refresh]);
+
+	return state;
+}

package/src/hooks/usePortfolio.ts

@@ -1,4 +1,10 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
+import {
+	calculateLocally,
+	loadPortfolioFromStorage,
+	savePortfolioToStorage,
+	fetchBtcPrice,
+} from "../lib/engine-standalone";
 
 const API_BASE = "/api";
 
@@ -35,6 +41,18 @@ export interface SurvivalResult {
 	ruinTestPassed: boolean;
 }
 
+// ---------------------------------------------------------------------------
+// Mode detection: standalone (static site) vs API (CLI-served)
+// ---------------------------------------------------------------------------
+
+function detectStandalone(): boolean {
+	// Explicit env flag set during Vercel build
+	if (import.meta.env.VITE_STANDALONE === "true") return true;
+	// Path-based detection (/app/ prefix means hosted static site)
+	if (typeof window !== "undefined" && window.location.pathname.startsWith("/app")) return true;
+	return false;
+}
+
 export function usePortfolio() {
 	const [portfolio, setPortfolio] = useState<PortfolioInput>({
 		totalValueUsd: 5_000_000,
@@ -50,7 +68,36 @@ export function usePortfolio() {
 	const [error, setError] = useState<string | null>(null);
 	const [savedAt, setSavedAt] = useState<number | null>(null);
 
-	const calculate = useCallback(async (p: PortfolioInput, h: HedgePosition[]) => {
+	// Track whether we're in standalone mode. Once detected, stays sticky.
+	const standaloneRef = useRef<boolean | null>(null);
+
+	function isStandalone(): boolean {
+		if (standaloneRef.current !== null) return standaloneRef.current;
+		standaloneRef.current = detectStandalone();
+		return standaloneRef.current;
+	}
+
+	// ---------------------------------------------------------------------------
+	// Standalone calculate (engine imported directly)
+	// ---------------------------------------------------------------------------
+	const calculateStandalone = useCallback((p: PortfolioInput, h: HedgePosition[]) => {
+		setLoading(true);
+		setError(null);
+		try {
+			const data = calculateLocally(p, h);
+			setResult(data as SurvivalResult);
+		} catch (err) {
+			console.error("Engine calculation error:", err);
+			setError("Calculation failed. Please check your inputs.");
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	// ---------------------------------------------------------------------------
+	// API calculate (existing fetch-based flow)
+	// ---------------------------------------------------------------------------
+	const calculateApi = useCallback(async (p: PortfolioInput, h: HedgePosition[]) => {
 		setLoading(true);
 		setError(null);
 		try {
@@ -63,35 +110,84 @@ export function usePortfolio() {
 			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?");
+			console.error("API call failed, falling back to standalone:", err);
+			// Fallback: switch to standalone mode permanently
+			standaloneRef.current = true;
+			calculateStandalone(p, h);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [calculateStandalone]);
 
+	// ---------------------------------------------------------------------------
+	// Unified calculate
+	// ---------------------------------------------------------------------------
+	const calculate = useCallback(
+		async (p: PortfolioInput, h: HedgePosition[]) => {
+			if (isStandalone()) {
+				calculateStandalone(p, h);
+			} else {
+				await calculateApi(p, h);
+			}
+		},
+		[calculateStandalone, calculateApi],
+	);
+
+	// ---------------------------------------------------------------------------
+	// Load portfolio (localStorage or API)
+	// ---------------------------------------------------------------------------
 	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);
+		if (isStandalone()) {
+			const saved = loadPortfolioFromStorage();
+			// Try to get a fresh BTC price
+			const btcPrice = await fetchBtcPrice();
+			const p = { ...saved.portfolio, btcPriceUsd: btcPrice };
+			setPortfolio(p);
+			setHedgePositions(saved.hedgePositions || []);
+			if (saved.currency?.symbol) setCurrencySymbol(saved.currency.symbol);
+			calculateStandalone(p, saved.hedgePositions || []);
+		} else {
+			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 {
+				// API unavailable — switch to standalone
+				standaloneRef.current = true;
+				const saved = loadPortfolioFromStorage();
+				const btcPrice = await fetchBtcPrice();
+				const p = { ...saved.portfolio, btcPriceUsd: btcPrice };
+				setPortfolio(p);
+				setHedgePositions(saved.hedgePositions || []);
+				if (saved.currency?.symbol) setCurrencySymbol(saved.currency.symbol);
+				calculateStandalone(p, saved.hedgePositions || []);
+			}
 		}
-	}, [calculate]);
+	}, [calculate, calculateStandalone]);
 
+	// ---------------------------------------------------------------------------
+	// Update portfolio
+	// ---------------------------------------------------------------------------
 	const updatePortfolio = useCallback(
 		async (updates: Partial<PortfolioInput>) => {
 			const updated = { ...portfolio, ...updates };
 			setPortfolio(updated);
 			await calculate(updated, hedgePositions);
 			setSavedAt(Date.now());
+
+			// Persist to localStorage in standalone mode
+			if (isStandalone()) {
+				savePortfolioToStorage({
+					portfolio: updated,
+					hedgePositions,
+					currency: { code: "USD", symbol: currencySymbol },
+				});
+			}
 		},
-		[portfolio, hedgePositions, calculate],
+		[portfolio, hedgePositions, currencySymbol, calculate],
 	);
 
 	return {

package/src/lib/engine-standalone.ts

@@ -0,0 +1,92 @@
+// =============================================================================
+// Standalone Engine Adapter
+// Imports engine directly (no API server needed) for static site deployment.
+// Handles BTC price fetching and localStorage persistence.
+// =============================================================================
+
+import {
+	calculateCrashSurvival,
+	generateActionPlan,
+	DEMO_PORTFOLIO,
+	DEMO_HEDGE_POSITIONS,
+	DEMO_BTC_PRICE,
+	type PortfolioInput,
+	type HedgePosition,
+	type SurvivalResult,
+	type ActionPlanInput,
+	type ActionItem,
+} from "@timecell/engine";
+
+const STORAGE_KEY = "timecell:portfolio";
+
+interface SavedPortfolio {
+	portfolio: PortfolioInput;
+	hedgePositions: HedgePosition[];
+	currency?: { code: string; symbol: string };
+}
+
+// ---------------------------------------------------------------------------
+// BTC Price
+// ---------------------------------------------------------------------------
+
+let cachedBtcPrice: number | null = null;
+
+export async function fetchBtcPrice(): Promise<number> {
+	if (cachedBtcPrice) return cachedBtcPrice;
+	try {
+		const res = await fetch(
+			"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd",
+		);
+		if (!res.ok) return DEMO_BTC_PRICE;
+		const data = await res.json();
+		const price = data?.bitcoin?.usd;
+		if (typeof price === "number" && price > 0) {
+			cachedBtcPrice = price;
+			return price;
+		}
+		return DEMO_BTC_PRICE;
+	} catch {
+		return DEMO_BTC_PRICE;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// LocalStorage Persistence
+// ---------------------------------------------------------------------------
+
+export function loadPortfolioFromStorage(): SavedPortfolio {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) return JSON.parse(raw) as SavedPortfolio;
+	} catch {
+		// corrupted data — fall through to defaults
+	}
+	return { portfolio: DEMO_PORTFOLIO, hedgePositions: DEMO_HEDGE_POSITIONS };
+}
+
+export function savePortfolioToStorage(data: SavedPortfolio): void {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+	} catch {
+		// localStorage full or unavailable — silently ignore
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Calculation (direct engine call)
+// ---------------------------------------------------------------------------
+
+export function calculateLocally(
+	portfolio: PortfolioInput,
+	hedgePositions: HedgePosition[],
+): SurvivalResult {
+	return calculateCrashSurvival(portfolio, hedgePositions);
+}
+
+// ---------------------------------------------------------------------------
+// Action Plan (direct engine call)
+// ---------------------------------------------------------------------------
+
+export function generateActionPlanLocally(input: ActionPlanInput): ActionItem[] {
+	return generateActionPlan(input);
+}

package/vite.config.ts

@@ -3,8 +3,15 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 
+const isVercel = process.env.VERCEL === "1";
+
 export default defineConfig({
 	plugins: [react(), tailwindcss()],
+	base: isVercel ? "/app/" : "/",
+	define: {
+		// Expose standalone flag to client code
+		"import.meta.env.VITE_STANDALONE": JSON.stringify(isVercel ? "true" : "false"),
+	},
 	resolve: {
 		alias: {
 			"@": path.resolve(__dirname, "./src"),