feat(web): enhance sharing features with LLM-generated taglines

- Added support for LLM-generated taglines in share cards and analytics, improving user engagement.
- Updated `ProfileShareSection` and share image generation to incorporate the new tagline feature.
- Refactored `AnalysisClient` and related components to utilize the tagline, ensuring a cohesive user experience.
- Introduced a new column for taglines in the `analysis_insights` table and updated relevant Supabase types.
- Enhanced the overall structure of share templates to include taglines, providing a more personalized sharing experience.

Author: devakone

.gitignore

@@ -34,6 +34,7 @@ supabase/.temp/
 *.swp
 *.swo
 *~
+.cursor-memory
 
 # OS
 .DS_Store

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

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { computeAnalysisInsights } from "@vibed/core";
-import type { AnalysisInsights, AnalysisMetrics, CommitEvent, VibeAxes } from "@vibed/core";
+import type { AnalysisInsights, AnalysisMetrics, CommitEvent } from "@vibed/core";
 import { formatMetricLabel, formatMetricValue } from "@/lib/format-labels";
 import { computeShareCardMetrics } from "@/lib/vcp/metrics";
 import { isVibeAxes } from "@/lib/vcp/validators";
@@ -380,10 +380,6 @@ function fmtDate(iso: string | null): string {
 }
 
 
-function weekdayName(dow: number): string {
-  return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][dow] ?? "—";
-}
-
 export default function AnalysisClient({ jobId }: { jobId: string }) {
   const [data, setData] = useState<ApiResponse | null>(null);
   const [error, setError] = useState<string | null>(null);

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

@@ -180,6 +180,7 @@ async function buildJobStory(
           metrics?: Array<{ label: string; value: string }>;
           headline?: string;
           subhead?: string;
+          tagline?: string;
         })
       : null;
 
@@ -191,6 +192,7 @@ async function buildJobStory(
     (vibeRow?.persona_id ?? insightsResult?.data?.persona_id ?? "balanced_builder") as string;
   const personaTagline =
     vibeRow?.persona_tagline ??
+    shareTemplate?.tagline ??
     shareTemplate?.headline ??
     `${insightsResult?.data?.persona_confidence ?? "medium"} confidence`;
   const colors = shareTemplate?.colors
@@ -208,7 +210,7 @@ async function buildJobStory(
           value: metric.value,
         })) ?? [];
 
-  const highlight = shareTemplate?.subhead ?? shareTemplate?.headline;
+  const highlight = shareTemplate?.tagline ?? shareTemplate?.subhead ?? shareTemplate?.headline;
   const topAxes = axes ? formatAxesList(axes) : [];
   const stats = [`${job.commit_count ?? 0} commits`, repoName];
 
@@ -395,6 +397,7 @@ const renderStoryImage = async (story: StoryData, qrDataUrl: string) => {
               background: "rgba(255,255,255,0.15)",
             }}
           >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={qrDataUrl}
               width={126}

apps/web/src/app/page.tsx

@@ -97,27 +97,31 @@ export function ProfileShareSection({
     return shareOrigin; // Profile is at root
   }, [shareOrigin]);
 
+  const shareTagline = insight ?? personaTagline ?? "";
+
   const shareText = useMemo(() => {
     const metricsLine = `${totalRepos} repos · ${totalCommits.toLocaleString()} commits · ${clarity}% clarity`;
-    return `My Unified VCP: ${personaName}\n${personaTagline ?? ""}\n${metricsLine}\n#VCP`;
-  }, [personaName, personaTagline, totalRepos, totalCommits, clarity]);
+    return `My Unified VCP: ${personaName}\n${shareTagline}\n${metricsLine}\n#VCP`;
+  }, [personaName, shareTagline, totalRepos, totalCommits, clarity]);
 
   const shareCaption = useMemo(() => {
-    return `My Unified VCP: ${personaName} — ${personaTagline ?? ""}. ${totalRepos} repos, ${totalCommits.toLocaleString()} commits. #VCP`;
-  }, [personaName, personaTagline, totalRepos, totalCommits]);
+    const taglineSegment = shareTagline ? ` — ${shareTagline}` : "";
+    return `My Unified VCP: ${personaName}${taglineSegment}. ${totalRepos} repos, ${totalCommits.toLocaleString()} commits. #VCP`;
+  }, [personaName, shareTagline, totalRepos, totalCommits]);
 
   const shareImageTemplate: ShareImageTemplate = useMemo(() => {
     return {
       colors,
       headline: `Unified VCP: ${personaName}`,
       subhead: personaTagline ?? `${personaConfidence} confidence`,
+      tagline: shareTagline || `${personaConfidence} confidence`,
       metrics: shareCardMetrics,
       persona_archetype: {
         label: personaName,
         archetypes: topAxes.slice(0, 3).map((a) => `${a.name}: ${a.score}`),
       },
     };
-  }, [personaName, personaTagline, personaConfidence, colors, shareCardMetrics, topAxes]);
+  }, [personaName, personaTagline, personaConfidence, colors, shareCardMetrics, topAxes, shareTagline]);
 
   return (
     <div className="space-y-4">

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

@@ -114,14 +114,15 @@ export function createShareSvg(
   const metricsChars = format === "og" ? 72 : format === "square" ? 60 : 46;
 
   const headlineWrapped = wrapTextLines(template.headline, headlineChars, 2);
-  const subheadWrapped = wrapTextLines(template.subhead, subheadChars, 2);
+  const taglineText = template.tagline ?? template.subhead;
+  const taglineWrapped = wrapTextLines(taglineText, subheadChars, 2);
   const metricsWrapped = wrapTextLines(metricsText, metricsChars, format === "story" ? 2 : 1);
 
   const headlineLines = headlineWrapped.lines.map((l, idx) =>
     escapeXml(idx === headlineWrapped.lines.length - 1 && headlineWrapped.truncated ? withEllipsis(l) : l)
   );
-  const subheadLines = subheadWrapped.lines.map((l, idx) =>
-    escapeXml(idx === subheadWrapped.lines.length - 1 && subheadWrapped.truncated ? withEllipsis(l) : l)
+  const taglineLines = taglineWrapped.lines.map((l, idx) =>
+    escapeXml(idx === taglineWrapped.lines.length - 1 && taglineWrapped.truncated ? withEllipsis(l) : l)
   );
   const metricsLines = metricsWrapped.lines.map((l, idx) =>
     escapeXml(idx === metricsWrapped.lines.length - 1 && metricsWrapped.truncated ? withEllipsis(l) : l)
@@ -131,8 +132,8 @@ export function createShareSvg(
     format === "story" ? Math.round(cfg.height * 0.34) : cfg.pad + Math.round(cfg.headlineSize * 0.9);
 
   const headlineY = startY;
-  const subheadY = headlineY + Math.round(cfg.headlineSize * 0.95) + 18;
-  const metricsY = subheadY + Math.round(cfg.subheadSize * 0.95) + 18;
+  const taglineY = headlineY + Math.round(cfg.headlineSize * 0.95) + 18;
+  const metricsY = taglineY + Math.round(cfg.subheadSize * 0.95) + 18;
   const metaY =
     format === "story" ? Math.round(cfg.height * 0.72) : metricsY + Math.round(cfg.metricsSize * 0.95) + 28;
   const hashY = metaY + Math.round(cfg.metaSize * 1.6);
@@ -144,7 +145,7 @@ export function createShareSvg(
   const headlineTspans = headlineLines
     .map((line, idx) => `<tspan x="${x}" dy="${idx === 0 ? 0 : Math.round(cfg.headlineSize * 1.1)}">${line}</tspan>`)
     .join("");
-  const subheadTspans = subheadLines
+  const taglineTspans = taglineLines
     .map((line, idx) => `<tspan x="${x}" dy="${idx === 0 ? 0 : Math.round(cfg.subheadSize * 1.25)}">${line}</tspan>`)
     .join("");
   const metricsTspans = metricsLines
@@ -163,8 +164,8 @@ export function createShareSvg(
   <text x="${x}" y="${headlineY}" font-size="${cfg.headlineSize}" font-weight="700" fill="#FFFFFF" font-family="Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif">
     ${headlineTspans}
   </text>
-  <text x="${x}" y="${subheadY}" font-size="${cfg.subheadSize}" fill="rgba(255,255,255,0.85)" font-family="Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif">
-    ${subheadTspans}
+  <text x="${x}" y="${taglineY}" font-size="${cfg.subheadSize}" fill="rgba(255,255,255,0.85)" font-family="Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif">
+    ${taglineTspans}
   </text>
   <text x="${x}" y="${metricsY}" font-size="${cfg.metricsSize}" fill="rgba(255,255,255,0.85)" font-family="Space Grotesk, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif">
     ${metricsTspans}

apps/web/src/components/share/share-image.ts

@@ -67,6 +67,7 @@ export interface ShareImageTemplate {
   colors: ShareCardColors;
   headline: string;
   subhead: string;
+  tagline?: string | null;
   metrics: ShareCardMetric[];
   persona_archetype: {
     label: string;

apps/web/src/components/share/types.ts

@@ -2,21 +2,13 @@
 
 import Link from "next/link";
 import { cn } from "@/lib/utils";
-import type { VibeAxes } from "@vibed/core";
-import { AXIS_METADATA, AXIS_ORDER } from "../constants";
 import { formatMatchedRule, AXIS_LEGEND } from "@/lib/format-labels";
 
 interface UnifiedMethodologySectionProps {
-  /** Persona name */
-  personaName: string;
-  /** Confidence level */
-  confidence: string;
   /** Matched rules from detectVibePersona (string array like ["A>=70", "C>=65"]) */
   matchedRules: string[];
   /** Caveats from detectVibePersona */
   caveats: string[];
-  /** User's vibe axes */
-  axes: VibeAxes;
   /** Additional class names */
   className?: string;
 }
@@ -27,11 +19,8 @@ interface UnifiedMethodologySectionProps {
  * Accepts data directly from detectVibePersona output
  */
 export function UnifiedMethodologySection({
-  personaName,
-  confidence,
   matchedRules,
   caveats,
-  axes,
   className,
 }: UnifiedMethodologySectionProps) {
   return (

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

@@ -152,6 +152,7 @@ function computeEpisodeSummary(events: CommitEvent[]): Array<{
  */
 interface NarrativeResult {
   narrative: AnalysisReport["narrative"];
+  tagline: string | null;
   inputTokens: number;
   outputTokens: number;
 }
@@ -227,9 +228,10 @@ export async function generateNarrativeWithLLM(params: {
     "- Never infer intent, skill, or code quality. Avoid speculation and motivational language.",
     "- Every claim must cite at least one specific metric name and value (e.g. burstiness_score=0.42).",
     "- Each section must include evidence: 2-6 commit SHAs that support the section.",
+    "- Provide a concise tagline (<=60 characters) that describes the developer's vibe. This will be displayed on the share card and must remain observational.",
     "",
     "Output must be STRICT JSON with this schema:",
-    '{"summary":"...","sections":[{"title":"...","content":"...","evidence":["sha", "..."]}],"highlights":[{"metric":"...","value":"...","interpretation":"..."}]}',
+    '{"summary":"...","tagline":"...","sections":[{"title":"...","content":"...","evidence":["sha", "..."]}],"highlights":[{"metric":"...","value":"...","interpretation":"..."}]}',
   ].join("\n");
 
   const userPrompt = [
@@ -307,6 +309,7 @@ export async function generateNarrativeWithLLM(params: {
 
   const obj = parsed as {
     summary?: unknown;
+    tagline?: unknown;
     sections?: unknown;
     highlights?: unknown;
   };
@@ -335,8 +338,13 @@ export async function generateNarrativeWithLLM(params: {
     highlights.push({ metric: hi.metric, value: hi.value, interpretation: hi.interpretation });
   }
 
+  // Enforce 60-char limit as specified in the prompt
+  const rawTagline = typeof obj.tagline === "string" ? obj.tagline.trim() : null;
+  const tagline = rawTagline ? rawTagline.slice(0, 60) : null;
+
   return {
     narrative: { summary: obj.summary, sections, highlights },
+    tagline,
     inputTokens: response.inputTokens,
     outputTokens: response.outputTokens,
   };
@@ -1044,6 +1052,7 @@ export const analyzeRepo = inngest.createFunction(
       const llmResolution = await resolveLLMConfig(userId, repoId);
       let llmNarrative: AnalysisReport["narrative"] | null = null;
       let llmModelUsed: string | null = null;
+      let llmTagline: string | null = null;
       const llmKeySource: LLMKeySource = llmResolution.source;
       const llmConfig: LLMConfig | null = llmResolution.config;
 
@@ -1070,6 +1079,7 @@ export const analyzeRepo = inngest.createFunction(
             if (result) {
               llmNarrative = result.narrative;
               llmModelUsed = candidate;
+              llmTagline = result.tagline;
 
               // Record successful usage with token counts
               await recordLLMUsage({
@@ -1137,22 +1147,28 @@ export const analyzeRepo = inngest.createFunction(
       );
       if (reportError) throw new Error(`Failed to upsert report: ${reportError.message}`);
 
+      const personaTaglineFallback = insights.persona.description ?? "";
+      const finalTagline =
+        llmTagline?.trim()?.length ? llmTagline.trim() : personaTaglineFallback;
+      insights.share_template.tagline = finalTagline;
+
       // Save legacy insights
       const { error: insightsError } = await supabase.from("analysis_insights").upsert(
-        {
-          job_id: jobId,
-          insights_json: insights,
-          generator_version: ANALYZER_VERSION,
-          persona_id: insights.persona.id,
-          persona_label: insights.persona.label,
-          persona_confidence: insights.persona.confidence,
-          tech_signals: insights.tech_signals,
-          share_template: insights.share_template,
-          persona_delta: insights.persona_delta,
-          sources: insights.sources,
-        },
-        { onConflict: "job_id" }
-      );
+          {
+            job_id: jobId,
+            insights_json: insights,
+            generator_version: ANALYZER_VERSION,
+            persona_id: insights.persona.id,
+            persona_label: insights.persona.label,
+            persona_confidence: insights.persona.confidence,
+            tech_signals: insights.tech_signals,
+            share_template: insights.share_template,
+            persona_delta: insights.persona_delta,
+            sources: insights.sources,
+            tagline: finalTagline,
+          },
+          { onConflict: "job_id" }
+        );
       if (insightsError) throw new Error(`Failed to upsert insights: ${insightsError.message}`);
 
       // Save vibe v2 insights

apps/web/src/inngest/functions/analyze-repo.ts

@@ -243,6 +243,7 @@ function computeEpisodeSummary(events: CommitEvent[]): Array<{
 interface NarrativeResult {
   narrative: AnalysisReport["narrative"];
   model: string;
+  tagline: string | null;
 }
 
 /**
@@ -292,8 +293,9 @@ async function generateNarrativeWithLLM(params: {
     "Never infer intent, skill, or code quality. Avoid speculation and motivational language.",
     "Every claim must cite at least one specific metric name and value (e.g. burstiness_score=0.42) or a specific commit subject line provided.",
     "Each section must include evidence: 2-6 commit SHAs that support the section.",
+    "Provide a concise tagline (<=60 characters) that describes the developer's vibe. This tagline will be displayed on share cards and should remain observational.",
     "Output must be STRICT JSON with this schema:",
-    '{"summary":"...","sections":[{"title":"...","content":"...","evidence":["sha", "..."]}],"highlights":[{"metric":"...","value":"...","interpretation":"..."}]}',
+    '{"summary":"...","tagline":"...","sections":[{"title":"...","content":"...","evidence":["sha", "..."]}],"highlights":[{"metric":"...","value":"...","interpretation":"..."}]}',
   ].join("\n");
 
   const userPrompt = [
@@ -375,6 +377,7 @@ async function generateNarrativeWithLLM(params: {
 
       const obj = parsed as {
         summary?: unknown;
+        tagline?: unknown;
         sections?: unknown;
         highlights?: unknown;
       };
@@ -407,9 +410,14 @@ async function generateNarrativeWithLLM(params: {
       }
       if (!highlightsValid) continue;
 
+      // Enforce 60-char limit as specified in the prompt
+      const rawTagline = typeof obj.tagline === "string" ? obj.tagline.trim() : null;
+      const tagline = rawTagline ? rawTagline.slice(0, 60) : null;
+
       return {
         narrative: { summary: obj.summary, sections, highlights },
         model,
+        tagline,
       };
     } catch (error) {
       console.warn(`LLM model ${model} failed, trying next:`, error);
@@ -567,6 +575,12 @@ async function processJob(jobId: string, config: WorkerConfig): Promise<void> {
     );
     if (reportError) throw new Error(`Failed to upsert report: ${reportError.message}`);
 
+    // Authoritative tagline: LLM-generated if available, else persona description
+    const personaTaglineFallback = insights.persona.description ?? "";
+    const llmTagline = llmResult?.tagline?.trim();
+    const finalTagline = llmTagline?.length ? llmTagline : personaTaglineFallback;
+    insights.share_template.tagline = finalTagline;
+
     const { error: insightsError } = await supabase.from("analysis_insights").upsert(
       {
         job_id: jobId,
@@ -577,6 +591,7 @@ async function processJob(jobId: string, config: WorkerConfig): Promise<void> {
         persona_confidence: insights.persona.confidence,
         tech_signals: insights.tech_signals as unknown as Json,
         share_template: insights.share_template as unknown as Json,
+        tagline: finalTagline,
         persona_delta: insights.persona_delta as unknown as Json,
         sources: insights.sources,
       },