docs(observe): split Observe + traceAI into product and SDK sections

src/components/CodeCopyButtons.astro

@@ -17,6 +17,7 @@
     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
+      if (pre.classList.contains('mermaid')) return; // Mermaid diagrams are not code blocks
       pre.setAttribute('data-copy-ready', '');
 
       const btn = document.createElement('button');

src/components/Sidebar.astro

@@ -111,7 +111,7 @@ const toItem = (title: string): DropdownItem => {
 
 const phasedOrder: { phase: string; titles: string[] }[] = [
   { phase: 'Start',              titles: ['Get Started'] },
-  { phase: 'Observe & diagnose', titles: ['Observability', 'Error Feed'] },
+  { phase: 'Observe & diagnose', titles: ['Observe', 'Error Feed'] },
   { phase: 'Evaluate & measure',     titles: ['Evaluation', 'Simulation', 'Dataset'] },
   { phase: 'Improve',            titles: ['Optimization', 'Annotations'] },
   { phase: 'Build & connect',    titles: ['Prompt', 'Prototype', 'Agent Playground', 'Knowledge Base', 'Agent Command Center'] },
@@ -135,7 +135,7 @@ if (isDocsTab) {
 
   // Future-proofing: surface any Docs group not placed above (besides the hidden
   // "Resources") under "More" so new products never silently vanish.
-  const placed = new Set<string>([...phasedOrder.flatMap(p => p.titles), 'Resources']);
+  const placed = new Set<string>([...phasedOrder.flatMap(p => p.titles), 'Resources', 'traceAI']);
   const leftovers = allGroups.map(g => g.group).filter(t => !placed.has(t)).map(toItem);
   if (leftovers.length) dropdownSections.push({ phase: 'More', items: leftovers });
 
@@ -150,18 +150,18 @@ const isApiTab = activeTab?.tab === 'API';
 
 function inferApiMethod(title: string): { method: string; css: string } | null {
   const t = title.toLowerCase();
-  if (/\b(delete|remove)\b/.test(t)) {
-    return { method: 'DELETE', css: 'api-method-delete' };
-  }
-  if (/\b(update|edit|apply|restore)\b/.test(t)) {
-    return { method: 'PATCH', css: 'api-method-patch' };
-  }
-  if (/\b(list|get|retrieve|health|find|export|progress|analytics|agreement|compare|stats|summary|voices|tts|aggregat\w*)\b/.test(t)) {
+  if (/\b(list|get|retrieve|health|find|export|progress|analytics|agreement|compare|stats|summary|voices|tts)\b/.test(t)) {
     return { method: 'GET', css: 'api-method-get' };
   }
   if (/\b(create|add|generate|execute|submit|assign|bulk|complete|skip|release|pause|unpause|check|upload|start|duplicate|fetch|run|rerun|cancel|clone|merge)\b/.test(t)) {
     return { method: 'POST', css: 'api-method-post' };
   }
+  if (/\b(delete|remove)\b/.test(t)) {
+    return { method: 'DEL', css: 'api-method-delete' };
+  }
+  if (/\b(update|edit|apply|restore)\b/.test(t)) {
+    return { method: 'PATCH', css: 'api-method-patch' };
+  }
   return null;
 }
 ---
@@ -420,7 +420,7 @@ function inferApiMethod(title: string): { method: string; css: string } | null {
         trigger.addEventListener('click', function(e) {
           e.stopPropagation();
           isOpen ? close() : open();
-        });
+        }, { signal: ac.signal });
 
         document.addEventListener('click', function(e) {
           if (!switcher.contains(e.target)) close();

src/components/docs/CodeGroup.astro

@@ -40,6 +40,11 @@ const id = `code-group-${Math.random().toString(36).slice(2, 9)}`;
 </div>
 
 <style is:global>
+  /* Before JS initializes, hide all but the first code block so a multi-language
+     group doesn't flash every language's code stacked together (FOUC). */
+  [data-code-group]:not([data-cgp-init]) .code-panels > *:not(:first-child) {
+    display: none;
+  }
   /* Hide all code panel items; JS adds .cgp-active to show the selected one */
   .code-group-panel {
     display: none;

src/components/docs/Mermaid.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * Mermaid diagram, rendered client-side from CDN.
+ * Usage in MDX:  <Mermaid chart={`flowchart LR\n  A --> B`} />
+ *
+ * The script is `is:inline` so Astro does not bundle it — the CDN module import
+ * then runs natively in the browser (matching how the rest of this repo loads
+ * third-party client scripts). The diagram source lives in the page, per the
+ * docs playbook. In the full monorepo, `pnpm add mermaid` and swap the CDN
+ * import for `import mermaid from 'mermaid'`.
+ */
+interface Props {
+  chart: string;
+}
+const { chart } = Astro.props;
+---
+
+<pre class="mermaid not-prose" data-mermaid-src={chart} style="background: transparent; text-align: center;">{chart}</pre>
+
+<!--
+  Centering CSS for the rendered <svg> lives in src/styles/global.css, not here.
+  A component is:global style is only emitted on pages that use this component,
+  and the custom FastNav does not carry page-specific <style> tags across a
+  client-side navigation, so the diagram would sit flush left when reached via
+  SPA from a page with no diagram. global.css is loaded on every page.
+-->
+
+<script is:inline type="module">
+  /*
+   * Render from the pristine `data-mermaid-src` rather than the element's
+   * textContent. Other client scripts (e.g. the global code-copy buttons) can
+   * inject children into a <pre>, and reading textContent would feed that markup
+   * to the parser and throw a syntax error. The data attribute is immutable.
+   * We also re-render on every navigation path this site uses: Astro view
+   * transitions (astro:after-swap), the page-load event, and the custom FastNav.
+   */
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' });
+
+  async function renderMermaid() {
+    const blocks = document.querySelectorAll('pre.mermaid[data-mermaid-src]:not([data-mermaid-done])');
+    for (const el of blocks) {
+      el.setAttribute('data-mermaid-done', '');
+      const src = el.getAttribute('data-mermaid-src') || '';
+      try {
+        const id = 'mmd-' + Math.random().toString(36).slice(2);
+        const { svg } = await mermaid.render(id, src);
+        el.innerHTML = svg;
+      } catch (err) {
+        console.error('Mermaid render failed:', err);
+        el.removeAttribute('data-mermaid-done'); // let a later navigation retry
+      }
+    }
+  }
+
+  renderMermaid();
+  document.addEventListener('astro:page-load', renderMermaid);
+  document.addEventListener('astro:after-swap', renderMermaid);
+  window.addEventListener('fastnav', renderMermaid);
+</script>

src/components/docs/Steps.astro

@@ -5,50 +5,10 @@
   <slot />
 </div>
 
-<style>
-  .steps-container :global(.step-item) {
-    position: relative;
-    padding-left: 2.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .steps-container :global(.step-item)::before {
-    content: counter(step);
-    counter-increment: step;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 9999px;
-    background: var(--color-text-primary);
-    color: var(--color-bg-primary);
-    font-size: 0.75rem;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .steps-container :global(.step-item)::after {
-    content: '';
-    position: absolute;
-    left: 0.8125rem;
-    top: 1.75rem;
-    bottom: 0;
-    width: 2px;
-    background: var(--color-border-default);
-  }
-
-  .steps-container :global(.step-item:last-child)::after {
-    display: none;
-  }
-
-  .steps-container :global(.step-item:last-child) {
-    padding-bottom: 0;
-  }
-
-  .steps-container {
-    counter-reset: step;
-  }
-</style>
+<!--
+  The step-chain styles (number badges + connector line) live in
+  src/styles/global.css, not here. A component-scoped style is emitted as a
+  page-specific <style> tag, and the custom FastNav swaps body content without
+  carrying those tags over, so the chain would vanish when navigating from a
+  page without Steps to one with Steps. global.css is loaded on every page.
+-->

src/lib/api-navigation.ts

@@ -61,6 +61,11 @@ export const apiNavigation: ApiNavGroup[] = [
         "title": "Add columns to a scenario",
         "href": "/docs/api/scenarios/addcolumns",
         "method": "POST"
+      },
+      {
+        "title": "Add empty rows to a scenario",
+        "href": "/docs/api/scenarios/addemptyrowstodataset",
+        "method": "POST"
       }
     ]
   },
@@ -182,6 +187,11 @@ export const apiNavigation: ApiNavGroup[] = [
         "href": "/docs/api/run-tests/executeruntest",
         "method": "POST"
       },
+      {
+        "title": "Update test run components",
+        "href": "/docs/api/run-tests/updatetestcomponents",
+        "method": "PATCH"
+      },
       {
         "title": "Get test executions",
         "href": "/docs/api/run-tests/gettestexecutions",
@@ -192,6 +202,11 @@ export const apiNavigation: ApiNavGroup[] = [
         "href": "/docs/api/run-tests/gettestscenarios",
         "method": "GET"
       },
+      {
+        "title": "Get call executions for a test run",
+        "href": "/docs/api/run-tests/getcallexecutions",
+        "method": "GET"
+      },
       {
         "title": "Get evaluation summary",
         "href": "/docs/api/run-tests/getevalsummary",
@@ -279,8 +294,7 @@ export const apiNavigation: ApiNavGroup[] = [
       { "title": "Delete Eval Task", "href": "/docs/api/eval-tasks/delete-eval-task", "method": "DELETE" },
       { "title": "Bulk Delete Eval Tasks", "href": "/docs/api/eval-tasks/bulk-delete-eval-tasks", "method": "POST" },
       { "title": "Pause Eval Task", "href": "/docs/api/eval-tasks/pause-eval-task", "method": "POST" },
-      { "title": "Unpause Eval Task", "href": "/docs/api/eval-tasks/unpause-eval-task", "method": "POST" },
-      { "title": "Eval Task Aggregations", "href": "/docs/api/eval-tasks/eval-task-aggregations", "method": "GET" }
+      { "title": "Unpause Eval Task", "href": "/docs/api/eval-tasks/unpause-eval-task", "method": "POST" }
     ]
   },
   {