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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(main)/uptime/page.tsx

@@ -3,7 +3,8 @@
 import { useState, useMemo, useEffect, useRef, useCallback } from "react"
 import { PageHeader } from "@/components/page-header"
 import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
-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 { Input } from "@/components/ui/input"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
@@ -970,15 +971,17 @@ function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerRe
           { icon: <AlertCircleIcon className="size-4" />,                       label: String(highRam),      sub: "RAM > 85%",       color: highRam > 0 ? "text-red-500"    : "text-muted-foreground" },
           { icon: <AlertCircleIcon className="size-4" />,                       label: String(highHdd),      sub: "Диск > 85%",      color: highHdd > 0 ? "text-amber-500"  : "text-muted-foreground" },
         ].map(kpi => (
-          <Card key={kpi.sub}>
-            <CardContent className="px-4 py-3 flex items-start gap-3">
-              <div className={cn("mt-0.5 shrink-0", kpi.color)}>{kpi.icon}</div>
-              <div className="min-w-0">
-                <p className={cn("text-xl font-semibold tabular-nums leading-tight", kpi.color)}>{kpi.label}</p>
-                <p className="text-[11px] text-muted-foreground mt-0.5">{kpi.sub}</p>
+          <Frame key={kpi.sub} className="h-full">
+            <FramePanel className="relative isolate flex h-full items-start gap-3">
+              <IconTile variant="elevated" aria-hidden="true" className={cn("size-10.5", kpi.color)}>
+                {kpi.icon}
+              </IconTile>
+              <div className="min-w-0 flex flex-col gap-0.5">
+                <p className={cn("text-xl leading-none font-bold tabular-nums", kpi.color)}>{kpi.label}</p>
+                <p className="text-[11px] text-muted-foreground">{kpi.sub}</p>
               </div>
-            </CardContent>
-          </Card>
+            </FramePanel>
+          </Frame>
         ))}
       </div>
 
@@ -2026,11 +2029,11 @@ export default function UptimePage() {
                     { label: "Макс TX",         value: maxTx != null ? `${maxTx}` : "—", unit: maxTx != null ? "Мбит/с" : "", color: "text-[var(--chart-tx)]" },
                     { label: "Макс RX",         value: maxRx != null ? `${maxRx}` : "—", unit: maxRx != null ? "Мбит/с" : "", color: "text-[var(--chart-rx)]" },
                   ].map(k => (
-                    <Card key={k.label}>
-                      <CardContent className="pt-4 pb-3 px-4">
-                        <p className="text-xs text-muted-foreground">{k.label}</p>
-                        <div className="flex items-baseline gap-1 mt-0.5">
-                          <span className={cn("text-2xl font-semibold tabular-nums", k.color)}>{k.value}</span>
+                    <Frame key={k.label} className="h-full">
+                      <FramePanel className="flex flex-col gap-0.5">
+                        <p className="text-muted-foreground text-sm font-medium">{k.label}</p>
+                        <div className="flex items-baseline gap-1">
+                          <span className={cn("text-2xl leading-none font-bold tabular-nums", k.color)}>{k.value}</span>
                           {k.unit && <span className="text-xs text-muted-foreground">{k.unit}</span>}
                         </div>
                         {runningCnt > 0 && k.label === "Тестов выполнено" && (
@@ -2038,8 +2041,8 @@ export default function UptimePage() {
                             <RefreshCwIcon className="size-2.5 animate-spin" />{runningCnt} выполняется
                           </p>
                         )}
-                      </CardContent>
-                    </Card>
+                      </FramePanel>
+                    </Frame>
                   ))}
                 </div>
               )
@@ -2077,7 +2080,8 @@ export default function UptimePage() {
               {speedGrouped.map(({ server, probes: srvProbes }) => {
                 const isCollapsed = speedCollapsed.has(server.id)
                 return (
-                  <Card key={server.id} className="overflow-hidden py-0 gap-0">
+                  <Frame key={server.id} dense className="w-full overflow-hidden">
+                    <FramePanel className="p-0 overflow-hidden">
                     {/* server header */}
                     <button
                       onClick={() => toggleSpeedCollapse(server.id)}
@@ -2245,7 +2249,8 @@ export default function UptimePage() {
                         })}
                       </div>
                     )}
-                  </Card>
+                  </FramePanel>
+                  </Frame>
                 )
               })}
 
@@ -2365,7 +2370,8 @@ export default function UptimePage() {
             const warnCount   = allServerProbes.filter(p => p.status === "warn").length
 
             return (
-              <Card key={srv.id} className="overflow-hidden py-0 gap-0">
+              <Frame key={srv.id} dense className="w-full overflow-hidden">
+                <FramePanel className="p-0 overflow-hidden">
 
                 {/* server header */}
                 <button onClick={() => toggleCollapse(srv.id)}
@@ -2592,7 +2598,8 @@ export default function UptimePage() {
                     </div>
                   </>
                 )}
-              </Card>
+              </FramePanel>
+              </Frame>
             )
           })}
         </div>