fix(ui): выровнять chrome Frame и убрать Card-оболочки

Подключить App Switcher, NavUser, OpsPanel и AlertDialog вместо Card-shell.

Co-authored-by: Cursor <[email protected]>

app/(main)/traffic/page.tsx

@@ -2,7 +2,8 @@
 
 import { useState, useMemo, useEffect, useCallback } from "react"
 import { PageHeader } from "@/components/page-header"
-import { Card, CardContent } from "@/components/ui/card"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { IconTile } from "@/components/reui/icon-tile"
 import { Button } from "@/components/ui/button"
 import { Sparkline } from "@/components/sparkline"
 import { StatusDot } from "@/components/status-dot"
@@ -972,12 +973,17 @@ export default function TrafficPage() {
               { icon: <TrendingUpIcon className="size-3.5 text-amber-500"   />, label: "Пик RX",    value: fmtMbps(peakRx) },
               { icon: <TrendingUpIcon className="size-3.5 text-amber-500"   />, label: "Пик TX",    value: fmtMbps(peakTx) },
             ].map(({ icon, label, value }) => (
-              <Card key={label} className="overflow-hidden">
-                <CardContent className="pt-4 pb-3 px-4">
-                  <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1.5">{icon}{label}</p>
-                  <p className="text-2xl font-semibold tabular-nums tracking-tight">{value}</p>
-                </CardContent>
-              </Card>
+              <Frame key={label} className="h-full overflow-hidden">
+                <FramePanel className="relative isolate flex h-full items-start gap-3">
+                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+                    {icon}
+                  </IconTile>
+                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                    <p className="text-muted-foreground text-sm font-medium">{label}</p>
+                    <p className="text-2xl leading-none font-bold tabular-nums tracking-tight">{value}</p>
+                  </div>
+                </FramePanel>
+              </Frame>
             ))}
           </div>
 
@@ -1034,8 +1040,8 @@ export default function TrafficPage() {
             </div>
 
             {/* ── detail panel ── */}
-            <Card className="flex flex-col">
-              <CardContent className="flex-1 px-5 pb-5 pt-5">
+            <Frame dense className="w-full flex flex-col">
+              <FramePanel className="flex-1 px-5 pb-5 pt-5">
                 {isLive && effectiveMode === "servers" && (
                   <div className="mb-3 pb-3 border-b">
                     <div className="flex items-center gap-2 flex-wrap">
@@ -1088,8 +1094,8 @@ export default function TrafficPage() {
                 {effectiveMode === "servers" && (liveDetailServer ?? selServer) && <ServerDetail sel={(liveDetailServer ?? selServer)!} range={range} setRange={setRange} />}
                 {effectiveMode === "users"   && <UserDetail   sel={selUser}   range={range} setRange={setRange} />}
                 {effectiveMode === "gre"     && <GreDetail    sel={selGre}    range={range} setRange={setRange} />}
-              </CardContent>
-            </Card>
+              </FramePanel>
+            </Frame>
 
           </div>
         </div>