Add lat long. Refactor.

src/App.tsx

@@ -2,8 +2,9 @@ import { useState } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Provider as JotaiProvider } from "jotai";
 import { Home } from "./Home.tsx";
+import { Autonomy } from "./Autonomy.tsx";
 import { Version } from "./Version.tsx";
-import { Network } from "./Network.tsx";
+import { WhoAmI } from "./WhoAmI.tsx";
 import "./App.css";
 
 function App() {
@@ -26,13 +27,17 @@ const router = createBrowserRouter([
     element: <Home />,
   },
   {
-    path: "/network",
-    element: <Network />,
+    path: "/whoami",
+    element: <WhoAmI />,
   },
   {
     path: "/version",
     element: <Version />,
   },
+  {
+    path: "/autonomy",
+    element: <Autonomy />,
+  },
 ]);
 
 export default App;

src/AppNav.tsx

@@ -6,7 +6,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          N-DRIVE
+          J7s-Bridge
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">
@@ -17,8 +17,11 @@ export function AppNav() {
             <Nav.Link as={Link} to="/version">
               Version
             </Nav.Link>
-            <Nav.Link as={Link} to="/network">
-              Network
+            <Nav.Link as={Link} to="/whoami">
+              WhoAmI
+            </Nav.Link>
+            <Nav.Link as={Link} to="/autonomy">
+              Autonomy
             </Nav.Link>
           </Nav>
         </Navbar.Collapse>
@@ -28,5 +31,5 @@ export function AppNav() {
 }
 
 export function Footer() {
-  return <p className="footer">Made with {"<3"} by James Pace.</p>;
+  return <p className="footer">Copyright 2026 James Pace</p>;
 }

src/Autonomy.tsx

@@ -0,0 +1,97 @@
+import { AppNav, Footer } from "./AppNav.tsx";
+import { Container, Row, Col, Image, Card } from "react-bootstrap";
+import { atom, useAtomValue } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+
+const costmapImageQuery = async () => {
+  const resp = await fetch("api/costmap_image");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  const blob = await resp.blob();
+  return URL.createObjectURL(blob);
+};
+const costmapImageQueryAtom = atomWithQuery(() => ({
+  queryKey: ["costmap_image"],
+  queryFn: costmapImageQuery,
+  refetchInterval: 1000, // 1s
+}));
+const costmapImageAtom = atom((get) => {
+  const response = get(costmapImageQueryAtom);
+  if (response.isPending) {
+    return <p>"Loading..."</p>;
+  }
+  if (response.isError) {
+    return <p>"Error loading!"</p>;
+  }
+  const costmapStyle = {
+    minHeight: "65svb",
+  };
+  return <Image src={response.data} fluid style={costmapStyle} />;
+});
+
+const statusStringQuery = async () => {
+  const resp = await fetch("api/status");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return resp.json();
+};
+const statusStringQueryAtom = atomWithQuery(() => ({
+  queryKey: ["status_string"],
+  queryFn: statusStringQuery,
+  refetchInterval: 500, // 0.5s
+}));
+const statusStringAtom = atom((get) => {
+  const response = get(statusStringQueryAtom);
+  if (response.isPending || response.isError || !response.data.status) {
+    return "N/A";
+  }
+  return response.data.message;
+});
+
+const latLongQuery = async () => {
+  const resp = await fetch("api/position");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return resp.json();
+};
+const latLongQueryAtom = atomWithQuery(() => ({
+  queryKey: ["latlong"],
+  queryFn: latLongQuery,
+  refetchInterval: 500, // 0.5s
+}));
+const latLongAtom = atom((get) => {
+  const response = get(latLongQueryAtom);
+  if (response.isPending || response.isError || !response.data.status) {
+    return "N/A";
+  }
+  return `(${response.data.latitude}, ${response.data.longitude})`;
+});
+
+export function Autonomy() {
+  const costmapImage = useAtomValue(costmapImageAtom);
+  const statusString = useAtomValue(statusStringAtom);
+  const latLong = useAtomValue(latLongAtom);
+
+  return (
+    <div>
+      <AppNav />
+      <Container className="vert-padded">
+        <Card className="padded">
+          <Row>
+            <Col lg={8}>{costmapImage}</Col>
+            <Col lg={4}>
+              <p>Status:</p>
+              <pre>{statusString}</pre>
+              <p>Latitude, Longitude:</p>
+              <pre>{latLong}</pre>
+            </Col>
+          </Row>
+        </Card>
+      </Container>
+      <Footer />
+    </div>
+  );
+}

src/Home.tsx

@@ -1,40 +1,18 @@
 import { AppNav, Footer } from "./AppNav.tsx";
-import { Container, Row, Col, Image } from "react-bootstrap";
-import { atom, useAtom } from "jotai";
+import { Container, Row, Col, Image, Card } from "react-bootstrap";
+import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 
-const costmapImageQuery = async () => {
-    const resp = await fetch("api/costmap_image");
-    if (!resp.ok) {
-        throw new Error("Network response was not ok");
-    }
-    const blob = await resp.blob();
-    return URL.createObjectURL(blob);
-};
-
-const costmapImageAtom = atomWithQuery(() => ({
-    queryKey: ["costmap_image"],
-    queryFn: costmapImageQuery,
-    refetchInterval: 1000 // 1s
-}));
-
 export function Home() {
-  const [{ data, isPending, isError }] = useAtom(costmapImageAtom);
-
-  let costmapImage = () => {
-    if (isPending) {
-        return (<p>"Loading..."</p>);
-    }
-    if (isError) {
-        return(<p>"Error!"</p>);
-    }
-      return (<Image src={data} />);
-  };
   return (
     <div>
       <AppNav />
-      <Container>
-          { costmapImage() }
+      <Container className="vert-padded">
+        <Card className="padded">
+          <Row>
+            <p>Hello World!</p>
+          </Row>
+        </Card>
       </Container>
       <Footer />
     </div>

src/Version.tsx

@@ -1,6 +1,6 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Card } from "react-bootstrap";
-import { atom, useAtom } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 import YAML from "yaml";
 
@@ -12,26 +12,27 @@ const versionQueryFn = async () => {
   return resp.json();
 };
 
-const versionAtom = atomWithQuery(() => ({
+const versionQueryAtom = atomWithQuery(() => ({
   queryKey: ["version"],
   queryFn: versionQueryFn,
 }));
 
-export function Version() {
-  const [{ data, isPending, isError }] = useAtom(versionAtom);
+const versionAtom = atom((get) => {
+  const version = get(versionQueryAtom);
+  if (version.isPending) {
+    return "Loading...";
+  }
+  if (version.isError) {
+    return "Error loading!";
+  }
+  if (!version.data.status) {
+    return "Can not find version";
+  }
+  return YAML.stringify(version.data.message);
+});
 
-  let versionText = () => {
-    if (isPending) {
-      return "Loading...";
-    }
-    if (isError) {
-      return "Error loading!";
-    }
-    if (!data.status) {
-      return "Can not find version";
-    }
-    return YAML.stringify(data.message);
-  };
+export function Version() {
+  let versionText = useAtomValue(versionAtom);
 
   return (
     <div>
@@ -40,7 +41,7 @@ export function Version() {
         <Card className="padded">
           <Card.Title>project.yaml</Card.Title>
           <Card.Body>
-            <pre>{versionText()}</pre>
+            <pre>{versionText}</pre>
           </Card.Body>
         </Card>
       </Container>

src/WhoAmI.tsx

@@ -1,7 +1,7 @@
 import { AppNav, Footer } from "./AppNav.tsx";
 import { Container, Row, Col, Image } from "react-bootstrap";
 
-export function Network() {
+export function WhoAmI() {
   return (
     <div>
       <AppNav />