feat: add public profile pages with username system and privacy controls

Add shareable public profile pages at /u/{username} with per-repo VCP
views at /u/{username}/repo/{repoSlug}. Includes a username system
(auto-populated from GitHub, editable), granular privacy settings for
controlling what's visible, server-rendered pages with OG metadata for
social sharing, and a settings page for managing public profile options.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: devakone

apps/web/src/app/api/og/u/[username]/route.tsx

@@ -0,0 +1,234 @@
+import { ImageResponse } from "@vercel/og";
+import { createClient } from "@supabase/supabase-js";
+import { getPersonaAura } from "@/lib/persona-auras";
+
+export const runtime = "edge";
+
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+const SCALE = 2;
+
+/**
+ * GET /api/og/u/[username]
+ * Generates a 1200x630 OG image for a public profile.
+ */
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ username: string }> }
+) {
+  try {
+    const { username } = await params;
+
+    // Font loading
+    const fontNormalPromise = fetch(
+      new URL(
+        "https://unpkg.com/@fontsource/space-grotesk@5.0.13/files/space-grotesk-latin-400-normal.woff"
+      )
+    )
+      .then((res) => (res.ok ? res.arrayBuffer() : null))
+      .catch(() => null);
+
+    const fontBoldPromise = fetch(
+      new URL(
+        "https://unpkg.com/@fontsource/space-grotesk@5.0.13/files/space-grotesk-latin-700-normal.woff"
+      )
+    )
+      .then((res) => (res.ok ? res.arrayBuffer() : null))
+      .catch(() => null);
+
+    // Supabase
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseKey =
+      process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+    if (!supabaseUrl || !supabaseKey) {
+      throw new Error("Missing Supabase credentials");
+    }
+
+    const supabase = createClient(supabaseUrl, supabaseKey);
+
+    // Fetch user by username
+    const { data: user } = await supabase
+      .from("users")
+      .select("id, username, public_profile_settings")
+      .eq("username", username.toLowerCase())
+      .single();
+
+    if (!user) {
+      return new Response("Profile not found", { status: 404 });
+    }
+
+    const settings = user.public_profile_settings as Record<string, boolean> | null;
+    if (!settings?.profile_enabled) {
+      return new Response("Profile not public", { status: 404 });
+    }
+
+    // Fetch profile
+    const { data: profile } = await supabase
+      .from("user_profiles")
+      .select(
+        "persona_id, persona_name, persona_tagline, persona_confidence, total_repos, total_commits, axes_json, narrative_json"
+      )
+      .eq("user_id", user.id)
+      .single();
+
+    if (!profile) {
+      return new Response("Profile not found", { status: 404 });
+    }
+
+    const personaName = profile.persona_name || "Unknown Vibe";
+    const personaTagline = profile.persona_tagline || "Coding with vibes";
+    const personaConfidence = profile.persona_confidence || "High";
+    const totalRepos = profile.total_repos || 0;
+    const totalCommits = profile.total_commits || 0;
+    const aura = getPersonaAura(profile.persona_id);
+
+    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:8108";
+    const displayUrl = `${new URL(baseUrl).host}/u/${user.username}`;
+    const bgUrl = new URL(aura.background, baseUrl).toString();
+
+    const [fontDataNormal, fontDataBold] = await Promise.all([
+      fontNormalPromise,
+      fontBoldPromise,
+    ]);
+
+    const fonts: Array<{ name: string; data: ArrayBuffer; style: string; weight: number }> = [];
+    if (fontDataNormal)
+      fonts.push({ name: "Space Grotesk", data: fontDataNormal, style: "normal", weight: 400 });
+    if (fontDataBold)
+      fonts.push({ name: "Space Grotesk", data: fontDataBold, style: "normal", weight: 700 });
+
+    const width = OG_WIDTH * SCALE;
+    const height = OG_HEIGHT * SCALE;
+    const pad = 60 * SCALE;
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+            backgroundColor: "#111",
+            backgroundImage: `url(${bgUrl})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 24 * SCALE,
+          }}
+        >
+          {/* Overlay */}
+          <div
+            style={{ position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.45)" }}
+          />
+
+          {/* Content */}
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              width: "100%",
+              height: "100%",
+              padding: `${pad}px`,
+            }}
+          >
+            {/* Top */}
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 16 * SCALE,
+                  fontWeight: 700,
+                  letterSpacing: "0.2em",
+                  textTransform: "uppercase",
+                  color: "rgba(255,255,255,0.6)",
+                  marginBottom: 12 * SCALE,
+                }}
+              >
+                @{user.username}&apos;s VCP
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 56 * SCALE,
+                  fontWeight: 700,
+                  color: "white",
+                  lineHeight: 1,
+                  marginBottom: 8 * SCALE,
+                  maxWidth: "90%",
+                }}
+              >
+                {personaName}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 24 * SCALE,
+                  color: "rgba(255,255,255,0.85)",
+                  fontWeight: 400,
+                  marginBottom: 12 * SCALE,
+                  maxWidth: "85%",
+                }}
+              >
+                {personaTagline}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 18 * SCALE,
+                  fontWeight: 500,
+                  color: "rgba(255,255,255,0.6)",
+                }}
+              >
+                {personaConfidence} confidence
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                borderTop: `${1 * SCALE}px solid rgba(255,255,255,0.15)`,
+                paddingTop: 16 * SCALE,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 18 * SCALE,
+                  fontWeight: 500,
+                  color: "rgba(255,255,255,0.6)",
+                }}
+              >
+                {displayUrl}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 18 * SCALE,
+                  color: "rgba(255,255,255,0.6)",
+                }}
+              >
+                {totalRepos} repos &bull; {totalCommits.toLocaleString()} commits
+              </div>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width,
+        height,
+        fonts: fonts.length > 0 ? (fonts as never) : undefined,
+      }
+    );
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : "Unknown error";
+    console.error("OG image error:", message);
+    return new Response(`Server Error: ${message}`, { status: 500 });
+  }
+}

apps/web/src/app/api/profile/public-settings/route.ts

@@ -0,0 +1,117 @@
+import { NextResponse } from "next/server";
+import { createSupabaseServerClient } from "@/lib/supabase/server";
+import { createSupabaseServiceClient } from "@/lib/supabase/service";
+import type { PublicProfileSettings } from "@/types/public-profile";
+import { DEFAULT_PUBLIC_PROFILE_SETTINGS } from "@/types/public-profile";
+
+export const runtime = "nodejs";
+
+const VALID_KEYS = new Set(Object.keys(DEFAULT_PUBLIC_PROFILE_SETTINGS));
+
+/**
+ * GET /api/profile/public-settings
+ * Returns the current user's public profile settings.
+ */
+export async function GET() {
+  const supabase = await createSupabaseServerClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+
+  const { data, error } = await supabase
+    .from("users")
+    .select()
+    .eq("id", user.id)
+    .single();
+
+  if (error) {
+    return NextResponse.json({ error: "fetch_failed" }, { status: 500 });
+  }
+
+  const row = data as { username?: string | null; public_profile_settings?: Record<string, unknown> | null } | null;
+  const settings = {
+    ...DEFAULT_PUBLIC_PROFILE_SETTINGS,
+    ...(row?.public_profile_settings as Partial<PublicProfileSettings> | null),
+  };
+
+  return NextResponse.json({
+    username: row?.username ?? null,
+    settings,
+  });
+}
+
+/**
+ * PUT /api/profile/public-settings
+ * Updates the current user's public profile settings.
+ */
+export async function PUT(request: Request) {
+  const supabase = await createSupabaseServerClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+
+  let body: { settings?: Partial<PublicProfileSettings> };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "invalid_body" }, { status: 400 });
+  }
+
+  if (!body.settings || typeof body.settings !== "object") {
+    return NextResponse.json({ error: "settings_required" }, { status: 400 });
+  }
+
+  // Validate all keys are known boolean settings
+  for (const [key, value] of Object.entries(body.settings)) {
+    if (!VALID_KEYS.has(key)) {
+      return NextResponse.json({ error: `Unknown setting: ${key}` }, { status: 400 });
+    }
+    if (typeof value !== "boolean") {
+      return NextResponse.json({ error: `Setting ${key} must be a boolean` }, { status: 400 });
+    }
+  }
+
+  // Fetch current user data
+  const { data: currentData } = await supabase
+    .from("users")
+    .select()
+    .eq("id", user.id)
+    .single();
+
+  const currentRow = currentData as { username?: string | null; public_profile_settings?: Record<string, unknown> | null } | null;
+
+  // If enabling profile, verify username exists
+  if (body.settings.profile_enabled && !currentRow?.username) {
+    return NextResponse.json(
+      { error: "You must set a username before enabling your public profile" },
+      { status: 400 }
+    );
+  }
+
+  const merged: PublicProfileSettings = {
+    ...DEFAULT_PUBLIC_PROFILE_SETTINGS,
+    ...(currentRow?.public_profile_settings as Partial<PublicProfileSettings> | null),
+    ...body.settings,
+  };
+
+  const service = createSupabaseServiceClient();
+  const { error: updateError } = await service
+    .from("users")
+    .update({ public_profile_settings: JSON.parse(JSON.stringify(merged)) })
+    .eq("id", user.id);
+
+  if (updateError) {
+    console.error("Settings update failed:", updateError);
+    return NextResponse.json({ error: "update_failed" }, { status: 500 });
+  }
+
+  return NextResponse.json({ settings: merged });
+}