Session Details implemented

frontend/src/components/ResultsDisplay.tsx

@@ -48,7 +48,7 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
 
             <CategorySection title="Go-to" desire={decision.goTo} />
             <CategorySection title="Also good" desire={decision.alsoGood} />
-            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={false} />
+            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} />
             <CategorySection title="No-goes" desire={decision.noGoes} />
             <CategorySection title="Needs discussion" desire={decision.needsDiscussion} />
         </Box>

frontend/src/hooks/useSession.ts

@@ -43,6 +43,7 @@ export interface Session {
     responses: { [clientId: string]: DesireSet }; // Map of clientId to their submitted DesireSet
     finalResult: Decision | null;
     topic?: string; // This might be part of the initial setup payload
+    description?: string; // Add description field
 }
 
 // Utility to generate a persistent client ID

frontend/src/pages/SessionPage.tsx

@@ -10,10 +10,21 @@ const SessionPage = () => {
     const { sessionId } = useParams<{ sessionId: string }>();
     const [session, setSession, sendMessage, clientId, wsError] = useSession(sessionId || '');
     const [expectedResponses, setExpectedResponses] = useState(2);
+    const [expectedResponsesError, setExpectedResponsesError] = useState(false);
     const [topic, setTopic] = useState('');
+    const [topicError, setTopicError] = useState(false);
+    const [description, setDescription] = useState('');
 
     const handleSetupSession = () => {
-        sendMessage({ type: 'SETUP_SESSION', payload: { expectedResponses, topic } });
+        if (!topic.trim()) {
+            setTopicError(true);
+            return;
+        }
+        if (expectedResponses < 2 || expectedResponses > 12) {
+            setExpectedResponsesError(true);
+            return;
+        }
+        sendMessage({ type: 'SETUP_SESSION', payload: { expectedResponses, topic, description } });
     };
 
     const handleSubmitDesires = (desires: { wants: string[], accepts: string[], noGoes: string[], afraidToAsk: string }) => {
@@ -48,21 +59,45 @@ const SessionPage = () => {
                 <Typography variant="h4" component="h1" gutterBottom>
                     {session.topic || session.sessionId}
                 </Typography>
+                {session.description && (
+                    <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+                        {session.description}
+                    </Typography>
+                )}
 
                 {session.state === SessionState.SETUP && (
                     <Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
                         <Typography variant="h6" component="p" gutterBottom>
-                            Set Up Session
+                            Set Up Desires Harmonization
                         </Typography>
                         <TextField
                             margin="normal"
                             fullWidth
                             id="topic"
-                            label="Session Topic"
+                            label="Topic"
                             name="topic"
                             autoFocus
+                            required
                             value={topic}
-                            onChange={(e) => setTopic(e.target.value)}
+                            onChange={(e) => {
+                                setTopic(e.target.value);
+                                setTopicError(!e.target.value.trim());
+                            }}
+                            error={topicError}
+                            helperText={topicError ? 'Topic is required' : ''}
+                        />
+                        <TextField
+                            margin="normal"
+                            fullWidth
+                            id="description"
+                            label="Details (Optional)"
+                            name="description"
+                            multiline
+                            rows={3}
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            inputProps={{ maxLength: 500 }}
+                            helperText={`Provide more details about what should be addressed in this session (max 500 characters). ${description.length}/500`}
                         />
                         <TextField
                             margin="normal"
@@ -73,9 +108,15 @@ const SessionPage = () => {
                             type="number"
                             id="expectedResponses"
                             value={expectedResponses}
-                            onChange={(e) => setExpectedResponses(parseInt(e.target.value, 10))}
+                            onChange={(e) => {
+                                const value = parseInt(e.target.value, 10);
+                                setExpectedResponses(value);
+                                setExpectedResponsesError(value < 2 || value > 12);
+                            }}
+                            error={expectedResponsesError}
+                            helperText={expectedResponsesError ? 'Must be an integer between 2 and 12' : 'Enter the number of participants expected (min 2, max 12)'}
                             InputProps={{
-                                inputProps: { min: 1 }
+                                inputProps: { min: 1, max: 12 }
                             }}
                         />
                         <Button