feat(web): enhance user profile sharing and navigation updates

- Integrated new components for Unified VCP, including sections for identity, insights, and methodology.
- Updated navigation links to reflect changes from "My Vibe" to "My VCP" and "Vibes" to "Repo VCPs".
- Added support for user ID in the AuthenticatedDashboard for personalized experiences.
- Refactored API routes and components to improve data handling and user profile story generation.
- Enhanced NotificationDropdown and ShareActions components for better user engagement.

This update improves the overall user experience by streamlining navigation and enriching the profile sharing features.

Author: devakone

apps/web/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-toast": "^1.2.15",
     "@supabase/ssr": "^0.5.2",
     "@supabase/supabase-js": "^2.47.14",
+    "@vercel/og": "^0.8.6",
     "@vibed/core": "*",
     "@vibed/db": "*",
     "class-variance-authority": "^0.7.1",
@@ -30,6 +31,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",

apps/web/src/app/api/share/story/[userId]/route.tsx

@@ -10,6 +10,9 @@ import { NextRequest, NextResponse } from "next/server";
 
 export const runtime = "edge";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SupabaseClientInstance = any;
+
 const STORY_WIDTH = 1080;
 const STORY_HEIGHT = 1920;
 
@@ -73,8 +76,19 @@ const buildMetricsFromAxes = (axes: VibeAxes): ShareCardMetric[] => {
   ];
 };
 
+interface UserProfileRow {
+  axes_json?: unknown;
+  cards_json?: unknown;
+  persona_id?: string;
+  persona_name?: string | null;
+  persona_tagline?: string | null;
+  persona_confidence?: string | null;
+  total_commits?: number | null;
+  total_repos?: number | null;
+}
+
 async function buildProfileStory(
-  supabase: ReturnType<typeof createSupabaseServerClient>,
+  supabase: SupabaseClientInstance,
   userId: string,
   appUrl: string
 ): Promise<StoryData | null> {
@@ -86,27 +100,30 @@ async function buildProfileStory(
     .eq("user_id", userId)
     .maybeSingle();
 
-  if (!profile || typeof profile !== "object") return null;
+  const profileRow = (profile ?? null) as UserProfileRow | null;
+  if (!profileRow) return null;
 
-  const axes = isVibeAxes(profile.axes_json) ? profile.axes_json : null;
+  const axes = isVibeAxes(profileRow.axes_json) ? profileRow.axes_json : null;
   const metrics = axes ? buildMetricsFromAxes(axes) : [];
-  const highlight = parseCardsHighlight(profile.cards_json);
-  const colors = STORY_THEMES[profile.persona_id ?? ""] ?? DEFAULT_THEME;
+  const highlight = parseCardsHighlight(profileRow.cards_json);
+  const colors = STORY_THEMES[profileRow.persona_id ?? ""] ?? DEFAULT_THEME;
   const subhead =
-    profile.persona_tagline?.trim().length ? profile.persona_tagline : `${profile.persona_confidence} confidence`;
+    profileRow.persona_tagline?.trim().length
+      ? profileRow.persona_tagline
+      : `${profileRow.persona_confidence ?? "medium"} confidence`;
   const stats = [
-    `${profile.total_commits?.toLocaleString() ?? "0"} commits`,
-    `${profile.total_repos ?? 0} repos included`,
+    `${profileRow.total_commits?.toLocaleString() ?? "0"} commits`,
+    `${profileRow.total_repos ?? 0} repos included`,
   ];
   const topAxes = axes ? formatAxesList(axes) : [];
 
   return {
     headline: "My Vibed Profile",
     subhead,
-    personaName: profile.persona_name ?? "Vibe Coder",
+    personaName: profileRow.persona_name ?? "Vibe Coder",
     personaTagline: subhead,
-    personaId: profile.persona_id ?? "balanced_builder",
-    personaConfidence: profile.persona_confidence ?? "medium",
+    personaId: profileRow.persona_id ?? "balanced_builder",
+    personaConfidence: profileRow.persona_confidence ?? "medium",
     metrics: metrics.length ? metrics : stats.slice(0, 4).map((value, idx) => ({ label: ["Commits", "Repos", "Profile", "Vibes"][idx] ?? `Stat ${idx + 1}`, value })),
     highlight,
     topAxes,
@@ -117,7 +134,7 @@ async function buildProfileStory(
 }
 
 async function buildJobStory(
-  supabase: ReturnType<typeof createSupabaseServerClient>,
+  supabase: SupabaseClientInstance,
   userId: string,
   jobId: string,
   appUrl: string
@@ -414,15 +431,16 @@ const renderStoryImage = async (story: StoryData, qrDataUrl: string) => {
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { userId: string } }
+  { params }: { params: Promise<{ userId: string }> }
 ) {
   const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://www.vibed.app";
   const supabase = await createSupabaseServerClient();
   const {
     data: { user },
   } = await supabase.auth.getUser();
 
-  if (!user || user.id !== params.userId) {
+  const { userId } = await params;
+  if (!user || user.id !== userId) {
     return NextResponse.json({ error: "unauthorized" }, { status: 401 });
   }
 

apps/web/src/app/page.tsx

@@ -14,6 +14,14 @@ import {
   type VibeAxes,
   type VibeCommitEvent,
 } from "@vibed/core";
+import {
+  UnifiedIdentitySection,
+  UnifiedInsightSection,
+  UnifiedAxesSection,
+  EvolutionSection,
+  RepoBreakdownSection,
+  UnifiedMethodologySection,
+} from "@/components/vcp/unified";
 
 const heroFeatures = [
   "A Vibe Coding Profile (VCP) built from AI-assisted engineering signals in your commit history",
@@ -796,7 +804,7 @@ export default async function Home({
       }
     : null;
 
-  return <AuthenticatedDashboard stats={stats} debugInfo={debugInfo} />;
+  return <AuthenticatedDashboard stats={stats} debugInfo={debugInfo} userId={user.id} />;
 }
 
 function MarketingLanding() {
@@ -952,9 +960,11 @@ function MarketingLanding() {
 function AuthenticatedDashboard({
   stats,
   debugInfo,
+  userId,
 }: {
   stats: AuthStats;
   debugInfo: Record<string, unknown> | null;
+  userId: string;
 }) {
   const isAxisValue = (v: unknown): v is { score: number; level: string; why: string[] } => {
     if (typeof v !== "object" || v === null) return false;
@@ -1136,7 +1146,7 @@ function AuthenticatedDashboard({
             topAxes={topAxes}
             insight={crossRepoInsight}
             axes={stats.userProfile.axes as unknown as VibeAxes}
-            userId={user?.id ?? ""}
+            userId={userId}
           />
         ) : null}
 
@@ -1159,21 +1169,21 @@ function AuthenticatedDashboard({
                   {stats.completedJobs > 0 ? (
                     <>
                       <Link
-                        href="/repos"
+                        href="/settings/repos"
                         className="rounded-full border border-black/10 bg-white/80 px-4 py-1.5 text-xs font-semibold text-zinc-700 shadow-sm transition hover:bg-white"
                       >
                         Add repo
                       </Link>
                     <Link
-                      href="/analysis"
+                      href="/vibes"
                       className="rounded-full bg-zinc-900 px-4 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-zinc-800"
                     >
                       View Repo VCPs
                     </Link>
                     </>
                   ) : (
                     <Link
-                      href="/repos"
+                      href="/settings/repos"
                       className="rounded-full bg-zinc-900 px-4 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-zinc-800"
                     >
                       Pick a repo
@@ -1468,7 +1478,7 @@ function AuthenticatedDashboard({
               <div className="flex flex-wrap gap-3">
                 {stats.completedJobs === 0 ? (
                   <>
-                    <Link href="/repos" className={wrappedTheme.primaryButton}>
+                    <Link href="/settings/repos" className={wrappedTheme.primaryButton}>
                       Pick a repo
                     </Link>
                     <Link href="/security" className={wrappedTheme.secondaryButton}>
@@ -1477,10 +1487,10 @@ function AuthenticatedDashboard({
                   </>
                 ) : (
                   <>
-                    <Link href="/repos" className={wrappedTheme.secondaryButton}>
+                    <Link href="/settings/repos" className={wrappedTheme.secondaryButton}>
                       Add repo
                     </Link>
-                    <Link href="/analysis" className={wrappedTheme.primaryButton}>
+                    <Link href="/vibes" className={wrappedTheme.primaryButton}>
                       View Repo VCPs
                     </Link>
                   </>

apps/web/src/components/notifications/NotificationDropdown.tsx

@@ -226,11 +226,11 @@ export function NotificationDropdown() {
         {recentJobs.length > 0 && (
           <div className="border-t border-zinc-200 px-4 py-2">
             <Link
-              href="/analysis"
+              href="/vibes"
               onClick={() => setIsOpen(false)}
               className="block text-center text-xs font-medium text-zinc-500 hover:text-zinc-700"
             >
-              View all reports →
+              View Repo VCPs →
             </Link>
           </div>
         )}

apps/web/src/components/share/ShareActions.tsx

@@ -47,6 +47,7 @@ export function ShareActions({
   shareTemplate,
   entityId,
   disabled = false,
+  storyEndpoint,
 }: ShareActionsProps) {
   const [copied, setCopied] = useState(false);
   const [copiedLink, setCopiedLink] = useState(false);

apps/web/src/components/vcp/unified/EvolutionSection.tsx

@@ -3,9 +3,9 @@ import { cn } from "@/lib/utils";
 interface EvolutionSectionProps {
   /** Number of completed repo VCPs */
   repoVcpCount: number;
-  /** Number of persona shifts detected */
-  vibeShifts: number;
-  /** Dominant persona name (short) */
+  /** Vibe shifts value (can be number, "New", or "Steady") */
+  vibeShifts: string | number;
+  /** Dominant persona name (short, typically first word of persona) */
   dominantVibe: string | null;
   /** Helper text explaining shift history */
   shiftHelper?: string;

apps/web/src/components/vcp/unified/UnifiedIdentitySection.tsx

@@ -18,6 +18,10 @@ interface UnifiedIdentitySectionProps {
   clarity?: number;
   /** Number of completed analyses */
   completedJobs: number;
+  /** Fallback: analyzed repos count (for "profile forming" state) */
+  analyzedRepos?: number;
+  /** Fallback: analyzed commits count (for "profile forming" state) */
+  analyzedCommits?: number;
   /** Fallback persona (from latest job, if no profile) */
   latestPersona?: {
     label: string | null;
@@ -41,10 +45,13 @@ export function UnifiedIdentitySection({
   totalCommits,
   clarity,
   completedJobs,
+  analyzedRepos,
+  analyzedCommits,
   latestPersona,
   className,
 }: UnifiedIdentitySectionProps) {
   const hasProfile = Boolean(confidence && totalRepos);
+  const isForming = !hasProfile && (analyzedRepos ?? 0) > 0;
 
   return (
     <div
@@ -105,6 +112,14 @@ export function UnifiedIdentitySection({
               <span>·</span>
               <span>{clarity}% clarity</span>
             </>
+          ) : isForming ? (
+            <>
+              <span>{analyzedRepos} repos</span>
+              <span>·</span>
+              <span>{analyzedCommits?.toLocaleString()} commits</span>
+              <span>·</span>
+              <span>Profile forming</span>
+            </>
           ) : latestPersona ? (
             <>
               <span className="rounded-full bg-white/80 px-3 py-1 font-medium text-zinc-800 shadow-sm">