add activities tab, make replay popup smaller and muted

webui/src/App.jsx

@@ -126,6 +126,7 @@ function MobileFeatureTabs({
       <Tabs defaultTab="chat" currentTab={activeTab} onTabChange={setActiveTab}>
         <TabList>
           <Tab id="chat">Chat</Tab>
+          <Tab id="activities">Activities</Tab> 
           <Tab id="vip" highlight={vipClipPlaying ? 'green' : vipMicActive ? 'pink' : 'none'}>
             <span className="inline-flex items-center gap-0.5">
               <span>VIP</span>
@@ -155,6 +156,13 @@ function MobileFeatureTabs({
               </div>
             </div>
           </TabPanel>
+          {/* activities tab */}
+          <TabPanel id="activities">
+            <div className={`flex flex-col ${themeGapClass}`}>
+              <ButtonBoxPanel />
+              <KinectPanel />
+            </div>
+          </TabPanel>
           <TabPanel id="vip" keepMounted>
             <VipPanel isActive={activeTab === 'vip'} />
           </TabPanel>
@@ -162,9 +170,7 @@ function MobileFeatureTabs({
             <div className={themeStackClass}>
               {/* {showTelemetry ? <TelemetryPanel /> : null} */}
               <HomeAssistantControls />
-              <ButtonBoxPanel />
               <RoomCameraPanel panelId={roomPanelId} />
-              <KinectPanel />
             </div>
           </TabPanel>
           <TabPanel id="help">

webui/src/components/ReplaySourcesPanel/ReplayReadyPopup.jsx

@@ -121,11 +121,12 @@ export default function ReplayReadyPopup({ replay, onClose, variant = 'modal' })
             autoPlay
             preload="auto"
             playsInline
+            muted
             {...videoLifecycleProps}
             // The floating panel is intentionally compact because it appears for users who
             // did not ask for the replay. It still loads the video immediately, but its
             // bounded height prevents the floating card from covering too much of the UI.
-            className="aspect-video max-h-[24rem] w-full bg-black"
+            className="aspect-video max-h-[14rem] w-full bg-black"
           />
         </div>
       </CardFrame>

webui/src/components/ReplaySourcesPanel/index.jsx

@@ -221,7 +221,7 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
   return (
     <div className={`relative ${fillHeight ? 'flex h-full min-h-0 flex-col' : ''}`}>
       {showPanelReplay ? (
-        <div className="absolute bottom-[calc(100%+0.125rem)] left-1/2 z-[70] w-[min(42rem,calc(100vw-1rem))] -translate-x-1/2">
+        <div className="absolute bottom-[calc(100%+0.125rem)] left-1/2 z-[70] w-[min(20rem,calc(100vw-1rem))] -translate-x-1/2">
           <ReplayReadyPopup
             replay={latestReplay}
             variant="floating-panel"

webui/src/components/RightPaneTabs/index.jsx

@@ -253,6 +253,7 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
       <Tabs defaultTab="telemetry" currentTab={activeTab} onTabChange={setActiveTab}>
         <TabList>
           <Tab id="telemetry">Controls</Tab>
+          <Tab id="activities">Activities</Tab> 
           <Tab id="vip" highlight={vipClipPlaying ? 'green' : vipMicActive ? 'pink' : 'none'}>
             <span className="inline-flex items-center gap-2">
               <span>VIP</span>
@@ -309,17 +310,29 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
                 </div>
               </div>
               <HomeAssistantControls />
-              <ButtonBoxPanel />
               <RoomCameraPanel defaultOrientation="horizontal" panelId="rightpane-telemetry" />
+            </div>
+          </TabPanel>
+
+          {/* activities tab */}
+          <TabPanel id="activities">
+            <div className={`flex flex-col ${themeGapClass}`}>
+              <ButtonBoxPanel />
               <KinectPanel />
             </div>
           </TabPanel>
+
+          {/* VIP tab */}
           <TabPanel id="vip" keepMounted>
             <VipPanel isActive={activeTab === 'vip'} />
           </TabPanel>
+
+          {/* help tab */}
           <TabPanel id="help">
             <HelpPanel layout={layout} onOpenOverlay={onOpenHelpOverlay} />
           </TabPanel>
+
+          {/* settings tab */}
           <TabPanel id="settings">
             <SettingsPanel />
           </TabPanel>

webui/src/components/Tabs/index.jsx

@@ -26,6 +26,7 @@ const TAB_HIGHLIGHTS = {
   none: '',
   pink: 'bg-pink-500 text-white border-pink-200 hover:bg-pink-400',
   green: 'bg-emerald-500 text-white border-emerald-200 hover:bg-emerald-400',
+  pinkblue: 'bg-gradient-to-r from-lime-800 to-teal-800'
 };
 
 const DEFAULT_VARIANT = 'primary';