DeepWaterExploration · jaayzee · Dec 22, 2025 · Dec 30, 2025 · Dec 31, 2025 · Jan 1, 2026
diff --git a/.gitignore b/.gitignore
@@ -319,7 +319,7 @@ pyrightconfig.json
 # http://iamzed.com/2009/05/07/a-primer-on-virtualenv/
 [Bb]in
 [Ii]nclude
-[Ll]ib
+# [Ll]ib
 [Ll]ib64
 [Ll]ocal
 [Ss]cripts

diff --git a/backend_py/src/services/cameras/ehd.py b/backend_py/src/services/cameras/ehd.py
@@ -38,7 +38,7 @@ def _get_options(self) -> Dict[str, Option]:
         # Standard integer options
         options['bitrate'] = Option(
             self.cameras[2], '>I', xu.Unit.USR_ID, xu.Selector.USR_H264_CTRL, xu.Command.H264_BITRATE_CTRL, 'Bitrate', 
-            lambda bitrate: int(bitrate * 1000000), # convert to bps from mpbs 
+            lambda bitrate: int(round(bitrate * 1000000)), # convert to bps from mpbs (round for float imprecision)
             lambda bitrate: bitrate / 1000000  # convert to mpbs from bps
         )
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     },
     "dependencies": {
         "@radix-ui/react-accordion": "^1.2.10",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-checkbox": "^1.2.3",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -22,10 +23,11 @@
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slider": "^1.3.3",
-        "@radix-ui/react-slot": "^1.2.0",
+        "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-switch": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.9",
         "@radix-ui/react-toast": "^1.2.6",
+        "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-tooltip": "^1.1.4",
         "@xterm/addon-canvas": "^0.7.0",
         "@xterm/addon-fit": "^0.10.0",
@@ -38,6 +40,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "lucide-react": "^0.456.0",
+        "motion": "^12.23.26",
         "openapi-fetch": "^0.13.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

diff --git a/frontend/public/single_wave.svg b/frontend/public/single_wave.svg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -24,11 +24,32 @@ import { WifiDropdown } from "./components/dwe/wireless/wifi-dropdown";
 import { WiredDropdown } from "./components/dwe/wireless/wired-dropdown";
 import { SystemDropdown } from "./components/dwe/system/system-dropdown";
 import { API_CLIENT } from "./api";
+import { TourAlertDialog, TourProvider, useTour } from "@/components/tour/tour";
+import { getSteps } from "./components/tour/tour-steps";
+import FeaturesContext from "./contexts/FeaturesContext";
+import { components } from "./schemas/dwe_os_2";
 
-function App() {
-  const socket = useRef<Socket | undefined>(undefined);
-  const [connected, setConnected] = useState(false);
-  const [wifiAvailable, setWifiAvailable] = useState(false);
+type WelcomeTourProps = { features: components["schemas"]["FeatureSupport"] };
+function WelcomeTourManager(props: WelcomeTourProps) {
+  const [openTour, setOpenTour] = useState(false);
+  const { setSteps } = useTour();
+
+  useEffect(() => {
+    setSteps(getSteps(props.features));
+    const timer = setTimeout(() => {
+      setOpenTour(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [setSteps, props.features]);
+
+  return <TourAlertDialog isOpen={openTour} setIsOpen={setOpenTour} />;
+}
+
+function AppContent() {
+  const [features, setFeatures] = useState<
+    components["schemas"]["FeatureSupport"] | undefined
+  >(undefined);
 
   const location = useLocation();
 
@@ -53,6 +74,55 @@ function App() {
 
   const pageTitle = getPageTitle(location.pathname);
 
+  useEffect(() => {
+    API_CLIENT.GET("/features").then((data) => {
+      if (data.data) setFeatures(data.data);
+    });
+  }, []);
+
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background z-50">
+          <div className="flex flex-1 items-center gap-2 px-3">
+            <SidebarTrigger />
+            <h1 className="text-xl font-bold sm:ml-2 text-nowrap">DWE OS</h1>
+            <Separator orientation="vertical" className="mx-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="italic text-muted-foreground font-bold">
+                    {pageTitle}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <Separator orientation="vertical" className="mx-2 h-4" />
+            <ModeToggle />
+            <div className="ml-auto flex items-center">
+              <CommandPalette />
+              {features?.wifi ? <WiredDropdown /> : <></>}
+              {features?.wifi ? <WifiDropdown /> : <></>}
+              <SystemDropdown />
+            </div>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 overflow-x-hidden">
+          <FeaturesContext.Provider value={features}>
+            <Outlet />
+          </FeaturesContext.Provider>
+        </div>
+      </SidebarInset>
+      {features && <WelcomeTourManager features={features} />}
+    </SidebarProvider>
+  );
+}
+
+function App() {
+  const socket = useRef<Socket | undefined>(undefined);
+  const [connected, setConnected] = useState(false);
+
   const connectWebsocket = () => {
     if (socket.current) delete socket.current;
 
@@ -80,48 +150,13 @@ function App() {
     }
   }, [connected]);
 
-  useEffect(() => {
-    API_CLIENT.GET("/features").then((data) =>
-      data.data?.wifi ? setWifiAvailable(true) : setWifiAvailable(false)
-    );
-  }, []);
-
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <Toaster />
       <WebsocketContext.Provider value={{ socket: socket.current, connected }}>
-        <SidebarProvider>
-          <SidebarLeft />
-          <SidebarInset>
-            <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background z-50">
-              <div className="flex flex-1 items-center gap-2 px-3">
-                <SidebarTrigger />
-                <h1 className="text-xl font-bold sm:ml-2 text-nowrap">
-                  DWE OS
-                </h1>
-                <Separator orientation="vertical" className="mx-2 h-4" />
-                <Breadcrumb>
-                  <BreadcrumbList>
-                    <BreadcrumbItem>
-                      <BreadcrumbPage className="italic text-muted-foreground font-bold">
-                        {pageTitle}
-                      </BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-                <Separator orientation="vertical" className="mx-2 h-4" />
-                <ModeToggle />
-                <CommandPalette />
-                <WiredDropdown />
-                {wifiAvailable ? <WifiDropdown /> : <></>}
-                <SystemDropdown />
-              </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-              <Outlet />
-            </div>
-          </SidebarInset>
-        </SidebarProvider>
+        <TourProvider>
+          <AppContent />
+        </TourProvider>
       </WebsocketContext.Provider>
     </ThemeProvider>
   );

diff --git a/frontend/src/assets/animated-waves.tsx b/frontend/src/assets/animated-waves.tsx
@@ -0,0 +1,63 @@
+import { cn } from "@/lib/utils";
+
+const WaveSvg = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 204 67"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    preserveAspectRatio="none"
+  >
+    <path
+      d="M 65.6894,0.0864994 C 28.5067,-1.64172 0.0478516,19.6193 0.0478516,19.6193 L 1.09889,21.1922 c 0,0 59.00611,-44.2842 117.77111,1.2109 12.539,9.7122 24.701,13.1361 36.084,12.3591 11.383,-0.777 21.956,-5.7227 31.446,-12.5857 l -1.027,-1.5912 c -9.306,6.73 -19.576,11.5043 -30.536,12.2524 C 143.879,33.5857 132.2,30.3384 119.947,20.8484 101.294,6.40742 82.5895,0.871549 65.6875,0.0862349 Z"
+      fill="currentColor"
+    />
+    <path
+      d="M 63.3252,7.59303 C 28.9311,6.46522 3.39453,26.0566 3.39453,26.0566 L 16.8218,48.072 c 0,0 39.4497,-32.5165 84.6862,0.2995 h 0.003 c 28.089,20.3648 54.261,20.9128 72.564,15.5329 18.303,-5.3792 29.839,-16.7156 29.839,-16.7156 L 188.489,26.9414 c 0,0 -7.157,7.1438 -20.295,11.0049 -13.137,3.8609 -31.152,4.4079 -54.044,-12.1872 l -0.002,-0.0026 C 96.4211,12.8976 78.9578,8.10502 63.3252,7.59303 Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export function AnimatedWaves({ className }: { className?: string }) {
+  return (
+    <div className={cn("relative w-32 h-32 flex items-end", className)}>
+      {/* bob animation */}
+      <style>
+        {`
+          @keyframes bob {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-15px); }
+          }
+          .animate-bob {
+            animation: bob 3s ease-in-out infinite;
+          }
+        `}
+      </style>
+
+      {/* top wave */}
+      <div
+        className="absolute bottom-20 left-0 text-primary/50 animate-bob"
+        style={{ animationDuration: "5s", animationDelay: "0s" }}
+      >
+        <WaveSvg className="w-full h-full" />
+      </div>
+
+      {/* mid wave */}
+      <div
+        className="absolute bottom-10 left-0 text-primary/75 animate-bob"
+        style={{ animationDuration: "5s", animationDelay: "-0.5s" }}
+      >
+        <WaveSvg className="w-full h-full" />
+      </div>
+
+      {/* bot wave */}
+      <div
+        className="absolute bottom-0 left-0 text-primary animate-bob"
+        style={{ animationDuration: "5s", animationDelay: "-1s" }}
+      >
+        <WaveSvg className="w-full h-full" />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/dwe/app/command-palette.tsx b/frontend/src/components/dwe/app/command-palette.tsx
@@ -7,8 +7,10 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { TOUR_STEP_IDS } from "@/lib/tour-constants";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Info } from "lucide-react";
 
 export function CommandPalette() {
   const [open, setOpen] = useState(false);
@@ -20,12 +22,12 @@ export function CommandPalette() {
   };
 
   return (
-    <>
+    <div id={TOUR_STEP_IDS.HELP_SWITCH}>
       <button
         onClick={() => setOpen(true)}
-        className="ml-auto mr-4 text-sm text-muted-foreground hover:text-foreground"
+        className="text-sm text-muted-foreground hover:text-foreground p-2"
       >
-        Help
+        <Info className="h-5 w-5" />
       </button>
       <CommandDialog open={open} onOpenChange={setOpen}>
         <Command>
@@ -56,11 +58,13 @@ export function CommandPalette() {
                 Cameras
               </CommandItem>
               <CommandItem
-                onSelect={() => runCommand(() => navigate("/videos"))}
+                onSelect={() => runCommand(() => navigate("/recordings"))}
               >
                 Recordings
               </CommandItem>
-              <CommandItem onSelect={() => runCommand(() => navigate("/log-viewer"))}>
+              <CommandItem
+                onSelect={() => runCommand(() => navigate("/log-viewer"))}
+              >
                 Logs
               </CommandItem>
               <CommandItem
@@ -77,6 +81,6 @@ export function CommandPalette() {
           </CommandList>
         </Command>
       </CommandDialog>
-    </>
+    </div>
   );
 }