Remove stats tab switcher, drop duration-per-device, show devices inline

Sessions and Devices no longer live behind a Tabs switcher on the stats
page - both sections render directly, one after the other. Also drops
the "Duration per device" list from the sessions summary cards since
DeviceUsageTable already shows per-device active time in more detail.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd

app/(app)/stats/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SessionsSummaryCards } from "@/components/stats/SessionsSummaryCards";
 import { DeviceUsageTable } from "@/components/stats/DeviceUsageTable";
 import { getDeviceCommandCounts, getDeviceUsageStats, getSessionsSummary } from "@/lib/db/queries/stats";
@@ -24,18 +23,8 @@ export default async function StatsPage() {
         <p className="text-sm text-muted-foreground">Usage across sessions and devices.</p>
       </div>
 
-      <Tabs defaultValue="sessions">
-        <TabsList className="bp-glass">
-          <TabsTrigger value="sessions">Sessions</TabsTrigger>
-          <TabsTrigger value="devices">Devices</TabsTrigger>
-        </TabsList>
-        <TabsContent value="sessions" className="pt-4">
       <SessionsSummaryCards summary={sessionsSummary} />
-        </TabsContent>
-        <TabsContent value="devices" className="pt-4">
       <DeviceUsageTable devices={devices} />
-        </TabsContent>
-      </Tabs>
     </div>
   );
 }

components/stats/SessionsSummaryCards.tsx

@@ -5,7 +5,6 @@ export interface SessionsSummary {
   totalDurationMs: number;
   avgDurationMs: number;
   totalReplays: number;
-  durationPerDevice: { deviceId: number; displayName: string | null; bleName: string; totalActiveMs: number }[];
 }
 
 function formatHours(ms: number): string {
@@ -18,7 +17,6 @@ function formatReplays(count: number): string {
 
 export function SessionsSummaryCards({ summary }: { summary: SessionsSummary }) {
   return (
-    <div className="flex flex-col gap-4">
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       <Card className="bp-glass">
         <CardHeader>
@@ -47,21 +45,5 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
         <CardContent className="bp-readout text-3xl">{formatReplays(summary.totalReplays)}</CardContent>
       </Card>
     </div>
-      {summary.durationPerDevice.length > 0 && (
-        <Card className="bp-glass">
-          <CardHeader>
-            <CardTitle className="text-base">Duration per device</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-2">
-            {summary.durationPerDevice.map((d) => (
-              <div key={d.deviceId} className="flex items-center justify-between text-sm">
-                <span>{d.displayName ?? d.bleName}</span>
-                <span className="text-muted-foreground">{formatHours(d.totalActiveMs)}</span>
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-      )}
-    </div>
   );
 }

lib/db/queries/stats.ts

@@ -15,18 +15,7 @@ export async function getSessionsSummary() {
     .from(sessions)
     .where(eq(sessions.status, "completed"));
 
-  const durationPerDevice = await db
+  return totals;
-    .select({
-      deviceId: devices.id,
-      displayName: devices.displayName,
-      bleName: devices.bleName,
-      totalActiveMs: sql<number>`coalesce(sum(coalesce(${sessionDevices.disconnectedAt}, ${sessionDevices.connectedAt}) - ${sessionDevices.connectedAt}), 0)`,
-    })
-    .from(sessionDevices)
-    .innerJoin(devices, eq(sessionDevices.deviceId, devices.id))
-    .groupBy(devices.id);
-
-  return { ...totals, durationPerDevice };
 }
 
 export async function getSessionTimeline(sessionId: number, bucketMs = 1000) {