future-agi · khushalsonawat · Jun 26, 2026 · Jun 18, 2026 · Jun 18, 2026 · Jun 18, 2026
diff --git a/public/images/docs/get-started/connect-no-code-agents/agent-configuration.png b/public/images/docs/get-started/connect-no-code-agents/agent-configuration.png
diff --git a/public/images/docs/get-started/connect-no-code-agents/agent-simulation-welcome.png b/public/images/docs/get-started/connect-no-code-agents/agent-simulation-welcome.png
diff --git a/public/images/docs/get-started/connect-no-code-agents/basic-information.png b/public/images/docs/get-started/connect-no-code-agents/basic-information.png
diff --git a/public/images/docs/get-started/connect-no-code-agents/behaviour-and-summary.png b/public/images/docs/get-started/connect-no-code-agents/behaviour-and-summary.png
diff --git a/public/images/docs/get-started/create-your-first-prompt/create-prompt.png b/public/images/docs/get-started/create-your-first-prompt/create-prompt.png
diff --git a/public/images/docs/get-started/create-your-first-prompt/parameters.png b/public/images/docs/get-started/create-your-first-prompt/parameters.png
diff --git a/public/images/docs/get-started/create-your-first-prompt/run-prompt.png b/public/images/docs/get-started/create-your-first-prompt/run-prompt.png
diff --git a/public/images/docs/get-started/create-your-first-prompt/select-model.png b/public/images/docs/get-started/create-your-first-prompt/select-model.png
diff --git a/public/images/docs/get-started/create-your-first-prompt/write-prompt.png b/public/images/docs/get-started/create-your-first-prompt/write-prompt.png
diff --git a/public/images/docs/get-started/migrate/langfuse/01-settings.png b/public/images/docs/get-started/migrate/langfuse/01-settings.png
diff --git a/public/images/docs/get-started/migrate/langfuse/02-credentials.png b/public/images/docs/get-started/migrate/langfuse/02-credentials.png
diff --git a/public/images/docs/get-started/migrate/langfuse/03-project.png b/public/images/docs/get-started/migrate/langfuse/03-project.png
diff --git a/public/images/docs/get-started/migrate/langfuse/04-sync-settings.png b/public/images/docs/get-started/migrate/langfuse/04-sync-settings.png
diff --git a/public/images/docs/get-started/migrate/langfuse/05-sync-status.png b/public/images/docs/get-started/migrate/langfuse/05-sync-status.png
diff --git a/public/images/docs/get-started/route-your-first-llm-request/add_api_key_modal.png b/public/images/docs/get-started/route-your-first-llm-request/add_api_key_modal.png
diff --git a/public/images/docs/get-started/route-your-first-llm-request/add_provider_modal.png b/public/images/docs/get-started/route-your-first-llm-request/add_provider_modal.png
diff --git a/public/images/docs/get-started/route-your-first-llm-request/api_key_added.png b/public/images/docs/get-started/route-your-first-llm-request/api_key_added.png
diff --git a/...mages/docs/get-started/route-your-first-llm-request/list_models_of_provider.png b/...mages/docs/get-started/route-your-first-llm-request/list_models_of_provider.png
diff --git a/public/images/docs/get-started/route-your-first-llm-request/list_provider.png b/public/images/docs/get-started/route-your-first-llm-request/list_provider.png
diff --git a/public/images/docs/get-started/route-your-first-llm-request/provider_added.png b/public/images/docs/get-started/route-your-first-llm-request/provider_added.png
diff --git a/public/images/docs/get-started/send-your-first-trace/keys-page.png b/public/images/docs/get-started/send-your-first-trace/keys-page.png
diff --git a/public/images/docs/get-started/send-your-first-trace/tracing_detail.png b/public/images/docs/get-started/send-your-first-trace/tracing_detail.png
diff --git a/public/images/docs/get-started/send-your-first-trace/tracing_drawer.png b/public/images/docs/get-started/send-your-first-trace/tracing_drawer.png
diff --git a/public/images/docs/get-started/send-your-first-trace/tracing_home.png b/public/images/docs/get-started/send-your-first-trace/tracing_home.png
diff --git a/src/components/CodeCopyButtons.astro b/src/components/CodeCopyButtons.astro
@@ -0,0 +1,65 @@
+---
+/**
+ * Global copy buttons for code blocks.
+ * Injects a copy button into every <pre> inside .docs-content, covering plain
+ * markdown fences and CodeGroup tabs alike. Skips <CodeBlock>, which ships its
+ * own button. Reuses the existing .copy-button styles from global.css.
+ */
+---
+
+<script>
+  function addDocsCopyButtons() {
+    const COPY =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>';
+    const CHECK =
+      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
+
+    document.querySelectorAll('.docs-content pre').forEach((pre) => {
+      if (pre.hasAttribute('data-copy-ready')) return;
+      if (pre.closest('.code-wrapper')) return; // CodeBlock provides its own button
+      pre.setAttribute('data-copy-ready', '');
+
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'copy-button';
+      btn.setAttribute('aria-label', 'Copy code');
+      btn.innerHTML = COPY;
+
+      btn.addEventListener('click', async () => {
+        const code = pre.querySelector('code');
+        const text = ((code ? code.textContent : pre.textContent) || '').replace(/\n+$/, '');
+        try {
+          await navigator.clipboard.writeText(text);
+          btn.classList.add('copied');
+          btn.innerHTML = CHECK;
+          setTimeout(() => {
+            btn.classList.remove('copied');
+            btn.innerHTML = COPY;
+          }, 2000);
+        } catch (err) {
+          console.error('Copy failed:', err);
+        }
+      });
+
+      pre.appendChild(btn);
+    });
+  }
+
+  addDocsCopyButtons();
+  document.addEventListener('astro:page-load', addDocsCopyButtons);
+  window.addEventListener('fastnav', addDocsCopyButtons);
+</script>
+
+<style is:global>
+  /* Anchor the injected copy button and keep it discoverable. */
+  .docs-content pre {
+    position: relative;
+  }
+  .docs-content pre > .copy-button {
+    opacity: 0.55;
+  }
+  .docs-content pre:hover > .copy-button,
+  .docs-content pre > .copy-button:focus-visible {
+    opacity: 1;
+  }
+</style>
diff --git a/src/components/ImageZoom.astro b/src/components/ImageZoom.astro
@@ -0,0 +1,80 @@
+---
+/**
+ * Click-to-expand lightbox for docs images.
+ * Any image inside .docs-content opens full-size in an overlay on click.
+ * Click anywhere or press Escape to close.
+ */
+---
+
+<script>
+  function closeZoom() {
+    const o = document.getElementById('img-zoom-overlay');
+    if (o) o.classList.remove('open');
+    document.body.style.overflow = '';
+  }
+
+  function initImageZoom() {
+    if (!window.__imgZoomKeyBound) {
+      window.__imgZoomKeyBound = true;
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeZoom();
+      });
+    }
+
+    let overlay = document.getElementById('img-zoom-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.id = 'img-zoom-overlay';
+      overlay.className = 'img-zoom-overlay';
+      overlay.innerHTML = '<img class="img-zoom-target" alt="" />';
+      overlay.addEventListener('click', closeZoom);
+      document.body.appendChild(overlay);
+    }
+
+    document.querySelectorAll('.docs-content img').forEach((img) => {
+      const el = img as HTMLImageElement;
+      if (el.dataset.zoomReady) return;
+      el.dataset.zoomReady = '1';
+      el.addEventListener('click', () => {
+        const o = document.getElementById('img-zoom-overlay');
+        if (!o) return;
+        const target = o.querySelector('.img-zoom-target') as HTMLImageElement;
+        target.src = el.currentSrc || el.src;
+        target.alt = el.alt || '';
+        o.classList.add('open');
+        document.body.style.overflow = 'hidden';
+      });
+    });
+  }
+
+  initImageZoom();
+  document.addEventListener('astro:page-load', initImageZoom);
+  window.addEventListener('fastnav', initImageZoom);
+</script>
+
+<style is:global>
+  .docs-content img {
+    cursor: zoom-in;
+  }
+  .img-zoom-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.85);
+    cursor: zoom-out;
+  }
+  .img-zoom-overlay.open {
+    display: flex;
+  }
+  .img-zoom-overlay .img-zoom-target {
+    max-width: 95vw;
+    max-height: 92vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  }
+</style>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
@@ -244,10 +244,27 @@ function inferApiMethod(title: string): { method: string; css: string } | null {
                     </div>
                   </div>
                 ) : (
-                  /* Simple child link */
+                  /* Simple child link (or disabled row, e.g. "Coming soon") */
                   (() => {
                     const childMethod = isApiTab ? inferApiMethod(child.title) : null;
-                    return (
+                    const childDisabled = !child.href;
+                    const badgeEl = child.badge ? (
+                      <span class:list={[
+                        "px-1.5 py-0.5 text-[10px] font-medium rounded",
+                        child.badge === 'New'
+                          ? "bg-[var(--color-success)]/10 text-[var(--color-success)]"
+                          : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)]"
+                      ]}>{child.badge}</span>
+                    ) : null;
+                    return childDisabled ? (
+                      <div
+                        class="flex items-center gap-1.5 px-2 py-1.5 text-sm rounded-md text-[var(--color-text-muted)] cursor-not-allowed select-none"
+                        aria-disabled="true"
+                      >
+                        <span class="flex-1 truncate">{child.title}</span>
+                        {badgeEl}
+                      </div>
+                    ) : (
                       <a
                         href={child.href}
                         class:list={[
@@ -261,6 +278,7 @@ function inferApiMethod(title: string): { method: string; css: string } | null {
                           <span class={`api-method-badge ${childMethod.css}`}>{childMethod.method}</span>
                         )}
                         <span class="flex-1 truncate">{child.title}</span>
+                        {badgeEl}
                       </a>
                     );
                   })()

diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
@@ -96,6 +96,24 @@ const feedbackUrl = `https://github.com/${GITHUB_REPO}/issues/new?title=${encode
 
     if (!tocLinks.length || !headings.length) return;
 
+    // Handle TOC clicks ourselves: the view-transitions router intercepts
+    // same-page hash links and resets scroll, so prevent that and scroll to the
+    // heading manually, offsetting for the fixed header.
+    var HEADER_OFFSET = 80;
+    tocLinks.forEach(function(link) {
+      if (link._tocClickBound) return;
+      link._tocClickBound = true;
+      link.addEventListener('click', function(e) {
+        var id = link.getAttribute('data-heading');
+        var target = id ? document.getElementById(id) : null;
+        if (!target) return;
+        e.preventDefault();
+        var top = target.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
+        window.scrollTo({ top: top, behavior: 'smooth' });
+        if (history.replaceState) history.replaceState(null, '', '#' + id);
+      });
+    });
+
     function updateActiveLink() {
       var currentId = '';
 

diff --git a/src/components/docs/Card.astro b/src/components/docs/Card.astro
@@ -16,6 +16,7 @@ const iconPaths: Record<string, string> = {
   lightning: 'M13 10V3L4 14h7v7l9-11h-7z',
   database: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4',
   shield: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+  server: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01',
   // Charts & Analytics (Mintlify: chart-mixed, chart-line)
   'chart-mixed': 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
   'chart-line': 'M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4v16',

diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
@@ -10,6 +10,8 @@ import CopyPageDropdown from '../components/CopyPageDropdown.astro';
 import PageFeedback from '../components/PageFeedback.tsx';
 import GiscusComments from '../components/GiscusComments.tsx';
 import FastNav from '../components/FastNav.astro';
+import CodeCopyButtons from '../components/CodeCopyButtons.astro';
+import ImageZoom from '../components/ImageZoom.astro';
 
 interface Props {
   frontmatter: {
@@ -89,7 +91,7 @@ if (breadcrumbs.length > 0) {
             }))
           })} />
 
-          <div class="max-w-3xl">
+          <div class="max-w-5xl">
             <!-- Visible breadcrumbs -->
             {breadcrumbs.length > 1 && (
               <nav aria-label="Breadcrumb" class="mb-4 text-sm text-[var(--color-text-muted)]">
@@ -130,13 +132,13 @@ if (breadcrumbs.length > 0) {
               <slot />
             </div>
 
+            <DocsPagination />
+
             <!-- Page Feedback -->
             <div class="mt-10">
               <PageFeedback pagePath={currentPath} client:idle />
             </div>
 
-            <DocsPagination />
-
             <!-- Comments -->
             <div class="mt-10 pt-8 border-t border-[var(--color-border-subtle)]">
               <GiscusComments pagePath={currentPath} client:visible />
@@ -145,8 +147,8 @@ if (breadcrumbs.length > 0) {
         </article>
 
         <!-- Table of Contents - Sticky sidebar -->
-        <aside class="hidden xl:block w-56 flex-shrink-0">
-          <div class="sticky top-16 max-h-[calc(100vh-4rem)] overflow-y-auto px-8 py-8 hide-scrollbar">
+        <aside class="hidden xl:block w-72 flex-shrink-0">
+          <div class="sticky top-16 max-h-[calc(100vh-4rem)] overflow-y-auto px-6 py-8 hide-scrollbar">
             <TableOfContents headings={headings} filePath={filePath} pageTitle={frontmatter.title} />
           </div>
         </aside>
@@ -155,4 +157,6 @@ if (breadcrumbs.length > 0) {
   </main>
 
   <FastNav />
+  <CodeCopyButtons />
+  <ImageZoom />
 </BaseLayout>
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
@@ -38,39 +38,35 @@ export const tabNavigation: NavTab[] = [
         group: 'Get Started',
         icon: 'rocket',
         items: [
-          { title: 'Introduction', href: '/docs' },
+          { title: 'Overview', href: '/docs' },
           {
-            title: 'Self-Hosting',
-            badge: 'New',
+            title: 'Bring your data in',
             items: [
-              { title: 'Overview', href: '/docs/self-hosting' },
-              { title: 'Requirements', href: '/docs/self-hosting/requirements' },
-              { title: 'Docker Compose', href: '/docs/self-hosting/docker-compose' },
-              { title: 'Environment Variables', href: '/docs/self-hosting/environment' },
-              { title: 'System Configuration', href: '/docs/self-hosting/configuration' },
-              { title: 'User Management', href: '/docs/self-hosting/user-management' },
-              { title: 'Production', href: '/docs/self-hosting/production' },
-              { title: 'Troubleshooting', href: '/docs/self-hosting/troubleshooting' },
+              { title: 'Send your first trace', href: '/docs/get-started/send-your-first-trace' },
+              { title: 'Route your first LLM request', href: '/docs/get-started/route-your-first-llm-request' },
+              { title: 'Connect no code agents', href: '/docs/get-started/connect-no-code-agents' },
+              { title: 'Create your first prompt', href: '/docs/get-started/create-your-first-prompt' },
             ]
           },
           {
-            title: 'Quickstart',
-            icon: 'rocket',
-            href: '/docs',
+            title: 'Migrate',
             items: [
-              { title: 'Create Prompts', href: '/docs/quickstart/prompts' },
-              { title: 'Generate Synthetic Data', href: '/docs/quickstart/generate-synthetic-data' },
-              { title: 'Running Evals in Simulation', href: '/docs/quickstart/running-evals-in-simulation' },
-              { title: 'Agent Command Center', href: '/docs/quickstart/command-center-gateway' },
-              { title: 'Setup Observability', href: '/docs/quickstart/setup-observability' },
-              { title: 'Annotations', href: '/docs/quickstart/annotations' },
-              { title: 'Setup MCP Server', href: '/docs/quickstart/setup-mcp-server' },
+              { title: 'Migrate from Langfuse', href: '/docs/get-started/migrate/langfuse' },
+              { title: 'Migrate from LangSmith', badge: 'Coming soon' },
+              { title: 'Migrate from Arize', badge: 'Coming soon' },
             ]
           },
           {
-            title: 'Release Notes',
+            title: 'Self-Hosting',
             items: [
-              { title: 'Release Notes', href: '/docs/release-notes' },
+              { title: 'Overview', href: '/docs/self-hosting' },
+              { title: 'System requirements', href: '/docs/self-hosting/requirements' },
+              { title: 'Environment variables', href: '/docs/self-hosting/environment' },
+              { title: 'Configuration', href: '/docs/self-hosting/configuration' },
+              { title: 'Docker Compose', href: '/docs/self-hosting/docker-compose' },
+              { title: 'Production', href: '/docs/self-hosting/production' },
+              { title: 'User management', href: '/docs/self-hosting/user-management' },
+              { title: 'Troubleshooting and FAQs', href: '/docs/self-hosting/troubleshooting' },
             ]
           },
         ]