Signals page + MQL query engine + ClickHouse refactor

dashboard/src/components/Sidebar.tsx

@@ -8,14 +8,13 @@ import {
   useVehicleList,
 } from "@/lib/store";
 import {
+  Activity,
   Briefcase,
   Bug,
   CarFront,
   ChevronsUpDown,
   LayoutDashboard,
   LucideIcon,
-  MapPinned,
-  SearchCode,
   Settings,
 } from "lucide-react";
 import {
@@ -285,29 +284,15 @@ const Sidebar = (props: SidebarProps) => {
             isSidebarExpanded={props.isSidebarExpanded}
           />
           <SidebarItem
-            icon={SearchCode}
-            text="Query"
-            link={`/query?vid=${currentVehicle.id}`}
-            isSelected={props.selectedPage === "query"}
-            isSidebarExpanded={props.isSidebarExpanded}
-          />
-          <SidebarItem
-            icon={Bug}
-            text="Debug"
-            link={`/debug?vid=${currentVehicle.id}`}
-            isSelected={props.selectedPage === "debug"}
+            icon={Activity}
+            text="Signals"
+            link={`/signals?vid=${currentVehicle.id}`}
+            isSelected={props.selectedPage === "signals"}
             isSidebarExpanded={props.isSidebarExpanded}
           />
           <div className="px-4 py-2">
             <Separator />
           </div>
-          <SidebarItem
-            icon={MapPinned}
-            text="Trips"
-            link={`/trips?vid=${currentVehicle.id}`}
-            isSelected={props.selectedPage === "trips"}
-            isSidebarExpanded={props.isSidebarExpanded}
-          />
           <SidebarItem
             icon={CarFront}
             text="Vehicles"
@@ -325,6 +310,13 @@ const Sidebar = (props: SidebarProps) => {
           <div className="px-4 py-2">
             <Separator />
           </div>
+          <SidebarItem
+            icon={Bug}
+            text="Debug"
+            link={`/debug?vid=${currentVehicle.id}`}
+            isSelected={props.selectedPage === "debug"}
+            isSidebarExpanded={props.isSidebarExpanded}
+          />
           <SidebarItem
             icon={Settings}
             text="Settings"

dashboard/src/components/signals/ChartTypeToggle.tsx

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+import { AreaChart, BarChart3, LineChart } from "lucide-react";
+
+export type ChartType = "bar" | "line" | "area";
+
+const OPTIONS: { type: ChartType; icon: typeof BarChart3; title: string }[] = [
+  { type: "bar",  icon: BarChart3,  title: "Bar"  },
+  { type: "line", icon: LineChart,  title: "Line" },
+  { type: "area", icon: AreaChart,  title: "Area" },
+];
+
+interface ChartTypeToggleProps {
+  value: ChartType;
+  onChange: (next: ChartType) => void;
+  className?: string;
+}
+
+export function ChartTypeToggle({
+  value,
+  onChange,
+  className,
+}: ChartTypeToggleProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center rounded-md border bg-background p-0.5",
+        className,
+      )}
+      role="group"
+    >
+      {OPTIONS.map(({ type, icon: Icon, title }) => {
+        const active = value === type;
+        return (
+          <button
+            key={type}
+            type="button"
+            title={title}
+            onClick={() => onChange(type)}
+            className={cn(
+              "flex h-7 w-8 items-center justify-center rounded-sm text-muted-foreground transition-colors",
+              active
+                ? "bg-accent text-foreground"
+                : "hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            <Icon className="h-4 w-4" />
+          </button>
+        );
+      })}
+    </div>
+  );
+}