feat(ui): add message cache management page and dashboard enhancements

- Introduced MessageCachePage for browsing and managing cached webhook events.
- Enhanced DashboardPage to display runtime stats and message cache information.
- Added new API types for message cache events and system stats.
- Integrated SwaggerPage for API documentation and live request testing.

web/src/components/DashboardLayout.tsx

@@ -8,7 +8,7 @@ import {
   Button,
   Avatar,
   Stack,
-  Badge,
+  Image,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -22,6 +22,7 @@ import {
   IconCategory,
   IconArrowsShuffle,
   IconFileText,
+  IconDatabase,
   IconLogout,
 } from "@tabler/icons-react";
 import { useAuthStore } from "../stores/authStore";
@@ -40,6 +41,14 @@ export default function DashboardLayout() {
   const isActive = (path: string) => location.pathname === path;
   const isAnyActive = (paths: string[]) =>
     paths.some((path) => location.pathname === path);
+  const displayName =
+    user?.username?.trim() ||
+    user?.full_name?.trim() ||
+    user?.email?.trim() ||
+    "User";
+  const displayInitial = displayName[0]?.toUpperCase() || "U";
+  const logoSrc = `${import.meta.env.BASE_URL}logo.png`;
+  const swaggerIconSrc = `${import.meta.env.BASE_URL}swagger-icon.svg`;
 
   return (
     <AppShell
@@ -60,19 +69,17 @@ export default function DashboardLayout() {
               hiddenFrom="sm"
               size="sm"
             />
+            <Image src={logoSrc} alt="WhatsHooked logo" w={24} h={24} fit="contain" />
             <Text size="xl" fw={700}>
               WhatsHooked
             </Text>
-            <Badge color="blue" variant="light">
-              Admin
-            </Badge>
           </Group>
           <Group>
             <Text size="sm" c="dimmed">
-              {user?.username || "User"}
+              {displayName}
             </Text>
             <Avatar color="blue" radius="xl" size="sm">
-              {user?.username?.[0]?.toUpperCase() || "U"}
+              {displayInitial}
             </Avatar>
           </Group>
         </Group>
@@ -222,6 +229,32 @@ export default function DashboardLayout() {
                 if (opened) toggle();
               }}
             />
+            <NavLink
+              href="/message-cache"
+              label="Message Cache"
+              leftSection={
+                <IconDatabase size={20} stroke={1.5} color="indigo" />
+              }
+              active={isActive("/message-cache")}
+              onClick={(e) => {
+                e.preventDefault();
+                navigate("/message-cache");
+                if (opened) toggle();
+              }}
+            />
+            <NavLink
+              href="/sw"
+              label="Swagger"
+              leftSection={
+                <Image src={swaggerIconSrc} alt="Swagger" w={18} h={18} fit="contain" />
+              }
+              active={isActive("/sw")}
+              onClick={(e) => {
+                e.preventDefault();
+                navigate("/sw");
+                if (opened) toggle();
+              }}
+            />
           </Stack>
         </AppShell.Section>
 
@@ -230,7 +263,7 @@ export default function DashboardLayout() {
             <Group justify="space-between" px="sm">
               <div>
                 <Text size="sm" fw={500}>
-                  {user?.username || "User"}
+                  {displayName}
                 </Text>
                 <Text size="xs" c="dimmed">
                   {user?.role || "user"}