From 01e5b5ed1dc68f340ac6ccf3c2284810146ac52c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 4 Aug 2026 20:38:18 +0000
Subject: [PATCH] Give /file its own OG card and page metadata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Relayfile landing page fell back to the site-wide default card and
carried only a title and description, so shares showed a generic "Headless
Slack for Agents" image with no canonical, no social tags, and no entry in
the sitemap — while its own docs pages already had Relayfile-branded cards.

- Add a RelayfileVariant to the shared OG template: the /file hero's badge,
  headline, and subtitle beside the "relayfile workspace" tree, with the
  provider paths and WATCH/WRITE/READ labels from the hero animation. Same
  composition as the landing and Pear cards.
- Serve it from app/file/og.png, prerendered at build like the other cards.
- Build the page metadata in lib/relayfile-meta.ts: canonical, keywords, and
  full openGraph/twitter tags whose copy mirrors the live hero. The page-level
  openGraph replaces the layout's, so siteName and locale are restated.
- Add SoftwareApplication structured data, matching the enterprise page.
- Add /file to the sitemap, which was missing it entirely.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S9ZyG8tEAxsQvUMFPWLF4D
---
 web/app/file/og.png/route.tsx |  23 +++
 web/app/file/page.tsx         |  31 +++-
 web/app/sitemap.ts            |   6 +
 web/lib/og/template.tsx       | 266 ++++++++++++++++++++++++++++++++++
 web/lib/relayfile-meta.ts     |  77 ++++++++++
 5 files changed, 397 insertions(+), 6 deletions(-)
 create mode 100644 web/app/file/og.png/route.tsx
 create mode 100644 web/lib/relayfile-meta.ts

diff --git a/web/app/file/og.png/route.tsx b/web/app/file/og.png/route.tsx
new file mode 100644
index 0000000..df08490
--- /dev/null
+++ b/web/app/file/og.png/route.tsx
@@ -0,0 +1,23 @@
+import { ImageResponse } from 'next/og';
+
+import { loadBrandFonts, OG_SIZE, RelayfileVariant } from '../../../lib/og/template';
+
+export const runtime = 'nodejs';
+// Prerender at build time — the Relayfile card never changes between deploys.
+export const dynamic = 'force-static';
+
+/**
+ * The Relayfile landing page's Open Graph card: the same composition as the
+ * homepage and Pear cards (left copy column, a panel bled into the bottom-right)
+ * with the page's own badge, headline, and subtitle beside the "relayfile
+ * workspace" tree from its hero. Served as a `.png` route handler so the URL
+ * ends in a real image extension.
+ */
+export async function GET() {
+  const { fonts, headingFamily, bodyFamily } = await loadBrandFonts();
+
+  return new ImageResponse(<RelayfileVariant headingFamily={headingFamily} bodyFamily={bodyFamily} />, {
+    ...OG_SIZE,
+    ...(fonts.length > 0 ? { fonts } : {}),
+  });
+}
diff --git a/web/app/file/page.tsx b/web/app/file/page.tsx
index 5f4a801..983be61 100644
--- a/web/app/file/page.tsx
+++ b/web/app/file/page.tsx
@@ -1,15 +1,34 @@
 import type { Metadata } from 'next';
 
 import { GitHubStarsBadge } from '../../components/GitHubStars';
+import { relayfileMetadata, RELAYFILE_PATH } from '../../lib/relayfile-meta';
+import { absoluteUrl } from '../../lib/site';
 
 import { RelayfileContent } from './RelayfileContent';
 
-export const metadata: Metadata = {
-  title: 'Relayfile | Integration filesystem for AI agents',
-  description:
-    'Mount SaaS integrations as files so agents can read, write, watch, and coordinate through one realtime workspace.',
-};
+export const metadata: Metadata = relayfileMetadata(RELAYFILE_PATH);
 
 export default function FilePage() {
-  return <RelayfileContent navActions={<GitHubStarsBadge />} />;
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: 'Relayfile',
+    applicationCategory: 'DeveloperApplication',
+    description:
+      'An integration filesystem for AI agents. Mount Linear, GitHub, Notion, Slack, and other SaaS systems as a realtime filesystem that agents read with bash and write back to by saving files.',
+    url: absoluteUrl(RELAYFILE_PATH),
+    operatingSystem: 'macOS, Linux',
+    provider: {
+      '@type': 'Organization',
+      name: 'Agent Relay',
+      url: absoluteUrl('/'),
+    },
+  };
+
+  return (
+    <>
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
+      <RelayfileContent navActions={<GitHubStarsBadge />} />
+    </>
+  );
 }
diff --git a/web/app/sitemap.ts b/web/app/sitemap.ts
index 3bd8b07..b321fce 100644
--- a/web/app/sitemap.ts
+++ b/web/app/sitemap.ts
@@ -25,6 +25,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: 'weekly',
       priority: 0.9,
     },
+    {
+      url: absoluteUrl('/file'),
+      lastModified: now,
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
     {
       url: absoluteUrl('/skill'),
       lastModified: now,
diff --git a/web/lib/og/template.tsx b/web/lib/og/template.tsx
index cdab8ca..8ae14c0 100644
--- a/web/lib/og/template.tsx
+++ b/web/lib/og/template.tsx
@@ -1149,3 +1149,269 @@ export function BlogVariant({
     </Frame>
   );
 }
+
+// ───────────────────────────────────────────────────────────────────────────
+// Variant: RELAYFILE — left copy column + the workspace tree window pinned into
+// the bottom-right corner.
+//
+// Same composition as the landing and Pear cards (left copy, a panel bled off
+// the right + bottom edges) but the panel is a synthetic Relayfile mount: the
+// "relayfile workspace" window from the /file hero, showing provider directories
+// and files with the WATCH/WRITE/READ activity labels from the hero's rail.
+// ───────────────────────────────────────────────────────────────────────────
+
+/** Colors for a tree row's trailing activity label. */
+const ACTIVITY_COLOR = {
+  read: PALETTE.primary,
+  write: PALETTE.green,
+  watch: PALETTE.primaryHover,
+} as const;
+
+type TreeRow = {
+  label: string;
+  /** Directories render a folder glyph and brighter text. */
+  dir?: boolean;
+  /** Nested one level under the preceding directory. */
+  indent?: boolean;
+  activity?: keyof typeof ACTIVITY_COLOR;
+};
+
+/**
+ * The workspace tree shown on the card: a provider mount with the deterministic
+ * digest at the top, mirroring the paths used across the /file page copy.
+ */
+const RELAYFILE_TREE: TreeRow[] = [
+  { label: 'LAYOUT.md' },
+  { label: 'digests', dir: true },
+  { label: 'yesterday.md', indent: true, activity: 'read' },
+  { label: 'linear/issues', dir: true },
+  { label: 'AGE-12.json', indent: true, activity: 'write' },
+  { label: 'github/prs', dir: true, activity: 'watch' },
+  { label: '4821.json', indent: true },
+  { label: 'notion/pages', dir: true },
+  { label: 'roadmap.md', indent: true },
+];
+
+function FolderGlyph({ size = 22 }: { size?: number }): ReactElement {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'flex' }}>
+      <path
+        d="M3 6.6C3 5.7 3.7 5 4.6 5h4.1l2 2.2h8.7c.9 0 1.6.7 1.6 1.6v9.6c0 .9-.7 1.6-1.6 1.6H4.6c-.9 0-1.6-.7-1.6-1.6z"
+        fill={PALETTE.primary}
+        fillOpacity="0.85"
+      />
+    </svg>
+  );
+}
+
+function FileGlyph({ size = 22 }: { size?: number }): ReactElement {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'flex' }}>
+      <path d="M6 3.6h7.2L19 9.4v11c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1V4.6c0-.6.4-1 1-1z" fill={PALETTE.faint} />
+      <path d="M13.2 3.6 19 9.4h-5.8z" fill={PALETTE.fg} fillOpacity="0.55" />
+    </svg>
+  );
+}
+
+/**
+ * The "relayfile workspace" window. Anchored to its cropping wrapper's top-left
+ * and rendered slightly larger than it, so the card bleeds off the canvas's
+ * right + bottom edges and the tree reads as continuing below the fold.
+ */
+function WorkspacePanel({ headingFamily, scale = 1 }: { headingFamily: string; scale?: number }): ReactElement {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: 640 * scale,
+        height: 600 * scale,
+        background: PALETTE.surface,
+        border: `2px solid ${PALETTE.line}`,
+        borderRadius: `${18 * scale}px 0 0 0`,
+        overflow: 'hidden',
+        boxShadow: '-18px 18px 48px rgba(0,0,0,0.5)',
+      }}
+    >
+      {/* Title bar: traffic lights + the window title from the live hero. */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 14 * scale,
+          height: 52 * scale,
+          flexShrink: 0,
+          padding: `0 ${24 * scale}px`,
+          borderBottom: `1px solid ${PALETTE.line}`,
+          background: 'rgba(116,184,226,0.05)',
+        }}
+      >
+        <div style={{ display: 'flex', gap: 7 * scale }}>
+          <div style={{ display: 'flex', width: 11 * scale, height: 11 * scale, borderRadius: 999, background: '#ff5f57' }} />
+          <div style={{ display: 'flex', width: 11 * scale, height: 11 * scale, borderRadius: 999, background: '#febc2e' }} />
+          <div style={{ display: 'flex', width: 11 * scale, height: 11 * scale, borderRadius: 999, background: PALETTE.green }} />
+        </div>
+        <span
+          style={{
+            display: 'flex',
+            fontFamily: headingFamily,
+            fontSize: 17 * scale,
+            fontWeight: 700,
+            letterSpacing: '-0.01em',
+            color: PALETTE.muted,
+          }}
+        >
+          relayfile workspace
+        </span>
+      </div>
+
+      {/* The mounted tree. */}
+      <div style={{ display: 'flex', flexDirection: 'column', padding: `${18 * scale}px 0` }}>
+        {RELAYFILE_TREE.map((row) => (
+          <div
+            key={row.label}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12 * scale,
+              height: 55 * scale,
+              flexShrink: 0,
+              padding: `0 ${26 * scale}px 0 ${(row.indent ? 62 : 26) * scale}px`,
+            }}
+          >
+            {row.dir ? <FolderGlyph size={22 * scale} /> : <FileGlyph size={22 * scale} />}
+            <span
+              style={{
+                display: 'flex',
+                fontSize: 21 * scale,
+                fontWeight: row.dir ? 500 : 400,
+                color: row.dir ? PALETTE.fg : PALETTE.muted,
+              }}
+            >
+              {row.dir ? `${row.label}/` : row.label}
+            </span>
+            {row.activity ? (
+              <span
+                style={{
+                  display: 'flex',
+                  marginLeft: 'auto',
+                  padding: `${4 * scale}px ${10 * scale}px`,
+                  borderRadius: 6 * scale,
+                  background: 'rgba(116,184,226,0.10)',
+                  fontSize: 14 * scale,
+                  fontWeight: 500,
+                  letterSpacing: '0.12em',
+                  textTransform: 'uppercase',
+                  color: ACTIVITY_COLOR[row.activity],
+                }}
+              >
+                {row.activity}
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function RelayfileVariant({
+  headingFamily,
+  bodyFamily,
+}: {
+  headingFamily: string;
+  bodyFamily: string;
+}): ReactElement {
+  return (
+    <Frame bodyFamily={bodyFamily}>
+      <SwoopLines top={430} opacity={0.16} />
+
+      {/* LEFT: copy, mirroring the /file hero badge, headline, and subtitle. */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          width: 620,
+          flexShrink: 0,
+          padding: '0 0 0 80px',
+          position: 'relative',
+        }}
+      >
+        <div style={{ display: 'flex', marginBottom: 34 }}>
+          <BrandLockup scale={1.25} />
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            alignSelf: 'flex-start',
+            padding: '7px 15px',
+            borderRadius: 999,
+            background: 'rgba(116,184,226,0.12)',
+            border: `1px solid ${PALETTE.line}`,
+            color: PALETTE.primaryHover,
+            fontSize: 15,
+            fontWeight: 500,
+            letterSpacing: '0.14em',
+            textTransform: 'uppercase',
+            marginBottom: 22,
+          }}
+        >
+          Integration filesystem
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            fontFamily: headingFamily,
+            fontWeight: 800,
+            fontSize: 60,
+            lineHeight: 1.0,
+            letterSpacing: '-0.04em',
+            color: PALETTE.fg,
+          }}
+        >
+          <span style={{ display: 'flex', fontWeight: 800 }}>Relayfile</span>
+          <span style={{ display: 'flex', fontWeight: 800 }}>
+            <span style={{ display: 'flex', fontWeight: 800 }}>gives agents&nbsp;</span>
+            <span style={{ display: 'flex', fontWeight: 800, color: PALETTE.primary }}>files</span>
+          </span>
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            fontSize: 22,
+            lineHeight: 1.5,
+            color: PALETTE.muted,
+            marginTop: 24,
+            maxWidth: 490,
+          }}
+        >
+          Mount Linear, GitHub, Notion, Slack, and your own systems as a realtime filesystem that agents can
+          read, write, and watch.
+        </div>
+      </div>
+
+      {/* RIGHT: the workspace window bled off the right + bottom edges. */}
+      <div
+        style={{
+          display: 'flex',
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: 578,
+          height: 540,
+          overflow: 'hidden',
+        }}
+      >
+        <WorkspacePanel headingFamily={headingFamily} scale={0.92} />
+      </div>
+    </Frame>
+  );
+}
diff --git a/web/lib/relayfile-meta.ts b/web/lib/relayfile-meta.ts
new file mode 100644
index 0000000..823d650
--- /dev/null
+++ b/web/lib/relayfile-meta.ts
@@ -0,0 +1,77 @@
+import type { Metadata } from 'next';
+
+import { ogImage } from './og-meta';
+import { absoluteUrl, SITE_NAME } from './site';
+
+/**
+ * Metadata for the Relayfile landing page.
+ *
+ * The page is served from two paths — `/file` (canonical) and the `/relayfile`
+ * alias, which re-exports the same component — so the descriptors are built here
+ * once and both routes point their canonical at `/file`. Copy mirrors the live
+ * hero (badge, headline, subtitle) so the search snippet and the social card say
+ * the same thing the page does.
+ */
+
+/** The canonical path for the Relayfile landing page. */
+export const RELAYFILE_PATH = '/file';
+
+/** The page's Open Graph card route. */
+export const RELAYFILE_OG_PATH = '/file/og.png';
+
+const TITLE = 'Relayfile — Integration filesystem for AI agents';
+
+const DESCRIPTION =
+  'Mount Linear, GitHub, Notion, Slack, and your own systems as a realtime filesystem. Agents read provider data with bash and write records by saving files.';
+
+const SOCIAL_DESCRIPTION =
+  'Mount Linear, GitHub, Notion, Slack, HubSpot, Salesforce, and your own systems as a realtime filesystem that agents can read, write, and watch.';
+
+/**
+ * Build the Relayfile landing metadata.
+ * @param path - The route this metadata is rendered on. Only `/file` is
+ * canonical; the alias passes its own path so `openGraph.url` stays truthful
+ * while the canonical still points at `/file`.
+ */
+export function relayfileMetadata(path: string = RELAYFILE_PATH): Metadata {
+  return {
+    title: TITLE,
+    description: DESCRIPTION,
+    keywords: [
+      'Relayfile',
+      'integration filesystem',
+      'agent filesystem',
+      'MCP alternative',
+      'AI agent integrations',
+      'Linear API for agents',
+      'Notion API for agents',
+      'agent tool calling',
+      'SaaS integrations for AI agents',
+    ],
+    alternates: {
+      canonical: absoluteUrl(RELAYFILE_PATH),
+    },
+    openGraph: {
+      title: TITLE,
+      description: SOCIAL_DESCRIPTION,
+      url: absoluteUrl(path),
+      type: 'website',
+      // A page-level `openGraph` replaces the root layout's wholesale, so the
+      // site-wide siteName/locale have to be restated here to survive.
+      siteName: SITE_NAME,
+      locale: 'en_US',
+      images: [
+        ogImage(
+          RELAYFILE_OG_PATH,
+          'Relayfile — mount Linear, GitHub, Notion, and Slack as a realtime filesystem for AI agents.'
+        ),
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: TITLE,
+      description: SOCIAL_DESCRIPTION,
+      images: [absoluteUrl(RELAYFILE_OG_PATH)],
+    },
+  };
+}