Add context to scenarios in simulation

apps/rowboat/app/actions/scenario_actions.ts

@@ -20,6 +20,7 @@ export async function createScenario(projectId: string, name: string, descriptio
         projectId,
         name,
         description,
+        context: '',  // Always empty string
         lastUpdatedAt: now,
         createdAt: now,
     });

apps/rowboat/app/actions/simulation_actions.ts

@@ -44,6 +44,7 @@ export async function createScenario(projectId: string, name: string, descriptio
         projectId,
         name,
         description,
+        context: '',
         lastUpdatedAt: now,
         createdAt: now,
     });
@@ -54,7 +55,7 @@ export async function createScenario(projectId: string, name: string, descriptio
 export async function updateScenario(
     projectId: string,
     scenarioId: string,
-    updates: { name?: string; description?: string }
+    updates: { name?: string; description?: string; context?: string }
 ): Promise<void> {
     await projectAuthCheck(projectId);
 

apps/rowboat/app/lib/types.ts

@@ -12,12 +12,14 @@ export const Scenario = z.object({
     projectId: z.string(),
     name: z.string().min(1, "Name cannot be empty"),
     description: z.string().min(1, "Description cannot be empty"),
+    context: z.string().default(''),
     createdAt: z.string().datetime(),
     lastUpdatedAt: z.string().datetime(),
 });
 
 export const SimulationScenarioData = z.object({
     scenario: z.string(),
+    context: z.string().default(''),
 });
 
 export const SimulationChatMessagesData = z.object({

apps/rowboat/app/projects/[projectId]/playground/app.tsx

@@ -53,6 +53,7 @@ export function App({
             messages: [],
             simulated: true,
             simulationData: data,
+            systemMessage: 'context' in data ? data.context : '',
         });
     }, [counter, projectId]);
 
@@ -62,7 +63,10 @@ export function App({
             console.log('Scenario Effect triggered:', { scenarioId, projectId });
             getScenario(projectId, scenarioId).then((scenario) => {
                 console.log('Scenario data received:', scenario);
-                beginSimulation(scenario as z.infer<typeof SimulationScenarioData>);
+                beginSimulation({
+                    ...scenario,
+                    systemMessage: scenario.context || '',
+                } as z.infer<typeof SimulationScenarioData>);
                 localStorage.removeItem('pendingScenarioId');
             }).catch(error => {
                 console.error('Error fetching scenario:', error);

apps/rowboat/app/projects/[projectId]/playground/scenario-list.tsx

@@ -110,6 +110,7 @@ export function ScenarioList({
                 _id: tmpId,
                 name,
                 description,
+                context: '',
                 projectId,
                 createdAt: new Date().toISOString(),
                 lastUpdatedAt: new Date().toISOString(),
@@ -120,6 +121,7 @@ export function ScenarioList({
                 _id: id,
                 name,
                 description,
+                context: '',
                 projectId,
                 createdAt: new Date().toISOString(),
                 lastUpdatedAt: new Date().toISOString(),
@@ -135,7 +137,11 @@ export function ScenarioList({
 
     async function handleEditScenario(scenarioId: string, name: string, description: string) {
         setSaving(true);
-        setScenarios(scenarios.map(scenario => scenario._id === scenarioId ? { ...scenario, name, description } : scenario));
+        setScenarios(scenarios.map(scenario => 
+            scenario._id === scenarioId 
+                ? { ...scenario, name, description, context: scenario.context }
+                : scenario
+        ));
         await updateScenario(projectId, scenarioId, name, description);
         setSaving(false);
     }

apps/rowboat/app/projects/[projectId]/playground/simulation-options.tsx

@@ -57,6 +57,7 @@ export function SimulateScenarioOption({
             projectId={projectId}
             onPlay={(scenario) => beginSimulation({
                 scenario: scenario.description,
+                context: scenario.context,
             })}
         />
     );

apps/rowboat/app/projects/[projectId]/simulation/app.tsx

@@ -95,6 +95,7 @@ export default function SimulationApp() {
       {
         name: updatedScenario.name,
         description: updatedScenario.description,
+        context: updatedScenario.context,
       }
     );
     // Refresh scenarios list
@@ -435,6 +436,13 @@ function ScenarioViewer({
         
         <div className="border-t border-gray-200 my-4"></div>
         
+        <div className="flex flex-col">
+          <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">CONTEXT</div>
+          <div className="text-base whitespace-pre-wrap">{scenario.context}</div>
+        </div>
+        
+        <div className="border-t border-gray-200 my-4"></div>
+        
         <div className="flex flex-col">
           <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">DESCRIPTION</div>
           <div className="text-base whitespace-pre-wrap">{scenario.description}</div>
@@ -454,6 +462,7 @@ function ScenarioEditor({
   onCancel: () => void;
 }) {
   const [name, setName] = useState(scenario.name);
+  const [context, setContext] = useState(scenario.context || '');
   const [description, setDescription] = useState(scenario.description);
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -461,6 +470,7 @@ function ScenarioEditor({
     onSave({
       ...scenario,
       name,
+      context,
       description,
     });
   };
@@ -499,6 +509,18 @@ function ScenarioEditor({
 
         <div className="border-t border-gray-200 my-4"></div>
 
+        <div>
+          <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">CONTEXT</div>
+          <textarea
+            value={context}
+            onChange={(e) => setContext(e.target.value)}
+            rows={4}
+            className="mt-1 block w-full rounded-md border-2 border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 px-3 py-2"
+          />
+        </div>
+
+        <div className="border-t border-gray-200 my-4"></div>
+
         <div>
           <div className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">DESCRIPTION</div>
           <textarea