@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/app/app/[[...slug]]/page.tsx

@@ -0,0 +1,23 @@
+/**
+ * Catch-all route for /app/* URLs (Server Component wrapper)
+ *
+ * Handles all /app routes including:
+ * - /app (base route)
+ * - /app/agent/Leader
+ * - /app/channel/general
+ * - /app/settings/workspace
+ *
+ * The actual routing is handled client-side by useUrlRouting hook.
+ */
+
+import DashboardPageClient from './DashboardPageClient';
+
+// Required for static export with optional catch-all routes
+// Return one entry for the base /app route - subsequent routing is client-side
+export function generateStaticParams() {
+  return [{ slug: undefined }];
+}
+
+export default function DashboardPage() {
+  return <DashboardPageClient />;
+}

package/src/app/app/onboarding/page.tsx

@@ -0,0 +1,394 @@
+/**
+ * Onboarding Page - Dedicated route for new users and post-deletion flow
+ *
+ * This page provides a cleaner onboarding experience separate from workspace selection.
+ * It handles two scenarios:
+ * 1. First-time users with no workspaces
+ * 2. Users who just deleted their workspace
+ *
+ * URL params:
+ * - reason=deleted: User just deleted a workspace
+ * - reason=new: First-time user (default)
+ */
+
+'use client';
+
+import React, { useState, useEffect, useCallback, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { LogoIcon } from '../../../components/Logo';
+
+interface Repository {
+  id: string;
+  fullName: string;
+  isPrivate: boolean;
+  defaultBranch: string;
+  syncStatus: string;
+  hasNangoConnection: boolean;
+}
+
+type OnboardingReason = 'new' | 'deleted';
+
+// Analytics event types for onboarding funnel
+type OnboardingEvent =
+  | 'onboarding_page_view'
+  | 'onboarding_repo_selected'
+  | 'onboarding_workspace_created'
+  | 'onboarding_connect_repos_clicked'
+  | 'onboarding_skipped';
+
+// Simple analytics hook - can be extended to integrate with actual analytics service
+function useOnboardingAnalytics() {
+  const trackEvent = useCallback((event: OnboardingEvent, properties?: Record<string, unknown>) => {
+    // Log to console in development
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Onboarding Analytics]', event, properties);
+    }
+
+    // TODO: Integrate with actual analytics service (e.g., Posthog, Mixpanel, etc.)
+    // Example: posthog.capture(event, properties);
+
+    // For now, send to a hypothetical analytics endpoint
+    try {
+      fetch('/api/analytics/track', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ event, properties, timestamp: Date.now() }),
+      }).catch(() => {
+        // Silently fail - analytics should not block user experience
+      });
+    } catch {
+      // Silently fail
+    }
+  }, []);
+
+  return { trackEvent };
+}
+
+function OnboardingContent() {
+  const searchParams = useSearchParams();
+  const reason = (searchParams.get('reason') as OnboardingReason) || 'new';
+
+  const [repos, setRepos] = useState<Repository[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [csrfToken, setCsrfToken] = useState<string | null>(null);
+
+  const { trackEvent } = useOnboardingAnalytics();
+
+  // Fetch repositories and check session
+  useEffect(() => {
+    const init = async () => {
+      try {
+        // Check session
+        const sessionRes = await fetch('/api/auth/session', { credentials: 'include' });
+
+        if (sessionRes.status === 404) {
+          // Local mode - redirect to main app
+          window.location.href = '/app';
+          return;
+        }
+
+        // Capture CSRF token
+        const token = sessionRes.headers.get('X-CSRF-Token');
+        if (token) {
+          setCsrfToken(token);
+        }
+
+        const session = await sessionRes.json();
+
+        if (!session.authenticated) {
+          window.location.href = '/login';
+          return;
+        }
+
+        // Check if user already has workspaces - if so, redirect to /app
+        const workspacesRes = await fetch('/api/workspaces', { credentials: 'include' });
+        if (workspacesRes.ok) {
+          const workspacesData = await workspacesRes.json();
+          if ((workspacesData.workspaces || []).length > 0) {
+            // User has workspaces, redirect to main app
+            window.location.href = '/app';
+            return;
+          }
+        }
+
+        // Fetch repos
+        const reposRes = await fetch('/api/github-app/repos', { credentials: 'include' });
+        if (reposRes.ok) {
+          const reposData = await reposRes.json();
+          setRepos(reposData.repositories || []);
+        }
+
+        // Track page view
+        trackEvent('onboarding_page_view', { reason });
+
+        setIsLoading(false);
+      } catch (err) {
+        console.error('Onboarding init error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to initialize');
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, [reason, trackEvent]);
+
+  const handleCreateWorkspace = useCallback(async (repoFullName: string) => {
+    setIsCreating(true);
+    setError(null);
+
+    trackEvent('onboarding_repo_selected', { repository: repoFullName });
+
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (csrfToken) {
+        headers['X-CSRF-Token'] = csrfToken;
+      }
+
+      const res = await fetch('/api/workspaces/quick', {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+        body: JSON.stringify({ repositoryFullName: repoFullName }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || 'Failed to create workspace');
+      }
+
+      trackEvent('onboarding_workspace_created', {
+        workspaceId: data.workspaceId,
+        repository: repoFullName,
+      });
+
+      // Redirect to main app - it will handle provisioning state
+      window.location.href = '/app';
+    } catch (err) {
+      console.error('Create workspace error:', err);
+      setError(err instanceof Error ? err.message : 'Failed to create workspace');
+      setIsCreating(false);
+    }
+  }, [csrfToken, trackEvent]);
+
+  const handleConnectRepos = useCallback(() => {
+    trackEvent('onboarding_connect_repos_clicked', { reason });
+    window.location.href = '/connect-repos';
+  }, [reason, trackEvent]);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
+        <div className="text-center">
+          <svg className="w-8 h-8 text-accent-cyan animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <p className="mt-4 text-text-muted">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Creating workspace state
+  if (isCreating) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
+        <div className="text-center">
+          <svg className="w-8 h-8 text-accent-cyan animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <p className="mt-4 text-white font-medium">Creating your workspace...</p>
+          <p className="mt-2 text-text-muted text-sm">This may take a few minutes</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Determine content based on reason
+  const isDeletedWorkspace = reason === 'deleted';
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex flex-col items-center justify-center p-4">
+      {/* Background grid */}
+      <div className="fixed inset-0 opacity-10 pointer-events-none">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `linear-gradient(rgba(0, 217, 255, 0.1) 1px, transparent 1px),
+                             linear-gradient(90deg, rgba(0, 217, 255, 0.1) 1px, transparent 1px)`,
+            backgroundSize: '50px 50px',
+          }}
+        />
+      </div>
+
+      <div className="relative z-10 w-full max-w-2xl">
+        {/* Logo and Header */}
+        <div className="flex flex-col items-center mb-8">
+          <LogoIcon size={56} withGlow={true} />
+          <h1 className="mt-6 text-3xl font-bold text-white">
+            {isDeletedWorkspace ? 'Workspace Deleted' : 'Welcome to Agent Relay'}
+          </h1>
+          <p className="mt-3 text-text-muted text-center max-w-md">
+            {isDeletedWorkspace
+              ? 'Your workspace has been deleted. Create a new one to continue working with AI agents.'
+              : 'Get started by creating your first workspace. Connect a repository and let AI agents help you build.'}
+          </p>
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <div className="mb-6 p-4 bg-error/10 border border-error/20 rounded-xl">
+            <p className="text-error text-center">{error}</p>
+          </div>
+        )}
+
+        {/* Main content card */}
+        <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8">
+          {/* Step indicator for first-time users */}
+          {!isDeletedWorkspace && (
+            <div className="flex items-center justify-center gap-3 mb-8">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-accent-cyan flex items-center justify-center text-bg-deep font-semibold text-sm">
+                  1
+                </div>
+                <span className="text-white font-medium">Select Repository</span>
+              </div>
+              <div className="w-12 h-px bg-border-subtle" />
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-bg-tertiary border border-border-subtle flex items-center justify-center text-text-muted font-semibold text-sm">
+                  2
+                </div>
+                <span className="text-text-muted">Connect AI Provider</span>
+              </div>
+              <div className="w-12 h-px bg-border-subtle" />
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-bg-tertiary border border-border-subtle flex items-center justify-center text-text-muted font-semibold text-sm">
+                  3
+                </div>
+                <span className="text-text-muted">Start Building</span>
+              </div>
+            </div>
+          )}
+
+          <h2 className="text-xl font-semibold text-white mb-2">
+            {isDeletedWorkspace ? 'Create a New Workspace' : 'Choose a Repository'}
+          </h2>
+          <p className="text-text-muted mb-6">
+            {isDeletedWorkspace
+              ? 'Select a repository to create a new workspace for your AI agents.'
+              : 'Your workspace will be set up with this repository. You can add more repos later.'}
+          </p>
+
+          {repos.length > 0 ? (
+            <div className="space-y-3">
+              {repos.map((repo) => (
+                <button
+                  key={repo.id}
+                  onClick={() => handleCreateWorkspace(repo.fullName)}
+                  disabled={isCreating}
+                  className="w-full flex items-center gap-4 p-4 bg-bg-tertiary rounded-xl border border-border-subtle hover:border-accent-cyan/50 hover:bg-bg-hover transition-all text-left group disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <div className="w-12 h-12 rounded-lg bg-bg-card border border-border-subtle flex items-center justify-center flex-shrink-0 group-hover:border-accent-cyan/30 transition-colors">
+                    <svg className="w-6 h-6 text-text-muted group-hover:text-accent-cyan transition-colors" fill="currentColor" viewBox="0 0 16 16">
+                      <path d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8z" />
+                    </svg>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-white font-medium truncate group-hover:text-accent-cyan transition-colors">
+                      {repo.fullName}
+                    </p>
+                    <p className="text-text-muted text-sm mt-0.5">
+                      {repo.isPrivate ? 'Private repository' : 'Public repository'} · {repo.defaultBranch}
+                    </p>
+                  </div>
+                  <svg className="w-5 h-5 text-text-muted group-hover:text-accent-cyan group-hover:translate-x-1 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12 bg-bg-tertiary rounded-xl border border-border-subtle">
+              <div className="w-16 h-16 mx-auto mb-4 bg-bg-card rounded-full flex items-center justify-center">
+                <svg className="w-8 h-8 text-text-muted" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-white mb-2">No Repositories Connected</h3>
+              <p className="text-text-muted mb-6 max-w-sm mx-auto">
+                Connect your GitHub repositories to create a workspace and start working with AI agents.
+              </p>
+              <button
+                onClick={handleConnectRepos}
+                className="inline-flex items-center gap-2 py-3 px-6 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold rounded-xl hover:shadow-glow-cyan transition-all"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+                Connect GitHub
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Footer navigation */}
+        <div className="mt-8 flex justify-center gap-6 text-sm">
+          {repos.length > 0 && (
+            <button
+              onClick={handleConnectRepos}
+              className="text-text-muted hover:text-white transition-colors"
+            >
+              Connect More Repositories
+            </button>
+          )}
+          <a
+            href="/app"
+            className="text-text-muted hover:text-white transition-colors"
+          >
+            Back to Dashboard
+          </a>
+          <button
+            onClick={async () => {
+              const headers: Record<string, string> = {};
+              if (csrfToken) {
+                headers['X-CSRF-Token'] = csrfToken;
+              }
+              await fetch('/api/auth/logout', { method: 'POST', credentials: 'include', headers });
+              window.location.href = '/login';
+            }}
+            className="text-text-muted hover:text-white transition-colors"
+          >
+            Sign Out
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Wrap in Suspense for useSearchParams
+export default function OnboardingPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
+          <div className="text-center">
+            <svg className="w-8 h-8 text-accent-cyan animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            <p className="mt-4 text-text-muted">Loading...</p>
+          </div>
+        </div>
+      }
+    >
+      <OnboardingContent />
+    </Suspense>
+  );
+}

package/src/app/blog/go-to-bed-wake-up-to-a-finished-product/page.tsx

@@ -0,0 +1,88 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { StaticPage } from '../../../landing/StaticPage';
+import { getBlogPost } from '../../../landing/blogData';
+import { renderBlogContent } from '../../../landing/BlogContent';
+import '../../../landing/styles.css';
+
+const POST_ID = 'go-to-bed-wake-up-to-a-finished-product';
+
+const OG_IMAGE = 'https://agent-relay.com/blog/go-to-bed-wake-up-to-a-finished-product.svg';
+
+export const metadata: Metadata = {
+  title: 'Go to Bed, Wake Up to a Finished Product | Agent Relay Blog',
+  description: 'Agent-to-agent communication is weird, fascinating, and potentially revolutionary. Here\'s how I built a system where agents work autonomously while I sleep.',
+  openGraph: {
+    title: 'Go to Bed, Wake Up to a Finished Product',
+    description: 'How agent-to-agent communication is changing autonomous development',
+    type: 'article',
+    siteName: 'Agent Relay',
+    url: 'https://agent-relay.com/blog/go-to-bed-wake-up-to-a-finished-product',
+    authors: ['Khaliq Gant'],
+    publishedTime: '2026-02-01',
+    images: [
+      {
+        url: OG_IMAGE,
+        width: 1200,
+        height: 630,
+        alt: 'Go to Bed, Wake Up to a Finished Product - Agent Relay',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Go to Bed, Wake Up to a Finished Product',
+    description: 'How agent-to-agent communication is changing autonomous development',
+    images: [OG_IMAGE],
+  },
+};
+
+export default function BlogPostPage() {
+  const post = getBlogPost(POST_ID);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <StaticPage
+      title="Blog"
+      titleLink="/blog"
+      subtitle="News, tutorials, and insights from the Agent Relay team."
+    >
+      <article className="blog-post">
+        <img
+          src="/blog/go-to-bed-wake-up-to-a-finished-product.svg"
+          alt={post.title}
+          style={{
+            width: '100%',
+            height: 'auto',
+            borderRadius: '12px',
+            marginBottom: '32px',
+          }}
+        />
+
+        <div className="blog-post-header">
+          <div className="blog-meta">
+            <span className="blog-category">{post.category}</span>
+            <span>{post.date}</span>
+            <span className="blog-author">by <a href="https://x.com/khaliqgant" target="_blank" rel="noopener noreferrer">{post.author}</a></span>
+          </div>
+          <h2 className="blog-post-title">{post.title}</h2>
+          <p className="blog-post-subtitle">{post.subtitle}</p>
+        </div>
+
+        <div className="blog-post-content">
+          {renderBlogContent(post.content)}
+        </div>
+      </article>
+
+      <hr style={{ border: 'none', borderTop: '1px solid var(--border-subtle)', margin: '48px 0' }} />
+
+      <h2>Stay Updated</h2>
+      <p>
+        Follow us on <a href="https://twitter.com/agent_relay" target="_blank" rel="noopener noreferrer">Twitter</a> for the latest updates and more content.
+      </p>
+    </StaticPage>
+  );
+}

package/src/app/blog/let-them-cook-multi-agent-orchestration/page.tsx

@@ -0,0 +1,93 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
+import { StaticPage } from '../../../landing/StaticPage';
+import { getBlogPost } from '../../../landing/blogData';
+import { renderBlogContent } from '../../../landing/BlogContent';
+import '../../../landing/styles.css';
+
+const POST_ID = 'let-them-cook-multi-agent-orchestration';
+
+const OG_IMAGE = 'https://agent-relay.com/blog/let-them-cook-multi-agent-orchestration.svg';
+
+export const metadata: Metadata = {
+  title: 'Let Them Cook: Lessons from 6 Weeks of Multi-Agent Orchestration | Agent Relay Blog',
+  description: 'Multi-agent orchestration is a step change in how tasks get done. After 6 weeks of building with agent swarms, here\'s what works, what breaks, and why the planning phase becomes everything.',
+  openGraph: {
+    title: 'Let Them Cook: Lessons from 6 Weeks of Multi-Agent Orchestration',
+    description: 'What I learned watching AI agents coordinate, communicate, and occasionally fall apart',
+    type: 'article',
+    siteName: 'Agent Relay',
+    url: 'https://agent-relay.com/blog/let-them-cook-multi-agent-orchestration',
+    authors: ['Khaliq Gant'],
+    publishedTime: '2026-02-04',
+    images: [
+      {
+        url: OG_IMAGE,
+        width: 1200,
+        height: 630,
+        alt: 'Let Them Cook: Multi-Agent Orchestration - Agent Relay',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Let Them Cook: Lessons from 6 Weeks of Multi-Agent Orchestration',
+    description: 'What I learned watching AI agents coordinate, communicate, and occasionally fall apart',
+    images: [OG_IMAGE],
+  },
+};
+
+export default function BlogPostPage() {
+  const post = getBlogPost(POST_ID);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <StaticPage
+      title="Blog"
+      titleLink="/blog"
+      subtitle="News, tutorials, and insights from the Agent Relay team."
+    >
+      <article className="blog-post">
+        <img
+          src="/blog/let-them-cook-multi-agent-orchestration.svg"
+          alt={post.title}
+          style={{
+            width: '100%',
+            height: 'auto',
+            borderRadius: '12px',
+            marginBottom: '32px',
+          }}
+        />
+
+        <div className="blog-post-header">
+          <div className="blog-meta">
+            <span className="blog-category">{post.category}</span>
+            <span>{post.date}</span>
+            <span className="blog-author">by <a href="https://x.com/khaliqgant" target="_blank" rel="noopener noreferrer">{post.author}</a></span>
+          </div>
+          <h2 className="blog-post-title">{post.title}</h2>
+          <p className="blog-post-subtitle">{post.subtitle}</p>
+        </div>
+
+        <div className="blog-post-content">
+          {renderBlogContent(post.content)}
+        </div>
+      </article>
+
+      <hr style={{ border: 'none', borderTop: '1px solid var(--border-subtle)', margin: '48px 0' }} />
+
+      <h2>Stay Updated</h2>
+      <p>
+        Follow us on <a href="https://twitter.com/agent_relay" target="_blank" rel="noopener noreferrer">Twitter</a> for the latest updates and more content.
+      </p>
+      <Script
+        src="https://platform.twitter.com/widgets.js"
+        strategy="lazyOnload"
+      />
+    </StaticPage>
+  );
+}

package/src/app/blog/page.tsx

@@ -0,0 +1,15 @@
+import { Metadata } from 'next';
+import { BlogPage } from '../../landing/BlogPage';
+
+export const metadata: Metadata = {
+  title: 'Blog | Agent Relay',
+  description: 'News, tutorials, and insights from the Agent Relay team.',
+  openGraph: {
+    title: 'Agent Relay Blog',
+    description: 'News, tutorials, and insights from the Agent Relay team.',
+  },
+};
+
+export default function BlogRoute() {
+  return <BlogPage />;
+}

package/src/app/careers/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { CareersPage } from '../../landing';
+
+export default function CareersRoute() {
+  return <CareersPage />;
+}

package/src/app/changelog/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { ChangelogPage } from '../../landing';
+
+export default function ChangelogRoute() {
+  return <ChangelogPage />;
+}