From 609c4f617fa6913b0e6b97146810abd57ea516a3 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 4 Jun 2026 04:02:05 -0700
Subject: [PATCH] [eric] overlays: extract PlanPickerModal from MessageBubble
 for reuse

---
 .../components/overlays/PlanPickerModal.tsx   | 81 +++++++++++++++++++
 .../pages/AgentChat/bubbles/MessageBubble.tsx | 44 ++--------
 2 files changed, 89 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/app/components/overlays/PlanPickerModal.tsx

diff --git a/frontend/src/app/components/overlays/PlanPickerModal.tsx b/frontend/src/app/components/overlays/PlanPickerModal.tsx
new file mode 100644
index 00000000..0e1321be
--- /dev/null
+++ b/frontend/src/app/components/overlays/PlanPickerModal.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import PlanPicker from './PlanPicker';
+import type {
+  OpenSwarmPlan,
+  CheckoutSource,
+} from '@/shared/subscription/checkout';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: string;
+  source: CheckoutSource;
+  defaultPlan?: OpenSwarmPlan;
+  currentPlan?: OpenSwarmPlan;
+  onSubscribed?: (plan: OpenSwarmPlan) => void;
+}
+
+/** Centered modal around the compact PlanPicker; keeps pricing out of the page flow until asked for. */
+const PlanPickerModal: React.FC<Props> = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  source,
+  defaultPlan,
+  currentPlan,
+  onSubscribed,
+}) => {
+  const c = useClaudeTokens();
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}
+    >
+      <Box sx={{
+        width: 460, maxWidth: '100%',
+        maxHeight: '90vh', overflowY: 'auto',
+        bgcolor: c.bg.surface, borderRadius: `${c.radius.xl}px`,
+        border: `1px solid ${c.border.subtle}`,
+        p: 3, outline: 'none',
+        boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
+      }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1.5 }}>
+          <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
+            {title}
+          </Typography>
+          <IconButton
+            size="small"
+            onClick={onClose}
+            sx={{ color: c.text.tertiary }}
+            aria-label="Close"
+          >
+            <CloseIcon sx={{ fontSize: 18 }} />
+          </IconButton>
+        </Box>
+        {subtitle && (
+          <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 2 }}>
+            {subtitle}
+          </Typography>
+        )}
+        <PlanPicker
+          source={source}
+          defaultPlan={defaultPlan}
+          currentPlan={currentPlan}
+          compact
+          onSubscribed={onSubscribed}
+        />
+      </Box>
+    </Modal>
+  );
+};
+
+export default PlanPickerModal;
diff --git a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
index 5656c969..e8275c9c 100644
--- a/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
+++ b/frontend/src/app/pages/AgentChat/bubbles/MessageBubble.tsx
@@ -24,7 +24,7 @@ import { shallowEqual } from 'react-redux';
 import { useAppDispatch, useAppSelector } from '@/shared/hooks';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { SKILL_COLOR } from '@/app/components/editor/richEditorUtils';
-import PlanPicker from '@/app/components/overlays/PlanPicker';
+import PlanPickerModal from '@/app/components/overlays/PlanPickerModal';
 import { ErrorSlime } from '@/app/components/feedback/ErrorSlime';
 
 const streamingCursorKeyframes = `
@@ -1189,43 +1189,15 @@ const MessageBubble: React.FC<Props> = React.memo(({ message, editing = false, o
         )}
       </Box>
 
-      <Modal
+      <PlanPickerModal
         open={pickerOpen}
         onClose={() => setPickerOpen(false)}
-        sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}
-      >
-        <Box sx={{
-          width: 460, maxWidth: '100%',
-          maxHeight: '90vh', overflowY: 'auto',
-          bgcolor: c.bg.surface, borderRadius: `${c.radius.xl}px`,
-          border: `1px solid ${c.border.subtle}`,
-          p: 3, outline: 'none',
-          boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
-        }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 1.5 }}>
-            <Typography sx={{ fontSize: '1.05rem', fontWeight: 700, color: c.text.primary }}>
-              Upgrade your plan
-            </Typography>
-            <IconButton
-              size="small"
-              onClick={() => setPickerOpen(false)}
-              sx={{ color: c.text.tertiary }}
-              aria-label="Close"
-            >
-              <CloseIcon sx={{ fontSize: 18 }} />
-            </IconButton>
-          </Box>
-          <Typography sx={{ fontSize: '0.75rem', color: c.text.muted, mb: 2 }}>
-            Pick a plan to keep going. Cancel anytime from Stripe.
-          </Typography>
-          <PlanPicker
-            source="upgrade_cta"
-            defaultPlan="pro_plus"
-            compact
-            onSubscribed={() => setPickerOpen(false)}
-          />
-        </Box>
-      </Modal>
+        title="Upgrade your plan"
+        subtitle="Pick a plan to keep going. Cancel anytime from Stripe."
+        source="upgrade_cta"
+        defaultPlan="pro_plus"
+        onSubscribed={() => setPickerOpen(false)}
+      />
     </Box>
   );
 });