From c9cec5f80f0fe0fbae3570a536c2fc76e90ecdef Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 04:51:42 +0000
Subject: [PATCH 1/7] refactor: Convert beta videos to grid layout with smaller
 previews

Change the beta videos section from large single-column previews to a
compact grid layout. Videos now display as small square thumbnails with
username/angle overlays, while the modal click behavior remains unchanged.
---
 .../components/beta-videos/beta-videos.tsx    | 84 +++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/web/app/components/beta-videos/beta-videos.tsx b/packages/web/app/components/beta-videos/beta-videos.tsx
index 8e42240f..ba80df69 100644
--- a/packages/web/app/components/beta-videos/beta-videos.tsx
+++ b/packages/web/app/components/beta-videos/beta-videos.tsx
@@ -2,11 +2,11 @@
 
 import React, { useState } from 'react';
 import { Card, Row, Col, Typography, Empty, Modal } from 'antd';
-import { InstagramOutlined, UserOutlined } from '@ant-design/icons';
+import { InstagramOutlined } from '@ant-design/icons';
 import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
 import { themeTokens } from '@/app/theme/theme-config';
 
-const { Title, Text } = Typography;
+const { Title } = Typography;
 
 interface BetaVideosProps {
   betaLinks: BetaLink[];
@@ -51,12 +51,12 @@ const BetaVideos: React.FC<BetaVideosProps> = ({ betaLinks }) => {
       {betaLinks.length === 0 ? (
         <Empty description="No beta videos available" image={Empty.PRESENTED_IMAGE_SIMPLE} />
       ) : (
-        <Row gutter={[12, 12]}>
+        <Row gutter={[8, 8]}>
           {betaLinks.map((betaLink, index) => {
             const embedUrl = getInstagramEmbedUrl(betaLink.link);
 
             return (
-              <Col xs={24} key={index}>
+              <Col xs={8} sm={6} md={8} lg={6} key={index}>
                 <Card
                   hoverable
                   size="small"
@@ -69,7 +69,7 @@ const BetaVideos: React.FC<BetaVideosProps> = ({ betaLinks }) => {
                         position: 'relative',
                         paddingBottom: '100%',
                         overflow: 'hidden',
-                        borderRadius: `${themeTokens.borderRadius.md}px ${themeTokens.borderRadius.md}px 0 0`,
+                        borderRadius: themeTokens.borderRadius.md,
                       }}
                     >
                       <iframe
@@ -86,52 +86,52 @@ const BetaVideos: React.FC<BetaVideosProps> = ({ betaLinks }) => {
                         scrolling="no"
                         title={`Beta video ${index + 1} thumbnail`}
                       />
+                      {(betaLink.foreign_username || betaLink.angle) && (
+                        <div
+                          style={{
+                            position: 'absolute',
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            padding: `${themeTokens.spacing[1]}px ${themeTokens.spacing[2]}px`,
+                            background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
+                            color: 'white',
+                            fontSize: themeTokens.typography.fontSize.xs,
+                          }}
+                        >
+                          {betaLink.foreign_username && (
+                            <span>@{betaLink.foreign_username}</span>
+                          )}
+                          {betaLink.angle && (
+                            <span style={{ marginLeft: betaLink.foreign_username ? 4 : 0 }}>
+                              {betaLink.angle}°
+                            </span>
+                          )}
+                        </div>
+                      )}
                     </div>
                   ) : (
                     <div
                       style={{
-                        padding: themeTokens.spacing[8],
-                        textAlign: 'center',
+                        paddingBottom: '100%',
+                        position: 'relative',
                         background: themeTokens.neutral[100],
+                        borderRadius: themeTokens.borderRadius.md,
                       }}
                     >
-                      <InstagramOutlined style={{ fontSize: 32, color: themeTokens.neutral[400] }} />
-                      <p style={{ margin: `${themeTokens.spacing[2]}px 0 0`, color: themeTokens.neutral[500] }}>
-                        Unable to load video
-                      </p>
+                      <div
+                        style={{
+                          position: 'absolute',
+                          top: '50%',
+                          left: '50%',
+                          transform: 'translate(-50%, -50%)',
+                          textAlign: 'center',
+                        }}
+                      >
+                        <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
+                      </div>
                     </div>
                   )}
-                  <div
-                    style={{
-                      padding: themeTokens.spacing[3],
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      borderTop: `1px solid ${themeTokens.neutral[100]}`,
-                    }}
-                  >
-                    {betaLink.foreign_username && (
-                      <Text type="secondary" style={{ fontSize: themeTokens.typography.fontSize.sm }}>
-                        <UserOutlined style={{ marginRight: 4 }} />@{betaLink.foreign_username}
-                        {betaLink.angle && <span style={{ marginLeft: 8 }}>{betaLink.angle}°</span>}
-                      </Text>
-                    )}
-                    <a
-                      href={betaLink.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={(e) => e.stopPropagation()}
-                      style={{
-                        color: themeTokens.colors.primary,
-                        fontSize: themeTokens.typography.fontSize.sm,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 4,
-                      }}
-                    >
-                      <InstagramOutlined /> View
-                    </a>
-                  </div>
                 </Card>
               </Col>
             );

From d568ac5a3be2f2467555fd240c390bbb03ee596b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:09:38 +0000
Subject: [PATCH 2/7] fix: Use thumbnail images instead of iframe embeds for
 beta video previews

Replace the heavy Instagram iframe embeds with lightweight thumbnail
images in the grid preview. Falls back to an Instagram icon placeholder
when no thumbnail is available. The modal still shows the full embed.
---
 .../components/beta-videos/beta-videos.tsx    | 130 ++++++++----------
 1 file changed, 58 insertions(+), 72 deletions(-)

diff --git a/packages/web/app/components/beta-videos/beta-videos.tsx b/packages/web/app/components/beta-videos/beta-videos.tsx
index ba80df69..f288240c 100644
--- a/packages/web/app/components/beta-videos/beta-videos.tsx
+++ b/packages/web/app/components/beta-videos/beta-videos.tsx
@@ -52,90 +52,76 @@ const BetaVideos: React.FC<BetaVideosProps> = ({ betaLinks }) => {
         <Empty description="No beta videos available" image={Empty.PRESENTED_IMAGE_SIMPLE} />
       ) : (
         <Row gutter={[8, 8]}>
-          {betaLinks.map((betaLink, index) => {
-            const embedUrl = getInstagramEmbedUrl(betaLink.link);
-
-            return (
-              <Col xs={8} sm={6} md={8} lg={6} key={index}>
-                <Card
-                  hoverable
-                  size="small"
-                  styles={{ body: { padding: 0 } }}
-                  onClick={() => handleVideoClick(betaLink)}
+          {betaLinks.map((betaLink, index) => (
+            <Col xs={8} sm={6} md={8} lg={6} key={index}>
+              <Card
+                hoverable
+                size="small"
+                styles={{ body: { padding: 0 } }}
+                onClick={() => handleVideoClick(betaLink)}
+              >
+                <div
+                  style={{
+                    position: 'relative',
+                    paddingBottom: '100%',
+                    overflow: 'hidden',
+                    borderRadius: themeTokens.borderRadius.md,
+                    background: themeTokens.neutral[100],
+                  }}
                 >
-                  {embedUrl ? (
+                  {betaLink.thumbnail ? (
+                    <img
+                      src={betaLink.thumbnail}
+                      alt={`Beta by ${betaLink.foreign_username || 'unknown'}`}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  ) : (
                     <div
                       style={{
-                        position: 'relative',
-                        paddingBottom: '100%',
-                        overflow: 'hidden',
-                        borderRadius: themeTokens.borderRadius.md,
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        textAlign: 'center',
                       }}
                     >
-                      <iframe
-                        src={embedUrl}
-                        style={{
-                          position: 'absolute',
-                          top: '-20%',
-                          left: 0,
-                          width: '100%',
-                          height: '140%',
-                          border: 'none',
-                          pointerEvents: 'none',
-                        }}
-                        scrolling="no"
-                        title={`Beta video ${index + 1} thumbnail`}
-                      />
-                      {(betaLink.foreign_username || betaLink.angle) && (
-                        <div
-                          style={{
-                            position: 'absolute',
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            padding: `${themeTokens.spacing[1]}px ${themeTokens.spacing[2]}px`,
-                            background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
-                            color: 'white',
-                            fontSize: themeTokens.typography.fontSize.xs,
-                          }}
-                        >
-                          {betaLink.foreign_username && (
-                            <span>@{betaLink.foreign_username}</span>
-                          )}
-                          {betaLink.angle && (
-                            <span style={{ marginLeft: betaLink.foreign_username ? 4 : 0 }}>
-                              {betaLink.angle}°
-                            </span>
-                          )}
-                        </div>
-                      )}
+                      <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
                     </div>
-                  ) : (
+                  )}
+                  {(betaLink.foreign_username || betaLink.angle) && (
                     <div
                       style={{
-                        paddingBottom: '100%',
-                        position: 'relative',
-                        background: themeTokens.neutral[100],
-                        borderRadius: themeTokens.borderRadius.md,
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        padding: `${themeTokens.spacing[1]}px ${themeTokens.spacing[2]}px`,
+                        background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
+                        color: 'white',
+                        fontSize: themeTokens.typography.fontSize.xs,
                       }}
                     >
-                      <div
-                        style={{
-                          position: 'absolute',
-                          top: '50%',
-                          left: '50%',
-                          transform: 'translate(-50%, -50%)',
-                          textAlign: 'center',
-                        }}
-                      >
-                        <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
-                      </div>
+                      {betaLink.foreign_username && (
+                        <span>@{betaLink.foreign_username}</span>
+                      )}
+                      {betaLink.angle && (
+                        <span style={{ marginLeft: betaLink.foreign_username ? 4 : 0 }}>
+                          {betaLink.angle}°
+                        </span>
+                      )}
                     </div>
                   )}
-                </Card>
-              </Col>
-            );
-          })}
+                </div>
+              </Card>
+            </Col>
+          ))}
         </Row>
       )}
 

From 0488f1fd50e2ad43c011734f01dfd64392e83f44 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:13:31 +0000
Subject: [PATCH 3/7] feat: Add Instagram oEmbed API fallback for dead
 thumbnail links

- Create /api/v1/instagram/oembed endpoint to fetch thumbnails from
  Instagram's oEmbed API with 24-hour caching
- Add BetaThumbnail component that tries stored thumbnail first, then
  falls back to oEmbed API if the stored thumbnail fails to load
- Show placeholder icon during loading and on complete failure
---
 .../web/app/api/v1/instagram/oembed/route.ts  |  56 ++++++++
 .../components/beta-videos/beta-videos.tsx    | 124 ++++++++++++++----
 2 files changed, 153 insertions(+), 27 deletions(-)
 create mode 100644 packages/web/app/api/v1/instagram/oembed/route.ts

diff --git a/packages/web/app/api/v1/instagram/oembed/route.ts b/packages/web/app/api/v1/instagram/oembed/route.ts
new file mode 100644
index 00000000..21fa39a1
--- /dev/null
+++ b/packages/web/app/api/v1/instagram/oembed/route.ts
@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Cache for oEmbed responses (in-memory, resets on server restart)
+const thumbnailCache = new Map<string, { url: string; timestamp: number }>();
+const CACHE_TTL = 1000 * 60 * 60 * 24; // 24 hours
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const instagramUrl = searchParams.get('url');
+
+  if (!instagramUrl) {
+    return NextResponse.json({ error: 'Missing url parameter' }, { status: 400 });
+  }
+
+  // Check cache first
+  const cached = thumbnailCache.get(instagramUrl);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return NextResponse.json({ thumbnail_url: cached.url });
+  }
+
+  try {
+    // Use Instagram's oEmbed API
+    const oembedUrl = `https://api.instagram.com/oembed/?url=${encodeURIComponent(instagramUrl)}`;
+
+    const response = await fetch(oembedUrl, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (compatible; Boardsesh/1.0)',
+      },
+      next: { revalidate: 86400 }, // Cache for 24 hours
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch from Instagram oEmbed API' },
+        { status: response.status },
+      );
+    }
+
+    const data = await response.json();
+
+    if (data.thumbnail_url) {
+      // Cache the result
+      thumbnailCache.set(instagramUrl, {
+        url: data.thumbnail_url,
+        timestamp: Date.now(),
+      });
+
+      return NextResponse.json({ thumbnail_url: data.thumbnail_url });
+    }
+
+    return NextResponse.json({ error: 'No thumbnail found' }, { status: 404 });
+  } catch (error) {
+    console.error('Error fetching Instagram oEmbed:', error);
+    return NextResponse.json({ error: 'Failed to fetch thumbnail' }, { status: 500 });
+  }
+}
diff --git a/packages/web/app/components/beta-videos/beta-videos.tsx b/packages/web/app/components/beta-videos/beta-videos.tsx
index f288240c..f057d811 100644
--- a/packages/web/app/components/beta-videos/beta-videos.tsx
+++ b/packages/web/app/components/beta-videos/beta-videos.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card, Row, Col, Typography, Empty, Modal } from 'antd';
 import { InstagramOutlined } from '@ant-design/icons';
 import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
@@ -8,6 +8,101 @@ import { themeTokens } from '@/app/theme/theme-config';
 
 const { Title } = Typography;
 
+interface ThumbnailProps {
+  betaLink: BetaLink;
+}
+
+const BetaThumbnail: React.FC<ThumbnailProps> = ({ betaLink }) => {
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(betaLink.thumbnail);
+  const [hasError, setHasError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // If no stored thumbnail, try oEmbed immediately
+    if (!betaLink.thumbnail && !isLoading && !hasError) {
+      fetchOembedThumbnail();
+    }
+  }, [betaLink.link]);
+
+  const fetchOembedThumbnail = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(
+        `/api/v1/instagram/oembed?url=${encodeURIComponent(betaLink.link)}`,
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.thumbnail_url) {
+          setThumbnailUrl(data.thumbnail_url);
+          setHasError(false);
+          return;
+        }
+      }
+    } catch {
+      // oEmbed failed, show placeholder
+    }
+    setHasError(true);
+    setIsLoading(false);
+  };
+
+  const handleImageError = () => {
+    // Stored thumbnail failed, try oEmbed
+    if (!isLoading) {
+      setThumbnailUrl(null);
+      fetchOembedThumbnail();
+    }
+  };
+
+  if (hasError || (!thumbnailUrl && !isLoading)) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          textAlign: 'center',
+        }}
+      >
+        <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
+      </div>
+    );
+  }
+
+  if (thumbnailUrl) {
+    return (
+      <img
+        src={thumbnailUrl}
+        alt={`Beta by ${betaLink.foreign_username || 'unknown'}`}
+        onError={handleImageError}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+        }}
+      />
+    );
+  }
+
+  // Loading state
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        textAlign: 'center',
+      }}
+    >
+      <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[300] }} />
+    </div>
+  );
+};
+
 interface BetaVideosProps {
   betaLinks: BetaLink[];
 }
@@ -69,32 +164,7 @@ const BetaVideos: React.FC<BetaVideosProps> = ({ betaLinks }) => {
                     background: themeTokens.neutral[100],
                   }}
                 >
-                  {betaLink.thumbnail ? (
-                    <img
-                      src={betaLink.thumbnail}
-                      alt={`Beta by ${betaLink.foreign_username || 'unknown'}`}
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                      }}
-                    />
-                  ) : (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: '50%',
-                        left: '50%',
-                        transform: 'translate(-50%, -50%)',
-                        textAlign: 'center',
-                      }}
-                    >
-                      <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
-                    </div>
-                  )}
+                  <BetaThumbnail betaLink={betaLink} />
                   {(betaLink.foreign_username || betaLink.angle) && (
                     <div
                       style={{

From 6a0cbb10a05421a77442383e823bc7b46aa2a852 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:14:16 +0000
Subject: [PATCH 4/7] fix: Remove in-memory cache, use HTTP caching for
 serverless

Replace in-memory cache (which doesn't work with Vercel lambdas) with:
- Next.js fetch cache (revalidate: 86400) for upstream requests
- Cache-Control headers for browser/CDN caching
---
 .../web/app/api/v1/instagram/oembed/route.ts  | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/web/app/api/v1/instagram/oembed/route.ts b/packages/web/app/api/v1/instagram/oembed/route.ts
index 21fa39a1..2767ad77 100644
--- a/packages/web/app/api/v1/instagram/oembed/route.ts
+++ b/packages/web/app/api/v1/instagram/oembed/route.ts
@@ -1,9 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-// Cache for oEmbed responses (in-memory, resets on server restart)
-const thumbnailCache = new Map<string, { url: string; timestamp: number }>();
-const CACHE_TTL = 1000 * 60 * 60 * 24; // 24 hours
-
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const instagramUrl = searchParams.get('url');
@@ -12,12 +8,6 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({ error: 'Missing url parameter' }, { status: 400 });
   }
 
-  // Check cache first
-  const cached = thumbnailCache.get(instagramUrl);
-  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
-    return NextResponse.json({ thumbnail_url: cached.url });
-  }
-
   try {
     // Use Instagram's oEmbed API
     const oembedUrl = `https://api.instagram.com/oembed/?url=${encodeURIComponent(instagramUrl)}`;
@@ -26,7 +16,7 @@ export async function GET(request: NextRequest) {
       headers: {
         'User-Agent': 'Mozilla/5.0 (compatible; Boardsesh/1.0)',
       },
-      next: { revalidate: 86400 }, // Cache for 24 hours
+      next: { revalidate: 86400 }, // Next.js fetch cache for 24 hours
     });
 
     if (!response.ok) {
@@ -39,13 +29,15 @@ export async function GET(request: NextRequest) {
     const data = await response.json();
 
     if (data.thumbnail_url) {
-      // Cache the result
-      thumbnailCache.set(instagramUrl, {
-        url: data.thumbnail_url,
-        timestamp: Date.now(),
-      });
-
-      return NextResponse.json({ thumbnail_url: data.thumbnail_url });
+      // Return with cache headers for browser/CDN caching
+      return NextResponse.json(
+        { thumbnail_url: data.thumbnail_url },
+        {
+          headers: {
+            'Cache-Control': 'public, s-maxage=86400, stale-while-revalidate=43200',
+          },
+        },
+      );
     }
 
     return NextResponse.json({ error: 'No thumbnail found' }, { status: 404 });

From a3b537a1c735a27b22d81f78ee0913d8439b7498 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:15:15 +0000
Subject: [PATCH 5/7] chore: Extend thumbnail cache to 30 days

---
 packages/web/app/api/v1/instagram/oembed/route.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/app/api/v1/instagram/oembed/route.ts b/packages/web/app/api/v1/instagram/oembed/route.ts
index 2767ad77..0da99a5c 100644
--- a/packages/web/app/api/v1/instagram/oembed/route.ts
+++ b/packages/web/app/api/v1/instagram/oembed/route.ts
@@ -16,7 +16,7 @@ export async function GET(request: NextRequest) {
       headers: {
         'User-Agent': 'Mozilla/5.0 (compatible; Boardsesh/1.0)',
       },
-      next: { revalidate: 86400 }, // Next.js fetch cache for 24 hours
+      next: { revalidate: 2592000 }, // Next.js fetch cache for 30 days
     });
 
     if (!response.ok) {
@@ -29,12 +29,12 @@ export async function GET(request: NextRequest) {
     const data = await response.json();
 
     if (data.thumbnail_url) {
-      // Return with cache headers for browser/CDN caching
+      // Return with cache headers for browser/CDN caching (30 days)
       return NextResponse.json(
         { thumbnail_url: data.thumbnail_url },
         {
           headers: {
-            'Cache-Control': 'public, s-maxage=86400, stale-while-revalidate=43200',
+            'Cache-Control': 'public, max-age=2592000, s-maxage=2592000, stale-while-revalidate=604800',
           },
         },
       );

From 30a6e67fe1363078485e6b550c9373a5016a880e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:15:39 +0000
Subject: [PATCH 6/7] chore: Extend thumbnail cache to 1 year

---
 packages/web/app/api/v1/instagram/oembed/route.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/app/api/v1/instagram/oembed/route.ts b/packages/web/app/api/v1/instagram/oembed/route.ts
index 0da99a5c..c6392b6c 100644
--- a/packages/web/app/api/v1/instagram/oembed/route.ts
+++ b/packages/web/app/api/v1/instagram/oembed/route.ts
@@ -16,7 +16,7 @@ export async function GET(request: NextRequest) {
       headers: {
         'User-Agent': 'Mozilla/5.0 (compatible; Boardsesh/1.0)',
       },
-      next: { revalidate: 2592000 }, // Next.js fetch cache for 30 days
+      next: { revalidate: 31536000 }, // Next.js fetch cache for 1 year
     });
 
     if (!response.ok) {
@@ -29,12 +29,12 @@ export async function GET(request: NextRequest) {
     const data = await response.json();
 
     if (data.thumbnail_url) {
-      // Return with cache headers for browser/CDN caching (30 days)
+      // Return with cache headers for browser/CDN caching (1 year)
       return NextResponse.json(
         { thumbnail_url: data.thumbnail_url },
         {
           headers: {
-            'Cache-Control': 'public, max-age=2592000, s-maxage=2592000, stale-while-revalidate=604800',
+            'Cache-Control': 'public, max-age=31536000, s-maxage=31536000, immutable',
           },
         },
       );

From 2a2b8097ad419e6363782c6ad5d4a2361ad829b2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 05:22:43 +0000
Subject: [PATCH 7/7] fix: Simplify beta thumbnails, remove broken oEmbed
 fallback

Instagram's public oEmbed API now requires Graph API authentication.
Simplify the component to use stored thumbnails with a clean play button
placeholder when thumbnails are missing or fail to load. The iframe
embeds in the modal don't require authentication and continue to work.
---
 .../web/app/api/v1/instagram/oembed/route.ts  | 48 ---------
 .../components/beta-videos/beta-videos.tsx    | 97 +++++--------------
 2 files changed, 24 insertions(+), 121 deletions(-)
 delete mode 100644 packages/web/app/api/v1/instagram/oembed/route.ts

diff --git a/packages/web/app/api/v1/instagram/oembed/route.ts b/packages/web/app/api/v1/instagram/oembed/route.ts
deleted file mode 100644
index c6392b6c..00000000
--- a/packages/web/app/api/v1/instagram/oembed/route.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams;
-  const instagramUrl = searchParams.get('url');
-
-  if (!instagramUrl) {
-    return NextResponse.json({ error: 'Missing url parameter' }, { status: 400 });
-  }
-
-  try {
-    // Use Instagram's oEmbed API
-    const oembedUrl = `https://api.instagram.com/oembed/?url=${encodeURIComponent(instagramUrl)}`;
-
-    const response = await fetch(oembedUrl, {
-      headers: {
-        'User-Agent': 'Mozilla/5.0 (compatible; Boardsesh/1.0)',
-      },
-      next: { revalidate: 31536000 }, // Next.js fetch cache for 1 year
-    });
-
-    if (!response.ok) {
-      return NextResponse.json(
-        { error: 'Failed to fetch from Instagram oEmbed API' },
-        { status: response.status },
-      );
-    }
-
-    const data = await response.json();
-
-    if (data.thumbnail_url) {
-      // Return with cache headers for browser/CDN caching (1 year)
-      return NextResponse.json(
-        { thumbnail_url: data.thumbnail_url },
-        {
-          headers: {
-            'Cache-Control': 'public, max-age=31536000, s-maxage=31536000, immutable',
-          },
-        },
-      );
-    }
-
-    return NextResponse.json({ error: 'No thumbnail found' }, { status: 404 });
-  } catch (error) {
-    console.error('Error fetching Instagram oEmbed:', error);
-    return NextResponse.json({ error: 'Failed to fetch thumbnail' }, { status: 500 });
-  }
-}
diff --git a/packages/web/app/components/beta-videos/beta-videos.tsx b/packages/web/app/components/beta-videos/beta-videos.tsx
index f057d811..b13cb3a1 100644
--- a/packages/web/app/components/beta-videos/beta-videos.tsx
+++ b/packages/web/app/components/beta-videos/beta-videos.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Card, Row, Col, Typography, Empty, Modal } from 'antd';
-import { InstagramOutlined } from '@ant-design/icons';
+import { InstagramOutlined, PlayCircleOutlined } from '@ant-design/icons';
 import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
 import { themeTokens } from '@/app/theme/theme-config';
 
@@ -13,93 +13,44 @@ interface ThumbnailProps {
 }
 
 const BetaThumbnail: React.FC<ThumbnailProps> = ({ betaLink }) => {
-  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(betaLink.thumbnail);
   const [hasError, setHasError] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    // If no stored thumbnail, try oEmbed immediately
-    if (!betaLink.thumbnail && !isLoading && !hasError) {
-      fetchOembedThumbnail();
-    }
-  }, [betaLink.link]);
-
-  const fetchOembedThumbnail = async () => {
-    setIsLoading(true);
-    try {
-      const response = await fetch(
-        `/api/v1/instagram/oembed?url=${encodeURIComponent(betaLink.link)}`,
-      );
-      if (response.ok) {
-        const data = await response.json();
-        if (data.thumbnail_url) {
-          setThumbnailUrl(data.thumbnail_url);
-          setHasError(false);
-          return;
-        }
-      }
-    } catch {
-      // oEmbed failed, show placeholder
-    }
-    setHasError(true);
-    setIsLoading(false);
-  };
-
-  const handleImageError = () => {
-    // Stored thumbnail failed, try oEmbed
-    if (!isLoading) {
-      setThumbnailUrl(null);
-      fetchOembedThumbnail();
-    }
-  };
-
-  if (hasError || (!thumbnailUrl && !isLoading)) {
+  // If no thumbnail or it failed to load, show placeholder
+  if (!betaLink.thumbnail || hasError) {
     return (
       <div
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          textAlign: 'center',
-        }}
-      >
-        <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[400] }} />
-      </div>
-    );
-  }
-
-  if (thumbnailUrl) {
-    return (
-      <img
-        src={thumbnailUrl}
-        alt={`Beta by ${betaLink.foreign_username || 'unknown'}`}
-        onError={handleImageError}
         style={{
           position: 'absolute',
           top: 0,
           left: 0,
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: `linear-gradient(135deg, ${themeTokens.neutral[200]} 0%, ${themeTokens.neutral[100]} 100%)`,
         }}
-      />
+      >
+        <PlayCircleOutlined style={{ fontSize: 28, color: themeTokens.neutral[400] }} />
+      </div>
     );
   }
 
-  // Loading state
   return (
-    <div
+    <img
+      src={betaLink.thumbnail}
+      alt={`Beta by ${betaLink.foreign_username || 'unknown'}`}
+      onError={() => setHasError(true)}
       style={{
         position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        textAlign: 'center',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
       }}
-    >
-      <InstagramOutlined style={{ fontSize: 24, color: themeTokens.neutral[300] }} />
-    </div>
+    />
   );
 };