ag/unisono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. Headings lined up. 2. Color scheme for results.

Browse Source
This commit is contained in:
aodulov
2025-10-13 15:21:32 +03:00
parent be858855c8
commit 3e2c3bf9f3
5 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/frontend/node_modules /frontend/node_modules
/backend/node_modules /backend/node_modules
/.context /.context
.env

3
backend/src/ws/index.ts
View File

@@ -143,7 +143,7 @@ export const createWebSocketServer = (server: any) => {
if (!sessionData.clients.has(clientId)) { if (!sessionData.clients.has(clientId)) {
sessionData.clients.set(clientId, ws); sessionData.clients.set(clientId, ws);
console.log(`Client ${clientId} registered for session: ${sessionId}. Total clients: ${sessionData.clients.size}`); 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); 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) { switch (type) {
case 'REGISTER_CLIENT': case 'REGISTER_CLIENT':
console.log(`Client ${clientId} registered successfully for session ${sessionId}.`);
break; break;
case 'SETUP_SESSION': case 'SETUP_SESSION':

16
frontend/src/components/ResultsDisplay.tsx
View File

@@ -8,8 +8,8 @@ interface ResultsDisplayProps {
decision: Decision; decision: Decision;
} }
const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean }> const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean; borderColor?: string }>
= ({ title, desire, defaultExpanded = true }) => { = ({ title, desire, defaultExpanded = true, borderColor = '#e0e0e0' }) => {
const [expanded, setExpanded] = React.useState(defaultExpanded); const [expanded, setExpanded] = React.useState(defaultExpanded);
if (!desire) { if (!desire) {
@@ -17,7 +17,7 @@ const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded
} }
return ( 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' }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography variant="h6" component="h2" gutterBottom> <Typography variant="h6" component="h2" gutterBottom>
{title} {title}
@@ -46,11 +46,11 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
Cooperative Decision Cooperative Decision
</Typography> </Typography>
<CategorySection title="Go-to" desire={decision.goTo} /> <CategorySection title="Go-to" desire={decision.goTo} borderColor="#a5d6a7" /> {/* Pale Green */}
<CategorySection title="Also good" desire={decision.alsoGood} /> <CategorySection title="Also good" desire={decision.alsoGood} borderColor="#90caf9" /> {/* Pale Blue */}
<CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> {/* Grey (default) */}
<CategorySection title="No-goes" desire={decision.noGoes} /> <CategorySection title="Needs discussion" desire={decision.needsDiscussion} borderColor="#ffe082" /> {/* Pale Yellow */}
<CategorySection title="Needs discussion" desire={decision.needsDiscussion} /> <CategorySection title="No-goes" desire={decision.noGoes} borderColor="#ef9a9a" /> {/* Pale Red */}
</Box> </Box>
); );
}; };

1
frontend/src/hooks/useSession.ts
View File

@@ -80,6 +80,7 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
const handleMessage = (message: any) => { const handleMessage = (message: any) => {
console.log('useSession: Processing incoming message:', message); console.log('useSession: Processing incoming message:', message);
if (message.type === 'STATE_UPDATE') { if (message.type === 'STATE_UPDATE') {
console.log('useSession: Received STATE_UPDATE, session payload:', message.payload.session);
setSession(message.payload.session); setSession(message.payload.session);
setError(null); // Clear error on successful state update setError(null); // Clear error on successful state update
} else if (message.type === 'ERROR') { } else if (message.type === 'ERROR') {

33
frontend/src/pages/SessionPage.tsx
View File

@@ -54,21 +54,11 @@ const SessionPage = () => {
return ( return (
<Container maxWidth="md"> <Container maxWidth="md">
<Box sx={{ mt: 4 }}> <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 && ( {session.state === SessionState.SETUP && (
<Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}> <Box sx={{ mt: 4, p: 3, textAlign: 'center' }}>
<Typography variant="h6" component="p" gutterBottom> <Typography variant="h5" component="h5" gutterBottom>
Set Up Desires Harmonization Harmonize Desires
</Typography> </Typography>
<TextField <TextField
margin="normal" margin="normal"
@@ -130,11 +120,20 @@ const SessionPage = () => {
</Box> </Box>
)} )}
{/* Session status is hidden as per FR-008 */}
{session.state !== SessionState.SETUP && ( {session.state !== SessionState.SETUP && (
<Typography variant="h6" gutterBottom> <Box sx={{ mt: 2, p: 2, border: '1px solid #e0e0e0', borderRadius: '4px', backgroundColor: '#f5f5f5' }}>
Expected Responses: {session.expectedResponses} <Typography variant="h4" component="h4" gutterBottom>
</Typography> {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 && ( {session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (