chat + maps + ai + tools

packages/client/src/components/landing-component/LandingComponent.tsx

@@ -2,8 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React, { useState } from 'react';
 
 import { BevyScene } from './BevyScene.tsx';
-import { MatrixRain } from './MatrixRain.tsx';
-import Particles from './Particles.tsx';
+import Map from './Map.tsx';
 import Tweakbox from './Tweakbox.tsx';
 
 export const LandingComponent: React.FC = () => {
@@ -13,6 +12,9 @@ export const LandingComponent: React.FC = () => {
   const [glow, setGlow] = useState(false);
   const [matrixRain, setMatrixRain] = useState(false);
   const [bevyScene, setBevyScene] = useState(true);
+  const [mapActive, setMapActive] = useState(false);
+
+  const map = <Map visible={mapActive} />;
 
   return (
     <Box
@@ -25,27 +27,18 @@ export const LandingComponent: React.FC = () => {
     >
       <Box
         position="fixed"
-        bottom="24px"
-        right="24px"
+        bottom="100x"
+        right="12px"
         maxWidth="300px"
         minWidth="200px"
         zIndex={1000}
       >
         <Tweakbox
           sliders={{
-            speed: {
-              value: !particles ? speed : 0.99,
-              onChange: setSpeed,
-              label: 'Animation Speed',
-              min: 0.01,
-              max: 0.99,
-              step: 0.01,
-              ariaLabel: 'animation-speed',
-            },
             intensity: {
               value: !particles ? intensity : 0.99,
               onChange: setIntensity,
-              label: 'Effect Intensity',
+              label: 'Brightness',
               min: 0.01,
               max: 0.99,
               step: 0.01,
@@ -53,50 +46,35 @@ export const LandingComponent: React.FC = () => {
             },
           }}
           switches={{
-            particles: {
-              value: particles,
-              onChange(enabled) {
-                if (enabled) {
-                  setMatrixRain(!enabled);
-                  setBevyScene(!enabled);
-                }
-                setParticles(enabled);
-              },
-              label: 'Particles',
-            },
-            matrixRain: {
-              value: matrixRain,
-              onChange(enabled) {
-                if (enabled) {
-                  setParticles(!enabled);
-                  setBevyScene(!enabled);
-                }
-                setMatrixRain(enabled);
-              },
-              label: 'Matrix Rain',
-            },
             bevyScene: {
               value: bevyScene,
               onChange(enabled) {
                 if (enabled) {
                   setParticles(!enabled);
                   setMatrixRain(!enabled);
+                  setMapActive(!enabled);
                 }
                 setBevyScene(enabled);
               },
-              label: 'Bevy Scene',
+              label: 'Instruments',
             },
-            glow: {
-              value: glow,
-              onChange: setGlow,
-              label: 'Glow Effect',
+            GpsMap: {
+              value: mapActive,
+              onChange(enabled) {
+                if (enabled) {
+                  setParticles(!enabled);
+                  setMatrixRain(!enabled);
+                  setBevyScene(!enabled);
+                }
+                setMapActive(enabled);
+              },
+              label: 'Map',
             },
           }}
         />
       </Box>
       <BevyScene speed={speed} intensity={intensity} glow={glow} visible={bevyScene} />
-      <MatrixRain speed={speed} intensity={intensity} glow={glow} visible={matrixRain} />
-      <Particles glow speed={speed} intensity={intensity} visible={particles} />
+      {mapActive && map}
     </Box>
   );
 };

packages/client/src/components/landing-component/Map.tsx

@@ -0,0 +1,98 @@
+import ReactMap from 'react-map-gl/mapbox'; // ↔ v5+ uses this import path
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { Box, HStack, Button, Input, Center } from '@chakra-ui/react';
+import { useState, useEffect, useCallback } from 'react';
+
+// Types for bevy_flurx_ipc communication
+interface GpsPosition {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+}
+
+interface VesselStatus {
+  latitude: number;
+  longitude: number;
+  heading: number;
+  speed: number;
+}
+
+interface MapViewParams {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+}
+
+interface AuthParams {
+  authenticated: boolean;
+  token: string | null;
+}
+
+// public key
+const key =
+  'cGsuZXlKMUlqb2laMlZ2Wm1aelpXVWlMQ0poSWpvaVkycDFOalo0YkdWNk1EUTRjRE41YjJnNFp6VjNNelp6YXlKOS56LUtzS1l0X3VGUGdCSDYwQUFBNFNn';
+
+function Map(props: { visible: boolean }) {
+  const [mapboxToken, setMapboxToken] = useState(atob(key));
+  const [isTokenLoading, setIsTokenLoading] = useState(false);
+  const [authenticated, setAuthenticated] = useState(false);
+
+  useEffect(() => {
+    setAuthenticated(true);
+    setIsTokenLoading(false);
+  }, []);
+
+  const [mapView, setMapView] = useState({
+    longitude: -122.4,
+    latitude: 37.8,
+    zoom: 14,
+  });
+
+  const handleNavigationClick = useCallback(async () => {
+    console.log('handling navigation in map');
+  }, []);
+
+  const handleSearchClick = useCallback(async () => {
+    console.log('handling click search in map');
+  }, []);
+
+  const handleMapViewChange = useCallback(async (evt: any) => {
+    const { longitude, latitude, zoom } = evt.viewState;
+    setMapView({ longitude, latitude, zoom });
+  }, []);
+
+  return (
+    <Box
+      p={4}
+      height="80%"
+      width="100%"
+      position="relative"
+      display={props.visible ? undefined : 'none'}
+    >
+      <Box width={'100%'} height={'100%'} position="relative" zIndex={0}>
+        {/* Map itself */}
+        {authenticated && (
+          <ReactMap
+            mapboxAccessToken={mapboxToken}
+            initialViewState={mapView}
+            onMove={handleMapViewChange}
+            mapStyle="mapbox://styles/mapbox/dark-v11"
+            attributionControl={false}
+            style={{ width: '100%', height: '100%' }} // let the wrapper dictate size
+          />
+        )}
+      </Box>
+      {/* Button bar — absolutely positioned inside the wrapper */}
+      <HStack position="relative" top={1} right={4} zIndex={1} justify={'right'}>
+        <Button size="sm" variant="solid" onClick={handleNavigationClick}>
+          Navigation
+        </Button>
+        <Button size="sm" variant="solid" onClick={handleSearchClick}>
+          Search
+        </Button>
+      </HStack>
+    </Box>
+  );
+}
+
+export default Map;

packages/client/src/layout/Hero.tsx

@@ -10,7 +10,7 @@ export default function Hero() {
   const isMobile = useIsMobile();
 
   return (
-    <Box p={2}>
+    <Box p={2} mt={2}>
       <Box>
         <Heading
           textAlign={isMobile ? 'left' : 'right'}

packages/client/src/pages/index/+Page.tsx

@@ -1,6 +1,7 @@
-import { Stack } from '@chakra-ui/react';
+import { Grid, GridItem, Stack } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
+import Chat from '../../components/chat/Chat.tsx';
 import { LandingComponent } from '../../components/landing-component/LandingComponent.tsx';
 import clientChatStore from '../../stores/ClientChatStore';
 
@@ -15,11 +16,14 @@ export default function IndexPage() {
       // Fall back to default model
     }
   }, []);
-
   return (
-    <Stack direction="column" height="100%" width="100%" spacing={0}>
-      <LandingComponent />
-      {/*<Chat height="100%" width="100%" />*/}
-    </Stack>
+    <Grid templateColumns="repeat(2, 1fr)" height="100%" width="100%" gap={0}>
+      <GridItem>
+        <LandingComponent />
+      </GridItem>
+      <GridItem p={2}>
+        <Chat />
+      </GridItem>
+    </Grid>
   );
 }

packages/client/src/static-data/welcome_home_text.ts

@@ -1,7 +1,7 @@
 export const welcome_home_text = `
-# welcome!
+# yachtpit-ai
 ---
-Please enjoy [responsibly](https://centerforresponsible.ai/the-center)
+
 <br/>
 <br/>
 `;