@timecell/web 0.1.2

package/src/components/InfoPanel.tsx

@@ -0,0 +1,44 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+const sections = [
+	{
+		title: "Crash Model",
+		body: "Non-BTC assets drop at ~50% of BTC\u2019s drawdown (correlation model). If BTC drops 80%, non-BTC assets drop ~40%.",
+	},
+	{
+		title: "Survival Threshold",
+		body: "18+ months of runway = safe. Less than 6 months = forced seller territory.",
+	},
+	{
+		title: "Ruin Test",
+		body: "The ultimate stress test: BTC drops 80% AND everything else drops 40% simultaneously. If you survive this, you survive anything.",
+	},
+	{
+		title: "Runway",
+		body: "Net position (portfolio after crash + cash reserve) divided by monthly burn rate.",
+	},
+];
+
+export function InfoPanel() {
+	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-4">
+					How Does This Work?
+				</h3>
+				<div className="space-y-4">
+					{sections.map((s) => (
+						<div key={s.title}>
+							<h4 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-1">
+								{s.title}
+							</h4>
+							<p className="text-sm text-slate-300 leading-relaxed">
+								{s.body}
+							</p>
+						</div>
+					))}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

package/src/components/PortfolioForm.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from "react";
+import type { PortfolioInput } from "../hooks/usePortfolio";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
+
+interface Props {
+	portfolio: PortfolioInput;
+	onUpdate: (updates: Partial<PortfolioInput>) => void;
+	savedAt?: number | null;
+	currencySymbol?: string;
+}
+
+function formatLabel(value: number, symbol = "$"): string {
+	if (value >= 1_000_000) return `${symbol}${(value / 1_000_000).toFixed(1)}M`;
+	if (value >= 1_000) return `${symbol}${(value / 1_000).toFixed(0)}K`;
+	return `${symbol}${value.toFixed(0)}`;
+}
+
+function InputField({
+	label,
+	value,
+	onChange,
+	min = 0,
+	max,
+	step = 1,
+	format,
+	suffix,
+}: {
+	label: string;
+	value: number;
+	onChange: (v: number) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	format?: (v: number) => string;
+	suffix?: string;
+}) {
+	return (
+		<div>
+			<div className="flex justify-between mb-2 sm:mb-1.5">
+				<label className="text-xs sm:text-sm text-slate-300">{label}</label>
+				<span className="text-xs sm:text-sm font-mono text-white">
+					{format ? format(value) : value}
+					{suffix}
+				</span>
+			</div>
+			<Slider
+				min={min}
+				max={max}
+				step={step}
+				value={[value]}
+				onValueChange={(vals) => onChange(vals[0])}
+			/>
+		</div>
+	);
+}
+
+export function PortfolioForm({ portfolio, onUpdate, savedAt, currencySymbol = "$" }: Props) {
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		if (!savedAt) return;
+		setVisible(true);
+		const timer = setTimeout(() => setVisible(false), 2000);
+		return () => clearTimeout(timer);
+	}, [savedAt]);
+
+	return (
+		<Card className="border-slate-700 bg-slate-800/50 shadow-none">
+			<CardHeader className="p-4 sm:p-6 pb-0 sm:pb-0">
+				<div className="flex items-center justify-between">
+					<CardTitle className="text-base sm:text-lg text-white">Portfolio</CardTitle>
+					<span
+						className={`text-xs text-green-400 transition-opacity duration-500 ${visible ? "opacity-100" : "opacity-0"}`}
+					>
+						&#10003; Saved
+					</span>
+				</div>
+			</CardHeader>
+
+			<CardContent className="p-4 sm:p-6 pt-4 sm:pt-5 space-y-4 sm:space-y-5">
+				<InputField
+					label="Total Value"
+					value={portfolio.totalValueUsd}
+					onChange={(v) => onUpdate({ totalValueUsd: v })}
+					min={100_000}
+					max={50_000_000}
+					step={100_000}
+					format={(v) => formatLabel(v, currencySymbol)}
+				/>
+
+				<InputField
+					label="Bitcoin Allocation"
+					value={portfolio.btcPercentage}
+					onChange={(v) => onUpdate({ btcPercentage: v })}
+					min={0}
+					max={100}
+					step={1}
+					suffix="%"
+				/>
+
+				<InputField
+					label="Monthly Burn"
+					value={portfolio.monthlyBurnUsd}
+					onChange={(v) => onUpdate({ monthlyBurnUsd: v })}
+					min={0}
+					max={500_000}
+					step={1_000}
+					format={(v) => formatLabel(v, currencySymbol)}
+				/>
+
+				<InputField
+					label="Liquid Reserve"
+					value={portfolio.liquidReserveUsd}
+					onChange={(v) => onUpdate({ liquidReserveUsd: v })}
+					min={0}
+					max={5_000_000}
+					step={10_000}
+					format={(v) => formatLabel(v, currencySymbol)}
+				/>
+
+				<InputField
+					label="BTC Price"
+					value={portfolio.btcPriceUsd}
+					onChange={(v) => onUpdate({ btcPriceUsd: v })}
+					min={10_000}
+					max={200_000}
+					step={1_000}
+					format={(v) => formatLabel(v, currencySymbol)}
+				/>
+			</CardContent>
+		</Card>
+	);
+}

package/src/components/PositionSizing.tsx

@@ -0,0 +1,382 @@
+import { useState, useEffect, useCallback } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+const API_BASE = "/api";
+
+// ---------------------------------------------------------------------------
+// Types (mirroring engine — no direct engine dep in web)
+// ---------------------------------------------------------------------------
+
+interface PositionSizingInput {
+	totalValueUsd: number;
+	currentBtcPct: number;
+	targetBtcPct: number;
+	monthlyBurnUsd: number;
+	liquidReserveUsd: number;
+	btcPriceUsd: number;
+	dcaMonths: number;
+}
+
+interface PositionSizingResult {
+	currentBtcUsd: number;
+	targetBtcUsd: number;
+	gapUsd: number;
+	gapBtc: number;
+	dcaMonthlyUsd: number;
+	dcaMonthlyBtc: number;
+	dcaMonths: number;
+	postReallocationRuinTest: boolean;
+	postReallocationRunwayMonths: number;
+	convictionRung: string;
+	currentConvictionRung: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function fmt(n: number, decimals = 0): string {
+	if (!Number.isFinite(n)) return "\u221e";
+	return n.toLocaleString("en-US", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals,
+	});
+}
+
+function fmtUsd(n: number, symbol = "$"): string {
+	const abs = Math.abs(n);
+	if (abs >= 1_000_000) return `${symbol}${fmt(n / 1_000_000, 2)}M`;
+	if (abs >= 1_000) return `${symbol}${fmt(n / 1_000, 1)}K`;
+	return `${symbol}${fmt(n)}`;
+}
+
+function fmtBtc(n: number): string {
+	const abs = Math.abs(n);
+	const prefix = n < 0 ? "-" : "";
+	if (abs < 0.001) return `${prefix}${(abs * 1_000_000).toFixed(0)}\u00a0sats`;
+	return `${prefix}${abs.toFixed(4)}\u00a0BTC`;
+}
+
+// ---------------------------------------------------------------------------
+// Allocation bar: fills a horizontal bar with a BTC (orange) and non-BTC segment
+// ---------------------------------------------------------------------------
+
+function AllocationBar({
+	btcPct,
+	label,
+}: {
+	btcPct: number;
+	label: string;
+}) {
+	return (
+		<div className="space-y-1.5">
+			<div className="flex justify-between text-xs text-slate-400">
+				<span>{label}</span>
+				<span className="font-mono text-slate-300">
+					BTC <span className="text-orange-400 font-bold">{btcPct.toFixed(1)}%</span>
+					{" / "}Other {(100 - btcPct).toFixed(1)}%
+				</span>
+			</div>
+			<div className="relative h-6 rounded-md overflow-hidden bg-slate-700/50">
+				{/* BTC segment */}
+				<div
+					className="absolute left-0 top-0 h-full bg-orange-500/70 transition-all duration-500 rounded-l-md"
+					style={{ width: `${Math.min(btcPct, 100)}%` }}
+				/>
+				{/* Non-BTC segment fills the rest — already the default bg */}
+				{/* Marker at BTC pct */}
+				{btcPct > 0 && btcPct < 100 && (
+					<div
+						className="absolute top-0 h-full w-px bg-slate-300/40"
+						style={{ left: `${btcPct}%` }}
+					/>
+				)}
+				{/* Label inside bar */}
+				<div className="absolute inset-0 flex items-center px-2 gap-1">
+					{btcPct >= 12 && (
+						<span className="text-xs font-semibold text-orange-100 drop-shadow">
+							BTC
+						</span>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Slider with label
+// ---------------------------------------------------------------------------
+
+function LabeledSlider({
+	label,
+	value,
+	min,
+	max,
+	step,
+	onChange,
+	display,
+}: {
+	label: string;
+	value: number;
+	min: number;
+	max: number;
+	step: number;
+	onChange: (v: number) => void;
+	display: string;
+}) {
+	return (
+		<div className="space-y-1.5">
+			<div className="flex justify-between items-center">
+				<span className="text-xs text-slate-400">{label}</span>
+				<span className="text-sm font-mono font-semibold text-orange-400">{display}</span>
+			</div>
+			<input
+				type="range"
+				min={min}
+				max={max}
+				step={step}
+				value={value}
+				onChange={(e) => onChange(Number(e.target.value))}
+				className="w-full h-1.5 rounded-full accent-orange-500 bg-slate-700 cursor-pointer"
+			/>
+			<div className="flex justify-between text-xs text-slate-600">
+				<span>{min}%</span>
+				<span>{max}%</span>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export interface PositionSizingProps {
+	totalValueUsd: number;
+	currentBtcPct: number;
+	monthlyBurnUsd: number;
+	liquidReserveUsd: number;
+	btcPriceUsd: number;
+	currencySymbol?: string;
+}
+
+const DCA_OPTIONS = [1, 3, 6, 12, 24] as const;
+
+export function PositionSizing({
+	totalValueUsd,
+	currentBtcPct,
+	monthlyBurnUsd,
+	liquidReserveUsd,
+	btcPriceUsd,
+	currencySymbol = "$",
+}: PositionSizingProps) {
+	const [targetBtcPct, setTargetBtcPct] = useState(() => Math.min(currentBtcPct + 5, 100));
+	const [dcaMonths, setDcaMonths] = useState<(typeof DCA_OPTIONS)[number]>(6);
+	const [result, setResult] = useState<PositionSizingResult | null>(null);
+	const [loading, setLoading] = useState(false);
+
+	const calculate = useCallback(
+		async (target: number, months: number) => {
+			if (!btcPriceUsd || !totalValueUsd) return;
+			setLoading(true);
+			try {
+				const body: PositionSizingInput = {
+					totalValueUsd,
+					currentBtcPct,
+					targetBtcPct: target,
+					monthlyBurnUsd,
+					liquidReserveUsd,
+					btcPriceUsd,
+					dcaMonths: months,
+				};
+				const res = await fetch(`${API_BASE}/position-sizing`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(body),
+				});
+				if (!res.ok) throw new Error(`API ${res.status}`);
+				setResult(await res.json());
+			} catch (err) {
+				console.error("position-sizing error:", err);
+			} finally {
+				setLoading(false);
+			}
+		},
+		[totalValueUsd, currentBtcPct, monthlyBurnUsd, liquidReserveUsd, btcPriceUsd],
+	);
+
+	// Recalculate whenever inputs change
+	useEffect(() => {
+		calculate(targetBtcPct, dcaMonths);
+	}, [calculate, targetBtcPct, dcaMonths]);
+
+	const isBuying = result ? result.gapUsd >= 0 : targetBtcPct >= currentBtcPct;
+	const gapAbs = result ? Math.abs(result.gapUsd) : 0;
+
+	return (
+		<Card className="border-slate-700 bg-slate-800/50 shadow-none">
+			<CardContent className="p-4 sm:p-6 space-y-6">
+				{/* Header */}
+				<div>
+					<h3 className="text-base sm:text-lg font-semibold text-white mb-0.5">
+						Position Sizing
+					</h3>
+					<p className="text-xs text-slate-400">
+						Plan your path from current to target Bitcoin allocation
+					</p>
+				</div>
+
+				{/* Target slider */}
+				<LabeledSlider
+					label="Target BTC allocation"
+					value={targetBtcPct}
+					min={0}
+					max={100}
+					step={1}
+					onChange={setTargetBtcPct}
+					display={`${targetBtcPct}%`}
+				/>
+
+				{/* Allocation comparison bars */}
+				<div className="space-y-3">
+					<AllocationBar btcPct={currentBtcPct} label="Current" />
+					<AllocationBar btcPct={targetBtcPct} label="Target" />
+				</div>
+
+				{/* Gap summary */}
+				{result && (
+					<div
+						className={`rounded-xl px-4 py-3 border transition-colors duration-300 ${
+							isBuying
+								? "bg-emerald-950/50 border-emerald-500/30"
+								: "bg-amber-950/50 border-amber-500/30"
+						}`}
+					>
+						<div className="flex items-start gap-3">
+							<span
+								className={`text-2xl mt-0.5 ${isBuying ? "text-emerald-400" : "text-amber-400"}`}
+							>
+								{isBuying ? "\u2191" : "\u2193"}
+							</span>
+							<div className="flex-1 min-w-0">
+								<p
+									className={`text-sm font-semibold ${isBuying ? "text-emerald-400" : "text-amber-400"}`}
+								>
+									{isBuying ? "Buy" : "Sell"}{" "}
+									{fmtUsd(gapAbs, currencySymbol)}{" "}
+									of Bitcoin
+								</p>
+								<p className="text-xs text-slate-400 mt-0.5">
+									{fmtBtc(Math.abs(result.gapBtc))} at current price
+								</p>
+								<div className="mt-1 flex gap-3 text-xs text-slate-500">
+									<span>
+										{result.currentConvictionRung}
+										{" \u2192 "}
+										<span className="text-orange-400 font-medium">{result.convictionRung}</span>
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{/* DCA breakdown */}
+				<div className="space-y-3">
+					<p className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+						DCA Schedule
+					</p>
+					{/* Month selector */}
+					<div className="flex gap-2">
+						{DCA_OPTIONS.map((m) => (
+							<button
+								key={m}
+								type="button"
+								onClick={() => setDcaMonths(m)}
+								className={`flex-1 py-1.5 rounded-lg text-xs font-semibold border transition-colors ${
+									dcaMonths === m
+										? "bg-orange-500/20 border-orange-500/50 text-orange-400"
+										: "bg-slate-800 border-slate-700 text-slate-500 hover:border-slate-600 hover:text-slate-400"
+								}`}
+							>
+								{m}mo
+							</button>
+						))}
+					</div>
+
+					{/* Monthly amounts */}
+					{result && (
+						<div className="grid grid-cols-2 gap-3">
+							<div className="rounded-lg bg-slate-900/60 px-3 py-2.5 border border-slate-700/60">
+								<p className="text-xs text-slate-500">Monthly {isBuying ? "buy" : "sell"}</p>
+								<p className="text-lg font-bold font-mono text-white mt-0.5">
+									{fmtUsd(Math.abs(result.dcaMonthlyUsd), currencySymbol)}
+								</p>
+								<p className="text-xs text-slate-500 mt-0.5">
+									{fmtBtc(Math.abs(result.dcaMonthlyBtc))} / mo
+								</p>
+							</div>
+							<div className="rounded-lg bg-slate-900/60 px-3 py-2.5 border border-slate-700/60">
+								<p className="text-xs text-slate-500">Duration</p>
+								<p className="text-lg font-bold font-mono text-white mt-0.5">
+									{result.dcaMonths} months
+								</p>
+								<p className="text-xs text-slate-500 mt-0.5">
+									Total {fmtUsd(gapAbs, currencySymbol)}
+								</p>
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* Post-reallocation ruin test */}
+				{result && (
+					<div
+						className={`flex items-center gap-3 rounded-xl px-4 py-3 border transition-all duration-300 ${
+							result.postReallocationRuinTest
+								? "bg-emerald-500/10 border-emerald-500/30"
+								: "bg-red-500/10 border-red-500/30"
+						}`}
+					>
+						<span
+							className={`text-2xl flex-shrink-0 ${
+								result.postReallocationRuinTest ? "text-emerald-400" : "text-red-400"
+							}`}
+						>
+							{result.postReallocationRuinTest ? "\u2713" : "\u2717"}
+						</span>
+						<div className="flex-1 min-w-0">
+							<p
+								className={`text-sm font-semibold ${
+									result.postReallocationRuinTest ? "text-emerald-400" : "text-red-400"
+								}`}
+							>
+								Ruin Test After Reallocation:{" "}
+								{result.postReallocationRuinTest ? "PASS" : "FAIL"}
+							</p>
+							<p className="text-xs text-slate-400 mt-0.5">
+								{result.postReallocationRunwayMonths === Infinity
+									? "\u221e months"
+									: `${fmt(result.postReallocationRunwayMonths)} months`}{" "}
+								runway at {targetBtcPct}% BTC under worst-case crash
+							</p>
+							{!result.postReallocationRuinTest && (
+								<p className="text-xs text-red-400/70 mt-1">
+									Target allocation leaves insufficient runway — consider a lower target or larger reserve
+								</p>
+							)}
+						</div>
+					</div>
+				)}
+
+				{/* Loading state overlay */}
+				{loading && (
+					<div className="flex justify-center py-2">
+						<div className="w-4 h-4 rounded-full border-2 border-orange-400/30 border-t-orange-400 animate-spin" />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}

package/src/components/SurvivalHero.tsx

@@ -0,0 +1,90 @@
+import type { SurvivalResult } from "../hooks/usePortfolio";
+
+function formatMonths(months: number): string {
+	if (months === Infinity) return "\u221e";
+	if (months > 120) return "120+";
+	return `${Math.round(months)}`;
+}
+
+function getScoreColor(maxDrawdown: number, ruinPassed: boolean) {
+	if (!ruinPassed) return { bg: "from-red-950/80 to-red-900/40", border: "border-red-500/30", text: "text-red-400", glow: "shadow-red-500/20" };
+	if (maxDrawdown >= 80) return { bg: "from-emerald-950/80 to-emerald-900/40", border: "border-emerald-500/30", text: "text-emerald-400", glow: "shadow-emerald-500/20" };
+	if (maxDrawdown >= 70) return { bg: "from-emerald-950/60 to-emerald-900/30", border: "border-emerald-500/20", text: "text-emerald-400", glow: "shadow-emerald-500/10" };
+	if (maxDrawdown >= 50) return { bg: "from-amber-950/60 to-amber-900/30", border: "border-amber-500/20", text: "text-amber-400", glow: "shadow-amber-500/10" };
+	return { bg: "from-red-950/60 to-red-900/30", border: "border-red-500/20", text: "text-red-400", glow: "shadow-red-500/10" };
+}
+
+export function SurvivalHero({ result }: { result: SurvivalResult }) {
+	const { maxSurvivableDrawdown, ruinTestPassed, scenarios } = result;
+	const worstCase = scenarios[scenarios.length - 1]; // 80% drawdown
+	const colors = getScoreColor(maxSurvivableDrawdown, ruinTestPassed);
+
+	return (
+		<div className={`relative overflow-hidden rounded-2xl border ${colors.border} bg-gradient-to-br ${colors.bg} p-6 sm:p-8 transition-all duration-500 shadow-lg ${colors.glow}`}>
+			{/* Background decoration */}
+			<div className="absolute inset-0 opacity-5">
+				<div className="absolute top-0 right-0 w-64 h-64 rounded-full bg-white blur-3xl translate-x-1/3 -translate-y-1/3" />
+			</div>
+
+			<div className="relative flex flex-col sm:flex-row items-center gap-6 sm:gap-10">
+				{/* Survival Score */}
+				<div className="text-center sm:text-left flex-shrink-0">
+					<p className="text-xs uppercase tracking-widest text-slate-400 mb-2">Max Survivable Crash</p>
+					<div className="flex items-baseline gap-1">
+						<span className={`text-7xl sm:text-8xl font-black tabular-nums tracking-tight ${colors.text} transition-colors duration-500`}>
+							{maxSurvivableDrawdown}
+						</span>
+						<span className={`text-3xl sm:text-4xl font-bold ${colors.text} opacity-70`}>%</span>
+					</div>
+					<p className="text-sm text-slate-400 mt-1">drawdown before forced selling</p>
+				</div>
+
+				{/* Divider */}
+				<div className="hidden sm:block w-px h-24 bg-slate-700/50" />
+
+				{/* Ruin test + key stats */}
+				<div className="flex-1 space-y-4">
+					{/* Ruin test badge */}
+					<div className={`inline-flex items-center gap-3 rounded-xl px-4 py-3 ${
+						ruinTestPassed
+							? "bg-emerald-500/10 border border-emerald-500/30"
+							: "bg-red-500/10 border border-red-500/30"
+					} transition-all duration-500`}>
+						<span className={`text-3xl ${ruinTestPassed ? "text-emerald-400" : "text-red-400"}`}>
+							{ruinTestPassed ? "\u2713" : "\u2717"}
+						</span>
+						<div>
+							<div className={`text-sm font-bold ${ruinTestPassed ? "text-emerald-400" : "text-red-400"}`}>
+								Ruin Test {ruinTestPassed ? "PASSED" : "FAILED"}
+							</div>
+							<div className="text-xs text-slate-400">
+								BTC -80% &amp; assets -40% simultaneously
+							</div>
+						</div>
+					</div>
+
+					{/* Key stats row */}
+					<div className="flex gap-6">
+						<div>
+							<p className="text-xs text-slate-500 uppercase tracking-wider">Worst-Case Runway</p>
+							<p className={`text-2xl font-bold tabular-nums ${
+								worstCase.runwayMonths >= 18 ? "text-emerald-400"
+								: worstCase.runwayMonths >= 6 ? "text-amber-400"
+								: "text-red-400"
+							} transition-colors duration-500`}>
+								{formatMonths(worstCase.runwayMonths)}
+								<span className="text-sm font-normal text-slate-500 ml-1">months</span>
+							</p>
+						</div>
+						<div>
+							<p className="text-xs text-slate-500 uppercase tracking-wider">Survival Threshold</p>
+							<p className="text-2xl font-bold text-slate-300">
+								18<span className="text-sm font-normal text-slate-500 ml-1">months</span>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/SurvivalSummary.tsx

@@ -0,0 +1,47 @@
+import type { SurvivalResult } from "../hooks/usePortfolio";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export function SurvivalSummary({ result }: { result: SurvivalResult; currencySymbol?: string }) {
+	const { maxSurvivableDrawdown, ruinTestPassed } = result;
+
+	return (
+		<Card className="border-slate-700 bg-slate-800/50 shadow-none">
+			<CardContent className="p-4 sm:p-6">
+				<div className="flex flex-col gap-4 sm:gap-0 sm:flex-row sm:items-center sm:justify-between">
+					<div>
+						<h3 className="text-base sm:text-lg font-semibold text-white mb-2 sm:mb-1">Survival Summary</h3>
+						<p className="text-xs sm:text-sm text-slate-300">
+							You survive down to a{" "}
+							<span
+								className={`font-bold text-lg sm:text-xl ${maxSurvivableDrawdown >= 70 ? "text-emerald-400" : maxSurvivableDrawdown >= 50 ? "text-amber-400" : "text-red-400"}`}
+							>
+								{maxSurvivableDrawdown}%
+							</span>{" "}
+							crash before needing to sell
+						</p>
+					</div>
+
+					<Badge
+						variant={ruinTestPassed ? "outline" : "destructive"}
+						className={`flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg flex-shrink-0 h-auto text-sm ${
+							ruinTestPassed
+								? "bg-emerald-900/30 border-emerald-500/50 text-emerald-400 hover:bg-emerald-900/30"
+								: "bg-red-900/30 border-red-500/50 text-red-400 hover:bg-red-900/30"
+						}`}
+					>
+						<span className="text-xl sm:text-2xl">
+							{ruinTestPassed ? "\u2713" : "\u2717"}
+						</span>
+						<div className="text-left">
+							<div className={`text-xs sm:text-sm font-bold ${ruinTestPassed ? "text-emerald-400" : "text-red-400"}`}>
+								Ruin Test {ruinTestPassed ? "PASSED" : "FAILED"}
+							</div>
+							<div className="text-xs text-slate-400 font-normal">BTC -80% + Assets -40%</div>
+						</div>
+					</Badge>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}