refactor: integrate PanelCard and enhance dashboard components for improved layout

Refactored multiple dashboard components to utilize the new PanelCard for better organization and presentation. Updated the DashboardFramePanel, DashboardQuickLinks, and DashboardOperationsBreakdown components to streamline layouts and enhance user experience. Removed deprecated components and improved loading states in various sections, ensuring a cohesive interface throughout the application.

apps/web/src/lib/ui-surface.ts

@@ -0,0 +1,26 @@
+/**
+ * EvoBGP UI surface contract (ReUI Pro).
+ *
+ * Primary surface: **Card** via `PanelCard` / `DataGridCard`.
+ * All route-level panels, KPI tiles, charts and data grids use shadcn Card —
+ * not ReUI Frame — for visual consistency across screens.
+ *
+ * ReUI Frame blocks from registry are adapted into Card composition when installed.
+ *
+ * @see https://reui.io/blocks — card category
+ * @see `.agents/skills/shadcn-react/SKILL.md`
+ */
+export const UI_SURFACE = 'card' as const
+
+/** Shared padding for KPI / metric tiles inside PanelCard. */
+export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
+
+/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
+export const kpiGridClassName =
+  'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
+
+/** Two-column chart panel row (monitoring / network overview). */
+export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
+
+/** Main + sidebar layout (8+4) used on dashboard. */
+export const dashboardMainSidebarClassName = 'grid gap-4 xl:grid-cols-12 xl:items-start'