\n \n

\n Waiting for capsule details...\n

\n \n );\n}\n\nexport function CapsuleOverviewWidget() {\n const data = useToolOutput();\n const theme = useTheme();\n const isDark = theme === \"dark\";\n\n if (!data || data.kind !== \"capsule_overview\") {\n return ;\n }\n\n const { capsule } = data;\n const overallProgress =\n capsule.totalBudget <= 0\n ? 0\n : Math.min(100, Math.round((capsule.totals.overall.spend / capsule.totalBudget) * 100));\n\n async function handleGenerateList() {\n await getOpenAI()?.sendFollowUpMessage({\n prompt: `Run the capsule_generate_list tool for capsule ${capsule.capsuleId} to finalize the shopping list.`,\n });\n }\n\n const containerClasses = `max-w-3xl mx-auto p-6 lg:p-8 rounded-2xl shadow-lg transition-colors ${\n isDark ? \"bg-gray-900 text-gray-100\" : \"bg-white text-gray-900\"\n }`;\n\n const secondaryText = isDark ? \"text-gray-300\" : \"text-gray-600\";\n\n return (\n

\n Capsule ID - {capsule.capsuleId}\n

{capsule.title}

\n {`Style: ${capsule.style.replaceAll(\"_\", \" \")}`} | {`Season: ${capsule.season}`} |{\" \"}\n {`Audience: ${capsule.gender}`}\n

\n\n

\n \n Generate Shopping List\n \n

\n Recommended budget ${capsule.recommendedBudget.toFixed(0)} | Working budget $\n {capsule.totalBudget.toFixed(0)}\n

\n\n \n

Budget Snapshot

\n Allocated: ${capsule.allocatedBudget.toFixed(0)} | Remaining buffer: $\n {capsule.remainingBudget.toFixed(0)}\n

\n\n

\n Overall Allocation\n {overallProgress}%\n

\n\n

Must-have spend: \n ${capsule.totals.mustHave.spend.toFixed(0)}\n
Nice-to-have spend: \n ${capsule.totals.niceToHave.spend.toFixed(0)}\n
Remaining Flex: \n ${capsule.remainingBudget.toFixed(0)}\n

\n \n\n

Category Breakdown

\n {capsule.categories.map((category) => {\n const percent = Math.min(100, Math.round(category.progress * 100));\n const overBudget = category.remaining < 0;\n\n return (\n \n

{category.label}

\n Budget ${category.allocatedBudget.toFixed(0)} | Planned spend $\n {category.spend.toFixed(0)}\n

\n \n {overBudget\n ? `Over by $${Math.abs(category.remaining).toFixed(0)}`\n : `Buffer $${category.remaining.toFixed(0)}`}\n \n

\n\n

\n \n

\n\n

\n {item.name}\n
\n {item.name}\n

{capsule.title}

Budget Snapshot

Category Breakdown

{category.label}

Planner Notes

Preference Highlights