Add serial console with draggable windows and ZMK connection fallback

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext } from "react";
+import { useState, useContext, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   IconBattery2,
@@ -7,14 +7,17 @@ import {
   IconKeyboard,
   IconPointer,
   IconSettings,
+  IconTerminal2,
 } from "@tabler/icons-react";
 
 import { SplashScreen } from "./components/SplashScreen";
 import {
   DeviceConnectionProvider,
   ConnectionContext,
 } from "./components/DeviceConnection";
+import { ConsoleContext } from "./contexts/ConsoleContext";
 import { ThemeProvider } from "./contexts/ThemeContext";
+import { ConsoleProvider } from "./contexts/ConsoleContext";
 import { TabNavigation } from "./components/TabNavigation";
 import type { TabItem } from "./components/TabNavigation";
 import { AppLayout } from "./layouts/AppLayout";
@@ -24,6 +27,9 @@ import { HealthCheckPage } from "./pages/HealthCheckPage";
 import { KeymapPage } from "./pages/KeymapPage";
 import { TrackballPage } from "./pages/TrackballPage";
 import { SettingsPage } from "./pages/SettingsPage";
+import { ConsolePage } from "./pages/ConsolePage";
+import { DraggableWindow } from "./components/DraggableWindow";
+import { SerialConsole } from "./components/SerialConsole";
 
 const tabs: TabItem[] = [
   {
@@ -62,22 +68,50 @@ const tabs: TabItem[] = [
     icon: <IconSettings size={18} />,
     content: <SettingsPage />,
   },
+  {
+    id: "console",
+    label: "Console",
+    icon: <IconTerminal2 size={18} />,
+    content: <ConsolePage />,
+  },
 ];
 
 function App() {
   return (
     <ThemeProvider>
-      <DeviceConnectionProvider>
-        <AppContent />
-      </DeviceConnectionProvider>
+      <ConsoleProvider>
+        <DeviceConnectionProvider>
+          <AppContent />
+        </DeviceConnectionProvider>
+      </ConsoleProvider>
     </ThemeProvider>
   );
 }
 
 function AppContent() {
   const connection = useContext(ConnectionContext);
+  const consoleContext = useContext(ConsoleContext);
   const [activeTab, setActiveTab] = useState("battery");
 
+  const handleTabChange = useCallback(
+    (tabId: string) => {
+      // Handle console tab transitions
+      if (activeTab === "console" && tabId !== "console") {
+        // Leaving console tab - convert to window mode
+        consoleContext?.exitToWindowMode();
+      } else if (activeTab !== "console" && tabId === "console") {
+        // Entering console tab - restore snap state
+        consoleContext?.restoreSnapState();
+      }
+      setActiveTab(tabId);
+    },
+    [activeTab, consoleContext],
+  );
+
+  // Get floating console windows (not snapped)
+  const floatingConsoles =
+    consoleContext?.consoles.filter((c) => c.snapPosition === null) || [];
+
   return (
     <>
       <AnimatePresence>
@@ -90,6 +124,7 @@ function AppContent() {
           >
             <SplashScreen
               onConnect={connection.onConnect}
+              onConnectWithFallback={connection.onConnectWithFallback}
               isConnecting={connection.isLoading}
               error={connection.error}
             />
@@ -114,11 +149,32 @@ function AppContent() {
             <TabNavigation
               tabs={tabs}
               activeTab={activeTab}
-              onTabChange={setActiveTab}
+              onTabChange={handleTabChange}
             />
           </AppLayout>
         </motion.div>
       )}
+
+      {/* Global floating console windows - shown across all tabs */}
+      {floatingConsoles.map((console) => (
+        <DraggableWindow
+          key={console.id}
+          initialPosition={console.position}
+          onPositionChange={(pos) =>
+            consoleContext?.updateConsole(console.id, { position: pos })
+          }
+          onDragStart={() => {}}
+          onDragEnd={() => {}}
+          zIndex={console.zIndex}
+          onFocus={() => consoleContext?.bringToFront(console.id)}
+        >
+          <SerialConsole
+            consoleId={console.id}
+            onClose={() => consoleContext?.removeConsole(console.id)}
+            existingPort={console.port}
+          />
+        </DraggableWindow>
+      ))}
     </>
   );
 }