nice main thing coming along

packages/desktop/src/tree/MainPanel.tsx

@@ -0,0 +1,46 @@
+import { Container, Grid, Typography } from '@mui/material';
+import React, { useMemo } from 'react';
+
+// import ConversationDetails from './ConversationDetails';
+import { blueGrey } from '@mui/material/colors';
+import useAuth from '../providers/AuthProvider';
+import useConversations from '../providers/ConversationProvider';
+import { useRendersCount } from 'react-use';
+import useTerminal from './Terminal';
+
+export default function MainPanel() {
+  const { user } = useAuth();
+
+  const { selectedConversation } = useConversations();
+
+  // if selected conversation, show details
+  // do all fetching necessary to paint things here
+  // join the call so to speak
+
+  // show who is
+
+  const rendersCount = useRendersCount();
+  console.warn('RENDER COUNT | MAINPANEL | ', rendersCount);
+
+  // if (selectedConversation) return <ConversationDetails />;
+
+  return (
+    <Container
+      maxWidth={false}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 2,
+        flex: 1,
+        background: 'white',
+      }}
+    >
+      <Typography variant="h6">{`Hi ${user.givenName?.split(' ')[0] ?? 'there'}!`}</Typography>
+      <Typography variant="caption" align="center">
+        Start a conversation with one tap <br /> or just take a breather.
+      </Typography>
+    </Container>
+  );
+}

packages/desktop/src/tree/Terminal.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, Grid } from '@mui/material';
 
 import { ConversationList } from './ConversationList';
+import MainPanel from './MainPanel';
 import Navbar from './Navbar';
 import NewConversationDialog from './NewConversationDialog';
 import React from 'react';
@@ -40,8 +41,17 @@ export default function Terminal() {
           </Box>
         </Grid>
 
-        <Grid item xs={8} sx={{ bgcolor: 'white' }}>
-          main panel
+        <Grid
+          item
+          xs={8}
+          sx={{
+            backgroundColor: 'white',
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: '100vh',
+          }}
+        >
+          <MainPanel />
         </Grid>
       </Grid>