big boy webui new new new new new 100 files changed 80 years

webui/src/layouts/driver/DesktopLayout/index.jsx

@@ -1,28 +1,112 @@
 // Desktop Driver Layout
-// Purpose: Owns the concrete two-pane desktop driver-page composition.
-// Scope: Places existing cards without abstracting or changing their presentation.
-import DriverVideo from '../../../components/DriverVideo/index.jsx';
-import PiHostStatsCard from '../../../components/PiHostStatsCard/index.jsx';
-import DriverAdCard from '../../../components/DriverAdCard/index.jsx';
+// Purpose: Places existing site columns around the full-height rover video and integrated HUD.
+// Scope: Owns the default desktop composition only; video and HUD behavior remain component concerns.
+import NewDriveVideo from '../../../components/NewDriveVideo/index.jsx';
+import ChatPanel from '../../../components/ChatPanel/index.jsx';
+import RawUserPilePanel from '../../../components/RawUserPilePanel/index.jsx';
+import RoverQueuesPanel from '../../../components/RoverQueuesPanel/index.jsx';
+import ReplaySourcesPanel from '../../../components/ReplaySourcesPanel/index.jsx';
+import HomeAssistantControls from '../../../components/HomeAssistantControls/index.jsx';
+import RoomCameraPanel from '../../../components/RoomCameraPanel/index.jsx';
 import GlobalObjectiveBanner from '../../../components/GlobalObjectiveBanner/index.jsx';
+import DriverAdCard from '../../../components/DriverAdCard/index.jsx';
+import OverseerPreferencePanel from '../../../components/OverseerPreferencePanel/index.jsx';
+import PtzQueueCard from '../../../components/PtzCamera/index.jsx';
+import { LinkButtonsPanel } from '../../../components/UserListPanel/index.jsx';
+import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../../../components/Tabs/index.jsx';
+import ActivitiesTab from '../tabs/shared/ActivitiesTab/index.jsx';
+import VipTab from '../tabs/shared/VipTab/index.jsx';
+import HelpTab from '../tabs/shared/HelpTab/index.jsx';
+import SettingsTab from '../tabs/shared/SettingsTab/index.jsx';
 import { themeGapClass } from '../../../themes/index.js';
-import DesktopRightPaneTabs from '../DesktopRightPaneTabs/index.jsx';
-import { useTelemetryVisualPolicy } from '../../../context/TelemetryContext.jsx';
 
-export default function DesktopLayout() {
-  useTelemetryVisualPolicy({ mobile: false });
+function LeftColumnTabs() {
   return (
-    <div className={`flex h-screen ${themeGapClass} overflow-hidden`}>
-      <div className={`flex min-w-0 flex-[1.22] flex-col ${themeGapClass} overflow-y-auto pr-0`}>
-        <DriverVideo />
-        <PiHostStatsCard />
-        {/* The self-gating ad remains pinned to the bottom of the left pane. */}
-        <DriverAdCard className="mt-auto" />
-      </div>
-      <div className={`flex min-w-0 flex-1 flex-col ${themeGapClass} overflow-y-auto`}>
-        <GlobalObjectiveBanner layout="desktop" />
-        <DesktopRightPaneTabs />
+    <Tabs defaultTab="room">
+      <TabList className="sticky top-0 z-30 shrink-0 bg-neutral-950">
+        <Tab id="room">Room</Tab>
+        <Tab id="activities">Activities</Tab>
+        <Tab id="vip">Vip</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel id="room">
+          <div className={`flex flex-col ${themeGapClass}`}>
+            {/* The objective belongs below the selector so the tab bar remains the first visible,
+                sticky control at the top of the independently scrolling left column. */}
+            <GlobalObjectiveBanner layout="desktop" />
+            <HomeAssistantControls />
+            <RoomCameraPanel defaultOrientation="vertical" panelId="newdrive-left-sidebar" />
+          </div>
+        </TabPanel>
+        {/* These shared tabs retain their existing feature gates and mounted-media behavior. */}
+        <ActivitiesTab />
+        <VipTab />
+      </TabPanels>
+    </Tabs>
+  );
+}
+
+function CommunityColumn() {
+  return (
+    <div className={`flex flex-col ${themeGapClass}`}>
+      {/* A fixed initial chat height keeps the composer usable in a narrow column. The sidebar
+          itself scrolls, so every rover/site panel below remains reachable on a 720p display. */}
+      <div className="h-80 min-h-56">
+        <ChatPanel fillHeight />
       </div>
+      <OverseerPreferencePanel />
+      <ReplaySourcesPanel panelId="newdrive-replay-sources" />
+      <RoverQueuesPanel title="Rovers" />
+      <RawUserPilePanel compact hideNicknameForm />
+      <LinkButtonsPanel fillHeight={false} />
+      <PtzQueueCard layout="desktop" />
+    </div>
+  );
+}
+
+function RightColumnTabs() {
+  return (
+    <Tabs defaultTab="community">
+      <TabList className="sticky top-0 z-30 shrink-0 bg-neutral-950">
+        <Tab id="community">Chat/Rovers</Tab>
+        <Tab id="help">Help</Tab>
+        <Tab id="settings">Settings</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel id="community">
+          <CommunityColumn />
+        </TabPanel>
+        <HelpTab />
+        <SettingsTab />
+      </TabPanels>
+    </Tabs>
+  );
+}
+
+export default function DesktopLayout() {
+  return (
+    /* Equal 17rem minimums keep reused site cards usable on a 1280px desktop.
+       The center track deliberately retains a zero minimum so the 4:3 video,
+       rather than either sidebar, gives up width when the viewport is tight. */
+    <div
+      className={`grid h-screen min-w-0 w-full grid-cols-[minmax(17rem,1fr)_minmax(0,133.333vh)_minmax(17rem,1fr)] overflow-hidden ${themeGapClass}`}
+    >
+      <aside
+        className={`flex min-h-0 min-w-0 flex-col overflow-x-hidden overflow-y-auto ${themeGapClass}`}
+        aria-label="Room, activities, and site information"
+      >
+        <LeftColumnTabs />
+        <DriverAdCard className="mt-auto" />
+      </aside>
+
+      <NewDriveVideo />
+
+      <aside
+        className={`flex min-h-0 min-w-0 flex-col overflow-x-hidden overflow-y-auto ${themeGapClass}`}
+        aria-label="Chat, rovers, help, and settings"
+      >
+        <RightColumnTabs />
+      </aside>
     </div>
   );
 }

webui/src/layouts/driver/DriverLayoutRoot.jsx

@@ -2,15 +2,18 @@
 // Purpose: Selects and frames the concrete desktop or mobile driver composition.
 // Scope: Owns layout-only mobile framing so App.jsx does not place page cards.
 import DesktopLayout from './DesktopLayout/index.jsx';
+import OldDesktopLayout from './OldDesktopLayout/index.jsx';
 import MobilePortraitLayout from './MobilePortraitLayout/index.jsx';
 import MobileLandscapeLayout from './MobileLandscapeLayout/index.jsx';
 import { useDriverLayout } from './DriverLayoutContext.jsx';
 
-export default function DriverLayoutRoot() {
+export default function DriverLayoutRoot({ oldDesktop = false }) {
   const layout = useDriverLayout();
 
   if (layout === 'desktop') {
-    return <DesktopLayout />;
+    // /old changes only the desktop composition. Mobile keeps one canonical
+    // portrait/landscape implementation regardless of which desktop URL was opened.
+    return oldDesktop ? <OldDesktopLayout /> : <DesktopLayout />;
   }
 
   return layout === 'mobile-landscape' ? <MobileLandscapeLayout /> : <MobilePortraitLayout />;

webui/src/layouts/driver/MobileLandscapeLayout/index.jsx

@@ -2,7 +2,7 @@
 // Purpose: Owns the concrete landscape video, controls, and secondary-card placement.
 import AuxColumn from '../../../components/MobileControls/AuxColumn.jsx';
 import MovementColumn from '../../../components/MobileControls/MovementColumn.jsx';
-import DriverVideo from '../../../components/DriverVideo/index.jsx';
+import NewDriveVideo from '../../../components/NewDriveVideo/index.jsx';
 import { useSettingsNamespace } from '../../../settings/index.js';
 import { themeGapClass } from '../../../themes/index.js';
 import MobileLayoutFrame from '../MobileLayoutFrame/index.jsx';
@@ -26,7 +26,9 @@ export default function MobileLandscapeLayout() {
       <section className={`grid grid-cols-[minmax(0,0.7fr)_minmax(0,2.1fr)_minmax(0,0.7fr)] ${themeGapClass}`}>
         {firstColumn}
         <div className="min-w-0 self-start">
-          <DriverVideo layoutFormat="mobile-landscape" />
+          {/* The video stage adapts through DriverLayoutContext while this layout keeps
+              ownership of the existing landscape touch-control columns. */}
+          <NewDriveVideo />
         </div>
         {secondColumn}
       </section>

webui/src/layouts/driver/MobilePortraitLayout/index.jsx

@@ -2,7 +2,7 @@
 // Purpose: Owns the concrete portrait video, controls, and secondary-card placement.
 import AuxColumn from '../../../components/MobileControls/AuxColumn.jsx';
 import MovementColumn from '../../../components/MobileControls/MovementColumn.jsx';
-import DriverVideo from '../../../components/DriverVideo/index.jsx';
+import NewDriveVideo from '../../../components/NewDriveVideo/index.jsx';
 import { useSettingsNamespace } from '../../../settings/index.js';
 import { themeGapClass } from '../../../themes/index.js';
 import MobileLayoutFrame from '../MobileLayoutFrame/index.jsx';
@@ -22,7 +22,9 @@ export default function MobilePortraitLayout() {
   return (
     <MobileLayoutFrame>
       <div className={`flex flex-col ${themeGapClass}`}>
-      <DriverVideo layoutFormat="mobile-portrait" />
+      {/* NewDriveVideo reads the shared layout context and removes only its redundant
+          physical-control pods; the established portrait controls below remain unchanged. */}
+      <NewDriveVideo />
       {/* Preserve the existing two-column portrait control surface exactly. */}
       <section className="mobile-touch-control text-white">
         <div className="mobile-touch-control grid grid-cols-2 gap-0.5 items-stretch">

webui/src/layouts/driver/OldDesktopLayout/index.jsx

@@ -0,0 +1,31 @@
+// Old Desktop Driver Layout
+// Purpose: Preserves the retired two-pane desktop composition for the explicit /old route.
+// Scope: This is a layout archive only; shared controls, telemetry, and route-level providers stay current.
+import DriverVideo from '../../../components/DriverVideo/index.jsx';
+import PiHostStatsCard from '../../../components/PiHostStatsCard/index.jsx';
+import DriverAdCard from '../../../components/DriverAdCard/index.jsx';
+import GlobalObjectiveBanner from '../../../components/GlobalObjectiveBanner/index.jsx';
+import { themeGapClass } from '../../../themes/index.js';
+import DesktopRightPaneTabs from '../DesktopRightPaneTabs/index.jsx';
+import { useTelemetryVisualPolicy } from '../../../context/TelemetryContext.jsx';
+
+export default function OldDesktopLayout() {
+  // The archived layout keeps the same desktop telemetry cadence it used before
+  // replacement, while mobile policy remains owned by the mobile layout frame.
+  useTelemetryVisualPolicy({ mobile: false });
+
+  return (
+    <div className={`flex h-screen ${themeGapClass} overflow-hidden`}>
+      <div className={`flex min-w-0 flex-[1.22] flex-col ${themeGapClass} overflow-y-auto pr-0`}>
+        <DriverVideo />
+        <PiHostStatsCard />
+        {/* The self-gating ad remains pinned to the bottom of the left pane. */}
+        <DriverAdCard className="mt-auto" />
+      </div>
+      <div className={`flex min-w-0 flex-1 flex-col ${themeGapClass} overflow-y-auto`}>
+        <GlobalObjectiveBanner layout="desktop" />
+        <DesktopRightPaneTabs />
+      </div>
+    </div>
+  );
+}