diff --git a/.release-please-manifest.develop.json b/.release-please-manifest.develop.json
index 543ffd0..303a5cc 100644
--- a/.release-please-manifest.develop.json
+++ b/.release-please-manifest.develop.json
@@ -1,5 +1,5 @@
 {
-  ".": "0.1.0-alpha.3",
-  "apps/web": "0.1.0-alpha.3",
+  ".": "0.1.0-alpha.4",
+  "apps/web": "0.1.0-alpha.4",
   "apps/worker": "0.1.0-alpha.2"
 }
diff --git a/CHANGELOG-DEVELOP.md b/CHANGELOG-DEVELOP.md
index e6d39ea..88bb3c7 100644
--- a/CHANGELOG-DEVELOP.md
+++ b/CHANGELOG-DEVELOP.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.1.0-alpha.4](https://github.com/devakone/vibe-coding-profiler/compare/vibed-coding-v0.1.0-alpha.3...vibed-coding-v0.1.0-alpha.4) (2026-01-22)
+
+
+### Features
+
+* **web:** add agents.txt and robots.txt files, update branding to "Vibe Coding Profiler" ([0afc2c8](https://github.com/devakone/vibe-coding-profiler/commit/0afc2c864b9b1a7fce79d7d5fddbf60c2a7a2490))
+* **web:** add new aura backgrounds and update persona aura structure ([3590f97](https://github.com/devakone/vibe-coding-profiler/commit/3590f97b9690ff59feb3f50b38de23d06b6be1c1))
+* **web:** enhance Open Graph metadata and add dynamic OG image generation ([6b68e45](https://github.com/devakone/vibe-coding-profiler/commit/6b68e455263114fd4fb2a37bb7335270c612fdca))
+
+
+### Bug Fixes
+
+* **web:** update branding from "vibed.app" to "vibe-coding-profiler.com" ([852cfc5](https://github.com/devakone/vibe-coding-profiler/commit/852cfc511c21b1c40ba29a310668d7686e9af533))
+
 ## [0.1.0-alpha.3](https://github.com/devakone/vibe-coding-profile/compare/vibed-coding-v0.1.0-alpha.2...vibed-coding-v0.1.0-alpha.3) (2026-01-22)
 
 
diff --git a/apps/web/CHANGELOG-DEVELOP.md b/apps/web/CHANGELOG-DEVELOP.md
index df4a5be..16e75b7 100644
--- a/apps/web/CHANGELOG-DEVELOP.md
+++ b/apps/web/CHANGELOG-DEVELOP.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.1.0-alpha.4](https://github.com/devakone/vibe-coding-profiler/compare/web-v0.1.0-alpha.3...web-v0.1.0-alpha.4) (2026-01-22)
+
+
+### Features
+
+* **web:** add agents.txt and robots.txt files, update branding to "Vibe Coding Profiler" ([0afc2c8](https://github.com/devakone/vibe-coding-profiler/commit/0afc2c864b9b1a7fce79d7d5fddbf60c2a7a2490))
+* **web:** add new aura backgrounds and update persona aura structure ([3590f97](https://github.com/devakone/vibe-coding-profiler/commit/3590f97b9690ff59feb3f50b38de23d06b6be1c1))
+* **web:** enhance Open Graph metadata and add dynamic OG image generation ([6b68e45](https://github.com/devakone/vibe-coding-profiler/commit/6b68e455263114fd4fb2a37bb7335270c612fdca))
+
+
+### Bug Fixes
+
+* **web:** update branding from "vibed.app" to "vibe-coding-profiler.com" ([852cfc5](https://github.com/devakone/vibe-coding-profiler/commit/852cfc511c21b1c40ba29a310668d7686e9af533))
+
 ## [0.1.0-alpha.3](https://github.com/devakone/vibe-coding-profile/compare/web-v0.1.0-alpha.2...web-v0.1.0-alpha.3) (2026-01-22)
 
 
diff --git a/apps/web/package.json b/apps/web/package.json
index 593c382..7c9530c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start -p 8108",
     "lint": "eslint",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.15",
@@ -32,6 +34,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "vitest": "^1",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/apps/web/public/agents.txt b/apps/web/public/agents.txt
new file mode 100644
index 0000000..8d0f097
--- /dev/null
+++ b/apps/web/public/agents.txt
@@ -0,0 +1,27 @@
+# Vibe Coding Profiler - agents.txt
+# Instructions for AI agents and LLM crawlers
+# https://vibed.dev
+
+# About this site
+name: Vibe Coding Profiler
+description: Vibe Coding Profiler analyzes git commit history to reveal your unique Vibe Coding Profile (VCP) — your AI-era coding persona with patterns, insights, and shareable profiles grounded in commit evidence.
+url: https://vibed.dev
+
+# What we do
+purpose: We help developers understand their coding style in the AI era by analyzing commit patterns, detecting AI-assisted workflows, and generating shareable "Vibe Coding Profiles" that reveal how developers collaborate with AI tools.
+
+# Key concepts
+- VCP (Vibe Coding Profile): A persona-based profile showing your coding patterns
+- Vibe Axes: Six dimensions measuring coding style (shipping rhythm, context window, AI reliance, scope approach, feedback loop, collaboration style)
+- Personas: Archetypes like "Prompt Sprinter", "Guardrailed Viber", "Methodical Architect" that represent different AI-era coding styles
+
+# For AI agents
+contact: https://github.com/devakone/vibed-coding
+license: Proprietary (open-sourcing planned)
+
+# Crawling preferences
+User-agent: *
+Allow: /
+Disallow: /api/
+Disallow: /settings/
+Disallow: /admin/
diff --git a/apps/web/public/aura-backgrounds/bg-guardrailed-viber-vertical.webp b/apps/web/public/aura-backgrounds/bg-guardrailed-viber-vertical.webp
new file mode 100644
index 0000000..96ca7d4
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-guardrailed-viber-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-methodical-architect-vertical.webp b/apps/web/public/aura-backgrounds/bg-methodical-architect-vertical.webp
new file mode 100644
index 0000000..ab59b5e
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-methodical-architect-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-orchestrator-factory-vertical.webp b/apps/web/public/aura-backgrounds/bg-orchestrator-factory-vertical.webp
new file mode 100644
index 0000000..3b43ce1
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-orchestrator-factory-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-orchestrator-vertical.webp b/apps/web/public/aura-backgrounds/bg-orchestrator-vertical.webp
new file mode 100644
index 0000000..d80c46b
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-orchestrator-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-prompt-sprinter-vertical.webp b/apps/web/public/aura-backgrounds/bg-prompt-sprinter-vertical.webp
new file mode 100644
index 0000000..fa8e183
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-prompt-sprinter-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-rapid-risk-taker-vertical.webp b/apps/web/public/aura-backgrounds/bg-rapid-risk-taker-vertical.webp
new file mode 100644
index 0000000..14ba3b2
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-rapid-risk-taker-vertical.webp differ
diff --git a/apps/web/public/aura-backgrounds/bg-reflective-balancer-vertical.webp b/apps/web/public/aura-backgrounds/bg-reflective-balancer-vertical.webp
new file mode 100644
index 0000000..01b010d
Binary files /dev/null and b/apps/web/public/aura-backgrounds/bg-reflective-balancer-vertical.webp differ
diff --git a/apps/web/public/robots.txt b/apps/web/public/robots.txt
new file mode 100644
index 0000000..a916823
--- /dev/null
+++ b/apps/web/public/robots.txt
@@ -0,0 +1,13 @@
+# Vibe Coding Profiler - robots.txt
+# https://vibed.dev
+
+User-agent: *
+Allow: /
+
+# Disallow private/authenticated routes
+Disallow: /api/
+Disallow: /settings/
+Disallow: /admin/
+
+# Sitemap
+Sitemap: https://vibed.dev/sitemap.xml
diff --git a/apps/web/src/app/AppHeader.tsx b/apps/web/src/app/AppHeader.tsx
index c00c31c..57cea25 100644
--- a/apps/web/src/app/AppHeader.tsx
+++ b/apps/web/src/app/AppHeader.tsx
@@ -51,7 +51,7 @@ export default function AppHeader(props: {
           >
             <span className={wrappedTheme.dot} />
             <span className="text-lg font-bold tracking-tight text-zinc-950">
-              Vibe Coding Profile
+              Vibe Coding Profiler
             </span>
           </Link>
           <nav className="flex items-center gap-1 text-sm">
diff --git a/apps/web/src/app/analysis/[jobId]/page.tsx b/apps/web/src/app/analysis/[jobId]/page.tsx
index 18a85d8..91603f6 100644
--- a/apps/web/src/app/analysis/[jobId]/page.tsx
+++ b/apps/web/src/app/analysis/[jobId]/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import AnalysisClient from "./AnalysisClient";
 import { createSupabaseServerClient } from "@/lib/supabase/server";
 import { redirect } from "next/navigation";
@@ -5,6 +6,119 @@ import { wrappedTheme } from "@/lib/theme";
 
 export const runtime = "nodejs";
 
+const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:8108";
+
+// Database row types for OG metadata
+type AnalysisJobRow = {
+  repo_id: string;
+  commit_count: number | null;
+  status: string;
+};
+
+type RepoRow = {
+  full_name: string;
+};
+
+type VibeInsightsRow = {
+  persona_name: string | null;
+  persona_tagline: string | null;
+};
+
+type AnalysisInsightsRow = {
+  persona_label: string | null;
+  share_template: unknown;
+};
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ jobId: string }>;
+}): Promise<Metadata> {
+  const { jobId } = await params;
+  const supabase = await createSupabaseServerClient();
+
+  // Fetch job and related data for OG metadata
+  const { data: jobData } = await supabase
+    .from("analysis_jobs")
+    .select("repo_id, commit_count, status")
+    .eq("id", jobId)
+    .maybeSingle();
+
+  const job = jobData as AnalysisJobRow | null;
+
+  if (!job || job.status !== "done") {
+    return {
+      title: "Analysis | Vibe Coding Profiler",
+      description: "Analyzing your commit history to discover your Vibe Coding Profile.",
+    };
+  }
+
+  // Fetch persona and repo info
+  const [repoResult, vibeResult, insightsResult] = await Promise.all([
+    supabase.from("repos").select("full_name").eq("id", job.repo_id).maybeSingle(),
+    supabase
+      .from("vibe_insights")
+      .select("persona_name, persona_tagline")
+      .eq("job_id", jobId)
+      .maybeSingle(),
+    supabase
+      .from("analysis_insights")
+      .select("persona_label, share_template")
+      .eq("job_id", jobId)
+      .maybeSingle(),
+  ]);
+
+  const repoRow = repoResult?.data as RepoRow | null;
+  const vibeRow = vibeResult?.data as VibeInsightsRow | null;
+  const insightsRow = insightsResult?.data as AnalysisInsightsRow | null;
+
+  const repoName =
+    repoRow?.full_name && typeof repoRow.full_name === "string"
+      ? repoRow.full_name
+      : "Repository";
+
+  const personaName =
+    vibeRow?.persona_name ??
+    insightsRow?.persona_label ??
+    "Vibe Coder";
+
+  const personaTagline =
+    vibeRow?.persona_tagline ??
+    (insightsRow?.share_template as { tagline?: string } | null)?.tagline ??
+    "Discover your AI coding style";
+
+  const title = `${personaName} | ${repoName} VCP`;
+  const description = `${personaTagline} — ${job.commit_count?.toLocaleString() ?? 0} commits analyzed.`;
+  const ogImageUrl = `${appUrl}/api/og/analysis/${jobId}`;
+  const pageUrl = `${appUrl}/analysis/${jobId}`;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url: pageUrl,
+      siteName: "Vibe Coding Profiler",
+      type: "article",
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: `${personaName} - Vibe Coding Profile for ${repoName}`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [ogImageUrl],
+    },
+  };
+}
+
 export default async function AnalysisPage({
   params,
 }: {
diff --git a/apps/web/src/app/api/og/analysis/[jobId]/route.tsx b/apps/web/src/app/api/og/analysis/[jobId]/route.tsx
new file mode 100644
index 0000000..b3e6aef
--- /dev/null
+++ b/apps/web/src/app/api/og/analysis/[jobId]/route.tsx
@@ -0,0 +1,392 @@
+import { ImageResponse } from "@vercel/og";
+import { createSupabaseServerClient } from "@/lib/supabase/server";
+import { computeShareCardMetrics } from "@/lib/vcp/metrics";
+import { isVibeAxes } from "@/lib/vcp/validators";
+import { getPersonaAura } from "@/lib/persona-auras";
+import type { ShareCardColors, ShareCardMetric } from "@/components/share/types";
+import type { VibeAxes } from "@vibed/core";
+import { NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+
+// Database row types for Supabase queries
+type AnalysisJobRow = {
+  repo_id: string;
+  commit_count: number | null;
+  status: string;
+};
+
+type RepoRow = {
+  full_name: string;
+};
+
+type AnalysisInsightsRow = {
+  share_template: unknown;
+  persona_label: string | null;
+  persona_confidence: string | null;
+  persona_id: string | null;
+};
+
+type VibeInsightsRow = {
+  axes_json: unknown;
+  persona_id: string | null;
+  persona_name: string | null;
+  persona_tagline: string | null;
+  persona_confidence: string | null;
+};
+
+/**
+ * Unified violet-indigo color palette for OG images
+ */
+const OG_THEMES: Record<string, ShareCardColors> = {
+  prompt_sprinter: { primary: "#7c3aed", accent: "#6366f1" },
+  rapid_risk_taker: { primary: "#8b5cf6", accent: "#6366f1" },
+  fix_loop_hacker: { primary: "#7c3aed", accent: "#818cf8" },
+  guardrailed_viber: { primary: "#6366f1", accent: "#7c3aed" },
+  spec_first_director: { primary: "#4f46e5", accent: "#7c3aed" },
+  balanced_builder: { primary: "#6366f1", accent: "#8b5cf6" },
+  reflective_balancer: { primary: "#6366f1", accent: "#8b5cf6" },
+  methodical_architect: { primary: "#4f46e5", accent: "#7c3aed" },
+  vertical_slice_shipper: { primary: "#6366f1", accent: "#818cf8" },
+  toolsmith_viber: { primary: "#4f46e5", accent: "#6366f1" },
+  infra_weaver: { primary: "#4338ca", accent: "#6366f1" },
+  "vibe-prototyper": { primary: "#7c3aed", accent: "#6366f1" },
+  "test-validator": { primary: "#6366f1", accent: "#7c3aed" },
+  "spec-architect": { primary: "#4f46e5", accent: "#7c3aed" },
+  "agent-orchestrator": { primary: "#6366f1", accent: "#818cf8" },
+  "reflective-balancer": { primary: "#6366f1", accent: "#8b5cf6" },
+};
+
+const DEFAULT_THEME: ShareCardColors = { primary: "#7c3aed", accent: "#6366f1" };
+
+interface OgData {
+  personaName: string;
+  personaTagline: string;
+  personaId: string;
+  metrics: ShareCardMetric[];
+  repoName: string;
+  commitCount: number;
+  colors: ShareCardColors;
+  auraIconUrl: string;
+}
+
+const buildMetricsFromAxes = (axes: VibeAxes): ShareCardMetric[] => {
+  const computed = computeShareCardMetrics(axes);
+  return [
+    { label: "Strongest", value: computed.strongest },
+    { label: "Style", value: computed.style },
+    { label: "Rhythm", value: computed.rhythm },
+    { label: "Peak", value: computed.peak },
+  ];
+};
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ jobId: string }> }
+) {
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://www.vibe-coding-profiler.com";
+  const supabase = await createSupabaseServerClient();
+  const { jobId } = await params;
+
+  // Fetch job data (public - no auth required for OG images)
+  const { data: jobData } = await supabase
+    .from("analysis_jobs")
+    .select("repo_id, commit_count, status")
+    .eq("id", jobId)
+    .maybeSingle();
+
+  const job = jobData as AnalysisJobRow | null;
+
+  if (!job || job.status !== "done") {
+    // Return a default/fallback OG image for pending or not found jobs
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            width: OG_WIDTH,
+            height: OG_HEIGHT,
+            background: "linear-gradient(135deg, #7c3aed, #6366f1)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff",
+            fontFamily: "system-ui, -apple-system, sans-serif",
+          }}
+        >
+          <h1 style={{ fontSize: 48, margin: 0 }}>Vibe Coding Profiler</h1>
+          <p style={{ fontSize: 24, opacity: 0.9, marginTop: 16 }}>
+            Discover your AI coding style
+          </p>
+        </div>
+      ),
+      { width: OG_WIDTH, height: OG_HEIGHT }
+    );
+  }
+
+  // Fetch related data
+  const [repoResult, insightsResult, vibeResult] = await Promise.all([
+    supabase.from("repos").select("full_name").eq("id", job.repo_id).maybeSingle(),
+    supabase
+      .from("analysis_insights")
+      .select("share_template, persona_label, persona_confidence, persona_id")
+      .eq("job_id", jobId)
+      .maybeSingle(),
+    supabase
+      .from("vibe_insights")
+      .select("axes_json, persona_id, persona_name, persona_tagline, persona_confidence")
+      .eq("job_id", jobId)
+      .maybeSingle(),
+  ]);
+
+  const repoRow = repoResult?.data as RepoRow | null;
+  const insightsRow = insightsResult?.data as AnalysisInsightsRow | null;
+  const vibeRow = vibeResult?.data as VibeInsightsRow | null;
+
+  const repoName =
+    repoRow && typeof repoRow.full_name === "string"
+      ? repoRow.full_name
+      : "Repository";
+
+  const shareTemplate =
+    insightsRow?.share_template &&
+    typeof insightsRow.share_template === "object"
+      ? (insightsRow.share_template as {
+          colors?: { primary?: string; accent?: string };
+          metrics?: Array<{ label: string; value: string }>;
+          tagline?: string;
+        })
+      : null;
+
+  const axes =
+    vibeRow && isVibeAxes(vibeRow.axes_json ?? null)
+      ? (vibeRow.axes_json as VibeAxes)
+      : null;
+
+  const personaName =
+    vibeRow?.persona_name ?? insightsRow?.persona_label ?? "Vibe Coder";
+  const personaId =
+    (vibeRow?.persona_id ?? insightsRow?.persona_id ?? "balanced_builder") as string;
+  const personaTagline =
+    vibeRow?.persona_tagline ??
+    shareTemplate?.tagline ??
+    `${insightsRow?.persona_confidence ?? "medium"} confidence`;
+
+  const colors = OG_THEMES[personaId] ?? DEFAULT_THEME;
+  const aura = getPersonaAura(personaId);
+
+  const metrics =
+    axes && !Number.isNaN(axes.shipping_rhythm.score)
+      ? buildMetricsFromAxes(axes)
+      : shareTemplate?.metrics?.slice(0, 4).map((m) => ({
+          label: m.label,
+          value: m.value,
+        })) ?? [];
+
+  const ogData: OgData = {
+    personaName,
+    personaTagline,
+    personaId,
+    metrics,
+    repoName,
+    commitCount: job.commit_count ?? 0,
+    colors,
+    auraIconUrl: `${appUrl}${aura.icon}`,
+  };
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          position: "relative",
+          width: OG_WIDTH,
+          height: OG_HEIGHT,
+          background: `linear-gradient(135deg, ${ogData.colors.primary}, ${ogData.colors.accent})`,
+          display: "flex",
+          color: "#fff",
+          fontFamily:
+            "Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+          overflow: "hidden",
+        }}
+      >
+        {/* Subtle gradient overlay for depth */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: OG_WIDTH,
+            height: OG_HEIGHT,
+            background:
+              "radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%)",
+          }}
+        />
+
+        {/* Main content */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            padding: 60,
+            flex: 1,
+            position: "relative",
+          }}
+        >
+          {/* Header */}
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <p
+              style={{
+                textTransform: "uppercase",
+                fontSize: 14,
+                letterSpacing: "0.3em",
+                opacity: 0.8,
+                margin: 0,
+              }}
+            >
+              Vibe Coding Profile
+            </p>
+            <h1
+              style={{
+                marginTop: 12,
+                marginBottom: 8,
+                fontSize: 56,
+                fontWeight: 700,
+                lineHeight: 1.1,
+              }}
+            >
+              {ogData.personaName}
+            </h1>
+            <p
+              style={{
+                margin: 0,
+                fontSize: 22,
+                opacity: 0.9,
+                maxWidth: 700,
+              }}
+            >
+              {ogData.personaTagline}
+            </p>
+          </div>
+
+          {/* Metrics row */}
+          {ogData.metrics.length > 0 && (
+            <div
+              style={{
+                display: "flex",
+                gap: 24,
+                marginTop: 24,
+              }}
+            >
+              {ogData.metrics.slice(0, 4).map((metric) => (
+                <div
+                  key={metric.label}
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    padding: "16px 20px",
+                    borderRadius: 16,
+                    background: "rgba(255,255,255,0.12)",
+                    minWidth: 140,
+                  }}
+                >
+                  <p
+                    style={{
+                      margin: 0,
+                      fontSize: 12,
+                      letterSpacing: "0.15em",
+                      textTransform: "uppercase",
+                      opacity: 0.75,
+                    }}
+                  >
+                    {metric.label}
+                  </p>
+                  <p
+                    style={{
+                      margin: "6px 0 0",
+                      fontSize: 24,
+                      fontWeight: 700,
+                    }}
+                  >
+                    {metric.value}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Footer */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <p
+                style={{
+                  margin: 0,
+                  fontSize: 18,
+                  fontWeight: 600,
+                }}
+              >
+                {ogData.repoName}
+              </p>
+              <p
+                style={{
+                  margin: "4px 0 0",
+                  fontSize: 14,
+                  opacity: 0.8,
+                }}
+              >
+                {ogData.commitCount.toLocaleString()} commits analyzed
+              </p>
+            </div>
+            <p
+              style={{
+                margin: 0,
+                fontSize: 16,
+                letterSpacing: "0.1em",
+                opacity: 0.7,
+              }}
+            >
+              vibe-coding-profiler.com
+            </p>
+          </div>
+        </div>
+
+        {/* Aura icon on the right */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 280,
+            background: "rgba(255,255,255,0.08)",
+            borderLeft: "1px solid rgba(255,255,255,0.1)",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={ogData.auraIconUrl}
+            alt=""
+            style={{
+              width: 180,
+              height: 180,
+              objectFit: "contain",
+              opacity: 0.9,
+            }}
+          />
+        </div>
+      </div>
+    ),
+    {
+      width: OG_WIDTH,
+      height: OG_HEIGHT,
+    }
+  );
+}
diff --git a/apps/web/src/app/api/og/route.tsx b/apps/web/src/app/api/og/route.tsx
new file mode 100644
index 0000000..0a25736
--- /dev/null
+++ b/apps/web/src/app/api/og/route.tsx
@@ -0,0 +1,150 @@
+import { ImageResponse } from "@vercel/og";
+
+export const runtime = "edge";
+
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+
+/**
+ * Default OG image for the Vibe Coding Profiler homepage and generic pages.
+ * This image is used when no specific OG image is available.
+ */
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          position: "relative",
+          width: OG_WIDTH,
+          height: OG_HEIGHT,
+          background: "linear-gradient(135deg, #7c3aed, #6366f1)",
+          display: "flex",
+          flexDirection: "column",
+          color: "#fff",
+          fontFamily:
+            "Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+          overflow: "hidden",
+        }}
+      >
+        {/* Gradient overlay for depth */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: OG_WIDTH,
+            height: OG_HEIGHT,
+            background:
+              "radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.15) 0%, transparent 50%)",
+          }}
+        />
+
+        {/* Main content */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            padding: 60,
+            position: "relative",
+            textAlign: "center",
+          }}
+        >
+          {/* Logo/Brand mark */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 80,
+              height: 80,
+              borderRadius: 20,
+              background: "rgba(255,255,255,0.15)",
+              marginBottom: 32,
+              fontSize: 40,
+            }}
+          >
+            ⚡
+          </div>
+
+          {/* Title */}
+          <h1
+            style={{
+              margin: 0,
+              fontSize: 64,
+              fontWeight: 700,
+              lineHeight: 1.1,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            Vibe Coding Profiler
+          </h1>
+
+          {/* Tagline */}
+          <p
+            style={{
+              margin: "20px 0 0",
+              fontSize: 28,
+              opacity: 0.9,
+              maxWidth: 700,
+            }}
+          >
+            Discover your AI coding style
+          </p>
+
+          {/* Feature pills */}
+          <div
+            style={{
+              display: "flex",
+              gap: 16,
+              marginTop: 40,
+            }}
+          >
+            {["Commit Analysis", "Persona Insights", "Shareable Profiles"].map(
+              (feature) => (
+                <span
+                  key={feature}
+                  style={{
+                    padding: "12px 24px",
+                    borderRadius: 999,
+                    background: "rgba(255,255,255,0.12)",
+                    fontSize: 16,
+                    fontWeight: 500,
+                  }}
+                >
+                  {feature}
+                </span>
+              )
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: "0 60px 40px",
+          }}
+        >
+          <p
+            style={{
+              margin: 0,
+              fontSize: 18,
+              letterSpacing: "0.1em",
+              opacity: 0.7,
+            }}
+          >
+            vibe-coding-profiler.com
+          </p>
+        </div>
+      </div>
+    ),
+    {
+      width: OG_WIDTH,
+      height: OG_HEIGHT,
+    }
+  );
+}
diff --git a/apps/web/src/app/api/share/story/[userId]/route.tsx b/apps/web/src/app/api/share/story/[userId]/route.tsx
index c579157..0278ccd 100644
--- a/apps/web/src/app/api/share/story/[userId]/route.tsx
+++ b/apps/web/src/app/api/share/story/[userId]/route.tsx
@@ -4,6 +4,7 @@ import { createSupabaseServerClient } from "@/lib/supabase/server";
 import { computeShareCardMetrics } from "@/lib/vcp/metrics";
 import { isVibeAxes } from "@/lib/vcp/validators";
 import { AXIS_METADATA } from "@/components/vcp/constants";
+import { getPersonaAura } from "@/lib/persona-auras";
 import type { ShareCardColors, ShareCardMetric } from "@/components/share/types";
 import type { InsightCard, VibeAxes } from "@vibed/core";
 import { NextRequest, NextResponse } from "next/server";
@@ -16,19 +17,38 @@ type SupabaseClientInstance = any;
 const STORY_WIDTH = 1080;
 const STORY_HEIGHT = 1920;
 
+/**
+ * Unified violet-indigo color palette for story themes
+ * Matches the PERSONA_COLORS in ProfileShareSection.tsx
+ */
 const STORY_THEMES: Record<string, ShareCardColors> = {
-  prompt_sprinter: { primary: "#7c3aed", accent: "#a855f7" },
-  guardrailed_viber: { primary: "#4338ca", accent: "#6366f1" },
-  spec_first_director: { primary: "#312e81", accent: "#7c3aed" },
-  vertical_slice_shipper: { primary: "#0f172a", accent: "#6366f1" },
-  fix_loop_hacker: { primary: "#4c1d95", accent: "#c084fc" },
-  rapid_risk_taker: { primary: "#a855f7", accent: "#ec4899" },
-  balanced_builder: { primary: "#14b8a6", accent: "#0ea5e9" },
-  toolsmith_viber: { primary: "#0f172a", accent: "#22d3ee" },
-  infra_weaver: { primary: "#075985", accent: "#0ea5e9" },
+  // Dynamic/fast personas - brighter violet
+  prompt_sprinter: { primary: "#7c3aed", accent: "#6366f1" }, // violet-600 → indigo-500
+  rapid_risk_taker: { primary: "#8b5cf6", accent: "#6366f1" }, // violet-500 → indigo-500
+  fix_loop_hacker: { primary: "#7c3aed", accent: "#818cf8" }, // violet-600 → indigo-400
+  
+  // Balanced/thoughtful personas - deeper tones
+  guardrailed_viber: { primary: "#6366f1", accent: "#7c3aed" }, // indigo-500 → violet-600
+  spec_first_director: { primary: "#4f46e5", accent: "#7c3aed" }, // indigo-600 → violet-600
+  balanced_builder: { primary: "#6366f1", accent: "#8b5cf6" }, // indigo-500 → violet-500
+  reflective_balancer: { primary: "#6366f1", accent: "#8b5cf6" }, // indigo-500 → violet-500
+  methodical_architect: { primary: "#4f46e5", accent: "#7c3aed" }, // indigo-600 → violet-600
+  
+  // Technical/structured personas - cooler indigo
+  vertical_slice_shipper: { primary: "#6366f1", accent: "#818cf8" }, // indigo-500 → indigo-400
+  toolsmith_viber: { primary: "#4f46e5", accent: "#6366f1" }, // indigo-600 → indigo-500
+  infra_weaver: { primary: "#4338ca", accent: "#6366f1" }, // indigo-700 → indigo-500
+  
+  // Legacy persona IDs
+  "vibe-prototyper": { primary: "#7c3aed", accent: "#6366f1" },
+  "test-validator": { primary: "#6366f1", accent: "#7c3aed" },
+  "spec-architect": { primary: "#4f46e5", accent: "#7c3aed" },
+  "agent-orchestrator": { primary: "#6366f1", accent: "#818cf8" },
+  "reflective-balancer": { primary: "#6366f1", accent: "#8b5cf6" },
 };
 
-const DEFAULT_THEME: ShareCardColors = { primary: "#4c1d95", accent: "#6366f1" };
+// Default uses the primary brand gradient (violet → indigo)
+const DEFAULT_THEME: ShareCardColors = { primary: "#7c3aed", accent: "#6366f1" };
 
 interface StoryData {
   headline: string;
@@ -43,6 +63,10 @@ interface StoryData {
   stats: string[];
   colors: ShareCardColors;
   url: string;
+  /** Full URL to aura background image */
+  auraBackgroundUrl: string;
+  /** Full URL to aura icon image */
+  auraIconUrl: string;
 }
 
 const parseCardsHighlight = (value: unknown): string | undefined => {
@@ -103,10 +127,12 @@ async function buildProfileStory(
   const profileRow = (profile ?? null) as UserProfileRow | null;
   if (!profileRow) return null;
 
+  const personaId = profileRow.persona_id ?? "balanced_builder";
   const axes = isVibeAxes(profileRow.axes_json) ? profileRow.axes_json : null;
   const metrics = axes ? buildMetricsFromAxes(axes) : [];
   const highlight = parseCardsHighlight(profileRow.cards_json);
-  const colors = STORY_THEMES[profileRow.persona_id ?? ""] ?? DEFAULT_THEME;
+  const colors = STORY_THEMES[personaId] ?? DEFAULT_THEME;
+  const aura = getPersonaAura(personaId);
   const subhead =
     profileRow.persona_tagline?.trim().length
       ? profileRow.persona_tagline
@@ -122,7 +148,7 @@ async function buildProfileStory(
     subhead,
     personaName: profileRow.persona_name ?? "Vibe Coder",
     personaTagline: subhead,
-    personaId: profileRow.persona_id ?? "balanced_builder",
+    personaId,
     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,
@@ -130,6 +156,8 @@ async function buildProfileStory(
     stats,
     colors,
     url: `${appUrl}/profile`,
+    auraBackgroundUrl: `${appUrl}${aura.verticalBackground}`,
+    auraIconUrl: `${appUrl}${aura.icon}`,
   };
 }
 
@@ -195,12 +223,9 @@ async function buildJobStory(
     shareTemplate?.tagline ??
     shareTemplate?.headline ??
     `${insightsResult?.data?.persona_confidence ?? "medium"} confidence`;
-  const colors = shareTemplate?.colors
-    ? {
-        primary: shareTemplate.colors.primary ?? DEFAULT_THEME.primary,
-        accent: shareTemplate.colors.accent ?? DEFAULT_THEME.accent,
-      }
-    : STORY_THEMES[personaId] ?? DEFAULT_THEME;
+  // Prefer unified STORY_THEMES over stored shareTemplate colors for consistency
+  const colors = STORY_THEMES[personaId] ?? DEFAULT_THEME;
+  const aura = getPersonaAura(personaId);
 
   const metrics =
     axes && !Number.isNaN(axes.shipping_rhythm.score)
@@ -227,6 +252,8 @@ async function buildJobStory(
     stats,
     colors,
     url: `${appUrl}/analysis/${jobId}`,
+    auraBackgroundUrl: `${appUrl}${aura.verticalBackground}`,
+    auraIconUrl: `${appUrl}${aura.icon}`,
   };
 }
 
@@ -235,9 +262,9 @@ const renderStoryImage = async (story: StoryData, qrDataUrl: string) => {
     (
       <div
         style={{
+          position: "relative",
           width: STORY_WIDTH,
           height: STORY_HEIGHT,
-          padding: 80,
           borderRadius: 64,
           background: `linear-gradient(180deg, ${story.colors.primary}, ${story.colors.accent})`,
           display: "flex",
@@ -245,186 +272,281 @@ const renderStoryImage = async (story: StoryData, qrDataUrl: string) => {
           color: "#fff",
           fontFamily: "Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
           boxSizing: "border-box",
+          overflow: "hidden",
         }}
       >
-        <p
-          style={{
-            textTransform: "uppercase",
-            fontSize: 16,
-            letterSpacing: "0.4em",
-            opacity: 0.8,
-            margin: 0,
-          }}
-        >
-          Vibed Story
-        </p>
-        <h1
+        {/* Aura background overlay */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={story.auraBackgroundUrl}
+          alt=""
           style={{
-            marginTop: 12,
-            marginBottom: 6,
-            fontSize: 60,
-            lineHeight: 1,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: STORY_WIDTH,
+            height: STORY_HEIGHT,
+            objectFit: "cover",
+            opacity: 0.25,
           }}
-        >
-          {story.personaName}
-        </h1>
-        <p
+        />
+        {/* Readability overlay */}
+        <div
           style={{
-            margin: 0,
-            fontSize: 24,
-            opacity: 0.95,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: STORY_WIDTH,
+            height: STORY_HEIGHT,
+            background: "rgba(0,0,0,0.15)",
           }}
-        >
-          {story.subhead}
-        </p>
+        />
+
+        {/* Content container */}
         <div
           style={{
-            marginTop: 40,
             display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "space-between",
+            flexDirection: "column",
+            flex: 1,
+            padding: 80,
+            position: "relative",
           }}
         >
-          {story.metrics.map((metric) => (
-            <div
-              key={metric.label}
-              style={{
-                width: "48%",
-                marginBottom: 18,
-                borderRadius: 28,
-                padding: "18px 20px",
-                background: "rgba(255,255,255,0.1)",
-              }}
-            >
+          {/* Header with title and aura icon */}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
               <p
                 style={{
-                  margin: 0,
-                  fontSize: 14,
-                  letterSpacing: "0.2em",
                   textTransform: "uppercase",
-                  color: "rgba(255,255,255,0.75)",
+                  fontSize: 16,
+                  letterSpacing: "0.4em",
+                  opacity: 0.8,
+                  margin: 0,
                 }}
               >
-                {metric.label}
+                My VCP
               </p>
-              <p
+              <h1
                 style={{
-                  margin: "8px 0 0",
-                  fontSize: 32,
-                  fontWeight: 700,
+                  marginTop: 12,
+                  marginBottom: 6,
+                  fontSize: 60,
+                  lineHeight: 1,
                 }}
               >
-                {metric.value}
-              </p>
+                {story.personaName}
+              </h1>
             </div>
-          ))}
-        </div>
-        {story.highlight ? (
+            {/* Aura icon */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 100,
+                height: 100,
+                borderRadius: 50,
+                background: "rgba(255,255,255,0.15)",
+                overflow: "hidden",
+                flexShrink: 0,
+                marginLeft: 20,
+              }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={story.auraIconUrl}
+                alt=""
+                style={{
+                  width: 100,
+                  height: 100,
+                  objectFit: "cover",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Subhead */}
+          <p
+            style={{
+              margin: 0,
+              marginTop: 8,
+              fontSize: 24,
+              opacity: 0.95,
+            }}
+          >
+            {story.subhead}
+          </p>
+
+          {/* Metrics grid */}
           <div
             style={{
-              marginTop: 32,
-              padding: "20px 24px",
-              borderRadius: 32,
-              background: "rgba(0,0,0,0.2)",
+              marginTop: 40,
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "space-between",
             }}
           >
-            <p
+            {story.metrics.map((metric) => (
+              <div
+                key={metric.label}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  width: "48%",
+                  marginBottom: 18,
+                  borderRadius: 28,
+                  padding: "18px 20px",
+                  background: "rgba(255,255,255,0.1)",
+                }}
+              >
+                <p
+                  style={{
+                    margin: 0,
+                    fontSize: 14,
+                    letterSpacing: "0.2em",
+                    textTransform: "uppercase",
+                    color: "rgba(255,255,255,0.75)",
+                  }}
+                >
+                  {metric.label}
+                </p>
+                <p
+                  style={{
+                    margin: "8px 0 0",
+                    fontSize: 32,
+                    fontWeight: 700,
+                  }}
+                >
+                  {metric.value}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* Highlight (optional) */}
+          {story.highlight ? (
+            <div
               style={{
-                margin: 0,
-                fontSize: 20,
-                lineHeight: 1.4,
+                display: "flex",
+                marginTop: 32,
+                padding: "20px 24px",
+                borderRadius: 32,
+                background: "rgba(0,0,0,0.2)",
               }}
             >
-              {story.highlight}
-            </p>
-          </div>
-        ) : null}
-        {story.topAxes.length > 0 && (
-          <div style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 12 }}>
-            {story.topAxes.map((label) => (
-              <span
-                key={label}
+              <p
                 style={{
-                  padding: "8px 16px",
-                  borderRadius: 999,
-                  background: "rgba(255,255,255,0.18)",
-                  fontSize: 14,
+                  margin: 0,
+                  fontSize: 20,
+                  lineHeight: 1.4,
                 }}
               >
-                {label}
-              </span>
-            ))}
-          </div>
-        )}
-        <div
-          style={{
-            marginTop: "auto",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 20,
-          }}
-        >
-          <div>
-            {story.stats.map((line) => (
+                {story.highlight}
+              </p>
+            </div>
+          ) : null}
+
+          {/* Top axes badges (optional) */}
+          {story.topAxes.length > 0 && (
+            <div style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 12 }}>
+              {story.topAxes.map((label) => (
+                <span
+                  key={label}
+                  style={{
+                    padding: "8px 16px",
+                    borderRadius: 999,
+                    background: "rgba(255,255,255,0.18)",
+                    fontSize: 14,
+                  }}
+                >
+                  {label}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Footer with stats and QR code */}
+          <div
+            style={{
+              marginTop: "auto",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 20,
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              {story.stats.map((line) => (
+                <p
+                  key={line}
+                  style={{
+                    margin: "0 0 4px",
+                    fontSize: 18,
+                    fontWeight: 500,
+                  }}
+                >
+                  {line}
+                </p>
+              ))}
               <p
-                key={line}
                 style={{
-                  margin: "0 0 4px",
-                  fontSize: 18,
-                  fontWeight: 500,
+                  margin: 0,
+                  fontSize: 14,
+                  letterSpacing: "0.2em",
+                  textTransform: "uppercase",
+                  opacity: 0.85,
                 }}
               >
-                {line}
+                {story.personaConfidence && story.personaConfidence}
               </p>
-            ))}
-            <p
+            </div>
+            <div
               style={{
-                margin: 0,
-                fontSize: 14,
-                letterSpacing: "0.2em",
-                textTransform: "uppercase",
-                opacity: 0.85,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 150,
+                height: 150,
+                borderRadius: 32,
+                padding: 12,
+                background: "rgba(255,255,255,0.15)",
               }}
             >
-              {story.personaConfidence && story.personaConfidence}
-            </p>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={qrDataUrl}
+                width={126}
+                height={126}
+                alt="Scan for your Vibed profile"
+                style={{
+                  borderRadius: 24,
+                  width: 126,
+                  height: 126,
+                  objectFit: "cover",
+                }}
+              />
+            </div>
           </div>
-          <div
+
+          {/* Hashtag footer */}
+          <p
             style={{
-              width: 150,
-              height: 150,
-              borderRadius: 32,
-              padding: 12,
-              background: "rgba(255,255,255,0.15)",
+              marginTop: 24,
+              fontSize: 16,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              opacity: 0.6,
             }}
           >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={qrDataUrl}
-              width={126}
-              height={126}
-              alt="Scan for your Vibed profile"
-              style={{
-                borderRadius: 24,
-                width: 126,
-                height: 126,
-                objectFit: "cover",
-              }}
-            />
-          </div>
+            #VCP
+          </p>
         </div>
-        <p
-          style={{
-            marginTop: 24,
-            fontSize: 16,
-            letterSpacing: "0.2em",
-            textTransform: "uppercase",
-            opacity: 0.6,
-          }}
-        >
-          #VCP
-        </p>
       </div>
     ),
     {
@@ -438,7 +560,7 @@ export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ userId: string }> }
 ) {
-  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://www.vibed.app";
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "https://www.vibe-coding-profiler.com";
   const supabase = await createSupabaseServerClient();
   const {
     data: { user },
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index a9a4a80..579b64c 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -21,24 +21,33 @@ const geistMono = Geist_Mono({
 const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:8108";
 
 export const metadata: Metadata = {
-  title: "Vibe Coding Profile · Your AI coding profile",
+  title: "Vibe Coding Profiler · Discover your AI coding style",
   description:
-    "Turn your commit history into a Vibe Coding Profile (VCP) — patterns, insights, and shareable profiles grounded in commit evidence.",
+    "Vibe Coding Profiler analyzes your commit history to reveal your unique Vibe Coding Profile (VCP) — patterns, insights, and shareable profiles grounded in commit evidence.",
   metadataBase: new URL(appUrl),
   openGraph: {
-    title: "Vibe Coding Profile · Your AI coding profile",
+    title: "Vibe Coding Profiler · Discover your AI coding style",
     description:
-      "A shareable Vibe Coding Profile (VCP) from your commit history — patterns and insights grounded in evidence.",
+      "Analyze your commit history to discover your Vibe Coding Profile (VCP) — patterns and insights grounded in evidence. Share your unique AI-era coding persona.",
     url: appUrl,
     locale: "en_US",
     type: "website",
-    siteName: "Vibe Coding Profile",
+    siteName: "Vibe Coding Profiler",
+    images: [
+      {
+        url: `${appUrl}/api/og`,
+        width: 1200,
+        height: 630,
+        alt: "Vibe Coding Profiler - Discover your AI coding style",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "Vibe Coding Profile · Your AI coding profile",
+    title: "Vibe Coding Profiler · Discover your AI coding style",
     description:
-      "A shareable Vibe Coding Profile (VCP) from your commit history — patterns and insights grounded in evidence.",
+      "Analyze your commit history to discover your Vibe Coding Profile (VCP) — patterns and insights grounded in evidence. Share your unique AI-era coding persona.",
+    images: [`${appUrl}/api/og`],
   },
 };
 
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index cbe9fc0..c4b56fe 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -7,7 +7,7 @@ export default function LoginPage() {
     <div className={`flex min-h-screen items-center justify-center ${wrappedTheme.container}`}>
       <div className={`w-full max-w-md p-6 ${wrappedTheme.card}`}>
         <h1 className={`text-2xl font-semibold tracking-tight ${wrappedTheme.gradientText}`}>
-          Vibe Coding Profile
+          Vibe Coding Profiler
         </h1>
         <p className="mt-2 text-sm text-zinc-600">
           Sign in to analyze your build patterns from git history.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 327eb1b..e268227 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -948,7 +948,7 @@ function MarketingLanding() {
         </section>
 
         <footer className="mt-12 flex flex-col gap-3 border-t border-black/5 pt-6 text-sm text-zinc-500 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-zinc-700">Vibe Coding Profile</p>
+          <p className="text-zinc-700">Vibe Coding Profiler</p>
           <p className="font-mono text-xs text-zinc-400">v0.1.0</p>
         </footer>
       </div>
diff --git a/apps/web/src/app/security/page.tsx b/apps/web/src/app/security/page.tsx
index 9997c26..faaca50 100644
--- a/apps/web/src/app/security/page.tsx
+++ b/apps/web/src/app/security/page.tsx
@@ -39,7 +39,7 @@ export default function SecurityPage() {
           <section className={`${wrappedTheme.card} p-8`}>
             <h2 className="text-xl font-semibold text-zinc-950">What we do</h2>
             <p className="mt-3 text-sm text-zinc-700">
-              Vibe Coding Profile connects to GitHub, fetches commit history, computes metrics, and stores the
+              Vibe Coding Profiler connects to GitHub, fetches commit history, computes metrics, and stores the
               results in Supabase Postgres. Access to rows is scoped to your authenticated account
               via Supabase Row Level Security (RLS) policies for user-facing reads.
             </p>
@@ -66,7 +66,7 @@ export default function SecurityPage() {
             </ul>
             <p className="mt-5 text-sm text-zinc-700">
               Note: when fetching commit details from GitHub, the API response can include file
-              paths and diff snippets. Vibe Coding Profile’s current worker extracts and stores counts/stats
+              paths and diff snippets. Vibe Coding Profiler’s current worker extracts and stores counts/stats
               (like number of files and additions/deletions), not file contents.
             </p>
           </section>
@@ -88,7 +88,7 @@ export default function SecurityPage() {
           <section className="rounded-3xl border border-black/5 bg-gradient-to-br from-violet-100/80 via-indigo-100/70 to-violet-50/80 p-8 shadow-[0_25px_80px_rgba(30,27,75,0.06)]">
             <h2 className="text-xl font-semibold text-zinc-950">Recommendations</h2>
             <p className="mt-3 text-sm text-zinc-700">
-              Vibe Coding Profile is designed for personal insight. Keep the blast radius small.
+              Vibe Coding Profiler is designed for personal insight. Keep the blast radius small.
             </p>
             <ul className="mt-5 space-y-3 text-sm text-zinc-800">
               {recommendations.map((item) => (
@@ -106,7 +106,7 @@ export default function SecurityPage() {
         </div>
 
         <footer className="mt-12 flex flex-col gap-3 border-t border-black/5 pt-6 text-sm text-zinc-500 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-zinc-700">Vibe Coding Profile</p>
+          <p className="text-zinc-700">Vibe Coding Profiler</p>
           <div className="flex flex-wrap gap-4">
             <Link href="/" className="transition hover:text-zinc-900">
               Home
diff --git a/apps/web/src/app/settings/llm-keys/page.tsx b/apps/web/src/app/settings/llm-keys/page.tsx
index de7495f..9864707 100644
--- a/apps/web/src/app/settings/llm-keys/page.tsx
+++ b/apps/web/src/app/settings/llm-keys/page.tsx
@@ -5,7 +5,7 @@ import { wrappedTheme } from "@/lib/theme";
 import LLMKeysClient from "./LLMKeysClient";
 
 export const metadata = {
-  title: "LLM API Keys · Settings · Vibe Coding Profile",
+  title: "LLM API Keys · Settings · Vibe Coding Profiler",
   description: "Manage your LLM API keys for AI-powered narrative generation",
 };
 
diff --git a/apps/web/src/app/settings/repos/page.tsx b/apps/web/src/app/settings/repos/page.tsx
index 08b7cdc..6165105 100644
--- a/apps/web/src/app/settings/repos/page.tsx
+++ b/apps/web/src/app/settings/repos/page.tsx
@@ -7,7 +7,7 @@ import RepoSettingsClient from "./RepoSettingsClient";
 export const runtime = "nodejs";
 
 export const metadata = {
-  title: "Repos · Settings · Vibe Coding Profile",
+  title: "Repos · Settings · Vibe Coding Profiler",
   description: "Manage your connected GitHub repositories",
 };
 
diff --git a/apps/web/src/app/vibes/page.tsx b/apps/web/src/app/vibes/page.tsx
index 3394343..f7584bb 100644
--- a/apps/web/src/app/vibes/page.tsx
+++ b/apps/web/src/app/vibes/page.tsx
@@ -7,7 +7,7 @@ import VibesClient from "./VibesClient";
 export const runtime = "nodejs";
 
 export const metadata = {
-  title: "Repo VCPs · Vibe Coding Profile",
+  title: "Repo VCPs · Vibe Coding Profiler",
   description: "View your Vibe Coding Profiles organized by repository",
 };
 
diff --git a/apps/web/src/lib/persona-auras.ts b/apps/web/src/lib/persona-auras.ts
index c6a3ea4..008f8fb 100644
--- a/apps/web/src/lib/persona-auras.ts
+++ b/apps/web/src/lib/persona-auras.ts
@@ -15,8 +15,10 @@
  */
 
 export interface PersonaAura {
-  /** Full-card background image */
+  /** Full-card background image (horizontal) */
   background: string;
+  /** Vertical background for stories (9:16 aspect ratio) */
+  verticalBackground: string;
   /** Compact icon/badge image */
   icon: string;
   /** Alt text describing the visual metaphor */
@@ -44,18 +46,21 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Dynamic/fast personas
   rapid_risk_taker: {
     background: "/aura-backgrounds/bg-rapid-risk-taker-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-rapid-risk-taker-vertical.webp",
     icon: "/aura-icons/icon-rapid-risk-taker.webp",
     alt: "Purple flames and speed lines suggesting bold, fast movement",
     description: "Ships fast, skips guardrails, embraces risk",
   },
   prompt_sprinter: {
     background: "/aura-backgrounds/bg-prompt-sprinter-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-prompt-sprinter-vertical.webp",
     icon: "/aura-icons/icon-prompt-sprinter.webp",
     alt: "Lightning bolts and iteration circles suggesting rapid prompting",
     description: "Rapid iteration cycles, fast prompting and fixing",
   },
   fix_loop_hacker: {
     background: "/aura-backgrounds/bg-prompt-sprinter-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-prompt-sprinter-vertical.webp",
     icon: "/aura-icons/icon-fix-loop-hacker.webp",
     alt: "Loop arrows with bug being squashed - rapid debug cycles",
     description: "Quick fixes and rapid iteration loops",
@@ -64,18 +69,21 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Balanced/thoughtful personas
   balanced_builder: {
     background: "/aura-backgrounds/bg-reflective-balancer-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-reflective-balancer-vertical.webp",
     icon: "/aura-icons/icon-balanced-builder.webp",
     alt: "Balance scale weighing building blocks - thoughtful construction",
     description: "Balanced approach between speed and safety",
   },
   reflective_balancer: {
     background: "/aura-backgrounds/bg-reflective-balancer-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-reflective-balancer-vertical.webp",
     icon: "/aura-icons/icon-reflective-balancer.webp",
     alt: "Balance scales and yin-yang suggesting thoughtful equilibrium",
     description: "Thoughtful consideration of tradeoffs",
   },
   guardrailed_viber: {
     background: "/aura-backgrounds/bg-guardrailed-viber-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-guardrailed-viber-vertical.webp",
     icon: "/aura-icons/icon-guardrailed-viber.webp",
     alt: "Shield with engineered guardrails and safety net mesh suggesting protection",
     description: "Tests as contracts, safety nets before shipping",
@@ -84,12 +92,14 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Structured/methodical personas
   spec_first_director: {
     background: "/aura-backgrounds/bg-methodical-architect-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-methodical-architect-vertical.webp",
     icon: "/aura-icons/icon-spec-first-director.webp",
     alt: "Clipboard with flowchart directing arrows outward",
     description: "Specs and plans before implementation",
   },
   methodical_architect: {
     background: "/aura-backgrounds/bg-methodical-architect-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-methodical-architect-vertical.webp",
     icon: "/aura-icons/icon-methodical-architect.webp",
     alt: "Isometric blocks on blueprint grid suggesting structured planning",
     description: "Plans carefully before building",
@@ -99,6 +109,7 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Gas Pump (Gas Town) for agent coordination
   vertical_slice_shipper: {
     background: "/aura-backgrounds/bg-orchestrator-v5.webp",
+    verticalBackground: "/aura-backgrounds/bg-orchestrator-vertical.webp",
     icon: "/aura-icons/icon-vertical-slice-shipper.webp",
     alt: "Rocket carrying full stack - shipping complete end-to-end",
     description: "Ships complete vertical slices end-to-end",
@@ -106,12 +117,14 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Factory for building/manufacturing personas
   toolsmith_viber: {
     background: "/aura-backgrounds/bg-orchestrator-factory.webp",
+    verticalBackground: "/aura-backgrounds/bg-orchestrator-factory-vertical.webp",
     icon: "/aura-icons/icon-toolsmith-viber.webp",
     alt: "Anvil forging a gear with sparks - crafting tools",
     description: "Builds and coordinates tools and workflows",
   },
   infra_weaver: {
     background: "/aura-backgrounds/bg-orchestrator-factory.webp",
+    verticalBackground: "/aura-backgrounds/bg-orchestrator-factory-vertical.webp",
     icon: "/aura-icons/icon-infra-weaver.webp",
     alt: "Spider web network with glowing nodes - weaving infrastructure",
     description: "Weaves infrastructure and systems together",
@@ -120,42 +133,49 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
   // Legacy persona IDs (for backwards compatibility)
   "vibe-prototyper": {
     background: "/aura-backgrounds/bg-prompt-sprinter-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-prompt-sprinter-vertical.webp",
     icon: "/aura-icons/icon-prompt-sprinter.webp",
     alt: "Creative burst pattern",
     description: "Fast prototyping and experimentation",
   },
   "test-validator": {
     background: "/aura-backgrounds/bg-guardrailed-viber-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-guardrailed-viber-vertical.webp",
     icon: "/aura-icons/icon-guardrailed-viber.webp",
     alt: "Protective shield pattern",
     description: "Tests first, validates before shipping",
   },
   "spec-architect": {
     background: "/aura-backgrounds/bg-methodical-architect-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-methodical-architect-vertical.webp",
     icon: "/aura-icons/icon-methodical-architect.webp",
     alt: "Blueprint grid pattern",
     description: "Architecture and specs before code",
   },
   "agent-orchestrator": {
     background: "/aura-backgrounds/bg-orchestrator-v5.webp",
+    verticalBackground: "/aura-backgrounds/bg-orchestrator-vertical.webp",
     icon: "/aura-icons/icon-orchestrator.webp",
     alt: "Gas Town - fueling station for agent coordination",
     description: "Coordinates AI agents and workflows",
   },
   "reflective-balancer": {
     background: "/aura-backgrounds/bg-reflective-balancer-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-reflective-balancer-vertical.webp",
     icon: "/aura-icons/icon-reflective-balancer.webp",
     alt: "Balance and equilibrium pattern",
     description: "Balances competing priorities",
   },
   "infra-architect": {
     background: "/aura-backgrounds/bg-orchestrator-factory.webp",
+    verticalBackground: "/aura-backgrounds/bg-orchestrator-factory-vertical.webp",
     icon: "/aura-icons/icon-infra-weaver.webp",
     alt: "Factory infrastructure weaving pattern",
     description: "Infrastructure governance and system design",
   },
   "specialist-consultant": {
     background: "/aura-backgrounds/bg-methodical-architect-v2.webp",
+    verticalBackground: "/aura-backgrounds/bg-methodical-architect-vertical.webp",
     icon: "/aura-icons/icon-spec-first-director.webp",
     alt: "Specification-driven direction and planning",
     description: "Assigns roles and review steps with precision",
@@ -165,6 +185,7 @@ export const PERSONA_AURAS: Record<string, PersonaAura> = {
 // Default aura for unknown personas - use the balanced one as neutral
 export const DEFAULT_AURA: PersonaAura = {
   background: "/aura-backgrounds/bg-reflective-balancer-v2.webp",
+  verticalBackground: "/aura-backgrounds/bg-reflective-balancer-vertical.webp",
   icon: "/aura-icons/icon-reflective-balancer.webp",
   alt: "Abstract balanced pattern",
   description: "Your unique coding style",
diff --git a/apps/web/src/lib/vcp/__tests__/metrics.test.ts b/apps/web/src/lib/vcp/__tests__/metrics.test.ts
new file mode 100644
index 0000000..b97c2c3
--- /dev/null
+++ b/apps/web/src/lib/vcp/__tests__/metrics.test.ts
@@ -0,0 +1,427 @@
+/**
+ * Unit tests for VCP metric utilities
+ */
+import { describe, it, expect } from "vitest";
+import type { VibeAxes } from "@vibed/core";
+import {
+  computeStrongestAxis,
+  formatStrongestAxis,
+  computeStyleDescriptor,
+  computeRhythmLabel,
+  computePeakLabel,
+  analyzePeakWindow,
+  computeShareCardMetrics,
+  formatConfidence,
+  computeConsistencyLabel,
+  type StrongestAxis,
+  type StyleDescriptor,
+  type RhythmLabel,
+  type PeakWindow,
+  type PeakLabel,
+} from "../metrics";
+
+// =============================================================================
+// Test Fixtures
+// =============================================================================
+
+function createMockAxes(overrides: Partial<Record<keyof VibeAxes, { score: number; level: "high" | "medium" | "low" }>> = {}): VibeAxes {
+  const defaults: VibeAxes = {
+    automation_heaviness: { score: 50, level: "medium", why: [] },
+    guardrail_strength: { score: 50, level: "medium", why: [] },
+    iteration_loop_intensity: { score: 50, level: "medium", why: [] },
+    planning_signal: { score: 50, level: "medium", why: [] },
+    surface_area_per_change: { score: 50, level: "medium", why: [] },
+    shipping_rhythm: { score: 50, level: "medium", why: [] },
+  };
+
+  const result: VibeAxes = { ...defaults };
+  for (const [key, value] of Object.entries(overrides)) {
+    const axisKey = key as keyof VibeAxes;
+    result[axisKey] = { ...defaults[axisKey], ...value };
+  }
+  return result;
+}
+
+function createTimestamps(hours: number[], count: number = 1): string[] {
+  const timestamps: string[] = [];
+  for (const hour of hours) {
+    for (let i = 0; i < count; i++) {
+      // Create a date with the specified hour
+      const date = new Date(2024, 0, 1, hour, 0, 0);
+      timestamps.push(date.toISOString());
+    }
+  }
+  return timestamps;
+}
+
+// =============================================================================
+// computeStrongestAxis
+// =============================================================================
+
+describe("computeStrongestAxis", () => {
+  it("returns the axis with the highest score", () => {
+    const axes = createMockAxes({
+      automation_heaviness: { score: 80, level: "high" },
+      guardrail_strength: { score: 60, level: "medium" },
+    });
+
+    const result = computeStrongestAxis(axes);
+
+    expect(result.key).toBe("automation_heaviness");
+    expect(result.name).toBe("Automation");
+    expect(result.score).toBe(80);
+  });
+
+  it("returns the first axis when all scores are equal", () => {
+    const axes = createMockAxes(); // all at 50
+
+    const result = computeStrongestAxis(axes);
+
+    // Should return automation_heaviness since it's checked first
+    expect(result.key).toBe("automation_heaviness");
+    expect(result.score).toBe(50);
+  });
+
+  it("correctly identifies different strongest axes", () => {
+    const testCases: { key: keyof VibeAxes; name: string }[] = [
+      { key: "guardrail_strength", name: "Guardrails" },
+      { key: "iteration_loop_intensity", name: "Iteration" },
+      { key: "planning_signal", name: "Planning" },
+      { key: "surface_area_per_change", name: "Surface Area" },
+      { key: "shipping_rhythm", name: "Rhythm" },
+    ];
+
+    for (const { key, name } of testCases) {
+      const axes = createMockAxes({
+        [key]: { score: 90, level: "high" },
+      });
+
+      const result = computeStrongestAxis(axes);
+
+      expect(result.key).toBe(key);
+      expect(result.name).toBe(name);
+      expect(result.score).toBe(90);
+    }
+  });
+});
+
+// =============================================================================
+// formatStrongestAxis
+// =============================================================================
+
+describe("formatStrongestAxis", () => {
+  it("formats as 'Name Score'", () => {
+    const axes = createMockAxes({
+      automation_heaviness: { score: 78, level: "high" },
+    });
+
+    const result = formatStrongestAxis(axes);
+
+    expect(result).toBe("Automation 78");
+  });
+
+  it("formats different axes correctly", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 85, level: "high" },
+    });
+
+    const result = formatStrongestAxis(axes);
+
+    expect(result).toBe("Rhythm 85");
+  });
+});
+
+// =============================================================================
+// computeStyleDescriptor
+// =============================================================================
+
+describe("computeStyleDescriptor", () => {
+  it("returns 'Fast Builder' for high automation + high iteration", () => {
+    const axes = createMockAxes({
+      automation_heaviness: { score: 70, level: "high" },
+      iteration_loop_intensity: { score: 65, level: "medium" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Fast Builder");
+  });
+
+  it("returns 'Safe Shipper' for high guardrails + decent automation", () => {
+    const axes = createMockAxes({
+      guardrail_strength: { score: 70, level: "high" },
+      automation_heaviness: { score: 50, level: "medium" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Safe Shipper");
+  });
+
+  it("returns 'Rapid Cycler' for high rhythm + high iteration", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 70, level: "high" },
+      iteration_loop_intensity: { score: 60, level: "medium" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Rapid Cycler");
+  });
+
+  it("returns 'Steady Hand' for high guardrails + low iteration", () => {
+    const axes = createMockAxes({
+      guardrail_strength: { score: 65, level: "medium" },
+      iteration_loop_intensity: { score: 30, level: "low" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Steady Hand");
+  });
+
+  it("returns 'Bold Mover' for high automation + low guardrails", () => {
+    const axes = createMockAxes({
+      automation_heaviness: { score: 60, level: "medium" },
+      guardrail_strength: { score: 30, level: "low" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Bold Mover");
+  });
+
+  it("returns 'Deep Planner' for high planning", () => {
+    const axes = createMockAxes({
+      planning_signal: { score: 70, level: "high" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Deep Planner");
+  });
+
+  it("returns 'Wide Scoper' for high surface area", () => {
+    const axes = createMockAxes({
+      surface_area_per_change: { score: 70, level: "high" },
+    });
+
+    expect(computeStyleDescriptor(axes)).toBe("Wide Scoper");
+  });
+
+  it("returns 'Balanced' when no specific pattern matches", () => {
+    const axes = createMockAxes(); // all at 50
+
+    expect(computeStyleDescriptor(axes)).toBe("Balanced");
+  });
+});
+
+// =============================================================================
+// computeRhythmLabel
+// =============================================================================
+
+describe("computeRhythmLabel", () => {
+  it("returns 'Bursty' for high level rhythm", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 70, level: "high" },
+    });
+
+    expect(computeRhythmLabel(axes)).toBe("Bursty");
+  });
+
+  it("returns 'Bursty' for score >= 65 regardless of level", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 65, level: "medium" },
+    });
+
+    expect(computeRhythmLabel(axes)).toBe("Bursty");
+  });
+
+  it("returns 'Steady' for low level rhythm", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 30, level: "low" },
+    });
+
+    expect(computeRhythmLabel(axes)).toBe("Steady");
+  });
+
+  it("returns 'Steady' for score < 35 regardless of level", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 34, level: "medium" },
+    });
+
+    expect(computeRhythmLabel(axes)).toBe("Steady");
+  });
+
+  it("returns 'Mixed' for medium scores", () => {
+    const axes = createMockAxes({
+      shipping_rhythm: { score: 50, level: "medium" },
+    });
+
+    expect(computeRhythmLabel(axes)).toBe("Mixed");
+  });
+});
+
+// =============================================================================
+// computePeakLabel
+// =============================================================================
+
+describe("computePeakLabel", () => {
+  it("returns 'Mornings' for mornings window", () => {
+    expect(computePeakLabel("mornings")).toBe("Mornings");
+  });
+
+  it("returns 'Afternoons' for afternoons window", () => {
+    expect(computePeakLabel("afternoons")).toBe("Afternoons");
+  });
+
+  it("returns 'Evenings' for evenings window", () => {
+    expect(computePeakLabel("evenings")).toBe("Evenings");
+  });
+
+  it("returns 'Late Nights' for late_nights window", () => {
+    expect(computePeakLabel("late_nights")).toBe("Late Nights");
+  });
+
+  it("returns 'Varied' for null", () => {
+    expect(computePeakLabel(null)).toBe("Varied");
+  });
+});
+
+// =============================================================================
+// analyzePeakWindow
+// =============================================================================
+
+describe("analyzePeakWindow", () => {
+  it("returns null for fewer than 10 timestamps", () => {
+    const timestamps = createTimestamps([9, 10, 11], 3); // only 9 timestamps
+
+    expect(analyzePeakWindow(timestamps)).toBeNull();
+  });
+
+  it("returns 'mornings' for predominantly morning commits (6am-12pm)", () => {
+    // 15 morning commits, 2 afternoon
+    const timestamps = [
+      ...createTimestamps([7, 8, 9, 10, 11], 3), // 15 morning commits
+      ...createTimestamps([13, 14], 1), // 2 afternoon commits
+    ];
+
+    expect(analyzePeakWindow(timestamps)).toBe("mornings");
+  });
+
+  it("returns 'afternoons' for predominantly afternoon commits (12pm-6pm)", () => {
+    // 15 afternoon commits, 2 morning
+    const timestamps = [
+      ...createTimestamps([13, 14, 15, 16, 17], 3), // 15 afternoon commits
+      ...createTimestamps([9, 10], 1), // 2 morning commits
+    ];
+
+    expect(analyzePeakWindow(timestamps)).toBe("afternoons");
+  });
+
+  it("returns 'evenings' for predominantly evening commits (6pm-10pm)", () => {
+    // 15 evening commits, 2 afternoon
+    const timestamps = [
+      ...createTimestamps([18, 19, 20, 21], 4), // 16 evening commits (21 is still before 22)
+      ...createTimestamps([13, 14], 1), // 2 afternoon commits
+    ];
+
+    expect(analyzePeakWindow(timestamps)).toBe("evenings");
+  });
+
+  it("returns 'late_nights' for predominantly late night commits (10pm-6am)", () => {
+    // 15 late night commits, 2 morning
+    const timestamps = [
+      ...createTimestamps([22, 23, 0, 1, 2], 3), // 15 late night commits
+      ...createTimestamps([9, 10], 1), // 2 morning commits
+    ];
+
+    expect(analyzePeakWindow(timestamps)).toBe("late_nights");
+  });
+
+  it("returns null when no clear winner (close distribution)", () => {
+    // Even distribution across windows
+    const timestamps = [
+      ...createTimestamps([9], 5),  // 5 morning
+      ...createTimestamps([14], 5), // 5 afternoon
+      ...createTimestamps([19], 5), // 5 evening
+    ];
+
+    expect(analyzePeakWindow(timestamps)).toBeNull();
+  });
+});
+
+// =============================================================================
+// computeShareCardMetrics
+// =============================================================================
+
+describe("computeShareCardMetrics", () => {
+  it("returns all four metrics", () => {
+    const axes = createMockAxes({
+      automation_heaviness: { score: 78, level: "high" },
+      iteration_loop_intensity: { score: 70, level: "high" },
+      shipping_rhythm: { score: 60, level: "medium" },
+    });
+
+    const result = computeShareCardMetrics(axes, "afternoons");
+
+    expect(result).toEqual({
+      strongest: "Automation 78",
+      style: "Fast Builder",
+      rhythm: "Mixed",
+      peak: "Afternoons",
+    });
+  });
+
+  it("uses 'Varied' for peak when no peakWindow provided", () => {
+    const axes = createMockAxes();
+
+    const result = computeShareCardMetrics(axes);
+
+    expect(result.peak).toBe("Varied");
+  });
+
+  it("handles null peakWindow explicitly", () => {
+    const axes = createMockAxes();
+
+    const result = computeShareCardMetrics(axes, null);
+
+    expect(result.peak).toBe("Varied");
+  });
+});
+
+// =============================================================================
+// formatConfidence
+// =============================================================================
+
+describe("formatConfidence", () => {
+  it("formats 'high' as 'High Confidence'", () => {
+    expect(formatConfidence("high")).toBe("High Confidence");
+  });
+
+  it("formats 'medium' as 'Medium Confidence'", () => {
+    expect(formatConfidence("medium")).toBe("Medium Confidence");
+  });
+
+  it("formats 'low' as 'Low Confidence'", () => {
+    expect(formatConfidence("low")).toBe("Low Confidence");
+  });
+
+  it("returns unknown values as-is", () => {
+    expect(formatConfidence("unknown")).toBe("unknown");
+    expect(formatConfidence("custom")).toBe("custom");
+  });
+});
+
+// =============================================================================
+// computeConsistencyLabel
+// =============================================================================
+
+describe("computeConsistencyLabel", () => {
+  it("returns 'New' for fewer than 2 snapshots", () => {
+    expect(computeConsistencyLabel(0, 0)).toBe("New");
+    expect(computeConsistencyLabel(0, 1)).toBe("New");
+  });
+
+  it("returns 'Steady' for 0 persona shifts with 2+ snapshots", () => {
+    expect(computeConsistencyLabel(0, 2)).toBe("Steady");
+    expect(computeConsistencyLabel(0, 10)).toBe("Steady");
+  });
+
+  it("returns singular '1 Shift' for one persona shift", () => {
+    expect(computeConsistencyLabel(1, 5)).toBe("1 Shift");
+  });
+
+  it("returns plural 'N Shifts' for multiple persona shifts", () => {
+    expect(computeConsistencyLabel(2, 5)).toBe("2 Shifts");
+    expect(computeConsistencyLabel(5, 10)).toBe("5 Shifts");
+  });
+});
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
new file mode 100644
index 0000000..c3c54a2
--- /dev/null
+++ b/apps/web/vitest.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import { resolve } from "path";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: "node",
+    include: ["src/**/*.test.ts"],
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});
diff --git a/docs/implementation-trackers/information-architecture-restructure.md b/docs/implementation-trackers/information-architecture-restructure.md
index 893e7c0..4131f4e 100644
--- a/docs/implementation-trackers/information-architecture-restructure.md
+++ b/docs/implementation-trackers/information-architecture-restructure.md
@@ -111,8 +111,8 @@ This tracker covers all implementation work for the Information Architecture Res
 
 ### F3. Shared Utilities
 
-**Status:** `[x] Complete`  
-**Depends on:** None (can run parallel with F1/F2)  
+**Status:** `[x] Complete`
+**Depends on:** None (can run parallel with F1/F2)
 **Blocks:** P1, P5
 
 | Task | Status | File(s) |
@@ -121,12 +121,12 @@ This tracker covers all implementation work for the Information Architecture Res
 | Implement `computeStyleDescriptor()` | `[x]` | `lib/vcp/metrics.ts` |
 | Implement `computeRhythmLabel()` | `[x]` | `lib/vcp/metrics.ts` |
 | Implement `computePeakLabel()` | `[x]` | `lib/vcp/metrics.ts` |
-| Add unit tests for metric functions | `[ ]` | `__tests__/metrics.test.ts` |
+| Add unit tests for metric functions | `[x]` | `lib/vcp/__tests__/metrics.test.ts` |
 
 **Success Criteria:**
 - [x] All metric computation functions work correctly
 - [x] Edge cases handled (missing data, null values)
-- [ ] Tests pass (tests not yet written)
+- [x] Tests pass (40 tests passing)
 
 ---
 
@@ -357,7 +357,7 @@ This tracker covers all implementation work for the Information Architecture Res
 |-------|-------|-----------|--------|
 | F1: VCP Primitives | 12 | 12 | `[x] Complete` |
 | F2: VCP Composite Blocks | 10 | 10 | `[x] Complete` |
-| F3: Shared Utilities | 5 | 4 | `[~] In Progress` |
+| F3: Shared Utilities | 5 | 5 | `[x] Complete` |
 | P1: ShareCard Redesign | 7 | 7 | `[x] Complete` |
 | P2: Navigation & Routes | 8 | 8 | `[x] Complete` |
 | P3: VCP Display Unification | 14 | 14 | `[x] Complete` |
@@ -367,7 +367,7 @@ This tracker covers all implementation work for the Information Architecture Res
 | X1: Migration & Redirects | 5 | 4 | `[~] In Progress` |
 | X2: Polish & Testing | 7 | 0 | `[~] In Progress` |
 | X3: Documentation | 5 | 0 | `[ ] Not Started` |
-| **Total** | **91** | **68** | **75%** |
+| **Total** | **91** | **69** | **76%** |
 
 ---
 
@@ -445,3 +445,7 @@ This tracker covers all implementation work for the Information Architecture Res
 - **P3 Complete:** Unified/Repo VCP pages now use shared components:
   - `app/page.tsx`: Replaced inline Unified VCP sections with unified components
   - `AnalysisClient.tsx`: Swapped Repo VCP identity/metrics/contribution sections to repo components
+- **F3 Complete:** Added unit tests for metric functions:
+  - Set up vitest in web app (`vitest.config.ts`, test scripts in package.json)
+  - Created `lib/vcp/__tests__/metrics.test.ts` with 40 tests covering all metric functions
+  - Tests cover: computeStrongestAxis, formatStrongestAxis, computeStyleDescriptor, computeRhythmLabel, computePeakLabel, analyzePeakWindow, computeShareCardMetrics, formatConfidence, computeConsistencyLabel
diff --git a/package-lock.json b/package-lock.json
index 6923cf7..4de8aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
     },
     "apps/web": {
       "name": "@vibed/web",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "dependencies": {
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-toast": "^1.2.15",
@@ -48,12 +48,13 @@
         "eslint-config-next": "16.1.2",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
-        "typescript": "^5"
+        "typescript": "^5",
+        "vitest": "^1"
       }
     },
     "apps/worker": {
       "name": "@vibed/worker",
-      "version": "0.1.1",
+      "version": "0.1.0-alpha.2",
       "dependencies": {
         "@supabase/supabase-js": "^2.47.14",
         "@vibed/core": "*",