bento updates + more accurate data

js/app/components/live-dashboard/bento-grid.tsx

···
 import Header from "./header";
 import LivestreamPanel from "./livestream-panel";
 import ModActions from "./mod-actions";
-import QuickStats from "./quick-stats";
 import StreamMonitor from "./stream-monitor";
 
 const { flex, p, gap, layout, bg } = zero;
···
           <View style={[layout.flex.row, gap.all[4], flex.values[1]]}>
             <ModActions isLive={isLive} />
           </View>
-          <QuickStats />
         </View>
 
         <View

js/app/components/live-dashboard/header.tsx

···
   useLivestreamStore,
   usePlayerStore,
   useProfile,
+  useSegment,
   zero,
 } from "@streamplace/components";
-import {
-  Activity,
-  Monitor,
-  Radio,
-  Signal,
-  Users,
-  Wifi,
-} from "@tamagui/lucide-icons";
+import { Activity, Car, Radio, Signal, Users } from "@tamagui/lucide-icons";
 import { Text, View } from "react-native";
 import { useLiveUser } from "../../hooks/useLiveUser";
 import { useSegmentTiming } from "../../hooks/useSegmentTiming";
···
   const isUserLive = useLiveUser();
   const viewers = useLivestreamStore((x) => x.viewers);
   const segmentTiming = useSegmentTiming();
+  const seg = useSegment();
   const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
   const ingestStarted = usePlayerStore((x) => x.ingestStarted);
 
···
     }
   };
 
-  const getFpsStatus = (fps: number): "good" | "warning" | "error" => {
-    if (fps >= 30) return "good";
-    if (fps >= 20) return "warning";
-    return "error";
-  };
-
-  const getBitrateStatus = (bitrate: string): "good" | "warning" | "error" => {
-    const value = parseInt(bitrate);
-    if (value >= 2000) return "good";
-    if (value >= 1000) return "warning";
-    return "error";
-  };
+  console.log(seg);
 
   return (
     <View
···
             />
             <MetricItem
               icon={Activity}
-              label="Segments"
+              label="Time between Segments"
               value={`${segmentTiming.timeBetweenSegments || 0}ms`}
               status={
                 segmentTiming.connectionQuality === "good"
···
               }
             />
             <MetricItem
-              icon={Monitor}
-              label="Quality"
-              value={segmentTiming.connectionQuality.toUpperCase()}
-              status={
-                segmentTiming.connectionQuality === "good"
-                  ? "good"
-                  : segmentTiming.connectionQuality === "degraded"
-                    ? "warning"
-                    : "error"
+              icon={Car}
+              label="Bitrate"
+              value={
+                seg?.size
+                  ? `${((seg.size * 8) / ((seg.duration || 1000000000) / 1000000000) / 1000 / 1000).toFixed(2)} kbps`
+                  : "0 kbps"
               }
-            />
-            <MetricItem
-              icon={Radio}
-              label="Connection"
-              value={ingestConnectionState || "disconnected"}
-            />
-            <MetricItem
-              icon={Wifi}
-              label="Range"
-              value={segmentTiming.range ? `${segmentTiming.range}ms` : "N/A"}
             />
             <MetricItem icon={Signal} label="Uptime" value={getUptime()} />
           </>

js/app/components/live-dashboard/quick-stats.tsx

···
-import { useLivestreamStore, zero } from "@streamplace/components";
-import { Heart, MessageCircle, Users } from "@tamagui/lucide-icons";
-import { Text, View } from "react-native";
-import { useSegmentTiming } from "../../hooks/useSegmentTiming";
-
-const { flex, bg, r, p, text, layout, gap, borderRadius } = zero;
-
-interface StatCardProps {
-  icon: any;
-  label: string;
-  value: string;
-  color: "blue" | "red" | "green";
-}
-
-function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
-  const colors = {
-    blue: { bg: bg.blue[500], text: text.blue[100] },
-    red: { bg: bg.red[500], text: text.red[100] },
-    green: { bg: bg.green[500], text: text.green[100] },
-  };
-
-  return (
-    <View
-      style={[
-        flex.values[1],
-        colors[color].bg,
-        r[3],
-        p[4],
-        layout.flex.row,
-        layout.flex.alignCenter,
-        gap.all[3],
-        borderRadius["2xl"],
-      ]}
-    >
-      <Icon size={24} color="white" />
-      <View>
-        <Text style={[text.white, { fontSize: 24, fontWeight: "700" }]}>
-          {value}
-        </Text>
-        <Text style={[colors[color].text, { fontSize: 12, fontWeight: "500" }]}>
-          {label}
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-export default function QuickStats() {
-  // Get real data from stores
-  const viewers = useLivestreamStore((x) => x.viewers);
-  const chat = useLivestreamStore((x) => x.chat);
-  const segmentTiming = useSegmentTiming();
-
-  // Calculate stats from real data
-  const viewerCount = viewers || 0;
-  const messageCount = chat?.length || 0;
-
-  // Count likes/hearts in chat messages (simplified - could be more sophisticated)
-  const likeCount = 0;
-
-  return (
-    <View
-      style={[flex.values[1], gap.all[4], layout.flex.row, { maxHeight: 64 }]}
-    >
-      <StatCard
-        icon={Users}
-        label="Viewers"
-        value={viewerCount.toLocaleString()}
-        color="blue"
-      />
-      <StatCard
-        icon={Heart}
-        label="Likes"
-        value={likeCount.toString()}
-        color="red"
-      />
-      <StatCard
-        icon={MessageCircle}
-        label="Messages"
-        value={messageCount.toString()}
-        color="green"
-      />
-    </View>
-  );
-}

js/app/components/live-dashboard/stream-controls.tsx

···
-import { zero } from "@streamplace/components";
-import { Play, Square } from "@tamagui/lucide-icons";
-import { Pressable, Text, View } from "react-native";
-
-const { flex, bg, r, borders, p, px, py, text, layout, gap } = zero;
-
-// Mock data - replace with real data from your stores
-const mockStats = {
-  uptime: "02:34:12",
-};
-
-interface StreamControlsProps {
-  isLive: boolean;
-}
-
-export default function StreamControls({ isLive }: StreamControlsProps) {
-  return (
-    <View
-      style={[
-        flex.values[1],
-        bg.gray[800],
-        r[3],
-        borders.width.thin,
-        borders.color.gray[700],
-        p[4],
-        layout.flex.row,
-        layout.flex.alignCenter,
-        gap.all[3],
-      ]}
-    >
-      <Pressable
-        style={[
-          bg[isLive ? "red" : "green"][500],
-          r[2],
-          px[4],
-          py[3],
-          layout.flex.row,
-          layout.flex.alignCenter,
-          gap.all[2],
-        ]}
-      >
-        {isLive ? (
-          <Square size={20} color="white" />
-        ) : (
-          <Play size={20} color="white" />
-        )}
-        <Text style={[text.white, { fontSize: 16, fontWeight: "600" }]}>
-          {isLive ? "Stop Stream" : "Go Live"}
-        </Text>
-      </Pressable>
-
-      <Text style={[text.gray[400], { fontSize: 14 }]}>
-        Uptime: {mockStats.uptime}
-      </Text>
-    </View>
-  );
-}

js/app/components/live-dashboard/stream-monitor.tsx

···
 import {
   Player,
+  useLivestream,
   useLivestreamStore,
   usePlayerStore,
   zero,
···
   const isUserLive = useLiveUser();
   const profile = useLivestreamStore((x) => x.profile);
   const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
+  const ls = useLivestream();
   const segmentTiming = useSegmentTiming();
 
   // Use hook data primarily, fallback to props
···
         layout.flex.column,
       ]}
     >
+      <View style={[flex.values[1], layout.flex.center, bg.gray[900]]}>
+        {isLive && userProfile ? (
+          <Player src={userProfile.did} name={userProfile.handle} />
+        ) : (
+          <View style={[layout.flex.center, { gap: 12 }]}>
+            <Camera size={48} color="#6b7280" />
+            <Text style={[text.gray[400]]}>
+              {!userProfile ? "No Profile" : "Stream Offline"}
+            </Text>
+            {ingestConnectionState && (
+              <Text style={[text.gray[500], { fontSize: 12 }]}>
+                Connection: {ingestConnectionState}
+              </Text>
+            )}
+          </View>
+        )}
+      </View>
       <View
         style={[
           layout.flex.row,
···
         ]}
       >
         <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
-          Stream Monitor
+          {ls?.record.title || "Stream Title"}
         </Text>
-        <View style={[layout.flex.row, layout.flex.alignCenter, { gap: 8 }]}>
+        <View style={[layout.flex.row, layout.flex.center, { gap: 8 }]}>
           {getConnectionIcon()}
           <View style={[w[2], h[2], r[1], bg[getConnectionColor()][500]]} />
           <Text style={[text.gray[400], { fontSize: 14 }]}>
···
             </Text>
           )}
         </View>
-      </View>
-
-      <View style={[flex.values[1], layout.flex.center, bg.gray[900]]}>
-        {isLive && userProfile ? (
-          <Player src={userProfile.did} name={userProfile.handle} />
-        ) : (
-          <View style={[layout.flex.center, { gap: 12 }]}>
-            <Camera size={48} color="#6b7280" />
-            <Text style={[text.gray[400]]}>
-              {!userProfile ? "No Profile" : "Stream Offline"}
-            </Text>
-            {ingestConnectionState && (
-              <Text style={[text.gray[500], { fontSize: 12 }]}>
-                Connection: {ingestConnectionState}
-              </Text>
-            )}
-          </View>
-        )}
       </View>
     </View>
   );