feat(web): integrate QR code generation and vertical story download feature

- Added `qrcode` package to generate QR codes for user profiles.
- Implemented a new API route for generating story images, including QR code integration.
- Enhanced `ProfileShareSection` and `ShareActions` components to support story downloads.
- Updated `AnalysisClient` to utilize the new story endpoint for sharing user insights.
- Refactored components to include user ID for personalized story generation.

This update enriches the sharing experience by allowing users to download their profile stories with QR codes, enhancing engagement and usability.

Author: devakone

apps/web/package.json

@@ -22,6 +22,7 @@
     "inngest": "^3.49.3",
     "lucide-react": "^0.562.0",
     "next": "16.1.2",
+    "qrcode": "^1.5.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tailwind-merge": "^3.4.0"

apps/web/src/app/analysis/[jobId]/AnalysisClient.tsx

@@ -3,15 +3,10 @@
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { computeAnalysisInsights } from "@vibed/core";
-import type {
-  AnalysisInsights,
-  AnalysisMetrics,
-  CommitEvent,
-  Level,
-  VibeAxes,
-} from "@vibed/core";
+import type { AnalysisInsights, AnalysisMetrics, CommitEvent, VibeAxes } from "@vibed/core";
 import { formatMetricLabel, formatMetricValue } from "@/lib/format-labels";
 import { computeShareCardMetrics } from "@/lib/vcp/metrics";
+import { isVibeAxes } from "@/lib/vcp/validators";
 import { ShareCard, ShareActions } from "@/components/share";
 import type { ShareImageTemplate, ShareCardMetric } from "@/components/share";
 
@@ -32,6 +27,7 @@ type ApiResponse = {
   insights: unknown | null;
   profileContribution?: unknown | null;
   userAvatarUrl?: string | null;
+  userId?: string | null;
   vibeInsights?: VibeInsightsRow | null;
 };
 
@@ -190,26 +186,6 @@ const VIBE_AXIS_KEYS: (keyof VibeAxes)[] = [
   "shipping_rhythm",
 ] as const;
 
-function isAxisValue(v: unknown): v is { score: number; level: Level; why: string[] } {
-  if (!isRecord(v)) return false;
-  const score = v.score;
-  const level = v.level;
-  const why = v.why;
-  if (typeof score !== "number") return false;
-  if (typeof level !== "string") return false;
-  if (!Array.isArray(why)) return false;
-  return why.every((item) => typeof item === "string");
-}
-
-function isVibeAxes(v: unknown): v is VibeAxes {
-  if (!isRecord(v)) return false;
-  for (const key of VIBE_AXIS_KEYS) {
-    const axisValue = (v as Record<string, unknown>)[key];
-    if (!isAxisValue(axisValue)) return false;
-  }
-  return true;
-}
-
 function isVibeInsightsRow(v: unknown): v is VibeInsightsRow {
   if (!isRecord(v)) return false;
   if (!isVibeAxes(v.axes_json)) return false;
@@ -512,6 +488,10 @@ export default function AnalysisClient({ jobId }: { jobId: string }) {
     return `${shareTemplate.headline} — ${shareTemplate.subhead}\n${metricsLine}\n#VCP`;
   }, [shareTemplate]);
 
+  const storyEndpoint = data?.userId
+    ? `/api/share/story/${data.userId}?jobId=${jobId}`
+    : undefined;
+
   // Build share template for ShareActions component
   // Build metrics for ShareCard
   const shareCardMetrics: ShareCardMetric[] = useMemo(() => {
@@ -842,6 +822,7 @@ export default function AnalysisClient({ jobId }: { jobId: string }) {
                 shareHeadline={shareTemplate.headline}
                 shareTemplate={shareImageTemplate}
                 entityId={jobId}
+                storyEndpoint={storyEndpoint}
               />
             </div>
           ) : null}

apps/web/src/app/api/analysis/[id]/route.ts

@@ -414,6 +414,7 @@ export async function GET(
       insights,
       profileContribution,
       userAvatarUrl,
+      userId: user.id,
       vibeInsights: computedVibeInsights,
     });
   }
@@ -425,6 +426,7 @@ export async function GET(
     insights,
     profileContribution,
     userAvatarUrl,
+    userId: user.id,
     vibeInsights: null,
   });
 }