Add HARVEY playground for demos

frontend/src/modules/harvey/components/ChatTranscript.tsx

@@ -1,9 +1,19 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Box, Typography, Paper, Button, Accordion, AccordionSummary, AccordionDetails, CircularProgress } from '@mui/material';
+import {
+  Box,
+  Typography,
+  Paper,
+  Button,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  CircularProgress,
+} from '@mui/material';
 import { grey, primary } from '../../core/theme/palette';
 
 import type { ChatMessage, PromptPreset } from '../types/types';
+import usePlayground from '../hooks/usePlayground';
 
 interface Props {
   messages: ChatMessage[];
@@ -13,22 +23,36 @@ interface Props {
 }
 
 function ChatTranscript({ messages, isLoading, promptPresets = [], onPresetSelect }: Props) {
+  const isPlaygroundEnabled = usePlayground();
+
+  const isPresetGalleyEnabled = !isPlaygroundEnabled && promptPresets.length > 0 && onPresetSelect;
+
   return (
     <Box sx={{ height: '100%', overflowY: 'auto', p: 2 }} aria-live="polite" aria-busy={isLoading}>
       {messages.length === 0 && !isLoading ? (
         <Box sx={{ textAlign: 'center', mt: 8 }}>
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h1" sx={{ fontSize: '3rem', mb: 2 }}>💬</Typography>
+            <Typography variant="h1" sx={{ fontSize: '3rem', mb: 2 }}>
+              💬
+            </Typography>
             <Typography variant="h4" sx={{ fontWeight: 600, mb: 2, color: grey[800] }}>
               Welcome to H.A.R.V.E.Y.
             </Typography>
             <Typography variant="body1" sx={{ color: grey[600] }}>
               Enabling seamless execution of the Pricing Intelligence Interpretation Process.
             </Typography>
           </Box>
-          {promptPresets.length > 0 && onPresetSelect && (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: '600px', mx: 'auto' }}>
-              {promptPresets.map((preset) => (
+          {isPresetGalleyEnabled && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                maxWidth: '600px',
+                mx: 'auto',
+              }}
+            >
+              {promptPresets.map(preset => (
                 <Button
                   key={preset.id}
                   variant="outlined"
@@ -41,8 +65,8 @@ function ChatTranscript({ messages, isLoading, promptPresets = [], onPresetSelec
                     borderColor: grey[300],
                     '&:hover': {
                       borderColor: primary[500],
-                      backgroundColor: primary[100]
-                    }
+                      backgroundColor: primary[100],
+                    },
                   }}
                 >
                   <Typography>{preset.label}</Typography>
@@ -52,14 +76,14 @@ function ChatTranscript({ messages, isLoading, promptPresets = [], onPresetSelec
           )}
         </Box>
       ) : null}
-      {messages.map((message) => (
+      {messages.map(message => (
         <Paper
           key={message.id}
           sx={{
             mb: 2,
             p: 2,
             backgroundColor: message.role === 'user' ? primary[100] : grey[100],
-            borderLeft: `4px solid ${message.role === 'user' ? primary[500] : grey[500]}`
+            borderLeft: `4px solid ${message.role === 'user' ? primary[500] : grey[500]}`,
           }}
         >
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
@@ -70,7 +94,12 @@ function ChatTranscript({ messages, isLoading, promptPresets = [], onPresetSelec
               {new Date(message.createdAt).toLocaleTimeString()}
             </Typography>
           </Box>
-          <Box sx={{ '& p': { mb: 1 }, '& pre': { backgroundColor: grey[200], p: 1, borderRadius: 1, overflowX: 'auto' } }}>
+          <Box
+            sx={{
+              '& p': { mb: 1 },
+              '& pre': { backgroundColor: grey[200], p: 1, borderRadius: 1, overflowX: 'auto' },
+            }}
+          >
             <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
           </Box>
           {message.metadata?.plan || message.metadata?.result ? (
@@ -81,16 +110,38 @@ function ChatTranscript({ messages, isLoading, promptPresets = [], onPresetSelec
               <AccordionDetails>
                 {message.metadata.plan ? (
                   <Box sx={{ mb: 2 }}>
-                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>Planner</Typography>
-                    <Box component="pre" sx={{ backgroundColor: grey[200], p: 1, borderRadius: 1, overflowX: 'auto', fontSize: '0.875rem' }}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                      Planner
+                    </Typography>
+                    <Box
+                      component="pre"
+                      sx={{
+                        backgroundColor: grey[200],
+                        p: 1,
+                        borderRadius: 1,
+                        overflowX: 'auto',
+                        fontSize: '0.875rem',
+                      }}
+                    >
                       {JSON.stringify(message.metadata.plan, null, 2)}
                     </Box>
                   </Box>
                 ) : null}
                 {message.metadata.result ? (
                   <Box>
-                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>Result</Typography>
-                    <Box component="pre" sx={{ backgroundColor: grey[200], p: 1, borderRadius: 1, overflowX: 'auto', fontSize: '0.875rem' }}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
+                      Result
+                    </Typography>
+                    <Box
+                      component="pre"
+                      sx={{
+                        backgroundColor: grey[200],
+                        p: 1,
+                        borderRadius: 1,
+                        overflowX: 'auto',
+                        fontSize: '0.875rem',
+                      }}
+                    >
                       {JSON.stringify(message.metadata.result, null, 2)}
                     </Box>
                   </Box>

frontend/src/modules/harvey/components/ContextManager.tsx

@@ -4,6 +4,7 @@ import { grey } from '../../core/theme/palette';
 
 import type { ContextInputType, PricingContextItem, UrlContextItemInput } from '../types/types';
 import ContextManagerItem from './ContextManagerItem';
+import usePlayground from '../hooks/usePlayground';
 
 interface Props {
   items: PricingContextItem[];
@@ -16,6 +17,7 @@ interface Props {
 function ContextManager({ items, detectedUrls, onAdd, onRemove, onClear }: Props) {
   const [urlInput, setUrlInput] = useState('');
   const [error, setError] = useState<string | null>(null);
+  const isPlaygroundEnabled = usePlayground()
 
   const availableDetected = useMemo(
     () =>
@@ -60,13 +62,13 @@ function ContextManager({ items, detectedUrls, onAdd, onRemove, onClear }: Props
           <Typography variant="body2" sx={{ color: grey[600] }}>
             Add URLs or YAML exports to ground H.A.R.V.E.Y.'s answers.
           </Typography>
-          <Alert severity="info" sx={{ mt: 1 }}>
+          {!isPlaygroundEnabled && <Alert severity="info" sx={{ mt: 1 }}>
             All pricings detected or added via URL will be modeled automatically; this process can
             take up to 30-60 minutes.
-          </Alert>
-          <Alert severity="warning" sx={{ mt: 1 }}>
+          </Alert>}
+          {!isPlaygroundEnabled && <Alert severity="warning" sx={{ mt: 1 }}>
             Due to temporary production limits, URL extraction might trigger a "LoadError". Please wait for the loading icon in the pricing context box to disappear; once complete, you can proceed to ask questions normally.
-          </Alert>
+          </Alert>}
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <Typography variant="body2" sx={{ color: grey[600] }}>
@@ -128,6 +130,7 @@ function ContextManager({ items, detectedUrls, onAdd, onRemove, onClear }: Props
           type="url"
           name="context-url"
           value={urlInput}
+          disabled={isPlaygroundEnabled}
           placeholder="https://example.com/pricing"
           onChange={event => {
             setUrlInput(event.target.value);
@@ -142,7 +145,7 @@ function ContextManager({ items, detectedUrls, onAdd, onRemove, onClear }: Props
           size="small"
           fullWidth
         />
-        <Button variant="contained" onClick={handleAddUrl}>
+        <Button disabled={isPlaygroundEnabled} variant="contained" onClick={handleAddUrl}>
           Add URL
         </Button>
       </Box>

frontend/src/modules/harvey/components/ContextManagerItem.tsx

@@ -3,6 +3,10 @@ import { PricingContextItem } from '../types/types';
 import { Box } from '@mui/system';
 import { grey } from '@mui/material/colors';
 import { OpenInNew } from '@mui/icons-material';
+import { usePreset } from '../hooks/usePreset';
+import usePlayground from '../hooks/usePlayground';
+import { UseCases } from '../use-cases';
+import { parseStringYamlToEncodedYaml } from '../../pricing-editor/services/export.service';
 
 const HARVEY_API_BASE_URL = import.meta.env.VITE_HARVEY_URL ?? 'http://localhost:8086';
 
@@ -47,6 +51,10 @@ function computeContextItemMetadata(pricingContextItem: PricingContextItem): str
 }
 
 function ContextManagerItem({ item, onRemove }: ContextManagerItemProps) {
+  const isPlaygroundEnabled = usePlayground();
+
+  const { preset } = usePreset();
+
   const formatSphereEditorLink = (url: string) => `/editor?pricingUrl=${url}`;
 
   const formatEditorLink = (): string => {
@@ -55,14 +63,35 @@ function ContextManagerItem({ item, onRemove }: ContextManagerItemProps) {
       case 'user':
       case 'detected':
       case 'agent':
-        return formatSphereEditorLink(`https:/${import.meta.env.VITE_SPHERE_URL}${HARVEY_API_BASE_URL}/static/${item.id}.yaml`);
+        return formatSphereEditorLink(
+          `https:/${import.meta.env.VITE_SPHERE_URL}${HARVEY_API_BASE_URL}/static/${item.id}.yaml`
+        );
       case 'sphere':
         return formatSphereEditorLink(item.yamlPath);
       default:
         return '#';
     }
   };
 
+  const formatPlaygroundModeLink = (): string => {
+
+    if (!preset) {
+      return '';
+    }
+
+    if (preset.id === UseCases.AMINT) {
+      const url =
+        'https://gist.githubusercontent.com/pgmarc/570f51424ef80fcb720f9bc656645a89/raw/549721cb3e7d14a6cc91555ab827e167dfa4f51c/protonmail-2026.yaml';
+      return formatSphereEditorLink(url);
+    }
+
+    if (item.kind === 'yaml') {
+      return `/editor?pricing=${parseStringYamlToEncodedYaml(item.value)}`;
+    }
+
+    return "#"
+  };
+
   const isSphereEditorLinkEnabled =
     item.kind === 'yaml' || (item.kind === 'url' && item.transform === 'done');
 
@@ -98,7 +127,7 @@ function ContextManagerItem({ item, onRemove }: ContextManagerItemProps) {
             size="small"
             variant="text"
             target="_blank"
-            href={formatEditorLink()}
+            href={!isPlaygroundEnabled ? formatEditorLink() : formatPlaygroundModeLink()}
             startIcon={<OpenInNew />}
           >
             Open in editor