From 3e2c3bf9f379ff718358b01b0389e965fc8318bd Mon Sep 17 00:00:00 2001
From: aodulov <aodulov@totsystems.ru>
Date: Mon, 13 Oct 2025 15:21:32 +0300
Subject: [PATCH] 1.  Headings lined up. 2. Color scheme for results.

---
 .gitignore                                 |  3 +-
 backend/src/ws/index.ts                    |  3 +-
 frontend/src/components/ResultsDisplay.tsx | 16 +++++------
 frontend/src/hooks/useSession.ts           |  1 +
 frontend/src/pages/SessionPage.tsx         | 33 +++++++++++-----------
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/.gitignore b/.gitignore
index 95ef1f7..7d57d90 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /frontend/node_modules
 /backend/node_modules
-/.context
\ No newline at end of file
+/.context
+.env
\ No newline at end of file
diff --git a/backend/src/ws/index.ts b/backend/src/ws/index.ts
index 2139677..601db52 100644
--- a/backend/src/ws/index.ts
+++ b/backend/src/ws/index.ts
@@ -143,7 +143,7 @@ export const createWebSocketServer = (server: any) => {
             if (!sessionData.clients.has(clientId)) {
                 sessionData.clients.set(clientId, ws);
                 console.log(`Client ${clientId} registered for session: ${sessionId}. Total clients: ${sessionData.clients.size}`);
-                ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData) } }));
+                ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData, clientId) } }));
             }
 
             console.log(`Received message from ${clientId} in session ${sessionId}:`, type);
@@ -202,6 +202,7 @@ export const handleWebSocketMessage = async (ws: WebSocket, sessionId: string, p
 
     switch (type) {
         case 'REGISTER_CLIENT':
+            console.log(`Client ${clientId} registered successfully for session ${sessionId}.`);
             break;
 
         case 'SETUP_SESSION':
diff --git a/frontend/src/components/ResultsDisplay.tsx b/frontend/src/components/ResultsDisplay.tsx
index 5f034e3..cd4c90c 100644
--- a/frontend/src/components/ResultsDisplay.tsx
+++ b/frontend/src/components/ResultsDisplay.tsx
@@ -8,8 +8,8 @@ interface ResultsDisplayProps {
     decision: Decision;
 }
 
-const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean }>
-    = ({ title, desire, defaultExpanded = true }) => {
+const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean; borderColor?: string }>
+    = ({ title, desire, defaultExpanded = true, borderColor = '#e0e0e0' }) => {
         const [expanded, setExpanded] = React.useState(defaultExpanded);
 
         if (!desire) {
@@ -17,7 +17,7 @@ const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded
         }
 
         return (
-            <Box sx={{ mt: 3, border: '1px solid #e0e0e0', borderRadius: '4px', p: 2 }}>
+            <Box sx={{ mt: 3, border: `1px solid ${borderColor}`, borderRadius: '4px', p: 2 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <Typography variant="h6" component="h2" gutterBottom>
                         {title}
@@ -46,11 +46,11 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
                 Cooperative Decision
             </Typography>
 
-            <CategorySection title="Go-to" desire={decision.goTo} />
-            <CategorySection title="Also good" desire={decision.alsoGood} />
-            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} />
-            <CategorySection title="No-goes" desire={decision.noGoes} />
-            <CategorySection title="Needs discussion" desire={decision.needsDiscussion} />
+            <CategorySection title="Go-to" desire={decision.goTo} borderColor="#a5d6a7" /> {/* Pale Green */}
+            <CategorySection title="Also good" desire={decision.alsoGood} borderColor="#90caf9" /> {/* Pale Blue */}
+            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> {/* Grey (default) */}
+            <CategorySection title="Needs discussion" desire={decision.needsDiscussion} borderColor="#ffe082" /> {/* Pale Yellow */}
+            <CategorySection title="No-goes" desire={decision.noGoes} borderColor="#ef9a9a" /> {/* Pale Red */}
         </Box>
     );
 };
diff --git a/frontend/src/hooks/useSession.ts b/frontend/src/hooks/useSession.ts
index 8475ae6..a62b067 100644
--- a/frontend/src/hooks/useSession.ts
+++ b/frontend/src/hooks/useSession.ts
@@ -80,6 +80,7 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
         const handleMessage = (message: any) => {
             console.log('useSession: Processing incoming message:', message);
             if (message.type === 'STATE_UPDATE') {
+                console.log('useSession: Received STATE_UPDATE, session payload:', message.payload.session);
                 setSession(message.payload.session);
                 setError(null); // Clear error on successful state update
             } else if (message.type === 'ERROR') {
diff --git a/frontend/src/pages/SessionPage.tsx b/frontend/src/pages/SessionPage.tsx
index 2fc6d74..ef8b901 100644
--- a/frontend/src/pages/SessionPage.tsx
+++ b/frontend/src/pages/SessionPage.tsx
@@ -54,21 +54,11 @@ const SessionPage = () => {
     return (
         <Container maxWidth="md">
             <Box sx={{ mt: 4 }}>
-                {wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
-
-                <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 Desires Harmonization
+                    <Box sx={{ mt: 4, p: 3, textAlign: 'center' }}>
+                        <Typography variant="h5" component="h5" gutterBottom>
+                            Harmonize Desires
                         </Typography>
                         <TextField
                             margin="normal"
@@ -130,11 +120,20 @@ const SessionPage = () => {
                     </Box>
                 )}
 
-                {/* Session status is hidden as per FR-008 */}
                 {session.state !== SessionState.SETUP && (
-                    <Typography variant="h6" gutterBottom>
-                        Expected Responses: {session.expectedResponses}
-                    </Typography>
+                    <Box sx={{ mt: 2, p: 2, border: '1px solid #e0e0e0', borderRadius: '4px', backgroundColor: '#f5f5f5' }}>
+                <Typography variant="h4" component="h4" gutterBottom>
+                    {session.topic || session.sessionId}
+                </Typography>
+                        {session.description && (
+                            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                                Details: {session.description}
+                            </Typography>
+                        )}
+                        <Typography variant="body2" color="text.secondary">
+                            Expected Responses: {session.expectedResponses}
+                        </Typography>
+                    </Box>
                 )}
 
                 {session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (