feat(agency): append user profile identity badge and sign-out footer to the agency side navigation

vibn-frontend/app/[workspace]/agency/layout.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+import { signOut, useSession } from "next-auth/react";
 
 // Minimal SVG Icons
 const Icons = {
@@ -276,6 +277,12 @@ export default function AgencyLayout({
   const params = useParams();
   const pathname = usePathname();
   const workspace = params.workspace as string;
+  const { data: session } = useSession();
+
+  const userInitial =
+    session?.user?.name?.[0]?.toUpperCase() ??
+    session?.user?.email?.[0]?.toUpperCase() ??
+    "?";
 
   // The client list is currently mocked, but in the future this would be fetched from the DB
   const clients = [
@@ -422,6 +429,68 @@ export default function AgencyLayout({
           <NavItem icon={Icons.Users} label="Users" href="#" />
           <NavItem icon={Icons.Settings} label="Settings" href="#" />
         </div>
+
+        {/* ── User footer ── */}
+        <div
+          style={{
+            padding: "12px 14px",
+            borderTop: "1px solid #eae6de",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: 9,
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              width: 26,
+              height: 26,
+              borderRadius: "50%",
+              background: "#f0ece4",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "0.7rem",
+              fontWeight: 600,
+              color: "#8a8478",
+              flexShrink: 0,
+              cursor: "default",
+            }}
+          >
+            {userInitial}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              style={{
+                fontSize: "0.76rem",
+                fontWeight: 500,
+                color: "#1a1a1a",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {session?.user?.name ??
+                session?.user?.email?.split("@")[0] ??
+                "Account"}
+            </div>
+            <button
+              onClick={() => signOut({ callbackUrl: "/signin" })}
+              style={{
+                background: "none",
+                border: "none",
+                padding: 0,
+                fontSize: "0.62rem",
+                color: "#a09a90",
+                cursor: "pointer",
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
       </div>
 
       {/* ── MAIN CONTENT AREA ── */}