feat: Add ownership check to display dashboard link in vault header and refactor video page.

src/app/vault/[creatorSlug]/page.tsx

@@ -10,6 +10,8 @@ import { VaultGridSkeleton } from '@/features/vault/components/vault-grid-skelet
 import { VaultFilters } from '@/features/vault/components/vault-filters';
 import { CategoryFilter } from '@/features/vault/components/category-filter';
 import { VaultHeader } from '@/features/vault/components/vault-header';
+import { auth } from '@/lib/auth';
+import { headers } from 'next/headers';
 
 // ISR: Revalidate every 5 minutes
 export const revalidate = 300;
@@ -82,6 +84,14 @@ export default async function VaultPage({ params, searchParams }: PageProps) {
     sortBy: resolvedSearchParams.sortBy as any,
   });
 
+  // Check if current user is owner
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  const isOwner = session?.user?.id === vault.channel.creatorId;
+  const dashboardUrl = isOwner ? '/dashboard' : undefined;
+
   // Render vault grid with loading skeleton
   // Story 4.2: Category filtering happens via URL params
   // Story 4.3: Products are passed to VaultGrid for display
@@ -90,7 +100,7 @@ export default async function VaultPage({ params, searchParams }: PageProps) {
       <div className="min-h-screen bg-background pb-20 overflow-x-hidden">
         {/* Centered Header Section */}
         <div className="animate-in fade-in duration-700">
-          <VaultHeader channel={vault.channel} />
+          <VaultHeader channel={vault.channel} dashboardUrl={dashboardUrl} />
         </div>
 
         <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6 relative z-20 space-y-8 animate-in slide-in-from-bottom-4 duration-700 delay-150">

src/app/vault/[creatorSlug]/video/[videoId]/page.tsx

@@ -1,9 +1,13 @@
 import { notFound } from 'next/navigation';
-import Image from 'next/image';
-import Link from 'next/link';
-import { ArrowLeft } from 'lucide-react';
 import { VaultService } from '@/features/vault/services/vault.service';
-import { ProductGrid } from '@/features/vault/components/product-grid';
+import { VaultHeader } from '@/features/vault/components/vault-header';
+import { VideoEmbed } from '@/features/vault/components/video-embed';
+import { VaultGrid } from '@/features/vault/components/vault-grid';
+import { CategoryFilter } from '@/features/vault/components/category-filter';
+import { Suspense } from 'react';
+import { VaultGridSkeleton } from '@/features/vault/components/vault-grid-skeleton';
+import { auth } from '@/lib/auth';
+import { headers } from 'next/headers';
 
 interface VideoPageProps {
   params: Promise<{
@@ -20,48 +24,69 @@ export default async function VideoPage({ params }: VideoPageProps) {
     notFound();
   }
 
+  // Derive categories from products for the filter
+  const categories = Array.from(
+    new Set(products.map(p => p.category))
+  ).map(category => ({
+    category,
+    count: products.filter(p => p.category === category).length
+  }));
+
+  // Construct vault object for VaultGrid
+  const vaultVideo = {
+    id: video.videoId, // Use YouTube ID for routing
+    title: video.title,
+    thumbnailUrl: video.thumbnailUrl || '',
+    viewCount: video.viewCount || 0,
+    publishedAt: video.publishedAt || new Date(),
+    approvedProductCount: products.length,
+    categories: categories.map(c => c.category)
+  };
+
+  const vault = {
+    channel: video.channel,
+    videos: [vaultVideo],
+    categories
+  };
+
+  // Check if current user is owner
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  const isOwner = session?.user?.id === video.channel.creatorId;
+  const dashboardUrl = isOwner ? '/dashboard' : undefined;
+
   return (
-    <div className="min-h-screen bg-background">
-      {/* Sticky header */}
-      <div className="sticky top-0 z-10 bg-background/80 backdrop-blur-md border-b border-border/40 px-4 py-4 md:px-6">
-        <div className="mx-auto max-w-7xl flex items-center gap-3">
-          <Link href="/" className="text-primary font-bold text-lg tracking-tight shrink-0">Vault</Link>
-          <span className="text-border/40">|</span>
-          <Link href={`/vault/${creatorSlug}`} className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
-            <ArrowLeft className="h-4 w-4" />
-            Back to Vault
-          </Link>
+    <Suspense fallback={<VaultGridSkeleton />}>
+      <div className="min-h-screen bg-background pb-20 overflow-x-hidden">
+        {/* Header */}
+        <div className="animate-in fade-in duration-700">
+          <VaultHeader channel={video.channel} dashboardUrl={dashboardUrl} />
         </div>
-      </div>
 
-      <div className="mx-auto max-w-7xl px-4 py-8 md:px-6 space-y-8">
-        {/* Video header */}
-        <div className="flex flex-col sm:flex-row gap-6 items-start">
-          {video.thumbnailUrl && (
-            <div className="relative aspect-video w-full sm:w-auto sm:max-w-md overflow-hidden rounded-lg bg-card/40 border border-border/40 shrink-0">
-              <Image
-                src={video.thumbnailUrl}
-                alt={video.title}
-                fill
-                className="object-cover"
-                priority
-              />
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6 relative z-20 space-y-8 animate-in slide-in-from-bottom-4 duration-700 delay-150">
+
+          {/* Video Embed */}
+          <VideoEmbed videoId={video.videoId} title={video.title} />
+
+          {/* Category Filter */}
+          {categories.length > 0 && (
+            <div className="flex justify-center">
+              <CategoryFilter categories={categories} />
             </div>
           )}
-          <div className="space-y-2">
-            <h1 className="text-2xl font-bold text-foreground">{video.title}</h1>
-            <p className="text-muted-foreground">
-              {products.length} {products.length === 1 ? 'product' : 'products'} detected
-            </p>
-          </div>
-        </div>
 
-        {/* Product grid */}
-        <div>
-          <h2 className="text-xl font-semibold mb-4 text-foreground">Products in this video</h2>
-          <ProductGrid products={products} />
+          {/* Content Grid (Products only) */}
+          <div className="mt-8">
+            <VaultGrid
+              vault={vault}
+              products={products}
+              hideVideos={true}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </Suspense>
   );
 }

src/features/vault/components/vault-header.tsx

@@ -4,7 +4,7 @@
 // Story 4.5: Added search bar integration
 import Image from 'next/image';
 import Link from 'next/link';
-import { Share2 } from 'lucide-react';
+import { Share2, LayoutDashboard } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { SearchBar } from './search-bar';
@@ -22,7 +22,10 @@ function formatSubscriberCount(count: number | null): string {
   return `${count} subscribers`;
 }
 
-export function VaultHeader({ channel }: VaultHeaderProps) {
+export function VaultHeader({
+  channel,
+  dashboardUrl
+}: VaultHeaderProps & { dashboardUrl?: string }) {
   const handleShare = async () => {
     const url = window.location.href;
 
@@ -56,6 +59,19 @@ export function VaultHeader({ channel }: VaultHeaderProps) {
   return (
     <div className="bg-background/80 backdrop-blur-md border-b border-border/40 px-4 py-8 md:px-6">
       <div className="mx-auto max-w-7xl flex flex-col items-center text-center space-y-6">
+
+        {/* Ownership/Action Banner */}
+        {dashboardUrl && (
+          <div className="w-full flex justify-end -mb-4">
+            <Button variant="ghost" size="sm" asChild className="text-muted-foreground hover:text-primary gap-2">
+              <Link href={dashboardUrl}>
+                <LayoutDashboard className="h-4 w-4" />
+                Back to Dashboard
+              </Link>
+            </Button>
+          </div>
+        )}
+
         {/* Creator Info Section */}
         <div className="flex flex-col items-center gap-4">
           <div className="flex items-center gap-4">

src/features/vault/services/vault.service.ts

@@ -49,6 +49,7 @@ export class VaultService {
           subscriberCount: sampleCreator.subscriberCount,
           thumbnailUrl: sampleCreator.avatar,
           creatorSlug: sampleCreator.slug,
+          creatorId: sampleCreator.id,
         },
         videos,
         categories: [{ category: 'Tech', count: videos.reduce((acc, v) => acc + v.approvedProductCount, 0) }],
@@ -63,6 +64,7 @@ export class VaultService {
         subscriberCount: youtubeChannels.subscriberCount,
         thumbnailUrl: youtubeChannels.thumbnailUrl,
         creatorSlug: youtubeChannels.creatorSlug,
+        creatorId: youtubeChannels.creatorId,
         videoId: youtubeVideos.id,
         videoTitle: youtubeVideos.title,
         videoThumbnailUrl: youtubeVideos.thumbnailUrl,
@@ -112,6 +114,7 @@ export class VaultService {
           subscriberCount: youtubeChannels.subscriberCount,
           thumbnailUrl: youtubeChannels.thumbnailUrl,
           creatorSlug: youtubeChannels.creatorSlug,
+          creatorId: youtubeChannels.creatorId,
         })
         .from(youtubeChannels)
         .where(eq(youtubeChannels.creatorSlug, creatorSlug))
@@ -170,6 +173,7 @@ export class VaultService {
         subscriberCount: firstRow.subscriberCount,
         thumbnailUrl: firstRow.thumbnailUrl,
         creatorSlug: firstRow.creatorSlug,
+        creatorId: firstRow.creatorId,
       },
       videos,
       categories, // Story 4.2: Available categories with counts
@@ -618,20 +622,28 @@ export class VaultService {
    * Get a single video's details and its approved products.
    * Used by the /vault/[creatorSlug]/video/[videoId] page.
    */
-  static async getVideoProducts(videoId: string): Promise<{
-    video: { id: string; title: string; thumbnailUrl: string | null; viewCount: number | null; publishedAt: Date | null } | null;
-    products: ProductCard[];
-  }> {
+  static async getVideoProducts(videoId: string) {
     // Try UUID first, then YouTube ID
     const videoResult = await db
       .select({
         id: youtubeVideos.id,
+
+        videoId: youtubeVideos.videoId, // Added for linking
         title: youtubeVideos.title,
         thumbnailUrl: youtubeVideos.thumbnailUrl,
         viewCount: youtubeVideos.viewCount,
         publishedAt: youtubeVideos.publishedAt,
+        channel: {
+          id: youtubeChannels.id,
+          channelName: youtubeChannels.channelName,
+          subscriberCount: youtubeChannels.subscriberCount,
+          thumbnailUrl: youtubeChannels.thumbnailUrl,
+          creatorSlug: youtubeChannels.creatorSlug,
+          creatorId: youtubeChannels.creatorId
+        }
       })
       .from(youtubeVideos)
+      .innerJoin(youtubeChannels, eq(youtubeVideos.channelId, youtubeChannels.id))
       .where(
         sql`${youtubeVideos.id} = ${videoId} OR ${youtubeVideos.videoId} = ${videoId}`
       )

src/features/vault/types/vault.types.ts

@@ -24,6 +24,7 @@ export interface CreatorVault {
     subscriberCount: number | null;
     thumbnailUrl: string | null;
     creatorSlug: string;
+    creatorId: string;
   };
   videos: VaultVideo[];
   categories: CategoryCount[]; // Story 4.2: Available categories with counts