From 93d2727917f71e5a57e4cc34ac5154d5e535299e Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:32:17 -0500
Subject: [PATCH 01/24] Add interactive Nexus demo page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/nexus-demo.tsx |   23 +
 static/nexus-demo.html   | 1199 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 1222 insertions(+)
 create mode 100644 src/pages/nexus-demo.tsx
 create mode 100644 static/nexus-demo.html
diff --git a/src/pages/nexus-demo.tsx b/src/pages/nexus-demo.tsx
new file mode 100644
index 0000000000..27b63081ac
--- /dev/null
+++ b/src/pages/nexus-demo.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function NexusDemo() {
+  return (
+    <Layout
+      title="Temporal Nexus — Interactive Demo"
+      description="An interactive walkthrough of Temporal Nexus: what it is, how it works, and how to build with it."
+      noFooter
+    >
+      <iframe
+        src="/nexus-demo.html"
+        style={{
+          display: 'block',
+          width: '100%',
+          height: 'calc(100vh - 60px)',
+          border: 'none',
+        }}
+        title="Temporal Nexus Interactive Demo"
+      />
+    </Layout>
+  );
+}
diff --git a/static/nexus-demo.html b/static/nexus-demo.html
new file mode 100644
index 0000000000..914ab8b3b6
--- /dev/null
+++ b/static/nexus-demo.html
@@ -0,0 +1,1199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Temporal Nexus — Interactive Demo</title>
+<style>
+  :root {
+    --bg: #0a0e1a;
+    --surface: #111827;
+    --surface2: #1a2236;
+    --border: #1e2d47;
+    --accent: #3b82f6;
+    --accent2: #8b5cf6;
+    --accent3: #10b981;
+    --warn: #f59e0b;
+    --danger: #ef4444;
+    --text: #e2e8f0;
+    --muted: #64748b;
+    --faint: #1e293b;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
+
+  /* NAV */
+  nav {
+    position: sticky; top: 0; z-index: 100;
+    background: rgba(10,14,26,0.92); backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 8px;
+    padding: 12px 24px;
+  }
+  nav .logo { font-weight: 700; font-size: 15px; color: var(--accent); margin-right: 16px; }
+  nav button {
+    background: none; border: none; color: var(--muted); cursor: pointer;
+    font-size: 13px; padding: 6px 12px; border-radius: 6px; transition: all .2s;
+  }
+  nav button:hover { color: var(--text); background: var(--surface2); }
+  nav button.active { color: var(--accent); background: rgba(59,130,246,0.12); }
+
+  /* SECTIONS */
+  .section { display: none; padding: 40px 24px; max-width: 1000px; margin: 0 auto; }
+  .section.active { display: block; }
+
+  h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
+  h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; color: var(--accent); }
+  h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
+  p { color: #94a3b8; margin-bottom: 12px; font-size: 14px; }
+  .lead { font-size: 16px; color: var(--text); max-width: 680px; margin-bottom: 32px; }
+
+  /* CARDS */
+  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
+  .card-grid .card { margin-bottom: 0; }
+  .card .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
+  .tag-blue { background: rgba(59,130,246,.15); color: #60a5fa; }
+  .tag-purple { background: rgba(139,92,246,.15); color: #a78bfa; }
+  .tag-green { background: rgba(16,185,129,.15); color: #34d399; }
+  .tag-amber { background: rgba(245,158,11,.15); color: #fbbf24; }
+
+  /* NAMESPACE BOXES */
+  .ns-container { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin: 24px 0; }
+  .ns-box {
+    flex: 1; min-width: 200px;
+    background: var(--surface); border: 2px solid var(--border);
+    border-radius: 12px; padding: 16px;
+    position: relative; transition: border-color .3s;
+  }
+  .ns-box.caller { border-color: var(--accent); }
+  .ns-box.handler { border-color: var(--accent2); }
+  .ns-box .ns-label {
+    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
+    padding: 3px 10px; border-radius: 20px; display: inline-block; margin-bottom: 12px;
+  }
+  .caller .ns-label { background: rgba(59,130,246,.15); color: #60a5fa; }
+  .handler .ns-label { background: rgba(139,92,246,.15); color: #a78bfa; }
+  .ns-arrow {
+    display: flex; align-items: center; justify-content: center;
+    color: var(--muted); font-size: 24px; flex-shrink: 0;
+    flex-direction: column; gap: 4px;
+  }
+  .ns-arrow span { font-size: 10px; color: var(--muted); text-align: center; max-width: 80px; }
+
+  /* NEXUS ENDPOINT BRIDGE */
+  .endpoint-bridge {
+    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.08));
+    border: 2px dashed rgba(59,130,246,.4);
+    border-radius: 12px; padding: 16px 24px;
+    text-align: center; flex: 0 0 auto; align-self: center;
+    min-width: 140px;
+  }
+  .endpoint-bridge .eb-label { font-size: 12px; color: var(--accent); font-weight: 700; }
+  .endpoint-bridge .eb-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
+
+  /* WORKFLOW BLOCKS */
+  .wf-block {
+    background: var(--surface2); border: 1px solid var(--border);
+    border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
+    font-size: 13px; display: flex; align-items: center; gap: 8px;
+  }
+  .wf-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
+  .wf-icon.blue { background: rgba(59,130,246,.2); }
+  .wf-icon.purple { background: rgba(139,92,246,.2); }
+  .wf-icon.green { background: rgba(16,185,129,.2); }
+
+  /* INTERACTIVE FLOW */
+  .flow-container { margin: 24px 0; }
+  .flow-controls { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
+  .btn {
+    background: var(--accent); color: white; border: none; padding: 10px 20px;
+    border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
+    transition: all .2s;
+  }
+  .btn:hover { background: #2563eb; transform: translateY(-1px); }
+  .btn:active { transform: translateY(0); }
+  .btn.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
+  .btn.secondary:hover { background: var(--faint); }
+  .btn.danger { background: var(--danger); }
+
+  /* TIMELINE */
+  .timeline { display: flex; flex-direction: column; gap: 0; }
+  .tl-step {
+    display: flex; gap: 16px; align-items: flex-start;
+    opacity: 0.25; transition: opacity .4s, transform .4s;
+    transform: translateX(-8px);
+    padding-bottom: 16px;
+  }
+  .tl-step.active { opacity: 1; transform: translateX(0); }
+  .tl-step.done { opacity: 0.6; }
+  .tl-num {
+    width: 28px; height: 28px; border-radius: 50%;
+    background: var(--surface2); border: 2px solid var(--border);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 700; flex-shrink: 0;
+    transition: all .3s;
+  }
+  .tl-step.active .tl-num { background: var(--accent); border-color: var(--accent); color: white; }
+  .tl-step.done .tl-num { background: var(--accent3); border-color: var(--accent3); color: white; }
+  .tl-content { flex: 1; }
+  .tl-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
+  .tl-desc { font-size: 12px; color: var(--muted); }
+  .tl-badge { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
+
+  /* ANIMATED PACKET */
+  .flow-diagram {
+    position: relative; height: 180px;
+    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 20px; margin-bottom: 20px; overflow: hidden;
+  }
+  .flow-node {
+    background: var(--surface2); border: 2px solid var(--border);
+    border-radius: 10px; padding: 12px 16px; text-align: center;
+    min-width: 120px; position: relative; z-index: 2;
+  }
+  .flow-node .fn-title { font-size: 12px; font-weight: 700; }
+  .flow-node .fn-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
+  .flow-node.active-node { border-color: var(--accent); background: rgba(59,130,246,.08); }
+  .flow-track {
+    flex: 1; height: 2px; background: var(--border); position: relative; margin: 0 8px;
+  }
+  .flow-track.double { display: flex; flex-direction: column; gap: 16px; height: auto; background: none; }
+  .flow-track .track-line { height: 2px; background: var(--border); position: relative; flex: 1; }
+  .packet {
+    position: absolute; width: 12px; height: 12px; border-radius: 50%;
+    top: 50%; transform: translateY(-50%);
+    transition: left 0.6s cubic-bezier(0.4,0,0.2,1);
+  }
+  .packet.blue { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
+  .packet.purple { background: var(--accent2); box-shadow: 0 0 12px var(--accent2); }
+  .packet.green { background: var(--accent3); box-shadow: 0 0 12px var(--accent3); }
+  .packet.hidden { display: none; }
+
+  /* STATUS LOG */
+  .status-log {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+    padding: 16px; font-family: 'Fira Code', monospace; font-size: 12px;
+    max-height: 200px; overflow-y: auto; margin-bottom: 20px;
+  }
+  .log-line { padding: 2px 0; }
+  .log-line .ts { color: var(--muted); }
+  .log-line .ev { color: var(--accent); }
+  .log-line .ev.success { color: var(--accent3); }
+  .log-line .ev.warn { color: var(--warn); }
+  .log-line .ev.error { color: var(--danger); }
+  .log-line .msg { color: var(--text); }
+
+  /* CIRCUIT BREAKER */
+  .cb-visual {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
+    padding: 24px; margin: 16px 0;
+  }
+  .cb-states { display: flex; gap: 12px; margin-bottom: 20px; justify-content: center; }
+  .cb-state {
+    padding: 10px 20px; border-radius: 8px; text-align: center;
+    border: 2px solid var(--border); transition: all .3s; flex: 1; max-width: 160px;
+  }
+  .cb-state .cs-label { font-size: 13px; font-weight: 700; }
+  .cb-state .cs-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
+  .cb-state.closed { border-color: var(--accent3); background: rgba(16,185,129,.08); }
+  .cb-state.open { border-color: var(--danger); background: rgba(239,68,68,.08); }
+  .cb-state.half-open { border-color: var(--warn); background: rgba(245,158,11,.08); }
+  .cb-state.inactive { border-color: var(--border); background: none; opacity: 0.4; }
+  .cb-meter {
+    background: var(--surface2); border-radius: 8px; padding: 12px 16px;
+    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
+  }
+  .cb-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
+  .cb-bar { height: 100%; border-radius: 4px; transition: width .5s, background .5s; }
+  .cb-count { font-size: 14px; font-weight: 700; min-width: 30px; text-align: right; }
+
+  /* COMPARISON TABLE */
+  table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
+  th { background: var(--surface2); padding: 10px 14px; text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; }
+  td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
+  tr:last-child td { border-bottom: none; }
+  tr:hover td { background: rgba(255,255,255,.02); }
+  .check { color: var(--accent3); font-weight: 700; }
+  .cross { color: var(--muted); }
+
+  /* QUIZ */
+  .quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; }
+  .quiz-q { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
+  .quiz-options { display: flex; flex-direction: column; gap: 8px; }
+  .quiz-opt {
+    background: var(--surface2); border: 2px solid var(--border);
+    border-radius: 8px; padding: 10px 16px; cursor: pointer;
+    font-size: 13px; transition: all .2s; text-align: left;
+  }
+  .quiz-opt:hover { border-color: var(--accent); }
+  .quiz-opt.correct { border-color: var(--accent3); background: rgba(16,185,129,.1); color: var(--accent3); }
+  .quiz-opt.wrong { border-color: var(--danger); background: rgba(239,68,68,.1); color: var(--danger); }
+  .quiz-feedback { margin-top: 12px; font-size: 13px; padding: 10px 14px; border-radius: 8px; display: none; }
+  .quiz-feedback.show { display: block; }
+  .quiz-feedback.correct { background: rgba(16,185,129,.1); color: #34d399; }
+  .quiz-feedback.wrong { background: rgba(239,68,68,.1); color: #f87171; }
+
+  /* TABS */
+  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
+  .tab {
+    padding: 8px 16px; background: none; border: none; color: var(--muted);
+    cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
+    transition: all .2s; margin-bottom: -1px;
+  }
+  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+  .tab-content { display: none; }
+  .tab-content.active { display: block; }
+
+  /* CODE */
+  pre {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+    padding: 16px; font-family: 'Fira Code', monospace; font-size: 12px;
+    overflow-x: auto; margin-bottom: 16px; line-height: 1.7;
+  }
+  .kw { color: #c084fc; }
+  .fn { color: #60a5fa; }
+  .str { color: #34d399; }
+  .cm { color: #475569; }
+  .ty { color: #fbbf24; }
+
+  /* PROGRESS */
+  .progress-bar { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 32px; overflow: hidden; }
+  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s; }
+
+  /* TOOLTIP */
+  .tooltip-wrap { position: relative; display: inline-block; }
+  .tooltip-wrap .tt {
+    position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
+    background: #1e293b; border: 1px solid var(--border); border-radius: 6px;
+    padding: 6px 10px; font-size: 11px; white-space: nowrap; color: var(--text);
+    pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 50;
+  }
+  .tooltip-wrap:hover .tt { opacity: 1; }
+
+  /* SCROLLBAR */
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
+  @keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
+  .animate-in { animation: slideIn .4s ease forwards; }
+</style>
+</head>
+<body>
+
+<nav>
+  <div class="logo">Temporal Nexus</div>
+  <button class="active" onclick="showSection('overview', this)">What is Nexus?</button>
+  <button onclick="showSection('components', this)">Components</button>
+  <button onclick="showSection('flow', this)">How It Works</button>
+  <button onclick="showSection('circuit', this)">Reliability</button>
+  <button onclick="showSection('code', this)">Code</button>
+  <button onclick="showSection('quiz', this)">Test Yourself</button>
+</nav>
+
+<!-- OVERVIEW -->
+<div id="overview" class="section active">
+  <div class="progress-bar"><div class="progress-fill" style="width:16%"></div></div>
+  <h1>What is Temporal Nexus?</h1>
+  <p class="lead">Nexus lets different teams share Temporal workflows across team, namespace, region, and cloud boundaries — without exposing internal implementation details.</p>
+
+  <div class="card" style="border-color: var(--accent); background: rgba(59,130,246,.04);">
+    <h3 style="color:var(--accent); margin-bottom:8px;">The core idea in one sentence:</h3>
+    <p style="font-size:15px; color:var(--text); margin:0;">Team A can call Team B's workflows like a typed API — with full durability, retries, and fault-tolerance built in — without needing access to Team B's namespace or knowing how their code works.</p>
+  </div>
+
+  <!-- PROBLEM / SOLUTION -->
+  <h2 style="margin-top:32px;">The Problem Nexus Solves</h2>
+  <div class="card-grid">
+    <div class="card" style="border-color: var(--danger);">
+      <div class="tag" style="background:rgba(239,68,68,.15);color:#f87171;">Without Nexus</div>
+      <h3>Siloed Teams</h3>
+      <p>Each team works in their own Temporal namespace. There's no clean way for the Payments team to trigger an action in the Fraud Detection team's workflow without tight coupling or shared credentials.</p>
+      <p>Teams either share namespaces (messy) or build fragile HTTP bridges (unreliable).</p>
+    </div>
+    <div class="card" style="border-color: var(--accent3);">
+      <div class="tag tag-green">With Nexus</div>
+      <h3>Modular &amp; Safe</h3>
+      <p>The Fraud Detection team publishes a <strong>Nexus Service</strong> with a clear contract. The Payments team calls it from their workflow like any other operation.</p>
+      <p>Nexus handles routing, retries, security, and observability automatically — across any boundary.</p>
+    </div>
+  </div>
+
+  <!-- VISUAL: WHAT IT LOOKS LIKE -->
+  <h2>What It Looks Like</h2>
+  <div class="ns-container">
+    <div class="ns-box caller">
+      <div class="ns-label">Team A — Payments</div>
+      <div class="wf-block">
+        <div class="wf-icon blue">W</div>
+        <div>
+          <div style="font-weight:600">PaymentWorkflow</div>
+          <div style="font-size:11px;color:var(--muted)">Caller Namespace</div>
+        </div>
+      </div>
+      <div style="padding: 8px 14px; background: rgba(59,130,246,.07); border-radius:6px; font-size:12px; color:#94a3b8;">
+        Calls <code style="color:#60a5fa">fraud.v1/checkTransaction</code><br>
+        Waits for result (sync or async)
+      </div>
+    </div>
+
+    <div class="ns-arrow">
+      <div style="font-size:28px;">→</div>
+      <div class="endpoint-bridge">
+        <div class="eb-label">Nexus Endpoint</div>
+        <div class="eb-sub">Routes securely</div>
+        <div class="eb-sub" style="margin-top:4px">Retries + Auth</div>
+      </div>
+      <div style="font-size:28px;">→</div>
+    </div>
+
+    <div class="ns-box handler">
+      <div class="ns-label">Team B — Fraud Detection</div>
+      <div class="wf-block">
+        <div class="wf-icon purple">S</div>
+        <div>
+          <div style="font-weight:600">Nexus Service: <code style="color:#a78bfa">fraud.v1</code></div>
+          <div style="font-size:11px;color:var(--muted)">Handler Namespace</div>
+        </div>
+      </div>
+      <div class="wf-block" style="margin-bottom:0">
+        <div class="wf-icon purple">W</div>
+        <div>
+          <div style="font-weight:600">FraudCheckWorkflow</div>
+          <div style="font-size:11px;color:var(--muted)">Runs internally, result returned</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- KEY FACTS -->
+  <h2>Key Facts</h2>
+  <div class="card-grid">
+    <div class="card">
+      <div class="tag tag-blue">Durability</div>
+      <h3>Up to 60 Days</h3>
+      <p>Async Nexus Operations can run for up to 60 days in Temporal Cloud. The caller workflow is suspended until the result arrives.</p>
+    </div>
+    <div class="card">
+      <div class="tag tag-green">Reliability</div>
+      <h3>At-Least-Once</h3>
+      <p>Nexus Machinery retries failed operations automatically. Pair with workflow ID policies to get exactly-once semantics.</p>
+    </div>
+    <div class="card">
+      <div class="tag tag-purple">Security</div>
+      <h3>Built-in Auth</h3>
+      <p>mTLS encryption and namespace allowlists control who can call what. No API keys flying around in code.</p>
+    </div>
+    <div class="card">
+      <div class="tag tag-amber">Boundaries</div>
+      <h3>Cross-Everything</h3>
+      <p>Works across teams, namespaces, regions (AWS &amp; GCP), and clouds — with the same developer experience everywhere.</p>
+    </div>
+  </div>
+
+  <div style="text-align:right">
+    <button class="btn" onclick="showSection('components', document.querySelectorAll('nav button')[1])">Next: Components →</button>
+  </div>
+</div>
+
+<!-- COMPONENTS -->
+<div id="components" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:33%"></div></div>
+  <h1>The Four Building Blocks</h1>
+  <p class="lead">Nexus has four key concepts. Understanding these unlocks everything else.</p>
+
+  <div style="display:flex;flex-direction:column;gap:20px;">
+
+    <div class="card" style="border-left: 4px solid var(--accent);">
+      <div style="display:flex;align-items:flex-start;gap:16px;">
+        <div style="width:48px;height:48px;border-radius:10px;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">1</div>
+        <div style="flex:1">
+          <h2 style="margin-bottom:4px;font-size:17px;">Nexus Endpoint</h2>
+          <p style="color:var(--muted);font-size:12px;margin-bottom:8px;">The address you publish and route through</p>
+          <p>Think of an Endpoint like a <strong>URL for your team's services</strong>. It's a named entry point registered in the Nexus Registry that routes requests to a specific namespace and task queue.</p>
+          <p>It's <em>not</em> a general HTTP proxy — it's specifically designed for Nexus, with built-in auth, retries, and observability.</p>
+          <div style="background:var(--surface2);border-radius:6px;padding:10px 14px;font-size:12px;font-family:monospace;margin-top:8px;">
+            Endpoint: <span style="color:#60a5fa">fraud-detection-prod</span><br>
+            Routes to: <span style="color:#a78bfa">fraud-ns / fraud-task-queue</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="border-left: 4px solid var(--accent2);">
+      <div style="display:flex;align-items:flex-start;gap:16px;">
+        <div style="width:48px;height:48px;border-radius:10px;background:rgba(139,92,246,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">2</div>
+        <div style="flex:1">
+          <h2 style="margin-bottom:4px;font-size:17px;">Nexus Service</h2>
+          <p style="color:var(--muted);font-size:12px;margin-bottom:8px;">The contract you publish for others to consume</p>
+          <p>A Service is a <strong>named collection of Nexus Operations</strong> — like an API interface. Multiple services can run in the same worker. Callers import the service definition to get type safety.</p>
+          <p>Example: <code style="color:#a78bfa">fraud.v1</code> service exposes <code>checkTransaction</code>, <code>flagUser</code>, and <code>getScore</code> operations.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="border-left: 4px solid var(--accent3);">
+      <div style="display:flex;align-items:flex-start;gap:16px;">
+        <div style="width:48px;height:48px;border-radius:10px;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">3</div>
+        <div style="flex:1">
+          <h2 style="margin-bottom:4px;font-size:17px;">Nexus Operation</h2>
+          <p style="color:var(--muted);font-size:12px;margin-bottom:8px;">The individual action — sync or async</p>
+
+          <div class="tabs" style="margin-bottom:16px">
+            <button class="tab active" onclick="switchTab('sync-tab', this, 'op-tabs')">Synchronous</button>
+            <button class="tab" onclick="switchTab('async-tab', this, 'op-tabs')">Asynchronous</button>
+          </div>
+          <div id="sync-tab" class="tab-content active" data-group="op-tabs">
+            <p><strong>Synchronous</strong> operations complete in under 10 seconds. The result comes back in the same HTTP round-trip. Great for quick lookups, scoring, or validations.</p>
+            <div style="background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:11px;color:var(--muted);">
+              Caller → [Nexus RPC] → Handler → result → Caller<br>
+              Duration: milliseconds to &lt;10 seconds
+            </div>
+          </div>
+          <div id="async-tab" class="tab-content" data-group="op-tabs">
+            <p><strong>Asynchronous</strong> operations start a Workflow and return an operation token. The caller workflow is suspended. When the handler workflow completes, a callback delivers the result.</p>
+            <div style="background:var(--surface2);border-radius:6px;padding:8px 12px;font-size:11px;color:var(--muted);">
+              Caller → [start] → Handler starts Workflow → [operation token]<br>
+              ...time passes (up to 60 days)...<br>
+              Handler Workflow completes → [callback] → Caller resumes
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="border-left: 4px solid var(--warn);">
+      <div style="display:flex;align-items:flex-start;gap:16px;">
+        <div style="width:48px;height:48px;border-radius:10px;background:rgba(245,158,11,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">4</div>
+        <div style="flex:1">
+          <h2 style="margin-bottom:4px;font-size:17px;">Nexus Registry</h2>
+          <p style="color:var(--muted);font-size:12px;margin-bottom:8px;">The directory of all Endpoints in your account</p>
+          <p>Scoped to your Temporal Cloud account or self-hosted cluster. Teams register Endpoints here. The Registry is the source of truth for endpoint discovery, access control, and audit logging.</p>
+          <div style="display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;">
+            <div style="background:var(--surface2);border-radius:6px;padding:6px 12px;font-size:12px;">fraud-detection-prod</div>
+            <div style="background:var(--surface2);border-radius:6px;padding:6px 12px;font-size:12px;">kyc-verification-v2</div>
+            <div style="background:var(--surface2);border-radius:6px;padding:6px 12px;font-size:12px;">notifications-global</div>
+            <div style="background:var(--surface2);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--muted);border:1px dashed var(--border);">+ register new</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div style="text-align:right;margin-top:24px">
+    <button class="btn" onclick="showSection('flow', document.querySelectorAll('nav button')[2])">Next: How It Works →</button>
+  </div>
+</div>
+
+<!-- FLOW -->
+<div id="flow" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:50%"></div></div>
+  <h1>How a Nexus Call Works</h1>
+  <p class="lead">Walk through the step-by-step lifecycle of a Nexus Operation. Choose sync or async.</p>
+
+  <div class="tabs">
+    <button class="tab active" onclick="switchFlowMode('sync')">Synchronous Operation</button>
+    <button class="tab" onclick="switchFlowMode('async')">Asynchronous Operation</button>
+  </div>
+
+  <div class="flow-container">
+    <!-- Diagram -->
+    <div class="flow-diagram" id="flowDiagram">
+      <div class="flow-node" id="fn-caller">
+        <div class="fn-title">Caller Workflow</div>
+        <div class="fn-sub">payments-ns</div>
+      </div>
+
+      <div class="flow-track" id="track1" style="position:relative;">
+        <div class="packet blue hidden" id="pkt-fwd" style="left:-6px;"></div>
+      </div>
+
+      <div class="flow-node" id="fn-endpoint">
+        <div class="fn-title">Nexus Endpoint</div>
+        <div class="fn-sub">Routing + Auth</div>
+      </div>
+
+      <div class="flow-track" id="track2" style="position:relative;">
+        <div class="packet purple hidden" id="pkt-handler" style="left:-6px;"></div>
+        <div class="packet green hidden" id="pkt-return" style="left:calc(100% - 6px);"></div>
+      </div>
+
+      <div class="flow-node" id="fn-handler">
+        <div class="fn-title">Handler Worker</div>
+        <div class="fn-sub" id="fn-handler-sub">fraud-ns</div>
+      </div>
+    </div>
+
+    <!-- Log -->
+    <div class="status-log" id="statusLog">
+      <div class="log-line"><span class="ts">[ready] </span><span class="msg">Press "Run Demo" to start the animation</span></div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flow-controls">
+      <button class="btn" onclick="runFlowDemo()">Run Demo</button>
+      <button class="btn secondary" onclick="resetFlow()">Reset</button>
+    </div>
+
+    <!-- Steps -->
+    <div class="timeline" id="timeline"></div>
+  </div>
+
+  <div style="text-align:right;margin-top:24px">
+    <button class="btn" onclick="showSection('circuit', document.querySelectorAll('nav button')[3])">Next: Reliability →</button>
+  </div>
+</div>
+
+<!-- CIRCUIT BREAKER / RELIABILITY -->
+<div id="circuit" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:67%"></div></div>
+  <h1>Built-in Reliability</h1>
+  <p class="lead">Nexus protects callers from handler failures through automatic retries, circuit breaking, and cancellation propagation.</p>
+
+  <h2>Circuit Breaker</h2>
+  <p>If a handler returns 5 consecutive retryable errors, Nexus trips the circuit breaker for that caller↔endpoint pair. This prevents overloading a struggling handler with a flood of retries.</p>
+
+  <div class="cb-visual">
+    <div class="cb-states">
+      <div class="cb-state closed" id="cb-closed">
+        <div class="cs-label" style="color:var(--accent3)">Closed</div>
+        <div class="cs-sub">Normal operation</div>
+      </div>
+      <div style="display:flex;align-items:center;color:var(--muted);font-size:18px;">→</div>
+      <div class="cb-state inactive" id="cb-open">
+        <div class="cs-label" style="color:var(--danger)">Open</div>
+        <div class="cs-sub">Failing fast</div>
+      </div>
+      <div style="display:flex;align-items:center;color:var(--muted);font-size:18px;">→</div>
+      <div class="cb-state inactive" id="cb-half">
+        <div class="cs-label" style="color:var(--warn)">Half-Open</div>
+        <div class="cs-sub">Testing recovery</div>
+      </div>
+    </div>
+
+    <div class="cb-meter">
+      <div style="font-size:12px;color:var(--muted);min-width:100px">Consecutive Errors</div>
+      <div class="cb-bar-wrap">
+        <div class="cb-bar" id="cbBar" style="width:0%;background:var(--accent3)"></div>
+      </div>
+      <div class="cb-count" id="cbCount" style="color:var(--accent3)">0/5</div>
+    </div>
+
+    <div style="display:flex;gap:10px;flex-wrap:wrap;">
+      <button class="btn danger" onclick="cbFail()" id="cbFailBtn">Simulate Error</button>
+      <button class="btn" style="background:var(--accent3)" onclick="cbSuccess()" id="cbSuccessBtn">Simulate Success</button>
+      <button class="btn secondary" onclick="cbReset()">Reset</button>
+      <div id="cbTimer" style="display:none;align-items:center;padding:8px 14px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--warn);">
+        Auto-reset in <span id="cbTimerVal">60</span>s
+      </div>
+    </div>
+
+    <div id="cbMessage" style="margin-top:16px;padding:12px;border-radius:8px;display:none;font-size:13px;"></div>
+  </div>
+
+  <h2 style="margin-top:32px">Reliability Comparison</h2>
+  <table>
+    <tr>
+      <th>Feature</th>
+      <th>Raw HTTP Call</th>
+      <th>Nexus Operation</th>
+    </tr>
+    <tr>
+      <td>Automatic retries on transient failure</td>
+      <td class="cross">Manual</td>
+      <td class="check">Built-in</td>
+    </tr>
+    <tr>
+      <td>Caller workflow survives worker restart</td>
+      <td class="cross">No</td>
+      <td class="check">Yes (durable)</td>
+    </tr>
+    <tr>
+      <td>Circuit breaking</td>
+      <td class="cross">Manual</td>
+      <td class="check">Automatic</td>
+    </tr>
+    <tr>
+      <td>Cancel propagates to handler</td>
+      <td class="cross">No</td>
+      <td class="check">Yes</td>
+    </tr>
+    <tr>
+      <td>Cross-namespace auth</td>
+      <td class="cross">DIY</td>
+      <td class="check">mTLS + Allowlists</td>
+    </tr>
+    <tr>
+      <td>Bi-directional observability links</td>
+      <td class="cross">No</td>
+      <td class="check">Yes</td>
+    </tr>
+    <tr>
+      <td>Max operation duration</td>
+      <td class="cross">Request timeout</td>
+      <td class="check">Up to 60 days</td>
+    </tr>
+  </table>
+
+  <h2>Cancellation Propagation</h2>
+  <div class="card">
+    <p>When the caller workflow is canceled, Nexus automatically propagates the cancel signal to any pending Nexus Operations. The handler workflow receives the cancel request and the caller gets a <code>CanceledFailure</code> result.</p>
+    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:13px;">
+      <div style="background:var(--danger);color:white;padding:4px 12px;border-radius:6px;">Cancel caller</div>
+      <div style="color:var(--muted)">→ Nexus Machinery →</div>
+      <div style="background:rgba(239,68,68,.15);border:1px solid var(--danger);color:#f87171;padding:4px 12px;border-radius:6px;">Cancel pending ops</div>
+      <div style="color:var(--muted)">→</div>
+      <div style="background:rgba(239,68,68,.15);border:1px solid var(--danger);color:#f87171;padding:4px 12px;border-radius:6px;">Cancel handler workflows</div>
+    </div>
+    <p style="margin-top:12px;font-size:12px;">Note: Terminating a caller workflow <em>abandons</em> (does not cancel) pending operations.</p>
+  </div>
+
+  <div style="text-align:right;margin-top:24px">
+    <button class="btn" onclick="showSection('code', document.querySelectorAll('nav button')[4])">Next: Code →</button>
+  </div>
+</div>
+
+<!-- CODE -->
+<div id="code" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:83%"></div></div>
+  <h1>Code Walkthrough</h1>
+  <p class="lead">Here's what using Nexus actually looks like in TypeScript. Three steps: define, implement, call.</p>
+
+  <div class="tabs">
+    <button class="tab active" onclick="switchTab('code-define', this, 'code-tabs')">1. Define Service</button>
+    <button class="tab" onclick="switchTab('code-handler', this, 'code-tabs')">2. Implement Handler</button>
+    <button class="tab" onclick="switchTab('code-caller', this, 'code-tabs')">3. Call from Workflow</button>
+  </div>
+
+  <div id="code-define" class="tab-content active" data-group="code-tabs">
+    <p>The service definition is the contract. Both teams share this — usually as a package.</p>
+<pre><span class="cm">// shared/fraud-service.ts (Team B publishes this)</span>
+<span class="kw">import</span> { <span class="ty">defineNexusServiceContract</span>, <span class="ty">WorkflowHandle</span> } <span class="kw">from</span> <span class="str">'@temporalio/nexus'</span>;
+
+<span class="kw">export interface</span> <span class="ty">CheckTransactionInput</span> {
+  transactionId: <span class="ty">string</span>;
+  amount: <span class="ty">number</span>;
+  userId: <span class="ty">string</span>;
+}
+
+<span class="kw">export interface</span> <span class="ty">FraudCheckResult</span> {
+  approved: <span class="ty">boolean</span>;
+  riskScore: <span class="ty">number</span>;
+  reason?: <span class="ty">string</span>;
+}
+
+<span class="cm">// This defines the "contract" both teams agree on</span>
+<span class="kw">export const</span> <span class="fn">fraudService</span> = <span class="fn">defineNexusServiceContract</span>({
+  name: <span class="str">'fraud.v1'</span>,
+  operations: {
+    <span class="cm">// async: runs a full Workflow, can take hours</span>
+    checkTransaction: {
+      input: <span class="ty">WorkflowInput</span>&lt;<span class="ty">CheckTransactionInput</span>&gt;,
+      output: <span class="ty">WorkflowHandle</span>&lt;<span class="ty">FraudCheckResult</span>&gt;,
+    },
+    <span class="cm">// sync: quick score lookup, &lt;10 seconds</span>
+    getQuickScore: {
+      input: <span class="ty">SyncInput</span>&lt;{ userId: <span class="ty">string</span> }&gt;,
+      output: <span class="ty">SyncOutput</span>&lt;{ score: <span class="ty">number</span> }&gt;,
+    }
+  }
+});</pre>
+  </div>
+
+  <div id="code-handler" class="tab-content" data-group="code-tabs">
+    <p>Team B implements the handler in their own worker — using their own workflows internally.</p>
+<pre><span class="cm">// fraud-team/worker.ts (Team B's implementation)</span>
+<span class="kw">import</span> { <span class="ty">NexusWorker</span>, <span class="ty">NewWorkflowRunOperation</span>, <span class="ty">NewSyncOperation</span> } <span class="kw">from</span> <span class="str">'@temporalio/nexus'</span>;
+<span class="kw">import</span> { <span class="fn">fraudService</span> } <span class="kw">from</span> <span class="str">'../shared/fraud-service'</span>;
+
+<span class="kw">const</span> <span class="fn">fraudHandler</span> = <span class="fn">fraudService</span>.implement({
+  <span class="cm">// Async: delegate to internal Workflow</span>
+  checkTransaction: <span class="fn">NewWorkflowRunOperation</span>({
+    <span class="kw">async</span> <span class="fn">start</span>(input, ctx) {
+      <span class="kw">const</span> client = ctx.getClient();
+      <span class="cm">// Team B starts their OWN workflow internally</span>
+      <span class="kw">return</span> <span class="kw">await</span> client.workflow.<span class="fn">start</span>(FraudCheckWorkflow, {
+        args: [input],
+        taskQueue: <span class="str">'fraud-task-queue'</span>,
+        workflowId: <span class="str">`fraud-</span>${input.transactionId}<span class="str">`</span>,
+      });
+    }
+  }),
+
+  <span class="cm">// Sync: fast lookup, no Workflow needed</span>
+  getQuickScore: <span class="fn">NewSyncOperation</span>({
+    <span class="kw">async</span> <span class="fn">handler</span>(input) {
+      <span class="kw">const</span> score = <span class="kw">await</span> <span class="fn">scoreCache</span>.<span class="fn">get</span>(input.userId);
+      <span class="kw">return</span> { score };
+    }
+  }),
+});
+
+<span class="cm">// Run a Worker that polls the Endpoint's task queue</span>
+<span class="kw">const</span> worker = <span class="kw">await</span> <span class="ty">NexusWorker</span>.<span class="fn">create</span>({
+  taskQueue: <span class="str">'fraud-task-queue'</span>,
+  nexusServices: [fraudHandler],
+});</pre>
+  </div>
+
+  <div id="code-caller" class="tab-content" data-group="code-tabs">
+    <p>Team A calls the Nexus Service from their Workflow — it looks just like calling any other activity.</p>
+<pre><span class="cm">// payments-team/workflow.ts (Team A's caller)</span>
+<span class="kw">import</span> { <span class="ty">proxyActivities</span>, <span class="ty">executeNexusOperation</span> } <span class="kw">from</span> <span class="str">'@temporalio/workflow'</span>;
+<span class="kw">import</span> { <span class="fn">fraudService</span> } <span class="kw">from</span> <span class="str">'../shared/fraud-service'</span>; <span class="cm">// shared package</span>
+
+<span class="kw">export async function</span> <span class="fn">PaymentWorkflow</span>(payment: <span class="ty">Payment</span>): <span class="ty">Promise</span>&lt;<span class="ty">Result</span>&gt; {
+  <span class="cm">// 1. Call the Nexus Operation — fully durable, typed</span>
+  <span class="kw">const</span> fraudResult = <span class="kw">await</span> <span class="fn">executeNexusOperation</span>({
+    endpoint: <span class="str">'fraud-detection-prod'</span>, <span class="cm">// Nexus Endpoint name</span>
+    service: fraudService,
+    operation: fraudService.operations.checkTransaction,
+    input: {
+      transactionId: payment.id,
+      amount: payment.amount,
+      userId: payment.userId,
+    },
+    <span class="cm">// Total duration caller will wait (up to 60 days)</span>
+    scheduleToCloseTimeout: <span class="str">'24h'</span>,
+  });
+
+  <span class="cm">// 2. Caller workflow was suspended during the check</span>
+  <span class="cm">// Now it has the result — fully typed!</span>
+  <span class="kw">if</span> (!fraudResult.approved) {
+    <span class="kw">throw</span> <span class="kw">new</span> <span class="ty">Error</span>(<span class="str">`Fraud detected: </span>${fraudResult.reason}<span class="str">`</span>);
+  }
+
+  <span class="kw">return</span> <span class="fn">processApprovedPayment</span>(payment);
+}</pre>
+    <div class="card" style="border-color:var(--accent3);background:rgba(16,185,129,.04);margin-top:0">
+      <p style="margin:0;font-size:13px;color:#34d399;">The caller never imports Team B's internal code. If Team B changes their implementation — swapping FraudCheckWorkflow for a new ML model — Team A's code doesn't change at all.</p>
+    </div>
+  </div>
+
+  <div style="text-align:right;margin-top:24px">
+    <button class="btn" onclick="showSection('quiz', document.querySelectorAll('nav button')[5])">Next: Test Yourself →</button>
+  </div>
+</div>
+
+<!-- QUIZ -->
+<div id="quiz" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:100%"></div></div>
+  <h1>Test Your Understanding</h1>
+  <p class="lead">Check what you've learned. Click an answer to see if you're right.</p>
+
+  <div id="quizContainer"></div>
+  <div id="quizScore" style="display:none;text-align:center;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:24px;">
+    <div style="font-size:48px;margin-bottom:12px;" id="scoreEmoji">🎯</div>
+    <div style="font-size:24px;font-weight:700;margin-bottom:8px;" id="scoreText"></div>
+    <div style="color:var(--muted);margin-bottom:20px;" id="scoreSub"></div>
+    <button class="btn secondary" onclick="resetQuiz()">Try Again</button>
+  </div>
+</div>
+
+<script>
+// ──────────────────────────────────────────────
+// NAV
+// ──────────────────────────────────────────────
+function showSection(id, btn) {
+  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+  document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
+  document.getElementById(id).classList.add('active');
+  btn.classList.add('active');
+  window.scrollTo(0,0);
+  if (id === 'flow') initFlow();
+}
+
+// ──────────────────────────────────────────────
+// TABS
+// ──────────────────────────────────────────────
+function switchTab(id, btn, group) {
+  document.querySelectorAll(`[data-group="${group}"]`).forEach(t => t.classList.remove('active'));
+  document.querySelectorAll(`[data-group="${group}"] ~ button, button`).forEach(() => {});
+  btn.closest('.tabs').querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById(id).classList.add('active');
+}
+
+// ──────────────────────────────────────────────
+// FLOW DEMO
+// ──────────────────────────────────────────────
+let flowMode = 'sync';
+let flowRunning = false;
+
+const syncSteps = [
+  { title: 'Caller Workflow executes operation', desc: 'ExecuteNexusOperation called in the Workflow code', badge: 'Caller', bcolor: 'var(--accent)' },
+  { title: 'ScheduleNexusOperation command issued', desc: 'Worker sends command to Temporal Server', badge: 'Server', bcolor: 'var(--muted)' },
+  { title: 'NexusOperationScheduled event recorded', desc: 'Event written to workflow history', badge: 'History', bcolor: 'var(--muted)' },
+  { title: 'Nexus Machinery makes RPC to Endpoint', desc: 'Server calls the Nexus Endpoint with auth', badge: 'Nexus', bcolor: 'var(--accent2)' },
+  { title: 'Handler Worker picks up Nexus Task', desc: 'Worker polling fraud-task-queue gets the task', badge: 'Handler', bcolor: 'var(--accent2)' },
+  { title: 'Handler runs sync operation (&lt;10s)', desc: 'Executes code synchronously — query, lookup, etc.', badge: 'Sync', bcolor: 'var(--accent3)' },
+  { title: 'Result returned via HTTP response', desc: 'Handler responds with operation result', badge: 'Result', bcolor: 'var(--accent3)' },
+  { title: 'NexusOperationCompleted recorded', desc: 'Result written to caller workflow history', badge: 'Done', bcolor: 'var(--accent3)' },
+  { title: 'Caller Workflow resumes with result', desc: 'Workflow code continues from executeNexusOperation()', badge: 'Done', bcolor: 'var(--accent3)' },
+];
+
+const asyncSteps = [
+  { title: 'Caller Workflow executes operation', desc: 'ExecuteNexusOperation called — workflow will suspend', badge: 'Caller', bcolor: 'var(--accent)' },
+  { title: 'ScheduleNexusOperation command issued', desc: 'Worker sends command to Temporal Server', badge: 'Server', bcolor: 'var(--muted)' },
+  { title: 'Nexus Machinery starts operation', desc: 'Server sends start request to the Endpoint', badge: 'Nexus', bcolor: 'var(--accent2)' },
+  { title: 'Handler starts a Workflow', desc: 'NewWorkflowRunOperation starts FraudCheckWorkflow internally', badge: 'Handler', bcolor: 'var(--accent2)' },
+  { title: 'Operation token returned to caller', desc: 'NexusOperationStarted event recorded; caller is now suspended', badge: 'Async', bcolor: 'var(--warn)' },
+  { title: '...Handler Workflow runs (minutes/hours/days)...', desc: 'Caller workflow is paused. Time passes. Server waits.', badge: 'Wait', bcolor: 'var(--warn)' },
+  { title: 'Handler Workflow completes', desc: 'Result produced by FraudCheckWorkflow', badge: 'Handler', bcolor: 'var(--accent2)' },
+  { title: 'Completion Callback delivered', desc: 'Nexus Machinery delivers result back to caller namespace', badge: 'Callback', bcolor: 'var(--accent3)' },
+  { title: 'Caller Workflow resumes', desc: 'NexusOperationCompleted recorded; workflow continues', badge: 'Done', bcolor: 'var(--accent3)' },
+];
+
+function switchFlowMode(mode) {
+  flowMode = mode;
+  document.querySelectorAll('#flow .tab').forEach((t,i) => t.classList.toggle('active', i===(mode==='sync'?0:1)));
+  document.getElementById('fn-handler-sub').textContent = mode === 'async' ? 'fraud-ns (starts workflow)' : 'fraud-ns';
+  resetFlow();
+  initFlow();
+}
+
+function initFlow() {
+  const steps = flowMode === 'sync' ? syncSteps : asyncSteps;
+  const tl = document.getElementById('timeline');
+  tl.innerHTML = steps.map((s,i) => `
+    <div class="tl-step" id="step-${i}">
+      <div class="tl-num">${i+1}</div>
+      <div class="tl-content">
+        <div class="tl-title">${s.title}
+          <span class="tl-badge" style="background:rgba(0,0,0,.3);border:1px solid ${s.bcolor};color:${s.bcolor}">${s.badge}</span>
+        </div>
+        <div class="tl-desc">${s.desc}</div>
+      </div>
+    </div>
+  `).join('');
+}
+
+function log(msg, type='') {
+  const log = document.getElementById('statusLog');
+  const now = new Date().toLocaleTimeString('en-US',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
+  const line = document.createElement('div');
+  line.className = 'log-line';
+  line.innerHTML = `<span class="ts">[${now}] </span><span class="ev ${type}">${msg}</span>`;
+  log.appendChild(line);
+  log.scrollTop = log.scrollHeight;
+}
+
+function setActiveNode(nodeId) {
+  document.querySelectorAll('.flow-node').forEach(n => n.classList.remove('active-node'));
+  if (nodeId) document.getElementById(nodeId).classList.add('active-node');
+}
+
+async function animatePacket(pktId, from, to, color) {
+  const pkt = document.getElementById(pktId);
+  if (!pkt) return;
+  pkt.classList.remove('hidden');
+  pkt.style.left = from;
+  await sleep(50);
+  pkt.style.left = to;
+  await sleep(700);
+  pkt.classList.add('hidden');
+}
+
+async function runFlowDemo() {
+  if (flowRunning) return;
+  flowRunning = true;
+  resetFlow(false);
+  initFlow();
+
+  const steps = flowMode === 'sync' ? syncSteps : asyncSteps;
+  const nodeSequence = flowMode === 'sync'
+    ? ['fn-caller','fn-caller','fn-caller','fn-endpoint','fn-handler','fn-handler','fn-handler','fn-caller','fn-caller']
+    : ['fn-caller','fn-caller','fn-endpoint','fn-handler','fn-caller','fn-caller','fn-handler','fn-endpoint','fn-caller'];
+
+  for (let i = 0; i < steps.length; i++) {
+    const stepEl = document.getElementById(`step-${i}`);
+    stepEl.classList.add('active');
+    setActiveNode(nodeSequence[i]);
+
+    // animate packets at key moments
+    if (i === 3) await animatePacket('pkt-fwd', '-6px', 'calc(50% - 6px)', 'blue');
+    if (i === 4) await animatePacket('pkt-handler', '-6px', 'calc(100% - 6px)', 'purple');
+    if (i === 6 && flowMode === 'sync') await animatePacket('pkt-return', 'calc(100% - 6px)', '-6px', 'green');
+    if (i === 7 && flowMode === 'async') await animatePacket('pkt-return', 'calc(100% - 6px)', '-6px', 'green');
+
+    log(steps[i].title.replace(/<[^>]+>/g,''), i >= steps.length - 2 ? 'success' : (i === 5 && flowMode === 'async' ? 'warn' : ''));
+    await sleep(i === 5 && flowMode === 'async' ? 1500 : 800);
+    stepEl.classList.remove('active');
+    stepEl.classList.add('done');
+  }
+
+  setActiveNode(null);
+  log('Operation complete!', 'success');
+  flowRunning = false;
+}
+
+function resetFlow(reinit=true) {
+  flowRunning = false;
+  document.getElementById('statusLog').innerHTML = '<div class="log-line"><span class="ts">[ready] </span><span class="msg">Press "Run Demo" to start</span></div>';
+  document.querySelectorAll('.tl-step').forEach(s => { s.classList.remove('active','done'); });
+  document.querySelectorAll('.packet').forEach(p => p.classList.add('hidden'));
+  document.querySelectorAll('.flow-node').forEach(n => n.classList.remove('active-node'));
+  if (reinit) initFlow();
+}
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+
+// ──────────────────────────────────────────────
+// CIRCUIT BREAKER
+// ──────────────────────────────────────────────
+let cbErrors = 0;
+let cbState = 'closed'; // closed, open, half-open
+let cbTimerInterval = null;
+
+function cbUpdateUI() {
+  const states = ['cb-closed','cb-open','cb-half'];
+  const activeMap = { closed: 'cb-closed', open: 'cb-open', 'half-open': 'cb-half' };
+  states.forEach(s => {
+    const el = document.getElementById(s);
+    el.classList.toggle('inactive', el.id !== activeMap[cbState]);
+  });
+
+  const pct = Math.min((cbErrors / 5) * 100, 100);
+  const bar = document.getElementById('cbBar');
+  const count = document.getElementById('cbCount');
+  bar.style.width = pct + '%';
+
+  if (cbErrors < 3) { bar.style.background = 'var(--accent3)'; count.style.color = 'var(--accent3)'; }
+  else if (cbErrors < 5) { bar.style.background = 'var(--warn)'; count.style.color = 'var(--warn)'; }
+  else { bar.style.background = 'var(--danger)'; count.style.color = 'var(--danger)'; }
+
+  count.textContent = `${Math.min(cbErrors,5)}/5`;
+}
+
+function cbShowMessage(msg, color) {
+  const el = document.getElementById('cbMessage');
+  el.style.display = 'block';
+  el.style.background = `rgba(${color},.1)`;
+  el.style.color = `rgb(${color})`;
+  el.style.border = `1px solid rgba(${color},.3)`;
+  el.textContent = msg;
+}
+
+function cbFail() {
+  if (cbState === 'open') {
+    cbShowMessage('Circuit is OPEN — request fails immediately without calling handler. This protects the handler from more load.', '239,68,68');
+    return;
+  }
+  cbErrors++;
+  cbUpdateUI();
+
+  if (cbErrors >= 5 && cbState !== 'open') {
+    cbState = 'open';
+    cbUpdateUI();
+    cbShowMessage('Circuit TRIPPED! 5 consecutive errors. Requests will fail fast for 60 seconds to let the handler recover.', '239,68,68');
+    document.getElementById('cbTimer').style.display = 'flex';
+    let t = 60;
+    document.getElementById('cbTimerVal').textContent = t;
+    cbTimerInterval = setInterval(() => {
+      t--;
+      document.getElementById('cbTimerVal').textContent = t;
+      if (t <= 0) {
+        clearInterval(cbTimerInterval);
+        document.getElementById('cbTimer').style.display = 'none';
+        cbState = 'half-open';
+        cbErrors = 4;
+        cbUpdateUI();
+        cbShowMessage('Circuit is HALF-OPEN. Next request will test if the handler has recovered.', '245,158,11');
+      }
+    }, 1000);
+  } else if (cbState === 'closed') {
+    cbShowMessage(`Error ${cbErrors}/5. Nexus will retry automatically. ${5 - cbErrors} more consecutive errors will trip the circuit.`, '239,68,68');
+  } else if (cbState === 'half-open') {
+    cbState = 'open';
+    cbErrors = 5;
+    cbUpdateUI();
+    cbShowMessage('Test request failed — circuit re-opens. Waiting another 60 seconds.', '239,68,68');
+  }
+}
+
+function cbSuccess() {
+  if (cbState === 'open') {
+    cbShowMessage('Circuit is OPEN — success not possible right now. Wait for half-open state.', '245,158,11');
+    return;
+  }
+  if (cbState === 'half-open') {
+    cbState = 'closed';
+    cbErrors = 0;
+    clearInterval(cbTimerInterval);
+    document.getElementById('cbTimer').style.display = 'none';
+    cbUpdateUI();
+    cbShowMessage('Success! Circuit is CLOSED again. Handler has recovered.', '16,185,129');
+    return;
+  }
+  if (cbErrors > 0) {
+    cbErrors = Math.max(0, cbErrors - 1);
+    cbUpdateUI();
+  }
+  cbShowMessage('Success! Error count reset to 0. Circuit remains closed.', '16,185,129');
+  cbErrors = 0;
+  cbUpdateUI();
+}
+
+function cbReset() {
+  clearInterval(cbTimerInterval);
+  cbErrors = 0;
+  cbState = 'closed';
+  document.getElementById('cbTimer').style.display = 'none';
+  document.getElementById('cbMessage').style.display = 'none';
+  cbUpdateUI();
+}
+
+// ──────────────────────────────────────────────
+// QUIZ
+// ──────────────────────────────────────────────
+const quizData = [
+  {
+    q: "What problem does Temporal Nexus primarily solve?",
+    options: [
+      "Making workflows run faster",
+      "Connecting workflows across team and namespace boundaries safely",
+      "Replacing HTTP APIs entirely",
+      "Scheduling recurring jobs"
+    ],
+    correct: 1,
+    explanation: "Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries — enabling modular architecture without tight coupling."
+  },
+  {
+    q: "What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?",
+    options: ["10 seconds", "24 hours", "60 days", "1 year"],
+    correct: 2,
+    explanation: "Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team operations."
+  },
+  {
+    q: "A synchronous Nexus Operation must complete within:",
+    options: ["1 second", "10 seconds", "1 minute", "1 hour"],
+    correct: 1,
+    explanation: "Synchronous operations must complete within 10 seconds. For longer work, use asynchronous operations backed by a Workflow."
+  },
+  {
+    q: "What is a Nexus Endpoint?",
+    options: [
+      "A general-purpose HTTP reverse proxy",
+      "A named router that maps to a target namespace and task queue",
+      "A workflow definition",
+      "The Temporal Cloud UI"
+    ],
+    correct: 1,
+    explanation: "A Nexus Endpoint is NOT a general HTTP proxy — it's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue."
+  },
+  {
+    q: "How many consecutive retryable errors trip the Nexus circuit breaker?",
+    options: ["1", "3", "5", "10"],
+    correct: 2,
+    explanation: "The circuit breaker trips after 5 consecutive retryable errors. It then enters an 'open' state for 60 seconds before transitioning to 'half-open' to test recovery."
+  },
+  {
+    q: "If a caller workflow is CANCELED, what happens to pending Nexus Operations?",
+    options: [
+      "They continue running independently",
+      "They are terminated immediately",
+      "Cancel is propagated to them",
+      "Nothing — they timeout naturally"
+    ],
+    correct: 2,
+    explanation: "Cancellation propagates automatically through Nexus. Canceling the caller workflow sends a cancel signal to all pending Nexus Operations, which then cancel their handler workflows."
+  },
+  {
+    q: "What does Team A need from Team B to call a Nexus Service?",
+    options: [
+      "Access to Team B's namespace and credentials",
+      "A copy of Team B's workflow code",
+      "Only the shared service contract definition",
+      "Team B's database connection string"
+    ],
+    correct: 2,
+    explanation: "Team A only needs the shared service contract (the defineNexusServiceContract definition). Team B's internal implementation details — which workflows they use, how they work — are completely hidden."
+  }
+];
+
+let quizAnswers = [];
+let quizRendered = false;
+
+function renderQuiz() {
+  quizAnswers = new Array(quizData.length).fill(null);
+  const container = document.getElementById('quizContainer');
+  container.innerHTML = quizData.map((q, qi) => `
+    <div class="quiz-card animate-in" style="animation-delay:${qi*0.05}s">
+      <div class="quiz-q">Q${qi+1}. ${q.q}</div>
+      <div class="quiz-options">
+        ${q.options.map((opt, oi) => `
+          <button class="quiz-opt" onclick="answerQuiz(${qi}, ${oi}, this)">${opt}</button>
+        `).join('')}
+      </div>
+      <div class="quiz-feedback" id="feedback-${qi}"></div>
+    </div>
+  `).join('');
+  document.getElementById('quizScore').style.display = 'none';
+}
+
+function answerQuiz(qi, oi, btn) {
+  if (quizAnswers[qi] !== null) return;
+  quizAnswers[qi] = oi;
+
+  const q = quizData[qi];
+  const opts = btn.closest('.quiz-options').querySelectorAll('.quiz-opt');
+  opts.forEach(o => o.style.pointerEvents = 'none');
+
+  if (oi === q.correct) {
+    btn.classList.add('correct');
+    showFeedback(qi, true, 'Correct! ' + q.explanation);
+  } else {
+    btn.classList.add('wrong');
+    opts[q.correct].classList.add('correct');
+    showFeedback(qi, false, 'Not quite. ' + q.explanation);
+  }
+
+  if (quizAnswers.every(a => a !== null)) {
+    setTimeout(showScore, 500);
+  }
+}
+
+function showFeedback(qi, correct, msg) {
+  const el = document.getElementById(`feedback-${qi}`);
+  el.textContent = msg;
+  el.className = `quiz-feedback show ${correct ? 'correct' : 'wrong'}`;
+}
+
+function showScore() {
+  const correct = quizAnswers.filter((a, i) => a === quizData[i].correct).length;
+  const pct = Math.round((correct / quizData.length) * 100);
+  const scoreEl = document.getElementById('quizScore');
+  scoreEl.style.display = 'block';
+  scoreEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  document.getElementById('scoreText').textContent = `${correct} / ${quizData.length} correct (${pct}%)`;
+  if (pct >= 85) {
+    document.getElementById('scoreEmoji').textContent = 'You got it';
+    document.getElementById('scoreSub').textContent = "You have a solid grasp of Temporal Nexus. You're ready to build.";
+  } else if (pct >= 57) {
+    document.getElementById('scoreEmoji').textContent = 'Getting there';
+    document.getElementById('scoreSub').textContent = "Good foundation. Review the sections on the topics you missed.";
+  } else {
+    document.getElementById('scoreEmoji').textContent = 'Keep exploring';
+    document.getElementById('scoreSub').textContent = "Go back through the demo — the concepts will click. Try again when ready.";
+  }
+}
+
+function resetQuiz() {
+  renderQuiz();
+}
+
+// ──────────────────────────────────────────────
+// INIT
+// ──────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  initFlow();
+  renderQuiz();
+});
+</script>
+</body>
+</html>

From b5998ee8a9858cdf226e8e4739a52ea3bc823a3c Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:33:42 -0500
Subject: [PATCH 02/24] Use MDX for Nexus demo page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/nexus-demo.mdx | 10 ++++++++++
 src/pages/nexus-demo.tsx | 23 -----------------------
 2 files changed, 10 insertions(+), 23 deletions(-)
 create mode 100644 src/pages/nexus-demo.mdx
 delete mode 100644 src/pages/nexus-demo.tsx

diff --git a/src/pages/nexus-demo.mdx b/src/pages/nexus-demo.mdx
new file mode 100644
index 0000000000..5e7022e9d6
--- /dev/null
+++ b/src/pages/nexus-demo.mdx
@@ -0,0 +1,10 @@
+---
+title: Temporal Nexus — Interactive Demo
+description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
+---
+
+<iframe
+  src="/nexus-demo.html"
+  style={{display: 'block', width: '100%', height: 'calc(100vh - 60px)', border: 'none'}}
+  title="Temporal Nexus Interactive Demo"
+/>
diff --git a/src/pages/nexus-demo.tsx b/src/pages/nexus-demo.tsx
deleted file mode 100644
index 27b63081ac..0000000000
--- a/src/pages/nexus-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function NexusDemo() {
-  return (
-    <Layout
-      title="Temporal Nexus — Interactive Demo"
-      description="An interactive walkthrough of Temporal Nexus: what it is, how it works, and how to build with it."
-      noFooter
-    >
-      <iframe
-        src="/nexus-demo.html"
-        style={{
-          display: 'block',
-          width: '100%',
-          height: 'calc(100vh - 60px)',
-          border: 'none',
-        }}
-        title="Temporal Nexus Interactive Demo"
-      />
-    </Layout>
-  );
-}

From f9dcf74c2638464f0500039a9c374ea7b13ceb59 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:39:27 -0500
Subject: [PATCH 03/24] Move Nexus demo to docs/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 {src/pages => docs}/nexus-demo.mdx | 9 +++++++++
 1 file changed, 9 insertions(+)
 rename {src/pages => docs}/nexus-demo.mdx (66%)

diff --git a/src/pages/nexus-demo.mdx b/docs/nexus-demo.mdx
similarity index 66%
rename from src/pages/nexus-demo.mdx
rename to docs/nexus-demo.mdx
index 5e7022e9d6..33d54043c1 100644
--- a/src/pages/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -1,6 +1,15 @@
 ---
+id: nexus-demo
 title: Temporal Nexus — Interactive Demo
+sidebar_label: Nexus Interactive Demo
 description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
+slug: /nexus-demo
+tags:
+  - Nexus
+keywords:
+  - temporal nexus demo
+  - nexus interactive
+hide_table_of_contents: true
 ---
 
 <iframe

From 1668a2dd6db9fc3d99aa0ad70e4354dd8c97f4d4 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:41:36 -0500
Subject: [PATCH 04/24] Match page background to demo iframe color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index 33d54043c1..28a57eef9e 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -12,6 +12,11 @@ keywords:
 hide_table_of_contents: true
 ---
 
+<style>{`
+  html, body { background: #0a0e1a !important; }
+  .main-wrapper, article, .theme-doc-markdown { background: #0a0e1a !important; padding: 0 !important; margin: 0 !important; }
+`}</style>
+
 <iframe
   src="/nexus-demo.html"
   style={{display: 'block', width: '100%', height: 'calc(100vh - 60px)', border: 'none'}}

From 37ef597350c654159604b6bcf631b73de718bec0 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:43:27 -0500
Subject: [PATCH 05/24] Fix quiz option text color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/nexus-demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/nexus-demo.html b/static/nexus-demo.html
index 914ab8b3b6..5efc913dc3 100644
--- a/static/nexus-demo.html
+++ b/static/nexus-demo.html
@@ -225,7 +225,7 @@
   .quiz-opt {
     background: var(--surface2); border: 2px solid var(--border);
     border-radius: 8px; padding: 10px 16px; cursor: pointer;
-    font-size: 13px; transition: all .2s; text-align: left;
+    font-size: 13px; transition: all .2s; text-align: left; color: var(--text);
   }
   .quiz-opt:hover { border-color: var(--accent); }
   .quiz-opt.correct { border-color: var(--accent3); background: rgba(16,185,129,.1); color: var(--accent3); }

From 704bd9e297805ce3dd32379eb8df49c45c8bb799 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 24 Mar 2026 19:45:28 -0500
Subject: [PATCH 06/24] Fix copy and auto-resize iframe to content height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx    | 13 ++++++++++++-
 static/nexus-demo.html |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index 28a57eef9e..13e510a271 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -18,7 +18,18 @@ hide_table_of_contents: true
 `}</style>
 
 <iframe
+  id="nexus-demo-frame"
   src="/nexus-demo.html"
-  style={{display: 'block', width: '100%', height: 'calc(100vh - 60px)', border: 'none'}}
+  style={{display: 'block', width: '100%', height: '100vh', border: 'none'}}
   title="Temporal Nexus Interactive Demo"
+  onLoad={() => {
+    const frame = document.getElementById('nexus-demo-frame');
+    const resize = () => {
+      try {
+        frame.style.height = frame.contentDocument.body.scrollHeight + 'px';
+      } catch(e) {}
+    };
+    resize();
+    frame.contentWindow.addEventListener('click', () => setTimeout(resize, 400));
+  }}
 />
diff --git a/static/nexus-demo.html b/static/nexus-demo.html
index 5efc913dc3..7eb314240d 100644
--- a/static/nexus-demo.html
+++ b/static/nexus-demo.html
@@ -403,7 +403,7 @@ <h3>Cross-Everything</h3>
 <div id="components" class="section">
   <div class="progress-bar"><div class="progress-fill" style="width:33%"></div></div>
   <h1>The Four Building Blocks</h1>
-  <p class="lead">Nexus has four key concepts. Understanding these unlocks everything else.</p>
+  <p class="lead">Nexus has four key concepts. These four concepts are the foundation of everything in Nexus.</p>
 
   <div style="display:flex;flex-direction:column;gap:20px;">
 

From 8806f699f83dc60f8b096c3693aef7ec0f1ebf68 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 13:32:26 -0500
Subject: [PATCH 07/24] Refine Nexus demo: design, new sections, nav cleanup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx    |   3 +-
 static/nexus-demo.html | 813 +++++++++++++++++------------------------
 2 files changed, 327 insertions(+), 489 deletions(-)

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index 13e510a271..e1dec4defe 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -13,8 +13,7 @@ hide_table_of_contents: true
 ---
 
 <style>{`
-  html, body { background: #0a0e1a !important; }
-  .main-wrapper, article, .theme-doc-markdown { background: #0a0e1a !important; padding: 0 !important; margin: 0 !important; }
+  .main-wrapper, article, .theme-doc-markdown { padding: 0 !important; margin: 0 !important; }
 `}</style>
 
 <iframe
diff --git a/static/nexus-demo.html b/static/nexus-demo.html
index 7eb314240d..282f213721 100644
--- a/static/nexus-demo.html
+++ b/static/nexus-demo.html
@@ -4,31 +4,66 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Temporal Nexus — Interactive Demo</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
   :root {
-    --bg: #0a0e1a;
-    --surface: #111827;
-    --surface2: #1a2236;
-    --border: #1e2d47;
-    --accent: #3b82f6;
-    --accent2: #8b5cf6;
-    --accent3: #10b981;
-    --warn: #f59e0b;
-    --danger: #ef4444;
-    --text: #e2e8f0;
-    --muted: #64748b;
-    --faint: #1e293b;
+    --bg: #f9fafb;
+    --surface: #ffffff;
+    --surface2: #f3f4f6;
+    --border: #e5e7eb;
+    --nav-bg: rgba(255,255,255,0.94);
+    --accent: #1d4ed8;
+    --accent-dim: rgba(29,78,216,.1);
+    --accent2: #7c3aed;
+    --accent2-dim: rgba(124,58,237,.1);
+    --accent3: #059669;
+    --accent3-dim: rgba(5,150,105,.1);
+    --warn: #d97706;
+    --warn-dim: rgba(217,119,6,.1);
+    --danger: #dc2626;
+    --danger-dim: rgba(220,38,38,.1);
+    --text: #111827;
+    --muted: #6b7280;
+    --faint: #f3f4f6;
+    --code-bg: #1e1e2e;
+    --code-border: #2a2a3e;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #141414;
+      --surface: #1a1a1a;
+      --surface2: #222222;
+      --border: #2a2a2a;
+      --nav-bg: rgba(0,0,0,0.94);
+      --accent: #bfdbfe;
+      --accent-dim: rgba(191,219,254,.1);
+      --accent2: #a78bfa;
+      --accent2-dim: rgba(167,139,250,.1);
+      --accent3: #34d399;
+      --accent3-dim: rgba(52,211,153,.1);
+      --warn: #fbbf24;
+      --warn-dim: rgba(251,191,36,.1);
+      --danger: #f87171;
+      --danger-dim: rgba(248,113,113,.1);
+      --text: #f9fafb;
+      --muted: #9ca3af;
+      --faint: #1f2937;
+      --code-bg: #0d0d0d;
+      --code-border: #2a2a2a;
+    }
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; }
+  body { background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.6; }
 
   /* NAV */
   nav {
     position: sticky; top: 0; z-index: 100;
-    background: rgba(10,14,26,0.92); backdrop-filter: blur(12px);
+    background: var(--nav-bg); backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border);
-    display: flex; align-items: center; gap: 8px;
-    padding: 12px 24px;
+    display: flex; align-items: center; gap: 4px;
+    padding: 10px 20px; overflow-x: auto;
   }
   nav .logo { font-weight: 700; font-size: 15px; color: var(--accent); margin-right: 16px; }
   nav button {
@@ -36,17 +71,17 @@
     font-size: 13px; padding: 6px 12px; border-radius: 6px; transition: all .2s;
   }
   nav button:hover { color: var(--text); background: var(--surface2); }
-  nav button.active { color: var(--accent); background: rgba(59,130,246,0.12); }
+  nav button.active { color: var(--accent); background: var(--accent-dim); }
 
   /* SECTIONS */
   .section { display: none; padding: 40px 24px; max-width: 1000px; margin: 0 auto; }
   .section.active { display: block; }
 
-  h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
-  h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; color: var(--accent); }
+  h1 { font-size: 28px; font-weight: 300; letter-spacing: -0.5px; margin-bottom: 8px; }
+  h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--accent); }
   h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
-  p { color: #94a3b8; margin-bottom: 12px; font-size: 14px; }
-  .lead { font-size: 16px; color: var(--text); max-width: 680px; margin-bottom: 32px; }
+  p { color: var(--muted); margin-bottom: 12px; font-size: 14px; }
+  .lead { font-size: 15px; color: var(--text); max-width: 680px; margin-bottom: 32px; }
 
   /* CARDS */
   .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
@@ -173,9 +208,9 @@
 
   /* STATUS LOG */
   .status-log {
-    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
-    padding: 16px; font-family: 'Fira Code', monospace; font-size: 12px;
-    max-height: 200px; overflow-y: auto; margin-bottom: 20px;
+    background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px;
+    padding: 16px; font-family: 'Noto Sans Mono', monospace; font-size: 12px;
+    max-height: 200px; overflow-y: auto; margin-bottom: 20px; color: #cdd6f4;
   }
   .log-line { padding: 2px 0; }
   .log-line .ts { color: var(--muted); }
@@ -185,30 +220,6 @@
   .log-line .ev.error { color: var(--danger); }
   .log-line .msg { color: var(--text); }
 
-  /* CIRCUIT BREAKER */
-  .cb-visual {
-    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
-    padding: 24px; margin: 16px 0;
-  }
-  .cb-states { display: flex; gap: 12px; margin-bottom: 20px; justify-content: center; }
-  .cb-state {
-    padding: 10px 20px; border-radius: 8px; text-align: center;
-    border: 2px solid var(--border); transition: all .3s; flex: 1; max-width: 160px;
-  }
-  .cb-state .cs-label { font-size: 13px; font-weight: 700; }
-  .cb-state .cs-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
-  .cb-state.closed { border-color: var(--accent3); background: rgba(16,185,129,.08); }
-  .cb-state.open { border-color: var(--danger); background: rgba(239,68,68,.08); }
-  .cb-state.half-open { border-color: var(--warn); background: rgba(245,158,11,.08); }
-  .cb-state.inactive { border-color: var(--border); background: none; opacity: 0.4; }
-  .cb-meter {
-    background: var(--surface2); border-radius: 8px; padding: 12px 16px;
-    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
-  }
-  .cb-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
-  .cb-bar { height: 100%; border-radius: 4px; transition: width .5s, background .5s; }
-  .cb-count { font-size: 14px; font-weight: 700; min-width: 30px; text-align: right; }
-
   /* COMPARISON TABLE */
   table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
   th { background: var(--surface2); padding: 10px 14px; text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; }
@@ -248,15 +259,15 @@
 
   /* CODE */
   pre {
-    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
-    padding: 16px; font-family: 'Fira Code', monospace; font-size: 12px;
-    overflow-x: auto; margin-bottom: 16px; line-height: 1.7;
+    background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px;
+    padding: 16px; font-family: 'Noto Sans Mono', 'Fira Code', monospace; font-size: 12px;
+    overflow-x: auto; margin-bottom: 16px; line-height: 1.7; color: #cdd6f4;
   }
-  .kw { color: #c084fc; }
-  .fn { color: #60a5fa; }
-  .str { color: #34d399; }
-  .cm { color: #475569; }
-  .ty { color: #fbbf24; }
+  .kw { color: #cba6f7; }
+  .fn { color: #89b4fa; }
+  .str { color: #a6e3a1; }
+  .cm { color: #6c7086; }
+  .ty { color: #f9e2af; }
 
   /* PROGRESS */
   .progress-bar { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 32px; overflow: hidden; }
@@ -280,6 +291,56 @@
   @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
   @keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
   .animate-in { animation: slideIn .4s ease forwards; }
+
+  /* ── BUILD IT ──────────────────────────────── */
+  .buildit-layout {
+    display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin: 24px 0;
+  }
+  @media (max-width: 680px) { .buildit-layout { grid-template-columns: 1fr; } }
+  .buildit-steps { display: flex; flex-direction: column; gap: 6px; }
+  .bs-btn {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+    padding: 10px 14px; cursor: pointer; text-align: left; color: var(--text);
+    transition: all .15s; font-family: inherit;
+  }
+  .bs-btn:hover { border-color: var(--accent); }
+  .bs-btn.active { border-color: var(--accent); background: var(--accent-dim); }
+  .bs-btn .bs-num { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
+  .bs-btn .bs-title { font-size: 13px; font-weight: 600; }
+  .buildit-panel {
+    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
+  }
+  .buildit-file {
+    background: var(--surface2); border-bottom: 1px solid var(--border);
+    padding: 8px 16px; font-family: 'Noto Sans Mono', monospace; font-size: 11px; color: var(--muted);
+    display: flex; align-items: center; gap: 8px;
+  }
+  .buildit-file .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .6; }
+  .buildit-panel pre { margin: 0; border: none; border-radius: 0; }
+  .buildit-note {
+    border-top: 1px solid var(--border); padding: 12px 16px;
+    font-size: 13px; color: var(--muted); line-height: 1.5;
+  }
+  .buildit-note strong { color: var(--text); }
+  .hl { background: rgba(191,219,254,.12); border-left: 2px solid var(--accent); padding-left: 4px; margin-left: -4px; }
+
+  /* ── RUN IT ────────────────────────────────── */
+  .runit-cmd {
+    background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px;
+    padding: 14px 16px; font-family: 'Noto Sans Mono', monospace; font-size: 12px;
+    color: #cdd6f4; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px;
+  }
+  .runit-cmd .prompt { color: #6c7086; user-select: none; }
+  .runit-cmd .cmd { flex: 1; }
+  .runit-link {
+    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
+    border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
+    border: 1px solid var(--border); color: var(--text); background: var(--surface);
+    transition: all .2s; margin-right: 8px; margin-bottom: 8px;
+  }
+  .runit-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
+  .runit-link.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+  .runit-link.primary:hover { opacity: .88; color: var(--bg); }
 </style>
 </head>
 <body>
@@ -289,8 +350,8 @@
   <button class="active" onclick="showSection('overview', this)">What is Nexus?</button>
   <button onclick="showSection('components', this)">Components</button>
   <button onclick="showSection('flow', this)">How It Works</button>
-  <button onclick="showSection('circuit', this)">Reliability</button>
-  <button onclick="showSection('code', this)">Code</button>
+  <button onclick="showSection('runit', this)">Run It</button>
+  <button onclick="showSection('buildit', this)">Build It</button>
   <button onclick="showSection('quiz', this)">Test Yourself</button>
 </nav>
 
@@ -544,234 +605,91 @@ <h1>How a Nexus Call Works</h1>
   </div>
 
   <div style="text-align:right;margin-top:24px">
-    <button class="btn" onclick="showSection('circuit', document.querySelectorAll('nav button')[3])">Next: Reliability →</button>
+    <button class="btn" onclick="showSection('runit', document.querySelectorAll('nav button')[3])">Next: Run It →</button>
   </div>
 </div>
 
-<!-- CIRCUIT BREAKER / RELIABILITY -->
-<div id="circuit" class="section">
-  <div class="progress-bar"><div class="progress-fill" style="width:67%"></div></div>
-  <h1>Built-in Reliability</h1>
-  <p class="lead">Nexus protects callers from handler failures through automatic retries, circuit breaking, and cancellation propagation.</p>
-
-  <h2>Circuit Breaker</h2>
-  <p>If a handler returns 5 consecutive retryable errors, Nexus trips the circuit breaker for that caller↔endpoint pair. This prevents overloading a struggling handler with a flood of retries.</p>
 
-  <div class="cb-visual">
-    <div class="cb-states">
-      <div class="cb-state closed" id="cb-closed">
-        <div class="cs-label" style="color:var(--accent3)">Closed</div>
-        <div class="cs-sub">Normal operation</div>
-      </div>
-      <div style="display:flex;align-items:center;color:var(--muted);font-size:18px;">→</div>
-      <div class="cb-state inactive" id="cb-open">
-        <div class="cs-label" style="color:var(--danger)">Open</div>
-        <div class="cs-sub">Failing fast</div>
-      </div>
-      <div style="display:flex;align-items:center;color:var(--muted);font-size:18px;">→</div>
-      <div class="cb-state inactive" id="cb-half">
-        <div class="cs-label" style="color:var(--warn)">Half-Open</div>
-        <div class="cs-sub">Testing recovery</div>
-      </div>
-    </div>
+<!-- BUILD IT -->
+<div id="buildit" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:70%"></div></div>
+  <h1>Build It Step by Step</h1>
+  <p class="lead">Walk through a real Nexus service from scratch using the <a href="https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple" style="color:var(--accent)">samples-dotnet NexusSimple</a> sample. Click each step.</p>
 
-    <div class="cb-meter">
-      <div style="font-size:12px;color:var(--muted);min-width:100px">Consecutive Errors</div>
-      <div class="cb-bar-wrap">
-        <div class="cb-bar" id="cbBar" style="width:0%;background:var(--accent3)"></div>
-      </div>
-      <div class="cb-count" id="cbCount" style="color:var(--accent3)">0/5</div>
+  <div class="buildit-layout">
+    <div class="buildit-steps" id="biSteps"></div>
+    <div class="buildit-panel" id="biPanel">
+      <div class="buildit-file"><span class="dot"></span><span id="biFile">select a step</span></div>
+      <pre id="biCode" style="min-height:280px"></pre>
+      <div class="buildit-note" id="biNote"></div>
     </div>
-
-    <div style="display:flex;gap:10px;flex-wrap:wrap;">
-      <button class="btn danger" onclick="cbFail()" id="cbFailBtn">Simulate Error</button>
-      <button class="btn" style="background:var(--accent3)" onclick="cbSuccess()" id="cbSuccessBtn">Simulate Success</button>
-      <button class="btn secondary" onclick="cbReset()">Reset</button>
-      <div id="cbTimer" style="display:none;align-items:center;padding:8px 14px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--warn);">
-        Auto-reset in <span id="cbTimerVal">60</span>s
-      </div>
-    </div>
-
-    <div id="cbMessage" style="margin-top:16px;padding:12px;border-radius:8px;display:none;font-size:13px;"></div>
   </div>
 
-  <h2 style="margin-top:32px">Reliability Comparison</h2>
-  <table>
-    <tr>
-      <th>Feature</th>
-      <th>Raw HTTP Call</th>
-      <th>Nexus Operation</th>
-    </tr>
-    <tr>
-      <td>Automatic retries on transient failure</td>
-      <td class="cross">Manual</td>
-      <td class="check">Built-in</td>
-    </tr>
-    <tr>
-      <td>Caller workflow survives worker restart</td>
-      <td class="cross">No</td>
-      <td class="check">Yes (durable)</td>
-    </tr>
-    <tr>
-      <td>Circuit breaking</td>
-      <td class="cross">Manual</td>
-      <td class="check">Automatic</td>
-    </tr>
-    <tr>
-      <td>Cancel propagates to handler</td>
-      <td class="cross">No</td>
-      <td class="check">Yes</td>
-    </tr>
-    <tr>
-      <td>Cross-namespace auth</td>
-      <td class="cross">DIY</td>
-      <td class="check">mTLS + Allowlists</td>
-    </tr>
-    <tr>
-      <td>Bi-directional observability links</td>
-      <td class="cross">No</td>
-      <td class="check">Yes</td>
-    </tr>
-    <tr>
-      <td>Max operation duration</td>
-      <td class="cross">Request timeout</td>
-      <td class="check">Up to 60 days</td>
-    </tr>
-  </table>
-
-  <h2>Cancellation Propagation</h2>
-  <div class="card">
-    <p>When the caller workflow is canceled, Nexus automatically propagates the cancel signal to any pending Nexus Operations. The handler workflow receives the cancel request and the caller gets a <code>CanceledFailure</code> result.</p>
-    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center;font-size:13px;">
-      <div style="background:var(--danger);color:white;padding:4px 12px;border-radius:6px;">Cancel caller</div>
-      <div style="color:var(--muted)">→ Nexus Machinery →</div>
-      <div style="background:rgba(239,68,68,.15);border:1px solid var(--danger);color:#f87171;padding:4px 12px;border-radius:6px;">Cancel pending ops</div>
-      <div style="color:var(--muted)">→</div>
-      <div style="background:rgba(239,68,68,.15);border:1px solid var(--danger);color:#f87171;padding:4px 12px;border-radius:6px;">Cancel handler workflows</div>
+  <div style="display:flex;gap:10px;margin-top:8px;justify-content:space-between;align-items:center">
+    <div style="display:flex;gap:8px">
+      <button class="btn secondary" onclick="biNav(-1)">← Prev step</button>
+      <button class="btn secondary" onclick="biNav(1)">Next step →</button>
     </div>
-    <p style="margin-top:12px;font-size:12px;">Note: Terminating a caller workflow <em>abandons</em> (does not cancel) pending operations.</p>
-  </div>
-
-  <div style="text-align:right;margin-top:24px">
-    <button class="btn" onclick="showSection('code', document.querySelectorAll('nav button')[4])">Next: Code →</button>
+    <button class="btn" onclick="showSection('buildit', document.querySelectorAll('nav button')[4])">Next: Build It →</button>
   </div>
 </div>
 
-<!-- CODE -->
-<div id="code" class="section">
-  <div class="progress-bar"><div class="progress-fill" style="width:83%"></div></div>
-  <h1>Code Walkthrough</h1>
-  <p class="lead">Here's what using Nexus actually looks like in TypeScript. Three steps: define, implement, call.</p>
+<!-- RUN IT -->
+<div id="runit" class="section">
+  <div class="progress-bar"><div class="progress-fill" style="width:94%"></div></div>
+  <h1>Run a Real Example</h1>
+  <p class="lead">Three official Nexus samples — pick your language and run locally in minutes.</p>
 
   <div class="tabs">
-    <button class="tab active" onclick="switchTab('code-define', this, 'code-tabs')">1. Define Service</button>
-    <button class="tab" onclick="switchTab('code-handler', this, 'code-tabs')">2. Implement Handler</button>
-    <button class="tab" onclick="switchTab('code-caller', this, 'code-tabs')">3. Call from Workflow</button>
+    <button class="tab active" onclick="switchTab('run-dotnet', this, 'run-tabs')">.NET</button>
+    <button class="tab" onclick="switchTab('run-go', this, 'run-tabs')">Go</button>
+    <button class="tab" onclick="switchTab('run-ts', this, 'run-tabs')">TypeScript</button>
   </div>
 
-  <div id="code-define" class="tab-content active" data-group="code-tabs">
-    <p>The service definition is the contract. Both teams share this — usually as a package.</p>
-<pre><span class="cm">// shared/fraud-service.ts (Team B publishes this)</span>
-<span class="kw">import</span> { <span class="ty">defineNexusServiceContract</span>, <span class="ty">WorkflowHandle</span> } <span class="kw">from</span> <span class="str">'@temporalio/nexus'</span>;
-
-<span class="kw">export interface</span> <span class="ty">CheckTransactionInput</span> {
-  transactionId: <span class="ty">string</span>;
-  amount: <span class="ty">number</span>;
-  userId: <span class="ty">string</span>;
-}
-
-<span class="kw">export interface</span> <span class="ty">FraudCheckResult</span> {
-  approved: <span class="ty">boolean</span>;
-  riskScore: <span class="ty">number</span>;
-  reason?: <span class="ty">string</span>;
-}
-
-<span class="cm">// This defines the "contract" both teams agree on</span>
-<span class="kw">export const</span> <span class="fn">fraudService</span> = <span class="fn">defineNexusServiceContract</span>({
-  name: <span class="str">'fraud.v1'</span>,
-  operations: {
-    <span class="cm">// async: runs a full Workflow, can take hours</span>
-    checkTransaction: {
-      input: <span class="ty">WorkflowInput</span>&lt;<span class="ty">CheckTransactionInput</span>&gt;,
-      output: <span class="ty">WorkflowHandle</span>&lt;<span class="ty">FraudCheckResult</span>&gt;,
-    },
-    <span class="cm">// sync: quick score lookup, &lt;10 seconds</span>
-    getQuickScore: {
-      input: <span class="ty">SyncInput</span>&lt;{ userId: <span class="ty">string</span> }&gt;,
-      output: <span class="ty">SyncOutput</span>&lt;{ score: <span class="ty">number</span> }&gt;,
-    }
-  }
-});</pre>
+  <div id="run-dotnet" class="tab-content active" data-group="run-tabs">
+    <div class="card" style="margin-bottom:16px">
+      <div class="tag tag-blue" style="margin-bottom:10px">samples-dotnet / NexusSimple</div>
+      <p>Defines a typed <code>IHelloService</code> interface with sync Echo and async SayHello (workflow-backed) operations across two namespaces.</p>
+      <div style="margin-bottom:12px">
+        <a class="runit-link primary" href="https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple" target="_blank">View on GitHub</a>
+      </div>
+    </div>
+    <h3 style="margin-bottom:12px;color:var(--muted);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.5px">Setup</h3>
+    <div class="runit-cmd"><span class="prompt">#</span><span class="cmd">Create two namespaces + a Nexus endpoint first (see README)</span></div>
+    <div class="runit-cmd"><span class="prompt">$</span><span class="cmd">git clone https://github.com/temporalio/samples-dotnet && cd samples-dotnet/src/NexusSimple</span></div>
+    <h3 style="margin:16px 0 12px;color:var(--muted);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.5px">Run (3 terminals)</h3>
+    <div class="runit-cmd"><span class="prompt">T1 $</span><span class="cmd">dotnet run handler-worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T2 $</span><span class="cmd">dotnet run caller-worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T3 $</span><span class="cmd">dotnet run caller-workflow<br><span style="color:var(--accent3)"># Output: ¡Hola! Temporal 👋</span></span></div>
   </div>
 
-  <div id="code-handler" class="tab-content" data-group="code-tabs">
-    <p>Team B implements the handler in their own worker — using their own workflows internally.</p>
-<pre><span class="cm">// fraud-team/worker.ts (Team B's implementation)</span>
-<span class="kw">import</span> { <span class="ty">NexusWorker</span>, <span class="ty">NewWorkflowRunOperation</span>, <span class="ty">NewSyncOperation</span> } <span class="kw">from</span> <span class="str">'@temporalio/nexus'</span>;
-<span class="kw">import</span> { <span class="fn">fraudService</span> } <span class="kw">from</span> <span class="str">'../shared/fraud-service'</span>;
-
-<span class="kw">const</span> <span class="fn">fraudHandler</span> = <span class="fn">fraudService</span>.implement({
-  <span class="cm">// Async: delegate to internal Workflow</span>
-  checkTransaction: <span class="fn">NewWorkflowRunOperation</span>({
-    <span class="kw">async</span> <span class="fn">start</span>(input, ctx) {
-      <span class="kw">const</span> client = ctx.getClient();
-      <span class="cm">// Team B starts their OWN workflow internally</span>
-      <span class="kw">return</span> <span class="kw">await</span> client.workflow.<span class="fn">start</span>(FraudCheckWorkflow, {
-        args: [input],
-        taskQueue: <span class="str">'fraud-task-queue'</span>,
-        workflowId: <span class="str">`fraud-</span>${input.transactionId}<span class="str">`</span>,
-      });
-    }
-  }),
-
-  <span class="cm">// Sync: fast lookup, no Workflow needed</span>
-  getQuickScore: <span class="fn">NewSyncOperation</span>({
-    <span class="kw">async</span> <span class="fn">handler</span>(input) {
-      <span class="kw">const</span> score = <span class="kw">await</span> <span class="fn">scoreCache</span>.<span class="fn">get</span>(input.userId);
-      <span class="kw">return</span> { score };
-    }
-  }),
-});
-
-<span class="cm">// Run a Worker that polls the Endpoint's task queue</span>
-<span class="kw">const</span> worker = <span class="kw">await</span> <span class="ty">NexusWorker</span>.<span class="fn">create</span>({
-  taskQueue: <span class="str">'fraud-task-queue'</span>,
-  nexusServices: [fraudHandler],
-});</pre>
+  <div id="run-go" class="tab-content" data-group="run-tabs">
+    <div class="card" style="margin-bottom:16px">
+      <div class="tag tag-purple" style="margin-bottom:10px">samples-go / nexus</div>
+      <p>Go implementation of the same Hello/Echo pattern with sync and workflow-backed async operations.</p>
+      <div style="margin-bottom:12px">
+        <a class="runit-link primary" href="https://github.com/temporalio/samples-go/tree/main/nexus" target="_blank">View on GitHub</a>
+      </div>
+    </div>
+    <div class="runit-cmd"><span class="prompt">$</span><span class="cmd">git clone https://github.com/temporalio/samples-go && cd samples-go/nexus</span></div>
+    <div class="runit-cmd"><span class="prompt">T1 $</span><span class="cmd">go run ./handler/worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T2 $</span><span class="cmd">go run ./caller/worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T3 $</span><span class="cmd">go run ./caller/starter</span></div>
   </div>
 
-  <div id="code-caller" class="tab-content" data-group="code-tabs">
-    <p>Team A calls the Nexus Service from their Workflow — it looks just like calling any other activity.</p>
-<pre><span class="cm">// payments-team/workflow.ts (Team A's caller)</span>
-<span class="kw">import</span> { <span class="ty">proxyActivities</span>, <span class="ty">executeNexusOperation</span> } <span class="kw">from</span> <span class="str">'@temporalio/workflow'</span>;
-<span class="kw">import</span> { <span class="fn">fraudService</span> } <span class="kw">from</span> <span class="str">'../shared/fraud-service'</span>; <span class="cm">// shared package</span>
-
-<span class="kw">export async function</span> <span class="fn">PaymentWorkflow</span>(payment: <span class="ty">Payment</span>): <span class="ty">Promise</span>&lt;<span class="ty">Result</span>&gt; {
-  <span class="cm">// 1. Call the Nexus Operation — fully durable, typed</span>
-  <span class="kw">const</span> fraudResult = <span class="kw">await</span> <span class="fn">executeNexusOperation</span>({
-    endpoint: <span class="str">'fraud-detection-prod'</span>, <span class="cm">// Nexus Endpoint name</span>
-    service: fraudService,
-    operation: fraudService.operations.checkTransaction,
-    input: {
-      transactionId: payment.id,
-      amount: payment.amount,
-      userId: payment.userId,
-    },
-    <span class="cm">// Total duration caller will wait (up to 60 days)</span>
-    scheduleToCloseTimeout: <span class="str">'24h'</span>,
-  });
-
-  <span class="cm">// 2. Caller workflow was suspended during the check</span>
-  <span class="cm">// Now it has the result — fully typed!</span>
-  <span class="kw">if</span> (!fraudResult.approved) {
-    <span class="kw">throw</span> <span class="kw">new</span> <span class="ty">Error</span>(<span class="str">`Fraud detected: </span>${fraudResult.reason}<span class="str">`</span>);
-  }
-
-  <span class="kw">return</span> <span class="fn">processApprovedPayment</span>(payment);
-}</pre>
-    <div class="card" style="border-color:var(--accent3);background:rgba(16,185,129,.04);margin-top:0">
-      <p style="margin:0;font-size:13px;color:#34d399;">The caller never imports Team B's internal code. If Team B changes their implementation — swapping FraudCheckWorkflow for a new ML model — Team A's code doesn't change at all.</p>
+  <div id="run-ts" class="tab-content" data-group="run-tabs">
+    <div class="card" style="margin-bottom:16px">
+      <div class="tag tag-green" style="margin-bottom:10px">samples-typescript / nexus-hello</div>
+      <p>TypeScript version using <code>nexus-rpc</code> and <code>@temporalio/nexus</code>.</p>
+      <div style="margin-bottom:12px">
+        <a class="runit-link primary" href="https://github.com/temporalio/samples-typescript/tree/main/nexus-hello" target="_blank">View on GitHub</a>
+        <a class="runit-link" href="https://stackblitz.com/github/temporalio/samples-typescript/tree/main/nexus-hello" target="_blank">Open in StackBlitz</a>
+      </div>
     </div>
+    <div class="runit-cmd"><span class="prompt">$</span><span class="cmd">git clone https://github.com/temporalio/samples-typescript && cd samples-typescript/nexus-hello && npm install</span></div>
+    <div class="runit-cmd"><span class="prompt">T1 $</span><span class="cmd">npm run handler-worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T2 $</span><span class="cmd">npm run caller-worker</span></div>
+    <div class="runit-cmd"><span class="prompt">T3 $</span><span class="cmd">npm run caller-workflow</span></div>
   </div>
 
   <div style="text-align:right;margin-top:24px">
@@ -943,248 +861,168 @@ <h1>Test Your Understanding</h1>
 function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
 
 // ──────────────────────────────────────────────
-// CIRCUIT BREAKER
-// ──────────────────────────────────────────────
-let cbErrors = 0;
-let cbState = 'closed'; // closed, open, half-open
-let cbTimerInterval = null;
-
-function cbUpdateUI() {
-  const states = ['cb-closed','cb-open','cb-half'];
-  const activeMap = { closed: 'cb-closed', open: 'cb-open', 'half-open': 'cb-half' };
-  states.forEach(s => {
-    const el = document.getElementById(s);
-    el.classList.toggle('inactive', el.id !== activeMap[cbState]);
-  });
-
-  const pct = Math.min((cbErrors / 5) * 100, 100);
-  const bar = document.getElementById('cbBar');
-  const count = document.getElementById('cbCount');
-  bar.style.width = pct + '%';
-
-  if (cbErrors < 3) { bar.style.background = 'var(--accent3)'; count.style.color = 'var(--accent3)'; }
-  else if (cbErrors < 5) { bar.style.background = 'var(--warn)'; count.style.color = 'var(--warn)'; }
-  else { bar.style.background = 'var(--danger)'; count.style.color = 'var(--danger)'; }
-
-  count.textContent = `${Math.min(cbErrors,5)}/5`;
-}
-
-function cbShowMessage(msg, color) {
-  const el = document.getElementById('cbMessage');
-  el.style.display = 'block';
-  el.style.background = `rgba(${color},.1)`;
-  el.style.color = `rgb(${color})`;
-  el.style.border = `1px solid rgba(${color},.3)`;
-  el.textContent = msg;
-}
-
-function cbFail() {
-  if (cbState === 'open') {
-    cbShowMessage('Circuit is OPEN — request fails immediately without calling handler. This protects the handler from more load.', '239,68,68');
-    return;
-  }
-  cbErrors++;
-  cbUpdateUI();
-
-  if (cbErrors >= 5 && cbState !== 'open') {
-    cbState = 'open';
-    cbUpdateUI();
-    cbShowMessage('Circuit TRIPPED! 5 consecutive errors. Requests will fail fast for 60 seconds to let the handler recover.', '239,68,68');
-    document.getElementById('cbTimer').style.display = 'flex';
-    let t = 60;
-    document.getElementById('cbTimerVal').textContent = t;
-    cbTimerInterval = setInterval(() => {
-      t--;
-      document.getElementById('cbTimerVal').textContent = t;
-      if (t <= 0) {
-        clearInterval(cbTimerInterval);
-        document.getElementById('cbTimer').style.display = 'none';
-        cbState = 'half-open';
-        cbErrors = 4;
-        cbUpdateUI();
-        cbShowMessage('Circuit is HALF-OPEN. Next request will test if the handler has recovered.', '245,158,11');
-      }
-    }, 1000);
-  } else if (cbState === 'closed') {
-    cbShowMessage(`Error ${cbErrors}/5. Nexus will retry automatically. ${5 - cbErrors} more consecutive errors will trip the circuit.`, '239,68,68');
-  } else if (cbState === 'half-open') {
-    cbState = 'open';
-    cbErrors = 5;
-    cbUpdateUI();
-    cbShowMessage('Test request failed — circuit re-opens. Waiting another 60 seconds.', '239,68,68');
-  }
-}
-
-function cbSuccess() {
-  if (cbState === 'open') {
-    cbShowMessage('Circuit is OPEN — success not possible right now. Wait for half-open state.', '245,158,11');
-    return;
-  }
-  if (cbState === 'half-open') {
-    cbState = 'closed';
-    cbErrors = 0;
-    clearInterval(cbTimerInterval);
-    document.getElementById('cbTimer').style.display = 'none';
-    cbUpdateUI();
-    cbShowMessage('Success! Circuit is CLOSED again. Handler has recovered.', '16,185,129');
-    return;
-  }
-  if (cbErrors > 0) {
-    cbErrors = Math.max(0, cbErrors - 1);
-    cbUpdateUI();
-  }
-  cbShowMessage('Success! Error count reset to 0. Circuit remains closed.', '16,185,129');
-  cbErrors = 0;
-  cbUpdateUI();
-}
-
-function cbReset() {
-  clearInterval(cbTimerInterval);
-  cbErrors = 0;
-  cbState = 'closed';
-  document.getElementById('cbTimer').style.display = 'none';
-  document.getElementById('cbMessage').style.display = 'none';
-  cbUpdateUI();
-}
-
-// ──────────────────────────────────────────────
-// QUIZ
+// BUILD IT
 // ──────────────────────────────────────────────
-const quizData = [
+const biSteps = [
   {
-    q: "What problem does Temporal Nexus primarily solve?",
-    options: [
-      "Making workflows run faster",
-      "Connecting workflows across team and namespace boundaries safely",
-      "Replacing HTTP APIs entirely",
-      "Scheduling recurring jobs"
-    ],
-    correct: 1,
-    explanation: "Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries — enabling modular architecture without tight coupling."
+    num: 'Step 1 of 6', title: 'Define the contract',
+    file: 'IHelloService.cs',
+    code: `<span class="cm">// Shared between both teams — handler and caller</span>
+[<span class="ty">NexusService</span>]
+<span class="kw">public interface</span> <span class="ty">IHelloService</span>
+{
+    <span class="kw">static readonly string</span> EndpointName =
+        <span class="str">"nexus-simple-endpoint"</span>;
+
+    [<span class="ty">NexusOperation</span>]
+    <span class="ty">Task</span>&lt;<span class="ty">EchoOutput</span>&gt; <span class="fn">Echo</span>(<span class="ty">EchoInput</span> input);
+
+    [<span class="ty">NexusOperation</span>]
+    <span class="ty">Task</span>&lt;<span class="ty">HelloOutput</span>&gt; <span class="fn">SayHello</span>(<span class="ty">HelloInput</span> input);
+
+    <span class="kw">record</span> <span class="ty">EchoInput</span>(<span class="kw">string</span> Message);
+    <span class="kw">record</span> <span class="ty">EchoOutput</span>(<span class="kw">string</span> Message);
+    <span class="kw">record</span> <span class="ty">HelloInput</span>(<span class="kw">string</span> Name, <span class="ty">HelloLanguage</span> Language);
+    <span class="kw">record</span> <span class="ty">HelloOutput</span>(<span class="kw">string</span> Message);
+    <span class="kw">enum</span> <span class="ty">HelloLanguage</span> { En, Fr, De, Es, Tr }
+}`,
+    note: '<strong>[NexusService]</strong> marks the interface as a Nexus service. <strong>[NexusOperation]</strong> marks each callable method. Both teams share this file — usually as a shared package or project reference. Neither team\'s internal code leaks through.'
   },
   {
-    q: "What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?",
-    options: ["10 seconds", "24 hours", "60 days", "1 year"],
-    correct: 2,
-    explanation: "Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team operations."
+    num: 'Step 2 of 6', title: 'Implement sync handler',
+    file: 'Handler/HelloService.cs',
+    code: `<span class="cm">// Handler team's implementation</span>
+[<span class="ty">NexusServiceHandler</span>(<span class="kw">typeof</span>(<span class="ty">IHelloService</span>))]
+<span class="kw">public class</span> <span class="ty">HelloService</span>
+{
+    <span class="cm">// Echo is SYNCHRONOUS — returns immediately (&lt;10s)</span>
+    <span class="kw">public</span> <span class="ty">Task</span>&lt;<span class="ty">IHelloService.EchoOutput</span>&gt; <span class="fn">Echo</span>(
+        <span class="ty">IHelloService.EchoInput</span> input,
+        <span class="ty">NexusOperationContext</span> ctx) =>
+        <span class="ty">Task</span>.<span class="fn">FromResult</span>(<span class="kw">new</span> <span class="ty">IHelloService.EchoOutput</span>(input.Message));
+
+    <span class="cm">// SayHello implemented in the next step...</span>
+}`,
+    note: '<strong>Synchronous operations</strong> run inline in the handler — a plain async method. No workflow is started. Good for quick lookups, scoring, or simple transformations. Must complete in under 10 seconds.'
   },
   {
-    q: "A synchronous Nexus Operation must complete within:",
-    options: ["1 second", "10 seconds", "1 minute", "1 hour"],
-    correct: 1,
-    explanation: "Synchronous operations must complete within 10 seconds. For longer work, use asynchronous operations backed by a Workflow."
+    num: 'Step 3 of 6', title: 'Implement async handler',
+    file: 'Handler/HelloService.cs + HelloHandlerWorkflow.cs',
+    code: `<span class="cm">// Async: SayHello starts a real Workflow</span>
+<span class="kw">public</span> <span class="ty">Task</span>&lt;<span class="ty">IHelloService.HelloOutput</span>&gt; <span class="fn">SayHello</span>(
+    <span class="ty">IHelloService.HelloInput</span> input,
+    <span class="ty">NexusOperationContext</span> ctx) =>
+    ctx.<span class="fn">StartWorkflowAsync</span>(
+        (<span class="ty">HelloHandlerWorkflow</span> wf) => wf.<span class="fn">RunAsync</span>(input),
+        <span class="kw">new</span>() { Id = ctx.RequestId }); <span class="cm">// RequestId = dedup key</span>
+
+<span class="cm">// The workflow it starts (runs in handler namespace)</span>
+[<span class="ty">Workflow</span>]
+<span class="kw">public class</span> <span class="ty">HelloHandlerWorkflow</span>
+{
+    [<span class="ty">WorkflowRun</span>]
+    <span class="kw">public async</span> <span class="ty">Task</span>&lt;<span class="ty">IHelloService.HelloOutput</span>&gt; <span class="fn">RunAsync</span>(
+        <span class="ty">IHelloService.HelloInput</span> input) =>
+        input.Language <span class="kw">switch</span>
+        {
+            <span class="ty">HelloLanguage</span>.En => <span class="kw">new</span>(<span class="str">$"Hello {input.Name} 👋"</span>),
+            <span class="ty">HelloLanguage</span>.Fr => <span class="kw">new</span>(<span class="str">$"Bonjour {input.Name} 👋"</span>),
+            <span class="ty">HelloLanguage</span>.Es => <span class="kw">new</span>(<span class="str">$"¡Hola! {input.Name} 👋"</span>),
+            _ => <span class="kw">throw new</span> <span class="ty">ApplicationFailureException</span>(
+                <span class="str">$"Unsupported: {input.Language}"</span>)
+        };
+}`,
+    note: '<strong>Async operations</strong> start a Temporal Workflow. The caller is suspended until the workflow completes — which can take seconds, hours, or days. Using <strong>ctx.RequestId</strong> as the workflow ID ensures retries don\'t create duplicates.'
   },
   {
-    q: "What is a Nexus Endpoint?",
-    options: [
-      "A general-purpose HTTP reverse proxy",
-      "A named router that maps to a target namespace and task queue",
-      "A workflow definition",
-      "The Temporal Cloud UI"
-    ],
-    correct: 1,
-    explanation: "A Nexus Endpoint is NOT a general HTTP proxy — it's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue."
+    num: 'Step 4 of 6', title: 'Register the handler worker',
+    file: 'Program.cs (handler-worker)',
+    code: `<span class="kw">async</span> <span class="ty">Task</span> <span class="fn">RunHandlerWorkerAsync</span>()
+{
+    <span class="kw">using var</span> worker = <span class="kw">new</span> <span class="ty">TemporalWorker</span>(
+        <span class="kw">await</span> <span class="fn">ConnectClientAsync</span>(
+            <span class="str">"nexus-simple-handler-namespace"</span>),
+        <span class="kw">new</span> <span class="ty">TemporalWorkerOptions</span>(
+            taskQueue: <span class="str">"nexus-simple-handler-sample"</span>)
+            .<span class="fn">AddNexusService</span>(<span class="kw">new</span> <span class="ty">HelloService</span>())
+            .<span class="fn">AddWorkflow</span>&lt;<span class="ty">HelloHandlerWorkflow</span>&gt;());
+
+    <span class="kw">await</span> worker.<span class="fn">ExecuteAsync</span>(tokenSource.Token);
+}`,
+    note: 'The handler worker needs <strong>both</strong> the Nexus service (<code>AddNexusService</code>) and the backing workflow (<code>AddWorkflow</code>) registered. The task queue must match what the Nexus Endpoint is configured to route to.'
   },
   {
-    q: "How many consecutive retryable errors trip the Nexus circuit breaker?",
-    options: ["1", "3", "5", "10"],
-    correct: 2,
-    explanation: "The circuit breaker trips after 5 consecutive retryable errors. It then enters an 'open' state for 60 seconds before transitioning to 'half-open' to test recovery."
-  },
-  {
-    q: "If a caller workflow is CANCELED, what happens to pending Nexus Operations?",
-    options: [
-      "They continue running independently",
-      "They are terminated immediately",
-      "Cancel is propagated to them",
-      "Nothing — they timeout naturally"
-    ],
-    correct: 2,
-    explanation: "Cancellation propagates automatically through Nexus. Canceling the caller workflow sends a cancel signal to all pending Nexus Operations, which then cancel their handler workflows."
+    num: 'Step 5 of 6', title: 'Write the caller workflow',
+    file: 'Caller/HelloCallerWorkflow.cs',
+    code: `[<span class="ty">Workflow</span>]
+<span class="kw">public class</span> <span class="ty">HelloCallerWorkflow</span>
+{
+    [<span class="ty">WorkflowRun</span>]
+    <span class="kw">public async</span> <span class="ty">Task</span>&lt;<span class="kw">string</span>&gt; <span class="fn">RunAsync</span>(
+        <span class="kw">string</span> name,
+        <span class="ty">IHelloService.HelloLanguage</span> language)
+    {
+        <span class="cm">// Typed client — only needs interface + endpoint name</span>
+        <span class="kw">var</span> nexus = <span class="ty">Workflow</span>.<span class="fn">CreateNexusWorkflowClient</span>&lt;<span class="ty">IHelloService</span>&gt;(
+            <span class="ty">IHelloService</span>.EndpointName);
+
+        <span class="cm">// Caller suspends here until SayHello workflow finishes</span>
+        <span class="kw">var</span> result = <span class="kw">await</span> nexus.<span class="fn">ExecuteNexusOperationAsync</span>(
+            svc => svc.<span class="fn">SayHello</span>(<span class="kw">new</span>(name, language)));
+
+        <span class="kw">return</span> result.Message; <span class="cm">// "¡Hola! Temporal 👋"</span>
+    }
+}`,
+    note: 'The caller imports <strong>only the interface</strong> (<code>IHelloService</code>), never the handler team\'s implementation. If the handler team rewrites <code>HelloHandlerWorkflow</code> entirely, this caller code does not change.'
   },
   {
-    q: "What does Team A need from Team B to call a Nexus Service?",
-    options: [
-      "Access to Team B's namespace and credentials",
-      "A copy of Team B's workflow code",
-      "Only the shared service contract definition",
-      "Team B's database connection string"
-    ],
-    correct: 2,
-    explanation: "Team A only needs the shared service contract (the defineNexusServiceContract definition). Team B's internal implementation details — which workflows they use, how they work — are completely hidden."
+    num: 'Step 6 of 6', title: 'Register caller worker & run',
+    file: 'Program.cs (caller-worker + caller-workflow)',
+    code: `<span class="cm">// Caller worker — different namespace</span>
+<span class="kw">using var</span> worker = <span class="kw">new</span> <span class="ty">TemporalWorker</span>(
+    <span class="kw">await</span> <span class="fn">ConnectClientAsync</span>(<span class="str">"nexus-simple-caller-namespace"</span>),
+    <span class="kw">new</span> <span class="ty">TemporalWorkerOptions</span>(<span class="str">"nexus-simple-caller-sample"</span>)
+        .<span class="fn">AddWorkflow</span>&lt;<span class="ty">HelloCallerWorkflow</span>&gt;());
+
+<span class="kw">await</span> worker.<span class="fn">ExecuteAsync</span>(tokenSource.Token);
+
+<span class="cm">// Start the caller workflow</span>
+<span class="kw">var</span> result = <span class="kw">await</span> client.<span class="fn">ExecuteWorkflowAsync</span>(
+    (<span class="ty">HelloCallerWorkflow</span> wf) => wf.<span class="fn">RunAsync</span>(
+        <span class="str">"Temporal"</span>, <span class="ty">IHelloService.HelloLanguage</span>.Es),
+    <span class="kw">new</span>(id: <span class="str">"nexus-hello-id"</span>,
+        taskQueue: <span class="str">"nexus-simple-caller-sample"</span>));
+
+<span class="cm">// result == "¡Hola! Temporal 👋"</span>`,
+    note: 'Two separate namespaces, two separate workers, zero shared internal code — connected by a single Nexus Endpoint and a shared interface file.'
   }
 ];
 
-let quizAnswers = [];
-let quizRendered = false;
-
-function renderQuiz() {
-  quizAnswers = new Array(quizData.length).fill(null);
-  const container = document.getElementById('quizContainer');
-  container.innerHTML = quizData.map((q, qi) => `
-    <div class="quiz-card animate-in" style="animation-delay:${qi*0.05}s">
-      <div class="quiz-q">Q${qi+1}. ${q.q}</div>
-      <div class="quiz-options">
-        ${q.options.map((opt, oi) => `
-          <button class="quiz-opt" onclick="answerQuiz(${qi}, ${oi}, this)">${opt}</button>
-        `).join('')}
-      </div>
-      <div class="quiz-feedback" id="feedback-${qi}"></div>
-    </div>
-  `).join('');
-  document.getElementById('quizScore').style.display = 'none';
-}
-
-function answerQuiz(qi, oi, btn) {
-  if (quizAnswers[qi] !== null) return;
-  quizAnswers[qi] = oi;
-
-  const q = quizData[qi];
-  const opts = btn.closest('.quiz-options').querySelectorAll('.quiz-opt');
-  opts.forEach(o => o.style.pointerEvents = 'none');
-
-  if (oi === q.correct) {
-    btn.classList.add('correct');
-    showFeedback(qi, true, 'Correct! ' + q.explanation);
-  } else {
-    btn.classList.add('wrong');
-    opts[q.correct].classList.add('correct');
-    showFeedback(qi, false, 'Not quite. ' + q.explanation);
-  }
-
-  if (quizAnswers.every(a => a !== null)) {
-    setTimeout(showScore, 500);
-  }
-}
+let biCurrent = 0;
 
-function showFeedback(qi, correct, msg) {
-  const el = document.getElementById(`feedback-${qi}`);
-  el.textContent = msg;
-  el.className = `quiz-feedback show ${correct ? 'correct' : 'wrong'}`;
+function biRender(idx) {
+  biCurrent = idx;
+  const s = biSteps[idx];
+  document.getElementById('biFile').textContent = s.file;
+  document.getElementById('biCode').innerHTML = s.code;
+  document.getElementById('biNote').innerHTML = s.note;
+  document.querySelectorAll('.bs-btn').forEach((b, i) => b.classList.toggle('active', i === idx));
 }
 
-function showScore() {
-  const correct = quizAnswers.filter((a, i) => a === quizData[i].correct).length;
-  const pct = Math.round((correct / quizData.length) * 100);
-  const scoreEl = document.getElementById('quizScore');
-  scoreEl.style.display = 'block';
-  scoreEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-  document.getElementById('scoreText').textContent = `${correct} / ${quizData.length} correct (${pct}%)`;
-  if (pct >= 85) {
-    document.getElementById('scoreEmoji').textContent = 'You got it';
-    document.getElementById('scoreSub').textContent = "You have a solid grasp of Temporal Nexus. You're ready to build.";
-  } else if (pct >= 57) {
-    document.getElementById('scoreEmoji').textContent = 'Getting there';
-    document.getElementById('scoreSub').textContent = "Good foundation. Review the sections on the topics you missed.";
-  } else {
-    document.getElementById('scoreEmoji').textContent = 'Keep exploring';
-    document.getElementById('scoreSub').textContent = "Go back through the demo — the concepts will click. Try again when ready.";
-  }
+function biNav(dir) {
+  const next = Math.max(0, Math.min(biSteps.length - 1, biCurrent + dir));
+  biRender(next);
 }
 
-function resetQuiz() {
-  renderQuiz();
+function initBuildIt() {
+  const container = document.getElementById('biSteps');
+  container.innerHTML = biSteps.map((s, i) => `
+    <button class="bs-btn${i===0?' active':''}" onclick="biRender(${i})">
+      <div class="bs-num">${s.num}</div>
+      <div class="bs-title">${s.title}</div>
+    </button>
+  `).join('');
+  biRender(0);
 }
 
 // ──────────────────────────────────────────────
@@ -1192,6 +1030,7 @@ <h1>Test Your Understanding</h1>
 // ──────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', () => {
   initFlow();
+  initBuildIt();
   renderQuiz();
 });
 </script>

From 631951bf499014d1b508befc57582dfcd8e97a00 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 13:42:15 -0500
Subject: [PATCH 08/24] Restore quiz questions lost in section cleanup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/nexus-demo.html | 125 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/static/nexus-demo.html b/static/nexus-demo.html
index 282f213721..a8df6bd38e 100644
--- a/static/nexus-demo.html
+++ b/static/nexus-demo.html
@@ -1025,6 +1025,131 @@ <h1>Test Your Understanding</h1>
   biRender(0);
 }
 
+// ──────────────────────────────────────────────
+// QUIZ
+// ──────────────────────────────────────────────
+const quizData = [
+  {
+    q: "What problem does Temporal Nexus primarily solve?",
+    options: [
+      "Making workflows run faster",
+      "Connecting workflows across team and namespace boundaries safely",
+      "Replacing HTTP APIs entirely",
+      "Scheduling recurring jobs"
+    ],
+    correct: 1,
+    explanation: "Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries — enabling modular architecture without tight coupling."
+  },
+  {
+    q: "What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?",
+    options: ["10 seconds", "24 hours", "60 days", "1 year"],
+    correct: 2,
+    explanation: "Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team operations."
+  },
+  {
+    q: "A synchronous Nexus Operation must complete within:",
+    options: ["1 second", "10 seconds", "1 minute", "1 hour"],
+    correct: 1,
+    explanation: "Synchronous operations must complete within 10 seconds. For longer work, use asynchronous operations backed by a Workflow."
+  },
+  {
+    q: "What is a Nexus Endpoint?",
+    options: [
+      "A general-purpose HTTP reverse proxy",
+      "A named router that maps to a target namespace and task queue",
+      "A workflow definition",
+      "The Temporal Cloud UI"
+    ],
+    correct: 1,
+    explanation: "A Nexus Endpoint is NOT a general HTTP proxy — it's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue."
+  },
+  {
+    q: "If a caller workflow is canceled, what happens to pending Nexus Operations?",
+    options: [
+      "They continue running independently",
+      "They are terminated immediately",
+      "Cancel is propagated to them",
+      "Nothing — they timeout naturally"
+    ],
+    correct: 2,
+    explanation: "Cancellation propagates automatically through Nexus. Canceling the caller workflow sends a cancel signal to all pending Nexus Operations, which then cancel their handler workflows."
+  },
+  {
+    q: "What does Team A need from Team B to call a Nexus Service?",
+    options: [
+      "Access to Team B's namespace and credentials",
+      "A copy of Team B's workflow code",
+      "Only the shared service contract definition",
+      "Team B's database connection string"
+    ],
+    correct: 2,
+    explanation: "Team A only needs the shared service contract. Team B's internal implementation — which workflows they use, how they work — is completely hidden."
+  }
+];
+
+let quizAnswers = [];
+
+function renderQuiz() {
+  quizAnswers = new Array(quizData.length).fill(null);
+  const container = document.getElementById('quizContainer');
+  container.innerHTML = quizData.map((q, qi) => `
+    <div class="quiz-card animate-in" style="animation-delay:${qi*0.05}s">
+      <div class="quiz-q">Q${qi+1}. ${q.q}</div>
+      <div class="quiz-options">
+        ${q.options.map((opt, oi) => `
+          <button class="quiz-opt" onclick="answerQuiz(${qi}, ${oi}, this)">${opt}</button>
+        `).join('')}
+      </div>
+      <div class="quiz-feedback" id="feedback-${qi}"></div>
+    </div>
+  `).join('');
+  document.getElementById('quizScore').style.display = 'none';
+}
+
+function answerQuiz(qi, oi, btn) {
+  if (quizAnswers[qi] !== null) return;
+  quizAnswers[qi] = oi;
+  const q = quizData[qi];
+  const opts = btn.closest('.quiz-options').querySelectorAll('.quiz-opt');
+  opts.forEach(o => o.style.pointerEvents = 'none');
+  if (oi === q.correct) {
+    btn.classList.add('correct');
+    showFeedback(qi, true, 'Correct! ' + q.explanation);
+  } else {
+    btn.classList.add('wrong');
+    opts[q.correct].classList.add('correct');
+    showFeedback(qi, false, 'Not quite. ' + q.explanation);
+  }
+  if (quizAnswers.every(a => a !== null)) setTimeout(showScore, 500);
+}
+
+function showFeedback(qi, correct, msg) {
+  const el = document.getElementById(`feedback-${qi}`);
+  el.textContent = msg;
+  el.className = `quiz-feedback show ${correct ? 'correct' : 'wrong'}`;
+}
+
+function showScore() {
+  const correct = quizAnswers.filter((a, i) => a === quizData[i].correct).length;
+  const pct = Math.round((correct / quizData.length) * 100);
+  const scoreEl = document.getElementById('quizScore');
+  scoreEl.style.display = 'block';
+  scoreEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  document.getElementById('scoreText').textContent = `${correct} / ${quizData.length} correct (${pct}%)`;
+  if (pct >= 83) {
+    document.getElementById('scoreEmoji').textContent = 'You got it';
+    document.getElementById('scoreSub').textContent = "You have a solid grasp of Temporal Nexus. You're ready to build.";
+  } else if (pct >= 50) {
+    document.getElementById('scoreEmoji').textContent = 'Getting there';
+    document.getElementById('scoreSub').textContent = "Good foundation. Review the sections on the topics you missed.";
+  } else {
+    document.getElementById('scoreEmoji').textContent = 'Keep exploring';
+    document.getElementById('scoreSub').textContent = "Go back through the demo — the concepts will click. Try again when ready.";
+  }
+}
+
+function resetQuiz() { renderQuiz(); }
+
 // ──────────────────────────────────────────────
 // INIT
 // ──────────────────────────────────────────────

From 9ef903f55c94a6690c9049dd65991270b809ce15 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 14:36:50 -0500
Subject: [PATCH 09/24] Convert Nexus demo from static HTML to React components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx                           |  21 +-
 src/components/NexusDemo/BuildIt.tsx          |  82 ++
 .../NexusDemo/ComponentsSection.tsx           | 149 +++
 src/components/NexusDemo/HowItWorks.tsx       | 247 +++++
 src/components/NexusDemo/NexusDemo.module.css | 888 ++++++++++++++++++
 src/components/NexusDemo/Overview.tsx         | 137 +++
 src/components/NexusDemo/Quiz.tsx             | 114 +++
 src/components/NexusDemo/RunIt.tsx            | 191 ++++
 src/components/NexusDemo/buildSteps.ts        | 151 +++
 src/components/NexusDemo/flowSteps.ts         | 106 +++
 src/components/NexusDemo/index.tsx            |  53 ++
 src/components/NexusDemo/quizQuestions.ts     |  71 ++
 12 files changed, 2191 insertions(+), 19 deletions(-)
 create mode 100644 src/components/NexusDemo/BuildIt.tsx
 create mode 100644 src/components/NexusDemo/ComponentsSection.tsx
 create mode 100644 src/components/NexusDemo/HowItWorks.tsx
 create mode 100644 src/components/NexusDemo/NexusDemo.module.css
 create mode 100644 src/components/NexusDemo/Overview.tsx
 create mode 100644 src/components/NexusDemo/Quiz.tsx
 create mode 100644 src/components/NexusDemo/RunIt.tsx
 create mode 100644 src/components/NexusDemo/buildSteps.ts
 create mode 100644 src/components/NexusDemo/flowSteps.ts
 create mode 100644 src/components/NexusDemo/index.tsx
 create mode 100644 src/components/NexusDemo/quizQuestions.ts

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index e1dec4defe..73153d3e0b 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -12,23 +12,6 @@ keywords:
 hide_table_of_contents: true
 ---
 
-<style>{`
-  .main-wrapper, article, .theme-doc-markdown { padding: 0 !important; margin: 0 !important; }
-`}</style>
+import NexusDemo from '@site/src/components/NexusDemo';
 
-<iframe
-  id="nexus-demo-frame"
-  src="/nexus-demo.html"
-  style={{display: 'block', width: '100%', height: '100vh', border: 'none'}}
-  title="Temporal Nexus Interactive Demo"
-  onLoad={() => {
-    const frame = document.getElementById('nexus-demo-frame');
-    const resize = () => {
-      try {
-        frame.style.height = frame.contentDocument.body.scrollHeight + 'px';
-      } catch(e) {}
-    };
-    resize();
-    frame.contentWindow.addEventListener('click', () => setTimeout(resize, 400));
-  }}
-/>
+<NexusDemo />
diff --git a/src/components/NexusDemo/BuildIt.tsx b/src/components/NexusDemo/BuildIt.tsx
new file mode 100644
index 0000000000..797bad2628
--- /dev/null
+++ b/src/components/NexusDemo/BuildIt.tsx
@@ -0,0 +1,82 @@
+import CodeBlock from '@theme/CodeBlock';
+import React, { useState } from 'react';
+import styles from './NexusDemo.module.css';
+import { buildSteps } from './buildSteps';
+
+type Props = { onNext: () => void };
+
+export default function BuildIt({ onNext }: Props) {
+  const [idx, setIdx] = useState(0);
+  const step = buildSteps[idx];
+
+  function go(next: number) {
+    setIdx(Math.max(0, Math.min(buildSteps.length - 1, next)));
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '71%' }} />
+      </div>
+
+      <h1>Build It Step by Step</h1>
+      <p className={styles.lead}>
+        Real code from{' '}
+        <a
+          href="https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          samples-dotnet/NexusSimple
+        </a>
+        . Walk through building a cross-namespace Nexus service from scratch.
+      </p>
+
+      <div className={styles.buildLayout}>
+        {/* Step list sidebar */}
+        <nav className={styles.buildStepList} aria-label="Build steps">
+          {buildSteps.map((s, i) => (
+            <button
+              key={i}
+              className={`${styles.buildStepBtn} ${i === idx ? styles.buildStepBtnActive : ''}`}
+              onClick={() => setIdx(i)}
+              aria-current={i === idx ? 'step' : undefined}
+            >
+              <div className={styles.buildStepNum}>{s.num}</div>
+              <div className={styles.buildStepTitle}>{s.title}</div>
+            </button>
+          ))}
+        </nav>
+
+        {/* Code panel */}
+        <div className={styles.buildPanel}>
+          <div className={styles.buildFileHeader}>{step.file}</div>
+          <CodeBlock language={step.language}>{step.code}</CodeBlock>
+          <div className={styles.buildNote}>{step.note}</div>
+          <div className={styles.buildNav}>
+            <button
+              className={`${styles.btn} ${styles.btnSecondary}`}
+              onClick={() => go(idx - 1)}
+              disabled={idx === 0}
+            >
+              ← Prev
+            </button>
+            <button
+              className={styles.btn}
+              onClick={() => go(idx + 1)}
+              disabled={idx === buildSteps.length - 1}
+            >
+              Next →
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.nextRow}>
+        <button className={styles.btn} onClick={onNext}>
+          Next: Test Yourself →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
new file mode 100644
index 0000000000..03a21fb219
--- /dev/null
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import styles from './NexusDemo.module.css';
+
+type Props = { onNext: () => void };
+
+const components = [
+  {
+    tag: 'tagBlue' as const,
+    tagLabel: 'Endpoint',
+    title: 'Nexus Endpoint',
+    desc: 'A named, versioned router configured in the Temporal control plane. It maps a name (e.g. "fraud-service-endpoint") to a target namespace and task queue. This is the only thing Team A needs to know about Team B\'s infrastructure.',
+    example: '"my-nexus-endpoint"',
+  },
+  {
+    tag: 'tagPurple' as const,
+    tagLabel: 'Service',
+    title: 'Nexus Service',
+    desc: 'A named collection of operations defined by an interface (Go) or decorated class (TypeScript, .NET). Think of it like a gRPC service definition or a typed REST API contract — it describes what\'s callable without exposing how.',
+    example: '[NexusService] IHelloService',
+  },
+  {
+    tag: 'tagGreen' as const,
+    tagLabel: 'Operation',
+    title: 'Nexus Operation',
+    desc: 'A single callable unit within a service. Operations are either synchronous (run inline, return in < 10s) or asynchronous (start a Temporal Workflow, can run for days). The caller\'s code looks the same either way — just await the result.',
+    example: 'Echo() | SayHello()',
+  },
+  {
+    tag: 'tagBlue' as const,
+    tagLabel: 'Registry',
+    title: 'Nexus Registry',
+    desc: 'The Temporal Cloud control plane (or OSS server config) that stores endpoint definitions, access policies, and routing rules. Admins configure which caller namespaces can reach which handler namespaces through which endpoints.',
+    example: 'Temporal Cloud UI / tcld',
+  },
+];
+
+export default function ComponentsSection({ onNext }: Props) {
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '28%' }} />
+      </div>
+
+      <h1>The Four Building Blocks</h1>
+      <p className={styles.lead}>
+        Nexus is composed of four concepts. Once you understand these, the rest falls into place.
+      </p>
+
+      <div className={styles.cardGrid}>
+        {components.map((c) => (
+          <div key={c.title} className={styles.card}>
+            <div className={`${styles.tag} ${styles[c.tag]}`}>{c.tagLabel}</div>
+            <h3 style={{ fontSize: 15, marginBottom: 8 }}>{c.title}</h3>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 10px', lineHeight: 1.6 }}>
+              {c.desc}
+            </p>
+            <code
+              style={{
+                fontSize: 11,
+                color: 'var(--nd-muted)',
+                background: 'var(--nd-surface2)',
+                padding: '2px 6px',
+                borderRadius: 4,
+              }}
+            >
+              {c.example}
+            </code>
+          </div>
+        ))}
+      </div>
+
+      <h2 className={styles.sectionHeading}>Nexus vs. the Alternatives</h2>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Approach</th>
+            <th>Durable</th>
+            <th>Typed contract</th>
+            <th>Cross-namespace</th>
+            <th>Auto-retry</th>
+            <th>Cancel propagation</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            {
+              name: 'Shared namespace',
+              durable: true,
+              typed: false,
+              cross: false,
+              retry: true,
+              cancel: false,
+            },
+            {
+              name: 'HTTP between teams',
+              durable: false,
+              typed: false,
+              cross: true,
+              retry: false,
+              cancel: false,
+            },
+            {
+              name: 'Child workflows',
+              durable: true,
+              typed: true,
+              cross: false,
+              retry: true,
+              cancel: true,
+            },
+            {
+              name: 'Temporal Nexus',
+              durable: true,
+              typed: true,
+              cross: true,
+              retry: true,
+              cancel: true,
+              highlight: true,
+            },
+          ].map((row) => (
+            <tr key={row.name} style={row.highlight ? { background: 'var(--nd-primary-bg)' } : {}}>
+              <td style={{ fontWeight: row.highlight ? 700 : 400 }}>{row.name}</td>
+              <td className={row.durable ? styles.check : styles.cross}>
+                {row.durable ? '✓' : '—'}
+              </td>
+              <td className={row.typed ? styles.check : styles.cross}>
+                {row.typed ? '✓' : '—'}
+              </td>
+              <td className={row.cross ? styles.check : styles.cross}>
+                {row.cross ? '✓' : '—'}
+              </td>
+              <td className={row.retry ? styles.check : styles.cross}>
+                {row.retry ? '✓' : '—'}
+              </td>
+              <td className={row.cancel ? styles.check : styles.cross}>
+                {row.cancel ? '✓' : '—'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div className={styles.nextRow}>
+        <button className={styles.btn} onClick={onNext}>
+          Next: How It Works →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/HowItWorks.tsx b/src/components/NexusDemo/HowItWorks.tsx
new file mode 100644
index 0000000000..0bdf496ae8
--- /dev/null
+++ b/src/components/NexusDemo/HowItWorks.tsx
@@ -0,0 +1,247 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styles from './NexusDemo.module.css';
+import { asyncSteps, FlowMode, FlowStep, syncSteps } from './flowSteps';
+
+type Props = { onNext: () => void };
+
+const NODES = [
+  { title: 'Caller Workflow', sub: 'caller namespace' },
+  { title: 'Nexus Endpoint', sub: 'routes + retries' },
+  { title: 'Handler Worker', sub: 'handler namespace' },
+];
+
+const AUTO_ADVANCE_MS = 1800;
+
+function getTimestamp(): string {
+  const now = new Date();
+  return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+}
+
+export default function HowItWorks({ onNext }: Props) {
+  const [mode, setMode] = useState<FlowMode>('sync');
+  const [stepIdx, setStepIdx] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [log, setLog] = useState<Array<{ ts: string; step: FlowStep }>>([]);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+
+  const steps = mode === 'sync' ? syncSteps : asyncSteps;
+  const currentStep = steps[stepIdx];
+
+  const advance = useCallback(
+    (idx: number) => {
+      const next = Math.min(steps.length - 1, idx);
+      setStepIdx(next);
+      setLog((prev) => [...prev, { ts: getTimestamp(), step: steps[next] }]);
+    },
+    [steps],
+  );
+
+  // Auto-play
+  useEffect(() => {
+    if (playing) {
+      timerRef.current = setTimeout(() => {
+        if (stepIdx < steps.length - 1) {
+          advance(stepIdx + 1);
+        } else {
+          setPlaying(false);
+        }
+      }, AUTO_ADVANCE_MS);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [playing, stepIdx, steps.length, advance]);
+
+  // Scroll log to bottom
+  useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [log]);
+
+  function handleModeChange(next: FlowMode) {
+    setMode(next);
+    setStepIdx(0);
+    setPlaying(false);
+    setLog([]);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }
+
+  function handlePlay() {
+    if (stepIdx >= steps.length - 1) {
+      // reset and play from start
+      setStepIdx(0);
+      setLog([]);
+      setPlaying(true);
+    } else {
+      setPlaying((p) => !p);
+    }
+  }
+
+  function handleStep(dir: -1 | 1) {
+    setPlaying(false);
+    const next = stepIdx + dir;
+    if (next >= 0 && next < steps.length) advance(next);
+  }
+
+  function handleReset() {
+    setPlaying(false);
+    setStepIdx(0);
+    setLog([]);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }
+
+  // Packet position: 0% = left edge of first track, 100% = right edge of second track
+  // Node 0 → pct 0, node 1 → pct 50, node 2 → pct 100
+  const packetPct = currentStep.packetPct;
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '42%' }} />
+      </div>
+
+      <h1>How It Works</h1>
+      <p className={styles.lead}>
+        Step through a live Nexus call to see exactly what happens at each stage — for both
+        synchronous and asynchronous operations.
+      </p>
+
+      <div className={styles.flowOuter}>
+        {/* Mode selector */}
+        <div className={styles.flowModeTabs}>
+          <button
+            className={`${styles.flowModeTab} ${mode === 'sync' ? styles.flowModeTabActive : ''}`}
+            onClick={() => handleModeChange('sync')}
+          >
+            Synchronous (fast)
+          </button>
+          <button
+            className={`${styles.flowModeTab} ${mode === 'async' ? styles.flowModeTabActive : ''}`}
+            onClick={() => handleModeChange('async')}
+          >
+            Asynchronous (long-running)
+          </button>
+        </div>
+
+        {/* Flow diagram */}
+        <div className={styles.flowDiagram}>
+          {NODES.map((node, i) => (
+            <React.Fragment key={node.title}>
+              <div
+                className={`${styles.flowNode} ${currentStep.activeNode === i ? styles.flowNodeActive : ''}`}
+              >
+                <div className={styles.flowNodeTitle}>{node.title}</div>
+                <div className={styles.flowNodeSub}>{node.sub}</div>
+              </div>
+              {i < NODES.length - 1 && (
+                <div className={styles.flowTrackWrap}>
+                  <div className={styles.flowTrack}>
+                    <div
+                      className={styles.flowTrackFill}
+                      style={{
+                        width:
+                          (i === 0 && packetPct >= 50) || (i === 0 && packetPct === 100)
+                            ? '100%'
+                            : i === 1 && packetPct === 100
+                              ? '100%'
+                              : '0%',
+                      }}
+                    />
+                  </div>
+                  {/* Packet rendered on first track only, spanning both */}
+                  {i === 0 && (
+                    <div
+                      className={styles.packet}
+                      style={{
+                        // Map 0–50 to first track, 50–100 to second track
+                        // We render the packet relative to the full diagram width
+                        // but position it relative to flowTrackWrap
+                        // Since there are 2 tracks each at flex:1, we use a wider container
+                        // Actually position relative to the track:
+                        left: `${Math.min(packetPct * 2, 100)}%`,
+                        display: packetPct <= 50 ? 'block' : 'none',
+                      }}
+                    />
+                  )}
+                  {i === 1 && (
+                    <div
+                      className={styles.packet}
+                      style={{
+                        left: `${Math.max((packetPct - 50) * 2, 0)}%`,
+                        display: packetPct >= 50 ? 'block' : 'none',
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+
+        {/* Step detail */}
+        <div className={styles.flowDetail}>
+          <div className={styles.flowDetailLabel}>{currentStep.label}</div>
+          <div className={styles.flowDetailText}>{currentStep.detail}</div>
+        </div>
+
+        {/* Controls */}
+        <div className={styles.flowControls}>
+          <button
+            className={`${styles.btn} ${styles.btnSecondary}`}
+            onClick={() => handleStep(-1)}
+            disabled={stepIdx === 0}
+          >
+            ← Prev
+          </button>
+          <button className={styles.btn} onClick={handlePlay}>
+            {playing ? '⏸ Pause' : stepIdx >= steps.length - 1 ? '↺ Replay' : '▶ Play'}
+          </button>
+          <button
+            className={`${styles.btn} ${styles.btnSecondary}`}
+            onClick={() => handleStep(1)}
+            disabled={stepIdx >= steps.length - 1}
+          >
+            Next →
+          </button>
+          <button className={`${styles.btn} ${styles.btnSecondary}`} onClick={handleReset}>
+            Reset
+          </button>
+          <span className={styles.stepCounter}>
+            {stepIdx + 1} / {steps.length}
+          </span>
+        </div>
+
+        {/* Status log */}
+        {log.length > 0 && (
+          <div className={styles.statusLog} ref={logRef}>
+            {log.map((entry, i) => (
+              <div key={i} className={styles.logLine}>
+                <span className={styles.logTs}>{entry.ts}</span>
+                <span
+                  className={`${styles.logEvent} ${
+                    entry.step.log.level === 'success'
+                      ? styles.logEventSuccess
+                      : entry.step.log.level === 'warn'
+                        ? styles.logEventWarn
+                        : styles.logEventInfo
+                  }`}
+                >
+                  {entry.step.log.event}
+                </span>
+                <span className={styles.logMsg}>{entry.step.log.msg}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.nextRow}>
+        <button className={styles.btn} onClick={onNext}>
+          Next: Run It →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
new file mode 100644
index 0000000000..ec8adcc79c
--- /dev/null
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -0,0 +1,888 @@
+/*
+ * NexusDemo.module.css
+ * Uses Docusaurus IFM variables for automatic light/dark mode support.
+ * Demo-specific accent colors are declared per-theme below.
+ */
+
+/* ── Per-theme accent vars ─────────────────────────────── */
+:global([data-theme='dark']) {
+  --nd-surface: #1e1e1e;
+  --nd-surface2: #252525;
+  --nd-border: rgba(255, 255, 255, 0.1);
+  --nd-muted: #94a3b8;
+  --nd-purple: #a78bfa;
+  --nd-purple-bg: rgba(167, 139, 250, 0.12);
+  --nd-green: #34d399;
+  --nd-green-bg: rgba(52, 211, 153, 0.1);
+  --nd-red: #f87171;
+  --nd-red-bg: rgba(248, 113, 113, 0.1);
+  --nd-amber: #fbbf24;
+  --nd-amber-bg: rgba(251, 191, 36, 0.1);
+  --nd-primary-bg: rgba(191, 219, 254, 0.1);
+}
+
+:global([data-theme='light']) {
+  --nd-surface: #ffffff;
+  --nd-surface2: #f1f5f9;
+  --nd-border: rgba(0, 0, 0, 0.08);
+  --nd-muted: #64748b;
+  --nd-purple: #7c3aed;
+  --nd-purple-bg: rgba(124, 58, 237, 0.08);
+  --nd-green: #059669;
+  --nd-green-bg: rgba(5, 150, 105, 0.08);
+  --nd-red: #dc2626;
+  --nd-red-bg: rgba(220, 38, 38, 0.08);
+  --nd-amber: #d97706;
+  --nd-amber-bg: rgba(217, 119, 6, 0.08);
+  --nd-primary-bg: rgba(29, 78, 216, 0.06);
+}
+
+/* ── Shell ─────────────────────────────────────────────── */
+.shell {
+  font-family: var(--ifm-font-family-base);
+  color: var(--ifm-font-color-base);
+  background: var(--ifm-background-color);
+  min-height: 100vh;
+}
+
+/* ── Nav ───────────────────────────────────────────────── */
+.nav {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  z-index: 50;
+  background: var(--ifm-background-color);
+  border-bottom: 1px solid var(--nd-border);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 24px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.nav::-webkit-scrollbar {
+  display: none;
+}
+
+.navLogo {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--ifm-color-primary);
+  margin-right: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.navBtn {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--nd-muted);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ifm-font-family-base);
+  padding: 12px 14px;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+  flex-shrink: 0;
+  margin-bottom: -1px;
+}
+
+.navBtn:hover {
+  color: var(--ifm-font-color-base);
+}
+
+.navBtnActive {
+  color: var(--ifm-color-primary);
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+/* ── Sections ──────────────────────────────────────────── */
+.section {
+  padding: 40px 24px 64px;
+  max-width: 960px;
+  margin: 0 auto;
+  animation: fadeUp 0.25s ease forwards;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ── Progress bar ──────────────────────────────────────── */
+.progressBar {
+  height: 3px;
+  background: var(--nd-border);
+  border-radius: 2px;
+  margin-bottom: 36px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--ifm-color-primary);
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+
+/* ── Typography ────────────────────────────────────────── */
+.lead {
+  font-size: 16px;
+  color: var(--ifm-font-color-base);
+  max-width: 680px;
+  margin-bottom: 32px;
+  line-height: 1.7;
+}
+
+.sectionHeading {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  margin: 32px 0 16px;
+}
+
+/* ── Cards ─────────────────────────────────────────────── */
+.card {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.cardGrid .card {
+  margin-bottom: 0;
+}
+
+.tag {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tagBlue {
+  background: var(--nd-primary-bg);
+  color: var(--ifm-color-primary);
+}
+
+.tagPurple {
+  background: var(--nd-purple-bg);
+  color: var(--nd-purple);
+}
+
+.tagGreen {
+  background: var(--nd-green-bg);
+  color: var(--nd-green);
+}
+
+.tagRed {
+  background: var(--nd-red-bg);
+  color: var(--nd-red);
+}
+
+/* ── Namespace layout ──────────────────────────────────── */
+.nsContainer {
+  display: flex;
+  gap: 16px;
+  align-items: stretch;
+  flex-wrap: wrap;
+  margin: 24px 0;
+}
+
+.nsBox {
+  flex: 1;
+  min-width: 200px;
+  background: var(--nd-surface);
+  border: 2px solid var(--nd-border);
+  border-radius: 12px;
+  padding: 16px;
+  transition: border-color 0.2s;
+}
+
+.nsBoxCaller {
+  border-color: var(--ifm-color-primary);
+}
+
+.nsBoxHandler {
+  border-color: var(--nd-purple);
+}
+
+.nsLabel {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.nsLabelCaller {
+  background: var(--nd-primary-bg);
+  color: var(--ifm-color-primary);
+}
+
+.nsLabelHandler {
+  background: var(--nd-purple-bg);
+  color: var(--nd-purple);
+}
+
+.nsArrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nd-muted);
+  font-size: 24px;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.endpointBridge {
+  background: var(--nd-primary-bg);
+  border: 2px dashed var(--ifm-color-primary);
+  border-radius: 12px;
+  padding: 14px 20px;
+  text-align: center;
+}
+
+.endpointLabel {
+  font-size: 12px;
+  color: var(--ifm-color-primary);
+  font-weight: 700;
+}
+
+.endpointSub {
+  font-size: 11px;
+  color: var(--nd-muted);
+  margin-top: 4px;
+}
+
+/* ── Workflow blocks ────────────────────────────────────── */
+.wfBlock {
+  background: var(--nd-surface2);
+  border: 1px solid var(--nd-border);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wfIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.wfIconBlue {
+  background: var(--nd-primary-bg);
+  color: var(--ifm-color-primary);
+}
+
+.wfIconPurple {
+  background: var(--nd-purple-bg);
+  color: var(--nd-purple);
+}
+
+/* ── Buttons ────────────────────────────────────────────── */
+.btn {
+  background: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--ifm-font-family-base);
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.btn:hover {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btnSecondary {
+  background: var(--nd-surface2);
+  color: var(--ifm-font-color-base);
+  border: 1px solid var(--nd-border);
+}
+
+.btnSecondary:hover {
+  opacity: 1;
+  background: var(--nd-surface);
+}
+
+.nextRow {
+  text-align: right;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid var(--nd-border);
+}
+
+/* ── How It Works — flow diagram ───────────────────────── */
+.flowOuter {
+  margin: 24px 0;
+}
+
+.flowModeTabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.flowModeTab {
+  padding: 8px 18px;
+  background: none;
+  border: 1px solid var(--nd-border);
+  border-radius: 8px;
+  color: var(--nd-muted);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ifm-font-family-base);
+  transition: all 0.15s;
+}
+
+.flowModeTabActive {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+}
+
+.flowDiagram {
+  position: relative;
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  padding: 28px 20px;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.flowNode {
+  background: var(--nd-surface2);
+  border: 2px solid var(--nd-border);
+  border-radius: 10px;
+  padding: 12px 16px;
+  text-align: center;
+  flex: 0 0 auto;
+  width: 130px;
+  transition: border-color 0.3s, background 0.3s;
+  position: relative;
+  z-index: 2;
+}
+
+.flowNodeActive {
+  border-color: var(--ifm-color-primary);
+  background: var(--nd-primary-bg);
+}
+
+.flowNodeTitle {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.flowNodeSub {
+  font-size: 10px;
+  color: var(--nd-muted);
+  margin-top: 3px;
+}
+
+.flowTrackWrap {
+  flex: 1;
+  position: relative;
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.flowTrack {
+  width: 100%;
+  height: 2px;
+  background: var(--nd-border);
+  position: relative;
+}
+
+.flowTrackFill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--ifm-color-primary);
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.packet {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  box-shadow: 0 0 10px var(--ifm-color-primary);
+  top: 50%;
+  transform: translateY(-50%);
+  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 3;
+}
+
+/* ── Flow step detail ───────────────────────────────────── */
+.flowDetail {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 10px;
+  padding: 16px 20px;
+  margin-bottom: 16px;
+  min-height: 72px;
+}
+
+.flowDetailLabel {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--ifm-color-primary);
+}
+
+.flowDetailText {
+  font-size: 13px;
+  color: var(--nd-muted);
+  line-height: 1.6;
+}
+
+.flowControls {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.stepCounter {
+  font-size: 12px;
+  color: var(--nd-muted);
+  margin-left: auto;
+}
+
+/* ── Status log ─────────────────────────────────────────── */
+.statusLog {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 12px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.logLine {
+  padding: 2px 0;
+  display: flex;
+  gap: 8px;
+}
+
+.logTs {
+  color: var(--nd-muted);
+  flex-shrink: 0;
+}
+
+.logEvent {
+  flex-shrink: 0;
+  min-width: 80px;
+}
+
+.logEventInfo { color: var(--ifm-color-primary); }
+.logEventSuccess { color: var(--nd-green); }
+.logEventWarn { color: var(--nd-amber); }
+
+.logMsg {
+  color: var(--ifm-font-color-base);
+}
+
+/* ── Build It ───────────────────────────────────────────── */
+.buildLayout {
+  display: grid;
+  grid-template-columns: 190px 1fr;
+  gap: 20px;
+  align-items: start;
+}
+
+@media (max-width: 680px) {
+  .buildLayout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.buildStepList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 50px);
+}
+
+.buildStepBtn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--ifm-font-family-base);
+  transition: all 0.15s;
+  width: 100%;
+}
+
+.buildStepBtn:hover {
+  background: var(--nd-surface2);
+  border-color: var(--nd-border);
+}
+
+.buildStepBtnActive {
+  background: var(--nd-primary-bg);
+  border-color: var(--ifm-color-primary);
+}
+
+.buildStepNum {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--nd-muted);
+  margin-bottom: 2px;
+}
+
+.buildStepBtnActive .buildStepNum {
+  color: var(--ifm-color-primary);
+}
+
+.buildStepTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  line-height: 1.4;
+}
+
+.buildPanel {
+  min-width: 0;
+}
+
+.buildFileHeader {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 12px;
+  color: var(--nd-muted);
+  background: var(--nd-surface2);
+  border: 1px solid var(--nd-border);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  padding: 8px 16px;
+}
+
+.buildNote {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  padding: 14px 16px;
+  font-size: 13px;
+  color: var(--nd-muted);
+  line-height: 1.6;
+}
+
+.buildNote strong {
+  color: var(--ifm-font-color-base);
+}
+
+.buildNav {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* ── CodeBlock override — connect to file header ──────── */
+.buildPanel :global(.theme-code-block) {
+  border-radius: 0;
+  margin-bottom: 0;
+  border-top: none;
+}
+
+/* ── Run It ─────────────────────────────────────────────── */
+.runTabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--nd-border);
+  margin-bottom: 24px;
+}
+
+.runTab {
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--nd-muted);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ifm-font-family-base);
+  margin-bottom: -1px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.runTab:hover {
+  color: var(--ifm-font-color-base);
+}
+
+.runTabActive {
+  color: var(--ifm-color-primary);
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+.runSteps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-bottom: 24px;
+}
+
+.runStep {
+  display: flex;
+  gap: 16px;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.runStep:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 30px;
+  bottom: 0;
+  width: 1px;
+  background: var(--nd-border);
+}
+
+.runStepNum {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.runStepBody {
+  flex: 1;
+  padding-top: 4px;
+}
+
+.runStepTitle {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.runStepDesc {
+  font-size: 13px;
+  color: var(--nd-muted);
+  margin-bottom: 10px;
+}
+
+.repoLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: border-color 0.15s;
+}
+
+.repoLink:hover {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+/* ── Quiz ───────────────────────────────────────────────── */
+.quizCard {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 16px;
+}
+
+.quizQ {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: var(--ifm-font-color-base);
+}
+
+.quizOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.quizOpt {
+  background: var(--nd-surface2);
+  border: 2px solid var(--nd-border);
+  border-radius: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ifm-font-family-base);
+  color: var(--ifm-font-color-base);
+  text-align: left;
+  transition: border-color 0.15s;
+  width: 100%;
+}
+
+.quizOpt:hover:not(:disabled) {
+  border-color: var(--ifm-color-primary);
+}
+
+.quizOptCorrect {
+  border-color: var(--nd-green) !important;
+  background: var(--nd-green-bg) !important;
+  color: var(--nd-green) !important;
+}
+
+.quizOptWrong {
+  border-color: var(--nd-red) !important;
+  background: var(--nd-red-bg) !important;
+  color: var(--nd-red) !important;
+}
+
+.quizFeedback {
+  margin-top: 12px;
+  font-size: 13px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  line-height: 1.5;
+}
+
+.quizFeedbackCorrect {
+  background: var(--nd-green-bg);
+  color: var(--nd-green);
+}
+
+.quizFeedbackWrong {
+  background: var(--nd-red-bg);
+  color: var(--nd-red);
+}
+
+.scoreCard {
+  background: var(--nd-surface);
+  border: 2px solid var(--ifm-color-primary);
+  border-radius: 16px;
+  padding: 32px;
+  text-align: center;
+  margin-top: 24px;
+}
+
+.scoreTitle {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.scoreText {
+  font-size: 16px;
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.scoreSub {
+  font-size: 14px;
+  color: var(--nd-muted);
+  margin-bottom: 24px;
+}
+
+/* ── Comparison table ───────────────────────────────────── */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-bottom: 24px;
+}
+
+.table th {
+  background: var(--nd-surface2);
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--nd-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--nd-border);
+  color: var(--ifm-font-color-base);
+}
+
+.table tr:last-child td {
+  border-bottom: none;
+}
+
+.table tr:hover td {
+  background: var(--nd-surface2);
+}
+
+.check {
+  color: var(--nd-green);
+  font-weight: 700;
+}
+
+.cross {
+  color: var(--nd-muted);
+}
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
new file mode 100644
index 0000000000..9d705372f8
--- /dev/null
+++ b/src/components/NexusDemo/Overview.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import styles from './NexusDemo.module.css';
+
+type Props = { onNext: () => void };
+
+export default function Overview({ onNext }: Props) {
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '14%' }} />
+      </div>
+
+      <h1>What is Temporal Nexus?</h1>
+      <p className={styles.lead}>
+        Nexus lets different teams share Temporal workflows across team, namespace, region,
+        and cloud boundaries — without exposing internal implementation details.
+      </p>
+
+      <div
+        className={styles.card}
+        style={{
+          borderColor: 'var(--ifm-color-primary)',
+          background: 'var(--nd-primary-bg)',
+          marginBottom: 32,
+        }}
+      >
+        <h3 style={{ color: 'var(--ifm-color-primary)', marginBottom: 8, fontSize: 15 }}>
+          The core idea in one sentence
+        </h3>
+        <p style={{ fontSize: 15, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.7 }}>
+          Team A can call Team B's workflows like a typed API — with full durability, retries,
+          and fault-tolerance built in — without needing access to Team B's namespace or knowing
+          how their code works.
+        </p>
+      </div>
+
+      <h2 className={styles.sectionHeading}>The Problem Nexus Solves</h2>
+      <div className={styles.cardGrid}>
+        <div className={styles.card} style={{ borderColor: 'var(--nd-red)' }}>
+          <div className={`${styles.tag} ${styles.tagRed}`}>Without Nexus</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Siloed Teams</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            Each team works in their own Temporal namespace. There's no clean way for the Payments
+            team to trigger an action in the Fraud Detection team's workflow without tight coupling
+            or shared credentials. Teams either share namespaces (messy) or build fragile HTTP
+            bridges (unreliable).
+          </p>
+        </div>
+        <div className={styles.card} style={{ borderColor: 'var(--nd-green)' }}>
+          <div className={`${styles.tag} ${styles.tagGreen}`}>With Nexus</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Modular and Safe</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            The Fraud Detection team publishes a Nexus Service with a clear contract. The Payments
+            team calls it from their workflow like any other operation. Nexus handles routing,
+            retries, security, and observability — across any boundary.
+          </p>
+        </div>
+      </div>
+
+      <h2 className={styles.sectionHeading}>What It Looks Like</h2>
+      <div className={styles.nsContainer}>
+        <div className={`${styles.nsBox} ${styles.nsBoxCaller}`}>
+          <div className={`${styles.nsLabel} ${styles.nsLabelCaller}`}>Team A — Payments</div>
+          <div className={styles.wfBlock}>
+            <div className={`${styles.wfIcon} ${styles.wfIconBlue}`}>W</div>
+            <div>
+              <div style={{ fontWeight: 600, fontSize: 13 }}>PaymentWorkflow</div>
+              <div style={{ fontSize: 11, color: 'var(--nd-muted)' }}>Caller Namespace</div>
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '8px 12px',
+              background: 'var(--nd-primary-bg)',
+              borderRadius: 6,
+              fontSize: 12,
+              color: 'var(--nd-muted)',
+            }}
+          >
+            Calls{' '}
+            <code style={{ color: 'var(--ifm-color-primary)', fontSize: 11 }}>
+              fraud.v1/checkTransaction
+            </code>
+            <br />
+            Waits for result (sync or async)
+          </div>
+        </div>
+
+        <div className={styles.nsArrow}>
+          <div style={{ fontSize: 28, color: 'var(--nd-muted)' }}>→</div>
+          <div className={styles.endpointBridge}>
+            <div className={styles.endpointLabel}>Nexus Endpoint</div>
+            <div className={styles.endpointSub}>Routes securely</div>
+            <div className={styles.endpointSub}>Retries · Auth</div>
+          </div>
+          <div style={{ fontSize: 28, color: 'var(--nd-muted)' }}>→</div>
+        </div>
+
+        <div className={`${styles.nsBox} ${styles.nsBoxHandler}`}>
+          <div className={`${styles.nsLabel} ${styles.nsLabelHandler}`}>
+            Team B — Fraud Detection
+          </div>
+          <div className={styles.wfBlock}>
+            <div className={`${styles.wfIcon} ${styles.wfIconPurple}`}>S</div>
+            <div>
+              <div style={{ fontWeight: 600, fontSize: 13 }}>
+                Nexus Service:{' '}
+                <code style={{ color: 'var(--nd-purple)', fontSize: 11 }}>fraud.v1</code>
+              </div>
+              <div style={{ fontSize: 11, color: 'var(--nd-muted)' }}>Handler Namespace</div>
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '8px 12px',
+              background: 'var(--nd-purple-bg)',
+              borderRadius: 6,
+              fontSize: 12,
+              color: 'var(--nd-muted)',
+            }}
+          >
+            Exposes{' '}
+            <code style={{ color: 'var(--nd-purple)', fontSize: 11 }}>checkTransaction</code>
+            <br />
+            Internal workflows stay private
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.nextRow}>
+        <button className={styles.btn} onClick={onNext}>
+          Next: Components →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
new file mode 100644
index 0000000000..1f562f3122
--- /dev/null
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import styles from './NexusDemo.module.css';
+import { quizQuestions } from './quizQuestions';
+
+type AnswerState = number | null;
+
+export default function Quiz() {
+  const [answers, setAnswers] = useState<AnswerState[]>(
+    () => new Array(quizQuestions.length).fill(null),
+  );
+  const [key, setKey] = useState(0); // increment to reset
+
+  const allAnswered = answers.every((a) => a !== null);
+  const correctCount = answers.filter((a, i) => a === quizQuestions[i].correct).length;
+  const pct = Math.round((correctCount / quizQuestions.length) * 100);
+
+  function answer(qi: number, oi: number) {
+    if (answers[qi] !== null) return;
+    setAnswers((prev) => {
+      const next = [...prev];
+      next[qi] = oi;
+      return next;
+    });
+  }
+
+  function reset() {
+    setAnswers(new Array(quizQuestions.length).fill(null));
+    setKey((k) => k + 1);
+  }
+
+  const scoreLabel =
+    pct >= 85 ? 'You got it' : pct >= 57 ? 'Getting there' : 'Keep exploring';
+  const scoreSub =
+    pct >= 85
+      ? "You have a solid grasp of Temporal Nexus. You're ready to build."
+      : pct >= 57
+        ? 'Good foundation. Review the sections on the topics you missed.'
+        : 'Go back through the demo — the concepts will click. Try again when ready.';
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '100%' }} />
+      </div>
+
+      <h1>Test Your Understanding</h1>
+      <p className={styles.lead}>
+        {quizQuestions.length} questions. No time limit. See the explanation after each answer.
+      </p>
+
+      <div key={key}>
+        {quizQuestions.map((q, qi) => {
+          const given = answers[qi];
+          const answered = given !== null;
+
+          return (
+            <div key={qi} className={styles.quizCard}>
+              <div className={styles.quizQ}>
+                Q{qi + 1}. {q.q}
+              </div>
+              <div className={styles.quizOptions}>
+                {q.options.map((opt, oi) => {
+                  const isCorrect = oi === q.correct;
+                  const isChosen = oi === given;
+
+                  let optClass = styles.quizOpt;
+                  if (answered && isChosen && isCorrect) optClass += ` ${styles.quizOptCorrect}`;
+                  else if (answered && isChosen && !isCorrect)
+                    optClass += ` ${styles.quizOptWrong}`;
+                  else if (answered && isCorrect) optClass += ` ${styles.quizOptCorrect}`;
+
+                  return (
+                    <button
+                      key={oi}
+                      className={optClass}
+                      onClick={() => answer(qi, oi)}
+                      disabled={answered}
+                    >
+                      {opt}
+                    </button>
+                  );
+                })}
+              </div>
+
+              {answered && (
+                <div
+                  className={`${styles.quizFeedback} ${
+                    given === q.correct ? styles.quizFeedbackCorrect : styles.quizFeedbackWrong
+                  }`}
+                >
+                  {given === q.correct ? '✓ Correct — ' : '✗ Not quite — '}
+                  {q.explanation}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {allAnswered && (
+        <div className={styles.scoreCard}>
+          <div className={styles.scoreTitle}>{scoreLabel}</div>
+          <div className={styles.scoreText}>
+            {correctCount} / {quizQuestions.length} correct ({pct}%)
+          </div>
+          <div className={styles.scoreSub}>{scoreSub}</div>
+          <button className={styles.btn} onClick={reset}>
+            Try again
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
new file mode 100644
index 0000000000..beb1ad1def
--- /dev/null
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -0,0 +1,191 @@
+import CodeBlock from '@theme/CodeBlock';
+import React, { useState } from 'react';
+import styles from './NexusDemo.module.css';
+
+type Props = { onNext: () => void };
+
+type Lang = 'dotnet' | 'go' | 'typescript';
+
+const TABS: { id: Lang; label: string }[] = [
+  { id: 'dotnet', label: '.NET' },
+  { id: 'go', label: 'Go' },
+  { id: 'typescript', label: 'TypeScript' },
+];
+
+const content: Record<
+  Lang,
+  {
+    repoUrl: string;
+    repoLabel: string;
+    steps: { title: string; desc: string; code: string; lang: string }[];
+  }
+> = {
+  dotnet: {
+    repoUrl: 'https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple',
+    repoLabel: 'temporalio/samples-dotnet — NexusSimple',
+    steps: [
+      {
+        title: 'Clone the repo',
+        desc: 'Get the samples repository.',
+        code: 'git clone https://github.com/temporalio/samples-dotnet.git\ncd samples-dotnet/src/NexusSimple',
+        lang: 'bash',
+      },
+      {
+        title: 'Create namespaces and endpoint',
+        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint in Temporal Cloud or your local server.',
+        code: '# See README.md for tcld / Temporal Cloud UI steps',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the handler worker',
+        desc: 'Run in a separate terminal. This worker handles Nexus operations in the handler namespace.',
+        code: 'dotnet run -- handler-worker',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the caller worker',
+        desc: 'Run in a separate terminal. This worker executes caller workflows in the caller namespace.',
+        code: 'dotnet run -- caller-worker',
+        lang: 'bash',
+      },
+      {
+        title: 'Execute the caller workflow',
+        desc: 'Starts both the Echo and Hello caller workflows and prints the results.',
+        code: 'dotnet run -- caller-workflow\n# Output:\n# Workflow result: Nexus Echo 👋\n# Workflow result: ¡Hola! Temporal 👋',
+        lang: 'bash',
+      },
+    ],
+  },
+  go: {
+    repoUrl: 'https://github.com/temporalio/samples-go/tree/main/nexus',
+    repoLabel: 'temporalio/samples-go — nexus',
+    steps: [
+      {
+        title: 'Clone the repo',
+        desc: 'Get the samples repository.',
+        code: 'git clone https://github.com/temporalio/samples-go.git\ncd samples-go/nexus',
+        lang: 'bash',
+      },
+      {
+        title: 'Create namespaces and endpoint',
+        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint.',
+        code: '# See README.md for tcld / Temporal Cloud UI steps',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the handler worker',
+        desc: 'Run in a separate terminal.',
+        code: 'go run ./handler/worker/main.go',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the caller worker',
+        desc: 'Run in a separate terminal.',
+        code: 'go run ./caller/worker/main.go',
+        lang: 'bash',
+      },
+      {
+        title: 'Run the caller starter',
+        desc: 'Starts both the Echo and Hello caller workflows.',
+        code: 'go run ./caller/starter/main.go\n# Output:\n# Workflow result: Nexus Echo 👋\n# Workflow result: ¡Hola! Temporal 👋',
+        lang: 'bash',
+      },
+    ],
+  },
+  typescript: {
+    repoUrl: 'https://github.com/temporalio/samples-typescript/tree/main/nexus-hello',
+    repoLabel: 'temporalio/samples-typescript — nexus-hello',
+    steps: [
+      {
+        title: 'Clone the repo',
+        desc: 'Get the samples repository.',
+        code: 'git clone https://github.com/temporalio/samples-typescript.git\ncd samples-typescript/nexus-hello\nnpm install',
+        lang: 'bash',
+      },
+      {
+        title: 'Create namespaces and endpoint',
+        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint.',
+        code: '# See README.md for tcld / Temporal Cloud UI steps',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the handler worker',
+        desc: 'Run in a separate terminal.',
+        code: 'npm run start:service-worker',
+        lang: 'bash',
+      },
+      {
+        title: 'Start the caller worker',
+        desc: 'Run in a separate terminal.',
+        code: 'npm run start:caller-worker',
+        lang: 'bash',
+      },
+      {
+        title: 'Execute the caller workflow',
+        desc: 'Runs the Hello caller workflow.',
+        code: 'npm run start:caller-workflow\n# Output:\n# Workflow result: ¡Hola! Temporal 👋',
+        lang: 'bash',
+      },
+    ],
+  },
+};
+
+export default function RunIt({ onNext }: Props) {
+  const [lang, setLang] = useState<Lang>('dotnet');
+  const current = content[lang];
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.progressBar}>
+        <div className={styles.progressFill} style={{ width: '57%' }} />
+      </div>
+
+      <h1>Run It Yourself</h1>
+      <p className={styles.lead}>
+        All three SDK samples are ready to run. Pick a language, follow the steps, and you'll
+        have a working cross-namespace Nexus call in minutes.
+      </p>
+
+      <div className={styles.runTabs}>
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            className={`${styles.runTab} ${lang === t.id ? styles.runTabActive : ''}`}
+            onClick={() => setLang(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <a
+        href={current.repoUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.repoLink}
+        style={{ marginBottom: 28, display: 'inline-flex' }}
+      >
+        <span>↗</span> {current.repoLabel}
+      </a>
+
+      <div className={styles.runSteps}>
+        {current.steps.map((step, i) => (
+          <div key={i} className={styles.runStep}>
+            <div className={styles.runStepNum}>{i + 1}</div>
+            <div className={styles.runStepBody}>
+              <div className={styles.runStepTitle}>{step.title}</div>
+              <div className={styles.runStepDesc}>{step.desc}</div>
+              <CodeBlock language={step.lang}>{step.code}</CodeBlock>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.nextRow}>
+        <button className={styles.btn} onClick={onNext}>
+          Next: Build It →
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/buildSteps.ts b/src/components/NexusDemo/buildSteps.ts
new file mode 100644
index 0000000000..6ab42f9523
--- /dev/null
+++ b/src/components/NexusDemo/buildSteps.ts
@@ -0,0 +1,151 @@
+export type BuildStep = {
+  num: string;
+  title: string;
+  file: string;
+  language: string;
+  code: string;
+  note: string;
+};
+
+export const buildSteps: BuildStep[] = [
+  {
+    num: 'Step 1 of 6',
+    title: 'Define the service contract',
+    file: 'IHelloService.cs',
+    language: 'csharp',
+    code: `[NexusService]
+public interface IHelloService
+{
+    static readonly string EndpointName = "nexus-simple-endpoint";
+
+    [NexusOperation]
+    Task<EchoOutput> Echo(EchoInput input);
+
+    [NexusOperation]
+    Task<HelloOutput> SayHello(HelloInput input);
+
+    public record EchoInput(string Message);
+    public record EchoOutput(string Message);
+    public record HelloInput(string Name, HelloLanguage Language);
+    public record HelloOutput(string Message);
+    public enum HelloLanguage { En, Fr, De, Es, Tr }
+}`,
+    note: 'This is the only file shared between Team A (caller) and Team B (handler). It defines what operations exist and their input/output shapes — nothing more. Team B\'s internal implementation stays private.',
+  },
+  {
+    num: 'Step 2 of 6',
+    title: 'Implement the sync handler',
+    file: 'HelloService.cs',
+    language: 'csharp',
+    code: `[NexusServiceHandler(typeof(IHelloService))]
+public class HelloService
+{
+    [NexusOperationHandler]
+    public IOperationHandler<IHelloService.EchoInput, IHelloService.EchoOutput>
+        Echo() =>
+        OperationHandler.Sync<IHelloService.EchoInput, IHelloService.EchoOutput>(
+            // Runs inline — must complete in under 10 seconds
+            (ctx, input) => new(input.Message));
+}`,
+    note: 'A synchronous handler runs inline in the handler worker and returns a result directly. Use this for fast operations (lookups, validations, transformations). The 10-second limit is enforced by the Nexus runtime.',
+  },
+  {
+    num: 'Step 3 of 6',
+    title: 'Implement the async handler',
+    file: 'HelloService.cs + HelloHandlerWorkflow.workflow.cs',
+    language: 'csharp',
+    code: `// HelloService.cs — add the async operation
+[NexusOperationHandler]
+public IOperationHandler<IHelloService.HelloInput, IHelloService.HelloOutput>
+    SayHello() =>
+    WorkflowRunOperationHandler.FromHandleFactory(
+        (WorkflowRunOperationContext ctx, IHelloService.HelloInput input) =>
+            ctx.StartWorkflowAsync(
+                (HelloHandlerWorkflow wf) => wf.RunAsync(input),
+                // RequestId is stable across retries — prevents duplicate workflows
+                new() { Id = ctx.HandlerContext.RequestId }));
+
+// HelloHandlerWorkflow.workflow.cs
+[Workflow]
+public class HelloHandlerWorkflow
+{
+    [WorkflowRun]
+    public async Task<IHelloService.HelloOutput> RunAsync(
+        IHelloService.HelloInput input) =>
+        input.Language switch
+        {
+            IHelloService.HelloLanguage.En => new("Hello " + input.Name + " 👋"),
+            IHelloService.HelloLanguage.Fr => new("Bonjour " + input.Name + " 👋"),
+            IHelloService.HelloLanguage.Es => new("¡Hola! " + input.Name + " 👋"),
+            _ => throw new ApplicationFailureException(
+                "Unsupported: " + input.Language)
+        };
+}`,
+    note: 'Async operations start a Temporal Workflow and return an operation token to the caller. The caller is suspended until the workflow completes — which can take seconds, hours, or days. Using RequestId as the workflow ID ensures retries never create duplicates.',
+  },
+  {
+    num: 'Step 4 of 6',
+    title: 'Register the handler worker',
+    file: 'Program.cs',
+    language: 'csharp',
+    code: `async Task RunHandlerWorkerAsync()
+{
+    using var worker = new TemporalWorker(
+        await ConnectClientAsync(
+            "nexus-simple-handler-namespace"),
+        new TemporalWorkerOptions(
+            taskQueue: "nexus-simple-handler-sample")
+            .AddNexusService(new HelloService())
+            .AddWorkflow<HelloHandlerWorkflow>());
+
+    await worker.ExecuteAsync(tokenSource.Token);
+}`,
+    note: "The handler worker runs in Team B's namespace. It registers both the Nexus service handler and the backing workflow. The task queue name must match what's configured on the Nexus Endpoint in the Temporal control plane.",
+  },
+  {
+    num: 'Step 5 of 6',
+    title: 'Write the caller workflow',
+    file: 'HelloCallerWorkflow.workflow.cs',
+    language: 'csharp',
+    code: `[Workflow]
+public class HelloCallerWorkflow
+{
+    [WorkflowRun]
+    public async Task<string> RunAsync(
+        string name, IHelloService.HelloLanguage language)
+    {
+        var nexus = Workflow.CreateNexusWorkflowClient<IHelloService>(
+            IHelloService.EndpointName);
+
+        var output = await nexus.ExecuteNexusOperationAsync(
+            svc => svc.SayHello(new(name, language)));
+
+        return output.Message;
+    }
+}`,
+    note: "The caller workflow only knows the shared interface — no knowledge of HelloHandlerWorkflow, Team B's namespace, or how the operation is implemented. The Nexus Endpoint name is the only required configuration.",
+  },
+  {
+    num: 'Step 6 of 6',
+    title: 'Run the caller worker and execute',
+    file: 'Program.cs',
+    language: 'csharp',
+    code: `// Register the caller worker
+using var worker = new TemporalWorker(
+    await ConnectClientAsync("nexus-simple-caller-namespace"),
+    new TemporalWorkerOptions("nexus-simple-caller-sample")
+        .AddWorkflow<HelloCallerWorkflow>());
+
+await worker.ExecuteAsync(tokenSource.Token);
+
+// Start the caller workflow
+var result = await client.ExecuteWorkflowAsync(
+    (HelloCallerWorkflow wf) => wf.RunAsync(
+        "Temporal", IHelloService.HelloLanguage.Es),
+    new(id: "nexus-hello-id",
+        taskQueue: "nexus-simple-caller-sample"));
+
+// result == "¡Hola! Temporal 👋"`,
+    note: 'Two separate namespaces. Two separate workers. Zero shared internal code — connected only by a single Nexus Endpoint and a shared interface file.',
+  },
+];
diff --git a/src/components/NexusDemo/flowSteps.ts b/src/components/NexusDemo/flowSteps.ts
new file mode 100644
index 0000000000..f5405f9087
--- /dev/null
+++ b/src/components/NexusDemo/flowSteps.ts
@@ -0,0 +1,106 @@
+export type FlowMode = 'sync' | 'async';
+export type LogLevel = 'info' | 'success' | 'warn';
+
+export type FlowStep = {
+  label: string;
+  detail: string;
+  /** 0 = caller, 1 = endpoint, 2 = handler */
+  activeNode: 0 | 1 | 2;
+  /** Progress along the track: 0–100 */
+  packetPct: number;
+  log: { level: LogLevel; event: string; msg: string };
+};
+
+export const syncSteps: FlowStep[] = [
+  {
+    label: 'Operation scheduled',
+    detail:
+      'The caller workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the workflow execution.',
+    activeNode: 0,
+    packetPct: 0,
+    log: { level: 'info', event: 'SCHEDULE', msg: 'ScheduleNexusOperation command recorded' },
+  },
+  {
+    label: 'Request forwarded to endpoint',
+    detail:
+      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint URL for the Echo operation.",
+    activeNode: 1,
+    packetPct: 50,
+    log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/Echo → nexus-simple-endpoint' },
+  },
+  {
+    label: 'Handler worker receives task',
+    detail:
+      'The handler worker polls its task queue and picks up the Nexus Task. The handler service is invoked.',
+    activeNode: 2,
+    packetPct: 100,
+    log: { level: 'info', event: 'POLL', msg: 'Handler worker dequeued Nexus Task' },
+  },
+  {
+    label: 'Executes inline (< 10s)',
+    detail:
+      'The Echo handler runs directly in the worker process and returns the result immediately. No workflow is started.',
+    activeNode: 2,
+    packetPct: 100,
+    log: { level: 'success', event: 'COMPLETE', msg: 'Sync handler returned in < 1ms' },
+  },
+  {
+    label: 'Result delivered to caller',
+    detail:
+      'The result is routed back through the Nexus Endpoint and Temporal server. The caller workflow resumes from where it left off.',
+    activeNode: 0,
+    packetPct: 0,
+    log: { level: 'success', event: 'RESUME', msg: 'Caller workflow resumed with result' },
+  },
+];
+
+export const asyncSteps: FlowStep[] = [
+  {
+    label: 'Operation scheduled',
+    detail:
+      'The caller workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the workflow.',
+    activeNode: 0,
+    packetPct: 0,
+    log: { level: 'info', event: 'SCHEDULE', msg: 'ScheduleNexusOperation command recorded' },
+  },
+  {
+    label: 'Request forwarded to endpoint',
+    detail:
+      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint for the SayHello operation.",
+    activeNode: 1,
+    packetPct: 50,
+    log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/SayHello → nexus-simple-endpoint' },
+  },
+  {
+    label: 'Handler starts a workflow',
+    detail:
+      'The handler worker starts HelloHandlerWorkflow and immediately returns an operation token. The caller workflow stays suspended.',
+    activeNode: 2,
+    packetPct: 100,
+    log: { level: 'info', event: 'START_WF', msg: 'HelloHandlerWorkflow started, token returned' },
+  },
+  {
+    label: 'Workflow runs (seconds → days)',
+    detail:
+      'HelloHandlerWorkflow runs to completion. It could call external APIs, wait for signals, or run sub-workflows — for as long as needed.',
+    activeNode: 2,
+    packetPct: 100,
+    log: { level: 'warn', event: 'RUNNING', msg: 'HelloHandlerWorkflow executing...' },
+  },
+  {
+    label: 'Completion callback delivered',
+    detail:
+      'When the handler workflow completes, a callback is delivered back to the caller namespace via the Nexus Endpoint.',
+    activeNode: 1,
+    packetPct: 50,
+    log: { level: 'success', event: 'CALLBACK', msg: 'Completion callback delivered to caller namespace' },
+  },
+  {
+    label: 'Caller workflow resumes',
+    detail:
+      'The Future resolves with the operation result. The caller workflow continues execution as if calling any other API.',
+    activeNode: 0,
+    packetPct: 0,
+    log: { level: 'success', event: 'RESUME', msg: 'Caller resumed: "¡Hola! Temporal 👋"' },
+  },
+];
diff --git a/src/components/NexusDemo/index.tsx b/src/components/NexusDemo/index.tsx
new file mode 100644
index 0000000000..8efa357953
--- /dev/null
+++ b/src/components/NexusDemo/index.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import BuildIt from './BuildIt';
+import ComponentsSection from './ComponentsSection';
+import HowItWorks from './HowItWorks';
+import styles from './NexusDemo.module.css';
+import Overview from './Overview';
+import Quiz from './Quiz';
+import RunIt from './RunIt';
+
+type SectionId = 'overview' | 'components' | 'howitworks' | 'runit' | 'buildit' | 'quiz';
+
+const NAV: { id: SectionId; label: string }[] = [
+  { id: 'overview', label: 'What is Nexus?' },
+  { id: 'components', label: 'Components' },
+  { id: 'howitworks', label: 'How It Works' },
+  { id: 'runit', label: 'Run It' },
+  { id: 'buildit', label: 'Build It' },
+  { id: 'quiz', label: 'Test Yourself' },
+];
+
+export default function NexusDemo() {
+  const [active, setActive] = useState<SectionId>('overview');
+
+  function next(current: SectionId) {
+    const idx = NAV.findIndex((n) => n.id === current);
+    if (idx < NAV.length - 1) setActive(NAV[idx + 1].id);
+  }
+
+  return (
+    <div className={styles.shell}>
+      <nav className={styles.nav} aria-label="Nexus demo sections">
+        <span className={styles.navLogo}>Temporal Nexus</span>
+        {NAV.map((item) => (
+          <button
+            key={item.id}
+            className={`${styles.navBtn} ${active === item.id ? styles.navBtnActive : ''}`}
+            onClick={() => setActive(item.id)}
+            aria-current={active === item.id ? 'page' : undefined}
+          >
+            {item.label}
+          </button>
+        ))}
+      </nav>
+
+      {active === 'overview' && <Overview onNext={() => next('overview')} />}
+      {active === 'components' && <ComponentsSection onNext={() => next('components')} />}
+      {active === 'howitworks' && <HowItWorks onNext={() => next('howitworks')} />}
+      {active === 'runit' && <RunIt onNext={() => next('runit')} />}
+      {active === 'buildit' && <BuildIt onNext={() => next('buildit')} />}
+      {active === 'quiz' && <Quiz />}
+    </div>
+  );
+}
diff --git a/src/components/NexusDemo/quizQuestions.ts b/src/components/NexusDemo/quizQuestions.ts
new file mode 100644
index 0000000000..2516e487d0
--- /dev/null
+++ b/src/components/NexusDemo/quizQuestions.ts
@@ -0,0 +1,71 @@
+export type QuizQuestion = {
+  q: string;
+  options: readonly string[];
+  correct: number;
+  explanation: string;
+};
+
+export const quizQuestions: QuizQuestion[] = [
+  {
+    q: 'What problem does Temporal Nexus primarily solve?',
+    options: [
+      'Making workflows run faster',
+      'Connecting workflows across team and namespace boundaries safely',
+      'Replacing HTTP APIs entirely',
+      'Scheduling recurring jobs',
+    ],
+    correct: 1,
+    explanation:
+      'Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries — enabling modular architecture without tight coupling.',
+  },
+  {
+    q: 'What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?',
+    options: ['10 seconds', '24 hours', '60 days', '1 year'],
+    correct: 2,
+    explanation:
+      'Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team operations.',
+  },
+  {
+    q: 'A synchronous Nexus Operation must complete within:',
+    options: ['1 second', '10 seconds', '1 minute', '1 hour'],
+    correct: 1,
+    explanation:
+      'Synchronous operations must complete within 10 seconds. For longer work, use asynchronous operations backed by a Workflow.',
+  },
+  {
+    q: 'What is a Nexus Endpoint?',
+    options: [
+      'A general-purpose HTTP reverse proxy',
+      'A named router that maps to a target namespace and task queue',
+      'A workflow definition',
+      'The Temporal Cloud UI',
+    ],
+    correct: 1,
+    explanation:
+      "A Nexus Endpoint is not a general HTTP proxy — it's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue.",
+  },
+  {
+    q: 'If a caller workflow is canceled, what happens to pending Nexus Operations?',
+    options: [
+      'They continue running independently',
+      'They are terminated immediately',
+      'Cancel is propagated to them',
+      'Nothing — they timeout naturally',
+    ],
+    correct: 2,
+    explanation:
+      'Cancellation propagates automatically through Nexus. Canceling the caller workflow sends a cancel signal to all pending Nexus Operations, which then cancel their handler workflows.',
+  },
+  {
+    q: "What does Team A need from Team B to call a Nexus Service?",
+    options: [
+      "Access to Team B's namespace and credentials",
+      "A copy of Team B's workflow code",
+      'Only the shared service contract definition',
+      "Team B's database connection string",
+    ],
+    correct: 2,
+    explanation:
+      "Team A only needs the shared service contract. Team B's internal implementation — which workflows they use, how they work — is completely hidden.",
+  },
+];

From 15252c8ceabd5740b8c1b2eade0fd0422cdb47e2 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 17:57:03 -0500
Subject: [PATCH 10/24] Restore Components layout, Key Facts, Run Demo, GitHub
 buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../NexusDemo/ComponentsSection.tsx           | 264 ++++++++++-------
 src/components/NexusDemo/HowItWorks.tsx       |  34 ++-
 src/components/NexusDemo/NexusDemo.module.css | 260 +++++++++++++++++
 src/components/NexusDemo/Overview.tsx         |  57 +++-
 src/components/NexusDemo/RunIt.tsx            | 272 +++++++++---------
 5 files changed, 628 insertions(+), 259 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index 03a21fb219..e97d10fdaa 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -1,40 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './NexusDemo.module.css';
 
 type Props = { onNext: () => void };
 
-const components = [
-  {
-    tag: 'tagBlue' as const,
-    tagLabel: 'Endpoint',
-    title: 'Nexus Endpoint',
-    desc: 'A named, versioned router configured in the Temporal control plane. It maps a name (e.g. "fraud-service-endpoint") to a target namespace and task queue. This is the only thing Team A needs to know about Team B\'s infrastructure.',
-    example: '"my-nexus-endpoint"',
-  },
-  {
-    tag: 'tagPurple' as const,
-    tagLabel: 'Service',
-    title: 'Nexus Service',
-    desc: 'A named collection of operations defined by an interface (Go) or decorated class (TypeScript, .NET). Think of it like a gRPC service definition or a typed REST API contract — it describes what\'s callable without exposing how.',
-    example: '[NexusService] IHelloService',
-  },
-  {
-    tag: 'tagGreen' as const,
-    tagLabel: 'Operation',
-    title: 'Nexus Operation',
-    desc: 'A single callable unit within a service. Operations are either synchronous (run inline, return in < 10s) or asynchronous (start a Temporal Workflow, can run for days). The caller\'s code looks the same either way — just await the result.',
-    example: 'Echo() | SayHello()',
-  },
-  {
-    tag: 'tagBlue' as const,
-    tagLabel: 'Registry',
-    title: 'Nexus Registry',
-    desc: 'The Temporal Cloud control plane (or OSS server config) that stores endpoint definitions, access policies, and routing rules. Admins configure which caller namespaces can reach which handler namespaces through which endpoints.',
-    example: 'Temporal Cloud UI / tcld',
-  },
-];
-
 export default function ComponentsSection({ onNext }: Props) {
+  const [opTab, setOpTab] = useState<'sync' | 'async'>('sync');
+
   return (
     <div className={styles.section}>
       <div className={styles.progressBar}>
@@ -43,33 +14,163 @@ export default function ComponentsSection({ onNext }: Props) {
 
       <h1>The Four Building Blocks</h1>
       <p className={styles.lead}>
-        Nexus is composed of four concepts. Once you understand these, the rest falls into place.
+        Nexus has four key concepts. These four concepts are the foundation of everything in Nexus.
       </p>
 
-      <div className={styles.cardGrid}>
-        {components.map((c) => (
-          <div key={c.title} className={styles.card}>
-            <div className={`${styles.tag} ${styles[c.tag]}`}>{c.tagLabel}</div>
-            <h3 style={{ fontSize: 15, marginBottom: 8 }}>{c.title}</h3>
-            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 10px', lineHeight: 1.6 }}>
-              {c.desc}
-            </p>
-            <code
-              style={{
-                fontSize: 11,
-                color: 'var(--nd-muted)',
-                background: 'var(--nd-surface2)',
-                padding: '2px 6px',
-                borderRadius: 4,
-              }}
+      <div className={styles.componentLayout}>
+
+        {/* 1 — Endpoint */}
+        <div className={styles.card} style={{ borderLeft: '4px solid var(--ifm-color-primary)' }}>
+          <div className={styles.componentRow}>
+            <div
+              className={styles.componentNum}
+              style={{ background: 'var(--nd-primary-bg)', color: 'var(--ifm-color-primary)' }}
+            >
+              1
+            </div>
+            <div className={styles.componentContent}>
+              <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
+              <p className={styles.componentRole}>The address you publish and route through</p>
+              <p>
+                Think of an Endpoint like a <strong>URL for your team's services</strong>. It's a
+                named entry point registered in the Nexus Registry that routes requests to a
+                specific namespace and task queue.
+              </p>
+              <p>
+                It's <em>not</em> a general HTTP proxy — it's specifically designed for Nexus, with
+                built-in auth, retries, and observability.
+              </p>
+              <div className={styles.componentCode}>
+                Endpoint:{' '}
+                <span style={{ color: 'var(--ifm-color-primary)' }}>fraud-detection-prod</span>
+                <br />
+                Routes to:{' '}
+                <span style={{ color: 'var(--nd-purple)' }}>fraud-ns / fraud-task-queue</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 2 — Service */}
+        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-purple)' }}>
+          <div className={styles.componentRow}>
+            <div
+              className={styles.componentNum}
+              style={{ background: 'var(--nd-purple-bg)', color: 'var(--nd-purple)' }}
             >
-              {c.example}
-            </code>
+              2
+            </div>
+            <div className={styles.componentContent}>
+              <h2 className={styles.componentTitle}>Nexus Service</h2>
+              <p className={styles.componentRole}>The contract you publish for others to consume</p>
+              <p>
+                A Service is a <strong>named collection of Nexus Operations</strong> — like an API
+                interface. Multiple services can run in the same worker. Callers import the service
+                definition to get type safety.
+              </p>
+              <p>
+                Example:{' '}
+                <code style={{ color: 'var(--nd-purple)' }}>fraud.v1</code> service exposes{' '}
+                <code>checkTransaction</code>, <code>flagUser</code>, and <code>getScore</code>{' '}
+                operations.
+              </p>
+            </div>
           </div>
-        ))}
+        </div>
+
+        {/* 3 — Operation */}
+        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-green)' }}>
+          <div className={styles.componentRow}>
+            <div
+              className={styles.componentNum}
+              style={{ background: 'var(--nd-green-bg)', color: 'var(--nd-green)' }}
+            >
+              3
+            </div>
+            <div className={styles.componentContent}>
+              <h2 className={styles.componentTitle}>Nexus Operation</h2>
+              <p className={styles.componentRole}>The individual action — sync or async</p>
+
+              <div className={styles.opTabs}>
+                <button
+                  className={`${styles.opTab} ${opTab === 'sync' ? styles.opTabActive : ''}`}
+                  onClick={() => setOpTab('sync')}
+                >
+                  Synchronous
+                </button>
+                <button
+                  className={`${styles.opTab} ${opTab === 'async' ? styles.opTabActive : ''}`}
+                  onClick={() => setOpTab('async')}
+                >
+                  Asynchronous
+                </button>
+              </div>
+
+              {opTab === 'sync' ? (
+                <>
+                  <p>
+                    <strong>Synchronous</strong> operations complete in under 10 seconds. The
+                    result comes back in the same HTTP round-trip. Great for quick lookups, scoring,
+                    or validations.
+                  </p>
+                  <div className={styles.componentCode}>
+                    Caller → [Nexus RPC] → Handler → result → Caller
+                    <br />
+                    Duration: milliseconds to &lt;10 seconds
+                  </div>
+                </>
+              ) : (
+                <>
+                  <p>
+                    <strong>Asynchronous</strong> operations start a Workflow and return an
+                    operation token. The caller workflow is suspended. When the handler workflow
+                    completes, a callback delivers the result.
+                  </p>
+                  <div className={styles.componentCode}>
+                    Caller → [start] → Handler starts Workflow → [token]
+                    <br />
+                    ...time passes (up to 60 days)...
+                    <br />
+                    Handler Workflow completes → [callback] → Caller resumes
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 4 — Registry */}
+        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-amber)' }}>
+          <div className={styles.componentRow}>
+            <div
+              className={styles.componentNum}
+              style={{ background: 'var(--nd-amber-bg)', color: 'var(--nd-amber)' }}
+            >
+              4
+            </div>
+            <div className={styles.componentContent}>
+              <h2 className={styles.componentTitle}>Nexus Registry</h2>
+              <p className={styles.componentRole}>The directory of all Endpoints in your account</p>
+              <p>
+                Scoped to your Temporal Cloud account or self-hosted cluster. Teams register
+                Endpoints here. The Registry is the source of truth for endpoint discovery, access
+                control, and audit logging.
+              </p>
+              <div className={styles.componentPills}>
+                <div className={styles.componentPill}>fraud-detection-prod</div>
+                <div className={styles.componentPill}>kyc-verification-v2</div>
+                <div className={styles.componentPill}>notifications-global</div>
+                <div className={`${styles.componentPill} ${styles.componentPillNew}`}>
+                  + register new
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
 
-      <h2 className={styles.sectionHeading}>Nexus vs. the Alternatives</h2>
+      <h2 className={styles.sectionHeading} style={{ marginTop: 32 }}>Nexus vs. the Alternatives</h2>
       <table className={styles.table}>
         <thead>
           <tr>
@@ -83,57 +184,18 @@ export default function ComponentsSection({ onNext }: Props) {
         </thead>
         <tbody>
           {[
-            {
-              name: 'Shared namespace',
-              durable: true,
-              typed: false,
-              cross: false,
-              retry: true,
-              cancel: false,
-            },
-            {
-              name: 'HTTP between teams',
-              durable: false,
-              typed: false,
-              cross: true,
-              retry: false,
-              cancel: false,
-            },
-            {
-              name: 'Child workflows',
-              durable: true,
-              typed: true,
-              cross: false,
-              retry: true,
-              cancel: true,
-            },
-            {
-              name: 'Temporal Nexus',
-              durable: true,
-              typed: true,
-              cross: true,
-              retry: true,
-              cancel: true,
-              highlight: true,
-            },
+            { name: 'Shared namespace', durable: true,  typed: false, cross: false, retry: true,  cancel: false },
+            { name: 'HTTP between teams', durable: false, typed: false, cross: true,  retry: false, cancel: false },
+            { name: 'Child workflows',    durable: true,  typed: true,  cross: false, retry: true,  cancel: true  },
+            { name: 'Temporal Nexus',     durable: true,  typed: true,  cross: true,  retry: true,  cancel: true, highlight: true },
           ].map((row) => (
             <tr key={row.name} style={row.highlight ? { background: 'var(--nd-primary-bg)' } : {}}>
               <td style={{ fontWeight: row.highlight ? 700 : 400 }}>{row.name}</td>
-              <td className={row.durable ? styles.check : styles.cross}>
-                {row.durable ? '✓' : '—'}
-              </td>
-              <td className={row.typed ? styles.check : styles.cross}>
-                {row.typed ? '✓' : '—'}
-              </td>
-              <td className={row.cross ? styles.check : styles.cross}>
-                {row.cross ? '✓' : '—'}
-              </td>
-              <td className={row.retry ? styles.check : styles.cross}>
-                {row.retry ? '✓' : '—'}
-              </td>
-              <td className={row.cancel ? styles.check : styles.cross}>
-                {row.cancel ? '✓' : '—'}
-              </td>
+              <td className={row.durable ? styles.check : styles.cross}>{row.durable ? '✓' : '—'}</td>
+              <td className={row.typed  ? styles.check : styles.cross}>{row.typed  ? '✓' : '—'}</td>
+              <td className={row.cross  ? styles.check : styles.cross}>{row.cross  ? '✓' : '—'}</td>
+              <td className={row.retry  ? styles.check : styles.cross}>{row.retry  ? '✓' : '—'}</td>
+              <td className={row.cancel ? styles.check : styles.cross}>{row.cancel ? '✓' : '—'}</td>
             </tr>
           ))}
         </tbody>
diff --git a/src/components/NexusDemo/HowItWorks.tsx b/src/components/NexusDemo/HowItWorks.tsx
index 0bdf496ae8..af42c56127 100644
--- a/src/components/NexusDemo/HowItWorks.tsx
+++ b/src/components/NexusDemo/HowItWorks.tsx
@@ -188,6 +188,15 @@ export default function HowItWorks({ onNext }: Props) {
 
         {/* Controls */}
         <div className={styles.flowControls}>
+          <button className={styles.btn} onClick={handlePlay}>
+            {playing
+              ? '⏸ Pause'
+              : log.length === 0
+                ? 'Run Demo'
+                : stepIdx >= steps.length - 1
+                  ? '↺ Replay'
+                  : '▶ Resume'}
+          </button>
           <button
             className={`${styles.btn} ${styles.btnSecondary}`}
             onClick={() => handleStep(-1)}
@@ -195,9 +204,6 @@ export default function HowItWorks({ onNext }: Props) {
           >
             ← Prev
           </button>
-          <button className={styles.btn} onClick={handlePlay}>
-            {playing ? '⏸ Pause' : stepIdx >= steps.length - 1 ? '↺ Replay' : '▶ Play'}
-          </button>
           <button
             className={`${styles.btn} ${styles.btnSecondary}`}
             onClick={() => handleStep(1)}
@@ -235,6 +241,28 @@ export default function HowItWorks({ onNext }: Props) {
             ))}
           </div>
         )}
+
+        {/* Timeline */}
+        <div className={styles.timeline}>
+          {steps.map((step, i) => (
+            <div
+              key={i}
+              className={`${styles.tlStep} ${
+                i < stepIdx
+                  ? styles.tlStepDone
+                  : i === stepIdx && log.length > 0
+                    ? styles.tlStepActive
+                    : ''
+              }`}
+            >
+              <div className={styles.tlNum}>{i + 1}</div>
+              <div className={styles.tlContent}>
+                <div className={styles.tlTitle}>{step.label}</div>
+                <div className={styles.tlDesc}>{step.log.msg}</div>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
 
       <div className={styles.nextRow}>
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index ec8adcc79c..995f35c416 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -199,6 +199,11 @@
   color: var(--nd-red);
 }
 
+.tagAmber {
+  background: var(--nd-amber-bg);
+  color: var(--nd-amber);
+}
+
 /* ── Namespace layout ──────────────────────────────────── */
 .nsContainer {
   display: flex;
@@ -641,6 +646,182 @@
   border-top: none;
 }
 
+/* ── Components section ─────────────────────────────────── */
+.componentLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.componentRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.componentNum {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.componentContent {
+  flex: 1;
+}
+
+.componentTitle {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--ifm-font-color-base);
+}
+
+.componentRole {
+  font-size: 12px;
+  color: var(--nd-muted);
+  margin-bottom: 10px;
+}
+
+.componentCode {
+  background: var(--nd-surface2);
+  border-radius: 6px;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-family: var(--ifm-font-family-monospace);
+  color: var(--nd-muted);
+  margin-top: 10px;
+  line-height: 1.8;
+}
+
+.componentPills {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.componentPill {
+  background: var(--nd-surface2);
+  border: 1px solid var(--nd-border);
+  border-radius: 6px;
+  padding: 5px 12px;
+  font-size: 12px;
+  color: var(--ifm-font-color-base);
+}
+
+.componentPillNew {
+  color: var(--nd-muted);
+  border-style: dashed;
+}
+
+.opTabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--nd-border);
+  margin-bottom: 14px;
+}
+
+.opTab {
+  padding: 6px 14px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--nd-muted);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--ifm-font-family-base);
+  margin-bottom: -1px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.opTab:hover {
+  color: var(--ifm-font-color-base);
+}
+
+.opTabActive {
+  color: var(--ifm-color-primary);
+  border-bottom-color: var(--ifm-color-primary);
+}
+
+/* ── Timeline ────────────────────────────────────────────── */
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: 20px;
+}
+
+.tlStep {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding-bottom: 14px;
+  opacity: 0.3;
+  transform: translateX(-6px);
+  transition: opacity 0.35s, transform 0.35s;
+}
+
+.tlStepActive {
+  opacity: 1;
+  transform: none;
+}
+
+.tlStepDone {
+  opacity: 0.6;
+  transform: none;
+}
+
+.tlNum {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--nd-surface2);
+  border: 2px solid var(--nd-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+  transition: background 0.3s, border-color 0.3s;
+  color: var(--ifm-font-color-base);
+}
+
+.tlStepActive .tlNum {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-background-color);
+}
+
+.tlStepDone .tlNum {
+  background: var(--nd-green);
+  border-color: var(--nd-green);
+  color: var(--ifm-background-color);
+}
+
+.tlContent {
+  flex: 1;
+  padding-top: 2px;
+}
+
+.tlTitle {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 2px;
+  color: var(--ifm-font-color-base);
+}
+
+.tlDesc {
+  font-size: 12px;
+  color: var(--nd-muted);
+}
+
 /* ── Run It ─────────────────────────────────────────────── */
 .runTabs {
   display: flex;
@@ -747,6 +928,85 @@
   text-decoration: none;
 }
 
+/* Run It command blocks */
+.runitLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  border: 1px solid var(--nd-border);
+  color: var(--ifm-font-color-base);
+  background: var(--nd-surface2);
+  transition: all 0.15s;
+}
+
+.runitLink:hover {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.runitLinkPrimary {
+  background: var(--ifm-color-primary);
+  border-color: var(--ifm-color-primary);
+  color: #fff;
+}
+
+.runitLinkPrimary:hover {
+  opacity: 0.88;
+  color: #fff;
+  border-color: var(--ifm-color-primary);
+}
+
+.runitSectionLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--nd-muted);
+  margin: 0 0 10px;
+}
+
+.runitCmd {
+  background: var(--nd-surface);
+  border: 1px solid var(--nd-border);
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 13px;
+  margin-bottom: 6px;
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+}
+
+.runitPrompt {
+  color: var(--nd-muted);
+  user-select: none;
+  flex-shrink: 0;
+  min-width: 30px;
+}
+
+.runitCmdText {
+  color: var(--ifm-font-color-base);
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.runitOutput {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 12px;
+  color: var(--nd-green);
+  padding: 6px 16px;
+  margin-top: 2px;
+  margin-bottom: 8px;
+}
+
 /* ── Quiz ───────────────────────────────────────────────── */
 .quizCard {
   background: var(--nd-surface);
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 9d705372f8..3909752403 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -110,23 +110,54 @@ export default function Overview({ onNext }: Props) {
               <div style={{ fontSize: 11, color: 'var(--nd-muted)' }}>Handler Namespace</div>
             </div>
           </div>
-          <div
-            style={{
-              padding: '8px 12px',
-              background: 'var(--nd-purple-bg)',
-              borderRadius: 6,
-              fontSize: 12,
-              color: 'var(--nd-muted)',
-            }}
-          >
-            Exposes{' '}
-            <code style={{ color: 'var(--nd-purple)', fontSize: 11 }}>checkTransaction</code>
-            <br />
-            Internal workflows stay private
+          <div className={styles.wfBlock} style={{ marginBottom: 0 }}>
+            <div className={`${styles.wfIcon} ${styles.wfIconPurple}`}>W</div>
+            <div>
+              <div style={{ fontWeight: 600, fontSize: 13 }}>FraudCheckWorkflow</div>
+              <div style={{ fontSize: 11, color: 'var(--nd-muted)' }}>
+                Runs internally, result returned
+              </div>
+            </div>
           </div>
         </div>
       </div>
 
+      <h2 className={styles.sectionHeading}>Key Facts</h2>
+      <div className={styles.cardGrid}>
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagBlue}`}>Durability</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Up to 60 Days</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            Async Nexus Operations can run for up to 60 days in Temporal Cloud. The caller workflow
+            is suspended until the result arrives.
+          </p>
+        </div>
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagGreen}`}>Reliability</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>At-Least-Once</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            Nexus Machinery retries failed operations automatically. Pair with workflow ID policies
+            to get exactly-once semantics.
+          </p>
+        </div>
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagPurple}`}>Security</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Built-in Auth</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            mTLS encryption and namespace allowlists control who can call what. No API keys in
+            code.
+          </p>
+        </div>
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagAmber}`}>Boundaries</div>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Cross-Everything</h3>
+          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+            Works across teams, namespaces, regions (AWS &amp; GCP), and clouds — with the same
+            developer experience everywhere.
+          </p>
+        </div>
+      </div>
+
       <div className={styles.nextRow}>
         <button className={styles.btn} onClick={onNext}>
           Next: Components →
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index beb1ad1def..e54f548623 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -1,9 +1,7 @@
-import CodeBlock from '@theme/CodeBlock';
 import React, { useState } from 'react';
 import styles from './NexusDemo.module.css';
 
 type Props = { onNext: () => void };
-
 type Lang = 'dotnet' | 'go' | 'typescript';
 
 const TABS: { id: Lang; label: string }[] = [
@@ -12,127 +10,17 @@ const TABS: { id: Lang; label: string }[] = [
   { id: 'typescript', label: 'TypeScript' },
 ];
 
-const content: Record<
-  Lang,
-  {
-    repoUrl: string;
-    repoLabel: string;
-    steps: { title: string; desc: string; code: string; lang: string }[];
-  }
-> = {
-  dotnet: {
-    repoUrl: 'https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple',
-    repoLabel: 'temporalio/samples-dotnet — NexusSimple',
-    steps: [
-      {
-        title: 'Clone the repo',
-        desc: 'Get the samples repository.',
-        code: 'git clone https://github.com/temporalio/samples-dotnet.git\ncd samples-dotnet/src/NexusSimple',
-        lang: 'bash',
-      },
-      {
-        title: 'Create namespaces and endpoint',
-        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint in Temporal Cloud or your local server.',
-        code: '# See README.md for tcld / Temporal Cloud UI steps',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the handler worker',
-        desc: 'Run in a separate terminal. This worker handles Nexus operations in the handler namespace.',
-        code: 'dotnet run -- handler-worker',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the caller worker',
-        desc: 'Run in a separate terminal. This worker executes caller workflows in the caller namespace.',
-        code: 'dotnet run -- caller-worker',
-        lang: 'bash',
-      },
-      {
-        title: 'Execute the caller workflow',
-        desc: 'Starts both the Echo and Hello caller workflows and prints the results.',
-        code: 'dotnet run -- caller-workflow\n# Output:\n# Workflow result: Nexus Echo 👋\n# Workflow result: ¡Hola! Temporal 👋',
-        lang: 'bash',
-      },
-    ],
-  },
-  go: {
-    repoUrl: 'https://github.com/temporalio/samples-go/tree/main/nexus',
-    repoLabel: 'temporalio/samples-go — nexus',
-    steps: [
-      {
-        title: 'Clone the repo',
-        desc: 'Get the samples repository.',
-        code: 'git clone https://github.com/temporalio/samples-go.git\ncd samples-go/nexus',
-        lang: 'bash',
-      },
-      {
-        title: 'Create namespaces and endpoint',
-        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint.',
-        code: '# See README.md for tcld / Temporal Cloud UI steps',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the handler worker',
-        desc: 'Run in a separate terminal.',
-        code: 'go run ./handler/worker/main.go',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the caller worker',
-        desc: 'Run in a separate terminal.',
-        code: 'go run ./caller/worker/main.go',
-        lang: 'bash',
-      },
-      {
-        title: 'Run the caller starter',
-        desc: 'Starts both the Echo and Hello caller workflows.',
-        code: 'go run ./caller/starter/main.go\n# Output:\n# Workflow result: Nexus Echo 👋\n# Workflow result: ¡Hola! Temporal 👋',
-        lang: 'bash',
-      },
-    ],
-  },
-  typescript: {
-    repoUrl: 'https://github.com/temporalio/samples-typescript/tree/main/nexus-hello',
-    repoLabel: 'temporalio/samples-typescript — nexus-hello',
-    steps: [
-      {
-        title: 'Clone the repo',
-        desc: 'Get the samples repository.',
-        code: 'git clone https://github.com/temporalio/samples-typescript.git\ncd samples-typescript/nexus-hello\nnpm install',
-        lang: 'bash',
-      },
-      {
-        title: 'Create namespaces and endpoint',
-        desc: 'Follow the README to create the two namespaces and the Nexus Endpoint.',
-        code: '# See README.md for tcld / Temporal Cloud UI steps',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the handler worker',
-        desc: 'Run in a separate terminal.',
-        code: 'npm run start:service-worker',
-        lang: 'bash',
-      },
-      {
-        title: 'Start the caller worker',
-        desc: 'Run in a separate terminal.',
-        code: 'npm run start:caller-worker',
-        lang: 'bash',
-      },
-      {
-        title: 'Execute the caller workflow',
-        desc: 'Runs the Hello caller workflow.',
-        code: 'npm run start:caller-workflow\n# Output:\n# Workflow result: ¡Hola! Temporal 👋',
-        lang: 'bash',
-      },
-    ],
-  },
-};
+function Cmd({ prompt, cmd }: { prompt: string; cmd: string }) {
+  return (
+    <div className={styles.runitCmd}>
+      <span className={styles.runitPrompt}>{prompt}</span>
+      <span className={styles.runitCmdText}>{cmd}</span>
+    </div>
+  );
+}
 
 export default function RunIt({ onNext }: Props) {
   const [lang, setLang] = useState<Lang>('dotnet');
-  const current = content[lang];
 
   return (
     <div className={styles.section}>
@@ -142,8 +30,7 @@ export default function RunIt({ onNext }: Props) {
 
       <h1>Run It Yourself</h1>
       <p className={styles.lead}>
-        All three SDK samples are ready to run. Pick a language, follow the steps, and you'll
-        have a working cross-namespace Nexus call in minutes.
+        Three official Nexus samples — pick your language and run locally in minutes.
       </p>
 
       <div className={styles.runTabs}>
@@ -158,28 +45,129 @@ export default function RunIt({ onNext }: Props) {
         ))}
       </div>
 
-      <a
-        href={current.repoUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={styles.repoLink}
-        style={{ marginBottom: 28, display: 'inline-flex' }}
-      >
-        <span>↗</span> {current.repoLabel}
-      </a>
-
-      <div className={styles.runSteps}>
-        {current.steps.map((step, i) => (
-          <div key={i} className={styles.runStep}>
-            <div className={styles.runStepNum}>{i + 1}</div>
-            <div className={styles.runStepBody}>
-              <div className={styles.runStepTitle}>{step.title}</div>
-              <div className={styles.runStepDesc}>{step.desc}</div>
-              <CodeBlock language={step.lang}>{step.code}</CodeBlock>
+      {lang === 'dotnet' && (
+        <>
+          <div className={styles.card} style={{ marginBottom: 20 }}>
+            <div className={`${styles.tag} ${styles.tagBlue}`} style={{ marginBottom: 10 }}>
+              samples-dotnet / NexusSimple
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>
+              Defines a typed <code>IHelloService</code> interface with a sync Echo and async
+              SayHello (workflow-backed) operation across two namespaces.
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <a
+                href="https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
+              >
+                View on GitHub →
+              </a>
             </div>
           </div>
-        ))}
-      </div>
+
+          <h3 className={styles.runitSectionLabel}>Setup</h3>
+          <Cmd prompt="#" cmd="Create two namespaces + a Nexus endpoint first (see README)" />
+          <Cmd
+            prompt="$"
+            cmd="git clone https://github.com/temporalio/samples-dotnet && cd samples-dotnet/src/NexusSimple"
+          />
+
+          <h3 className={styles.runitSectionLabel} style={{ marginTop: 16 }}>
+            Run (3 terminals)
+          </h3>
+          <Cmd prompt="T1 $" cmd="dotnet run handler-worker" />
+          <Cmd prompt="T2 $" cmd="dotnet run caller-worker" />
+          <Cmd prompt="T3 $" cmd="dotnet run caller-workflow" />
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+        </>
+      )}
+
+      {lang === 'go' && (
+        <>
+          <div className={styles.card} style={{ marginBottom: 20 }}>
+            <div className={`${styles.tag} ${styles.tagPurple}`} style={{ marginBottom: 10 }}>
+              samples-go / nexus
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>
+              Go implementation of the same Hello/Echo pattern with sync and workflow-backed async
+              operations.
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <a
+                href="https://github.com/temporalio/samples-go/tree/main/nexus"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
+              >
+                View on GitHub →
+              </a>
+            </div>
+          </div>
+
+          <h3 className={styles.runitSectionLabel}>Setup</h3>
+          <Cmd prompt="#" cmd="Create two namespaces + a Nexus endpoint first (see README)" />
+          <Cmd
+            prompt="$"
+            cmd="git clone https://github.com/temporalio/samples-go && cd samples-go/nexus"
+          />
+
+          <h3 className={styles.runitSectionLabel} style={{ marginTop: 16 }}>
+            Run (3 terminals)
+          </h3>
+          <Cmd prompt="T1 $" cmd="go run ./handler/worker/main.go" />
+          <Cmd prompt="T2 $" cmd="go run ./caller/worker/main.go" />
+          <Cmd prompt="T3 $" cmd="go run ./caller/starter/main.go" />
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+        </>
+      )}
+
+      {lang === 'typescript' && (
+        <>
+          <div className={styles.card} style={{ marginBottom: 20 }}>
+            <div className={`${styles.tag} ${styles.tagGreen}`} style={{ marginBottom: 10 }}>
+              samples-typescript / nexus-hello
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>
+              TypeScript version using <code>nexus-rpc</code> and <code>@temporalio/nexus</code>.
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <a
+                href="https://github.com/temporalio/samples-typescript/tree/main/nexus-hello"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
+              >
+                View on GitHub →
+              </a>
+              <a
+                href="https://stackblitz.com/github/temporalio/samples-typescript/tree/main/nexus-hello"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.runitLink}
+              >
+                Open in StackBlitz ↗
+              </a>
+            </div>
+          </div>
+
+          <h3 className={styles.runitSectionLabel}>Setup</h3>
+          <Cmd prompt="#" cmd="Create two namespaces + a Nexus endpoint first (see README)" />
+          <Cmd
+            prompt="$"
+            cmd="git clone https://github.com/temporalio/samples-typescript && cd samples-typescript/nexus-hello && npm install"
+          />
+
+          <h3 className={styles.runitSectionLabel} style={{ marginTop: 16 }}>
+            Run (3 terminals)
+          </h3>
+          <Cmd prompt="T1 $" cmd="npm run start:service-worker" />
+          <Cmd prompt="T2 $" cmd="npm run start:caller-worker" />
+          <Cmd prompt="T3 $" cmd="npm run start:caller-workflow" />
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+        </>
+      )}
 
       <div className={styles.nextRow}>
         <button className={styles.btn} onClick={onNext}>

From a246b1c401c551446d8baa38b4a1c84813c87583 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 18:20:01 -0500
Subject: [PATCH 11/24] Polishing and how it works

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../NexusDemo/ComponentsSection.tsx           |  66 ++-----
 src/components/NexusDemo/HowItWorks.tsx       | 184 ++++++++----------
 src/components/NexusDemo/NexusDemo.module.css |  13 +-
 src/components/NexusDemo/Overview.tsx         |  16 +-
 src/components/NexusDemo/Quiz.tsx             |  15 +-
 src/components/NexusDemo/RunIt.tsx            |   2 +-
 src/components/NexusDemo/buildSteps.ts        |  14 +-
 src/components/NexusDemo/flowSteps.ts         |   2 +-
 src/components/NexusDemo/quizQuestions.ts     |   8 +-
 9 files changed, 126 insertions(+), 194 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index e97d10fdaa..2f4c1a2888 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -19,7 +19,7 @@ export default function ComponentsSection({ onNext }: Props) {
 
       <div className={styles.componentLayout}>
 
-        {/* 1 — Endpoint */}
+        {/* 1: Endpoint */}
         <div className={styles.card} style={{ borderLeft: '4px solid var(--ifm-color-primary)' }}>
           <div className={styles.componentRow}>
             <div
@@ -30,28 +30,33 @@ export default function ComponentsSection({ onNext }: Props) {
             </div>
             <div className={styles.componentContent}>
               <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
-              <p className={styles.componentRole}>The address you publish and route through</p>
+              <p className={styles.componentRole}>The named entry point callers use to reach a service</p>
               <p>
-                Think of an Endpoint like a <strong>URL for your team's services</strong>. It's a
-                named entry point registered in the Nexus Registry that routes requests to a
-                specific namespace and task queue.
+                An Endpoint is a <strong>named connection point</strong> registered in the Nexus
+                Registry. Callers reference it by name. That's all they need. Temporal handles
+                routing to the right team's namespace and task queue behind the scenes.
               </p>
               <p>
-                It's <em>not</em> a general HTTP proxy — it's specifically designed for Nexus, with
-                built-in auth, retries, and observability.
+                Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
+                Temporal platform, with auth, retries, and observability built in. No ports to
+                expose, no URLs to share.
               </p>
               <div className={styles.componentCode}>
-                Endpoint:{' '}
-                <span style={{ color: 'var(--ifm-color-primary)' }}>fraud-detection-prod</span>
+                Caller uses name:{' '}
+                <span style={{ color: 'var(--ifm-color-primary)' }}>"fraud-detection-prod"</span>
                 <br />
-                Routes to:{' '}
+                Temporal routes to:{' '}
                 <span style={{ color: 'var(--nd-purple)' }}>fraud-ns / fraud-task-queue</span>
+                <br />
+                <span style={{ color: 'var(--nd-muted)' }}>
+                  {'// callers never see the target, only the name'}
+                </span>
               </div>
             </div>
           </div>
         </div>
 
-        {/* 2 — Service */}
+        {/* 2: Service */}
         <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-purple)' }}>
           <div className={styles.componentRow}>
             <div
@@ -64,7 +69,7 @@ export default function ComponentsSection({ onNext }: Props) {
               <h2 className={styles.componentTitle}>Nexus Service</h2>
               <p className={styles.componentRole}>The contract you publish for others to consume</p>
               <p>
-                A Service is a <strong>named collection of Nexus Operations</strong> — like an API
+                A Service is a <strong>named collection of Nexus Operations</strong>, similar to an API
                 interface. Multiple services can run in the same worker. Callers import the service
                 definition to get type safety.
               </p>
@@ -78,7 +83,7 @@ export default function ComponentsSection({ onNext }: Props) {
           </div>
         </div>
 
-        {/* 3 — Operation */}
+        {/* 3: Operation */}
         <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-green)' }}>
           <div className={styles.componentRow}>
             <div
@@ -89,7 +94,7 @@ export default function ComponentsSection({ onNext }: Props) {
             </div>
             <div className={styles.componentContent}>
               <h2 className={styles.componentTitle}>Nexus Operation</h2>
-              <p className={styles.componentRole}>The individual action — sync or async</p>
+              <p className={styles.componentRole}>The individual action: sync or async</p>
 
               <div className={styles.opTabs}>
                 <button
@@ -139,7 +144,7 @@ export default function ComponentsSection({ onNext }: Props) {
           </div>
         </div>
 
-        {/* 4 — Registry */}
+        {/* 4: Registry */}
         <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-amber)' }}>
           <div className={styles.componentRow}>
             <div
@@ -170,37 +175,6 @@ export default function ComponentsSection({ onNext }: Props) {
 
       </div>
 
-      <h2 className={styles.sectionHeading} style={{ marginTop: 32 }}>Nexus vs. the Alternatives</h2>
-      <table className={styles.table}>
-        <thead>
-          <tr>
-            <th>Approach</th>
-            <th>Durable</th>
-            <th>Typed contract</th>
-            <th>Cross-namespace</th>
-            <th>Auto-retry</th>
-            <th>Cancel propagation</th>
-          </tr>
-        </thead>
-        <tbody>
-          {[
-            { name: 'Shared namespace', durable: true,  typed: false, cross: false, retry: true,  cancel: false },
-            { name: 'HTTP between teams', durable: false, typed: false, cross: true,  retry: false, cancel: false },
-            { name: 'Child workflows',    durable: true,  typed: true,  cross: false, retry: true,  cancel: true  },
-            { name: 'Temporal Nexus',     durable: true,  typed: true,  cross: true,  retry: true,  cancel: true, highlight: true },
-          ].map((row) => (
-            <tr key={row.name} style={row.highlight ? { background: 'var(--nd-primary-bg)' } : {}}>
-              <td style={{ fontWeight: row.highlight ? 700 : 400 }}>{row.name}</td>
-              <td className={row.durable ? styles.check : styles.cross}>{row.durable ? '✓' : '—'}</td>
-              <td className={row.typed  ? styles.check : styles.cross}>{row.typed  ? '✓' : '—'}</td>
-              <td className={row.cross  ? styles.check : styles.cross}>{row.cross  ? '✓' : '—'}</td>
-              <td className={row.retry  ? styles.check : styles.cross}>{row.retry  ? '✓' : '—'}</td>
-              <td className={row.cancel ? styles.check : styles.cross}>{row.cancel ? '✓' : '—'}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
       <div className={styles.nextRow}>
         <button className={styles.btn} onClick={onNext}>
           Next: How It Works →
diff --git a/src/components/NexusDemo/HowItWorks.tsx b/src/components/NexusDemo/HowItWorks.tsx
index af42c56127..1ba76250a0 100644
--- a/src/components/NexusDemo/HowItWorks.tsx
+++ b/src/components/NexusDemo/HowItWorks.tsx
@@ -5,28 +5,30 @@ import { asyncSteps, FlowMode, FlowStep, syncSteps } from './flowSteps';
 type Props = { onNext: () => void };
 
 const NODES = [
-  { title: 'Caller Workflow', sub: 'caller namespace' },
-  { title: 'Nexus Endpoint', sub: 'routes + retries' },
-  { title: 'Handler Worker', sub: 'handler namespace' },
+  { id: 'caller',   title: 'Caller Workflow', sub: 'payments-ns' },
+  { id: 'endpoint', title: 'Nexus Endpoint',  sub: 'Routing + Auth' },
+  { id: 'handler',  title: 'Handler Worker',  sub: 'fraud-ns' },
 ];
 
-const AUTO_ADVANCE_MS = 1800;
+const AUTO_ADVANCE_MS = 1400;
 
 function getTimestamp(): string {
   const now = new Date();
   return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
 }
 
+type LogEntry = { ts: string; step: FlowStep };
+
 export default function HowItWorks({ onNext }: Props) {
   const [mode, setMode] = useState<FlowMode>('sync');
-  const [stepIdx, setStepIdx] = useState(0);
+  const [stepIdx, setStepIdx] = useState(-1); // -1 = not started
   const [playing, setPlaying] = useState(false);
-  const [log, setLog] = useState<Array<{ ts: string; step: FlowStep }>>([]);
+  const [log, setLog] = useState<LogEntry[]>([]);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const logRef = useRef<HTMLDivElement>(null);
 
   const steps = mode === 'sync' ? syncSteps : asyncSteps;
-  const currentStep = steps[stepIdx];
+  const currentStep = stepIdx >= 0 ? steps[stepIdx] : null;
 
   const advance = useCallback(
     (idx: number) => {
@@ -48,53 +50,48 @@ export default function HowItWorks({ onNext }: Props) {
         }
       }, AUTO_ADVANCE_MS);
     }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
   }, [playing, stepIdx, steps.length, advance]);
 
   // Scroll log to bottom
   useEffect(() => {
-    if (logRef.current) {
-      logRef.current.scrollTop = logRef.current.scrollHeight;
-    }
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
   }, [log]);
 
   function handleModeChange(next: FlowMode) {
     setMode(next);
-    setStepIdx(0);
+    setStepIdx(-1);
     setPlaying(false);
     setLog([]);
     if (timerRef.current) clearTimeout(timerRef.current);
   }
 
-  function handlePlay() {
+  function handleRunDemo() {
+    if (playing) {
+      setPlaying(false);
+      return;
+    }
+    // Replay from start if done, otherwise resume / start
     if (stepIdx >= steps.length - 1) {
-      // reset and play from start
       setStepIdx(0);
-      setLog([]);
+      setLog([{ ts: getTimestamp(), step: steps[0] }]);
+      setPlaying(true);
+    } else if (stepIdx === -1) {
+      advance(0);
       setPlaying(true);
     } else {
-      setPlaying((p) => !p);
+      setPlaying(true);
     }
   }
 
-  function handleStep(dir: -1 | 1) {
-    setPlaying(false);
-    const next = stepIdx + dir;
-    if (next >= 0 && next < steps.length) advance(next);
-  }
-
   function handleReset() {
     setPlaying(false);
-    setStepIdx(0);
+    setStepIdx(-1);
     setLog([]);
     if (timerRef.current) clearTimeout(timerRef.current);
   }
 
-  // Packet position: 0% = left edge of first track, 100% = right edge of second track
-  // Node 0 → pct 0, node 1 → pct 50, node 2 → pct 100
-  const packetPct = currentStep.packetPct;
+  const packetPct = currentStep?.packetPct ?? 0;
 
   return (
     <div className={styles.section}>
@@ -102,35 +99,34 @@ export default function HowItWorks({ onNext }: Props) {
         <div className={styles.progressFill} style={{ width: '42%' }} />
       </div>
 
-      <h1>How It Works</h1>
+      <h1>How a Nexus Call Works</h1>
       <p className={styles.lead}>
-        Step through a live Nexus call to see exactly what happens at each stage — for both
-        synchronous and asynchronous operations.
+        Walk through the step-by-step lifecycle of a Nexus Operation. Choose sync or async.
       </p>
 
-      <div className={styles.flowOuter}>
-        {/* Mode selector */}
-        <div className={styles.flowModeTabs}>
-          <button
-            className={`${styles.flowModeTab} ${mode === 'sync' ? styles.flowModeTabActive : ''}`}
-            onClick={() => handleModeChange('sync')}
-          >
-            Synchronous (fast)
-          </button>
-          <button
-            className={`${styles.flowModeTab} ${mode === 'async' ? styles.flowModeTabActive : ''}`}
-            onClick={() => handleModeChange('async')}
-          >
-            Asynchronous (long-running)
-          </button>
-        </div>
+      {/* Underline tabs */}
+      <div className={styles.runTabs}>
+        <button
+          className={`${styles.runTab} ${mode === 'sync' ? styles.runTabActive : ''}`}
+          onClick={() => handleModeChange('sync')}
+        >
+          Synchronous Operation
+        </button>
+        <button
+          className={`${styles.runTab} ${mode === 'async' ? styles.runTabActive : ''}`}
+          onClick={() => handleModeChange('async')}
+        >
+          Asynchronous Operation
+        </button>
+      </div>
 
+      <div className={styles.flowOuter}>
         {/* Flow diagram */}
         <div className={styles.flowDiagram}>
           {NODES.map((node, i) => (
-            <React.Fragment key={node.title}>
+            <React.Fragment key={node.id}>
               <div
-                className={`${styles.flowNode} ${currentStep.activeNode === i ? styles.flowNodeActive : ''}`}
+                className={`${styles.flowNode} ${currentStep?.activeNode === i ? styles.flowNodeActive : ''}`}
               >
                 <div className={styles.flowNodeTitle}>{node.title}</div>
                 <div className={styles.flowNodeSub}>{node.sub}</div>
@@ -150,18 +146,13 @@ export default function HowItWorks({ onNext }: Props) {
                       }}
                     />
                   </div>
-                  {/* Packet rendered on first track only, spanning both */}
                   {i === 0 && (
                     <div
                       className={styles.packet}
                       style={{
-                        // Map 0–50 to first track, 50–100 to second track
-                        // We render the packet relative to the full diagram width
-                        // but position it relative to flowTrackWrap
-                        // Since there are 2 tracks each at flex:1, we use a wider container
-                        // Actually position relative to the track:
                         left: `${Math.min(packetPct * 2, 100)}%`,
-                        display: packetPct <= 50 ? 'block' : 'none',
+                        opacity: currentStep && packetPct <= 50 ? 1 : 0,
+                        transition: 'left 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease',
                       }}
                     />
                   )}
@@ -170,7 +161,8 @@ export default function HowItWorks({ onNext }: Props) {
                       className={styles.packet}
                       style={{
                         left: `${Math.max((packetPct - 50) * 2, 0)}%`,
-                        display: packetPct >= 50 ? 'block' : 'none',
+                        opacity: currentStep && packetPct >= 50 ? 1 : 0,
+                        transition: 'left 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease',
                       }}
                     />
                   )}
@@ -180,68 +172,50 @@ export default function HowItWorks({ onNext }: Props) {
           ))}
         </div>
 
-        {/* Step detail */}
-        <div className={styles.flowDetail}>
-          <div className={styles.flowDetailLabel}>{currentStep.label}</div>
-          <div className={styles.flowDetailText}>{currentStep.detail}</div>
+        {/* Status log */}
+        <div className={styles.statusLog} ref={logRef}>
+          {log.length === 0 ? (
+            <div className={styles.logLine}>
+              <span className={styles.logTs}>[ready]&nbsp;</span>
+              <span className={styles.logMsg}>Press "Run Demo" to start the animation</span>
+            </div>
+          ) : (
+            log.map((entry, i) => (
+              <div key={i} className={styles.logLine}>
+                <span className={styles.logTs}>{entry.ts}&nbsp;</span>
+                <span
+                  className={`${styles.logEvent} ${
+                    entry.step.log.level === 'success'
+                      ? styles.logEventSuccess
+                      : entry.step.log.level === 'warn'
+                        ? styles.logEventWarn
+                        : styles.logEventInfo
+                  }`}
+                >
+                  {entry.step.log.event}&nbsp;
+                </span>
+                <span className={styles.logMsg}>{entry.step.log.msg}</span>
+              </div>
+            ))
+          )}
         </div>
 
         {/* Controls */}
         <div className={styles.flowControls}>
-          <button className={styles.btn} onClick={handlePlay}>
+          <button className={styles.btn} onClick={handleRunDemo}>
             {playing
               ? '⏸ Pause'
-              : log.length === 0
+              : stepIdx === -1
                 ? 'Run Demo'
                 : stepIdx >= steps.length - 1
                   ? '↺ Replay'
                   : '▶ Resume'}
           </button>
-          <button
-            className={`${styles.btn} ${styles.btnSecondary}`}
-            onClick={() => handleStep(-1)}
-            disabled={stepIdx === 0}
-          >
-            ← Prev
-          </button>
-          <button
-            className={`${styles.btn} ${styles.btnSecondary}`}
-            onClick={() => handleStep(1)}
-            disabled={stepIdx >= steps.length - 1}
-          >
-            Next →
-          </button>
           <button className={`${styles.btn} ${styles.btnSecondary}`} onClick={handleReset}>
             Reset
           </button>
-          <span className={styles.stepCounter}>
-            {stepIdx + 1} / {steps.length}
-          </span>
         </div>
 
-        {/* Status log */}
-        {log.length > 0 && (
-          <div className={styles.statusLog} ref={logRef}>
-            {log.map((entry, i) => (
-              <div key={i} className={styles.logLine}>
-                <span className={styles.logTs}>{entry.ts}</span>
-                <span
-                  className={`${styles.logEvent} ${
-                    entry.step.log.level === 'success'
-                      ? styles.logEventSuccess
-                      : entry.step.log.level === 'warn'
-                        ? styles.logEventWarn
-                        : styles.logEventInfo
-                  }`}
-                >
-                  {entry.step.log.event}
-                </span>
-                <span className={styles.logMsg}>{entry.step.log.msg}</span>
-              </div>
-            ))}
-          </div>
-        )}
-
         {/* Timeline */}
         <div className={styles.timeline}>
           {steps.map((step, i) => (
@@ -250,7 +224,7 @@ export default function HowItWorks({ onNext }: Props) {
               className={`${styles.tlStep} ${
                 i < stepIdx
                   ? styles.tlStepDone
-                  : i === stepIdx && log.length > 0
+                  : i === stepIdx
                     ? styles.tlStepActive
                     : ''
               }`}
@@ -258,7 +232,7 @@ export default function HowItWorks({ onNext }: Props) {
               <div className={styles.tlNum}>{i + 1}</div>
               <div className={styles.tlContent}>
                 <div className={styles.tlTitle}>{step.label}</div>
-                <div className={styles.tlDesc}>{step.log.msg}</div>
+                <div className={styles.tlDesc}>{step.detail}</div>
               </div>
             </div>
           ))}
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index 995f35c416..3ee300dfd4 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -359,7 +359,7 @@
   border-top: 1px solid var(--nd-border);
 }
 
-/* ── How It Works — flow diagram ───────────────────────── */
+/* ── How It Works: flow diagram ───────────────────────── */
 .flowOuter {
   margin: 24px 0;
 }
@@ -639,7 +639,7 @@
   margin-top: 16px;
 }
 
-/* ── CodeBlock override — connect to file header ──────── */
+/* ── CodeBlock override: connect to file header ──────── */
 .buildPanel :global(.theme-code-block) {
   border-radius: 0;
   margin-bottom: 0;
@@ -762,19 +762,16 @@
   gap: 14px;
   align-items: flex-start;
   padding-bottom: 14px;
-  opacity: 0.3;
-  transform: translateX(-6px);
-  transition: opacity 0.35s, transform 0.35s;
+  opacity: 0.25;
+  transition: opacity 0.5s ease, color 0.3s ease;
 }
 
 .tlStepActive {
   opacity: 1;
-  transform: none;
 }
 
 .tlStepDone {
-  opacity: 0.6;
-  transform: none;
+  opacity: 0.55;
 }
 
 .tlNum {
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 3909752403..f2d9965a74 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -13,7 +13,7 @@ export default function Overview({ onNext }: Props) {
       <h1>What is Temporal Nexus?</h1>
       <p className={styles.lead}>
         Nexus lets different teams share Temporal workflows across team, namespace, region,
-        and cloud boundaries — without exposing internal implementation details.
+        and cloud boundaries, without exposing internal implementation details.
       </p>
 
       <div
@@ -28,8 +28,8 @@ export default function Overview({ onNext }: Props) {
           The core idea in one sentence
         </h3>
         <p style={{ fontSize: 15, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.7 }}>
-          Team A can call Team B's workflows like a typed API — with full durability, retries,
-          and fault-tolerance built in — without needing access to Team B's namespace or knowing
+          Team A can call Team B's workflows like a typed API, with full durability, retries,
+          and fault-tolerance built in, without needing access to Team B's namespace or knowing
           how their code works.
         </p>
       </div>
@@ -52,7 +52,7 @@ export default function Overview({ onNext }: Props) {
           <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
             The Fraud Detection team publishes a Nexus Service with a clear contract. The Payments
             team calls it from their workflow like any other operation. Nexus handles routing,
-            retries, security, and observability — across any boundary.
+            retries, security, and observability, across any boundary.
           </p>
         </div>
       </div>
@@ -60,7 +60,7 @@ export default function Overview({ onNext }: Props) {
       <h2 className={styles.sectionHeading}>What It Looks Like</h2>
       <div className={styles.nsContainer}>
         <div className={`${styles.nsBox} ${styles.nsBoxCaller}`}>
-          <div className={`${styles.nsLabel} ${styles.nsLabelCaller}`}>Team A — Payments</div>
+          <div className={`${styles.nsLabel} ${styles.nsLabelCaller}`}>Team A: Payments</div>
           <div className={styles.wfBlock}>
             <div className={`${styles.wfIcon} ${styles.wfIconBlue}`}>W</div>
             <div>
@@ -98,7 +98,7 @@ export default function Overview({ onNext }: Props) {
 
         <div className={`${styles.nsBox} ${styles.nsBoxHandler}`}>
           <div className={`${styles.nsLabel} ${styles.nsLabelHandler}`}>
-            Team B — Fraud Detection
+            Team B: Fraud Detection
           </div>
           <div className={styles.wfBlock}>
             <div className={`${styles.wfIcon} ${styles.wfIconPurple}`}>S</div>
@@ -123,7 +123,7 @@ export default function Overview({ onNext }: Props) {
       </div>
 
       <h2 className={styles.sectionHeading}>Key Facts</h2>
-      <div className={styles.cardGrid}>
+      <div className={styles.cardGrid} style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
         <div className={styles.card}>
           <div className={`${styles.tag} ${styles.tagBlue}`}>Durability</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Up to 60 Days</h3>
@@ -152,7 +152,7 @@ export default function Overview({ onNext }: Props) {
           <div className={`${styles.tag} ${styles.tagAmber}`}>Boundaries</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Cross-Everything</h3>
           <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
-            Works across teams, namespaces, regions (AWS &amp; GCP), and clouds — with the same
+            Works across teams, namespaces, regions (AWS &amp; GCP), and clouds, with the same
             developer experience everywhere.
           </p>
         </div>
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
index 1f562f3122..8bc9af11d8 100644
--- a/src/components/NexusDemo/Quiz.tsx
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -28,14 +28,6 @@ export default function Quiz() {
     setKey((k) => k + 1);
   }
 
-  const scoreLabel =
-    pct >= 85 ? 'You got it' : pct >= 57 ? 'Getting there' : 'Keep exploring';
-  const scoreSub =
-    pct >= 85
-      ? "You have a solid grasp of Temporal Nexus. You're ready to build."
-      : pct >= 57
-        ? 'Good foundation. Review the sections on the topics you missed.'
-        : 'Go back through the demo — the concepts will click. Try again when ready.';
 
   return (
     <div className={styles.section}>
@@ -44,9 +36,6 @@ export default function Quiz() {
       </div>
 
       <h1>Test Your Understanding</h1>
-      <p className={styles.lead}>
-        {quizQuestions.length} questions. No time limit. See the explanation after each answer.
-      </p>
 
       <div key={key}>
         {quizQuestions.map((q, qi) => {
@@ -88,7 +77,7 @@ export default function Quiz() {
                     given === q.correct ? styles.quizFeedbackCorrect : styles.quizFeedbackWrong
                   }`}
                 >
-                  {given === q.correct ? '✓ Correct — ' : '✗ Not quite — '}
+                  {given === q.correct ? '✓ Correct: ' : '✗ Not quite: '}
                   {q.explanation}
                 </div>
               )}
@@ -99,11 +88,9 @@ export default function Quiz() {
 
       {allAnswered && (
         <div className={styles.scoreCard}>
-          <div className={styles.scoreTitle}>{scoreLabel}</div>
           <div className={styles.scoreText}>
             {correctCount} / {quizQuestions.length} correct ({pct}%)
           </div>
-          <div className={styles.scoreSub}>{scoreSub}</div>
           <button className={styles.btn} onClick={reset}>
             Try again
           </button>
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index e54f548623..cf7cb45ee6 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -30,7 +30,7 @@ export default function RunIt({ onNext }: Props) {
 
       <h1>Run It Yourself</h1>
       <p className={styles.lead}>
-        Three official Nexus samples — pick your language and run locally in minutes.
+        Three official Nexus samples. Pick a language and run locally in minutes.
       </p>
 
       <div className={styles.runTabs}>
diff --git a/src/components/NexusDemo/buildSteps.ts b/src/components/NexusDemo/buildSteps.ts
index 6ab42f9523..3bfdc32e2b 100644
--- a/src/components/NexusDemo/buildSteps.ts
+++ b/src/components/NexusDemo/buildSteps.ts
@@ -30,7 +30,7 @@ public interface IHelloService
     public record HelloOutput(string Message);
     public enum HelloLanguage { En, Fr, De, Es, Tr }
 }`,
-    note: 'This is the only file shared between Team A (caller) and Team B (handler). It defines what operations exist and their input/output shapes — nothing more. Team B\'s internal implementation stays private.',
+    note: 'This is the only file shared between Team A (caller) and Team B (handler). It defines what operations exist and their input/output shapes, nothing more. Team B\'s internal implementation stays private.',
   },
   {
     num: 'Step 2 of 6',
@@ -44,7 +44,7 @@ public class HelloService
     public IOperationHandler<IHelloService.EchoInput, IHelloService.EchoOutput>
         Echo() =>
         OperationHandler.Sync<IHelloService.EchoInput, IHelloService.EchoOutput>(
-            // Runs inline — must complete in under 10 seconds
+            // Runs inline; must complete in under 10 seconds
             (ctx, input) => new(input.Message));
 }`,
     note: 'A synchronous handler runs inline in the handler worker and returns a result directly. Use this for fast operations (lookups, validations, transformations). The 10-second limit is enforced by the Nexus runtime.',
@@ -54,7 +54,7 @@ public class HelloService
     title: 'Implement the async handler',
     file: 'HelloService.cs + HelloHandlerWorkflow.workflow.cs',
     language: 'csharp',
-    code: `// HelloService.cs — add the async operation
+    code: `// HelloService.cs: add the async operation
 [NexusOperationHandler]
 public IOperationHandler<IHelloService.HelloInput, IHelloService.HelloOutput>
     SayHello() =>
@@ -62,7 +62,7 @@ public IOperationHandler<IHelloService.HelloInput, IHelloService.HelloOutput>
         (WorkflowRunOperationContext ctx, IHelloService.HelloInput input) =>
             ctx.StartWorkflowAsync(
                 (HelloHandlerWorkflow wf) => wf.RunAsync(input),
-                // RequestId is stable across retries — prevents duplicate workflows
+                // RequestId is stable across retries; prevents duplicate workflows
                 new() { Id = ctx.HandlerContext.RequestId }));
 
 // HelloHandlerWorkflow.workflow.cs
@@ -81,7 +81,7 @@ public class HelloHandlerWorkflow
                 "Unsupported: " + input.Language)
         };
 }`,
-    note: 'Async operations start a Temporal Workflow and return an operation token to the caller. The caller is suspended until the workflow completes — which can take seconds, hours, or days. Using RequestId as the workflow ID ensures retries never create duplicates.',
+    note: 'Async operations start a Temporal Workflow and return an operation token to the caller. The caller is suspended until the workflow completes, which can take seconds, hours, or days. Using RequestId as the workflow ID ensures retries never create duplicates.',
   },
   {
     num: 'Step 4 of 6',
@@ -123,7 +123,7 @@ public class HelloCallerWorkflow
         return output.Message;
     }
 }`,
-    note: "The caller workflow only knows the shared interface — no knowledge of HelloHandlerWorkflow, Team B's namespace, or how the operation is implemented. The Nexus Endpoint name is the only required configuration.",
+    note: "The caller workflow only knows the shared interface, with no knowledge of HelloHandlerWorkflow, Team B's namespace, or how the operation is implemented. The Nexus Endpoint name is the only required configuration.",
   },
   {
     num: 'Step 6 of 6',
@@ -146,6 +146,6 @@ var result = await client.ExecuteWorkflowAsync(
         taskQueue: "nexus-simple-caller-sample"));
 
 // result == "¡Hola! Temporal 👋"`,
-    note: 'Two separate namespaces. Two separate workers. Zero shared internal code — connected only by a single Nexus Endpoint and a shared interface file.',
+    note: 'Two separate namespaces. Two separate workers. Zero shared internal code, connected only by a single Nexus Endpoint and a shared interface file.',
   },
 ];
diff --git a/src/components/NexusDemo/flowSteps.ts b/src/components/NexusDemo/flowSteps.ts
index f5405f9087..beec46fa1f 100644
--- a/src/components/NexusDemo/flowSteps.ts
+++ b/src/components/NexusDemo/flowSteps.ts
@@ -82,7 +82,7 @@ export const asyncSteps: FlowStep[] = [
   {
     label: 'Workflow runs (seconds → days)',
     detail:
-      'HelloHandlerWorkflow runs to completion. It could call external APIs, wait for signals, or run sub-workflows — for as long as needed.',
+      'HelloHandlerWorkflow runs to completion. It could call external APIs, wait for signals, or run sub-workflows, for as long as needed.',
     activeNode: 2,
     packetPct: 100,
     log: { level: 'warn', event: 'RUNNING', msg: 'HelloHandlerWorkflow executing...' },
diff --git a/src/components/NexusDemo/quizQuestions.ts b/src/components/NexusDemo/quizQuestions.ts
index 2516e487d0..d992e098c6 100644
--- a/src/components/NexusDemo/quizQuestions.ts
+++ b/src/components/NexusDemo/quizQuestions.ts
@@ -16,7 +16,7 @@ export const quizQuestions: QuizQuestion[] = [
     ],
     correct: 1,
     explanation:
-      'Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries — enabling modular architecture without tight coupling.',
+      'Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries, enabling modular architecture without tight coupling.',
   },
   {
     q: 'What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?',
@@ -42,7 +42,7 @@ export const quizQuestions: QuizQuestion[] = [
     ],
     correct: 1,
     explanation:
-      "A Nexus Endpoint is not a general HTTP proxy — it's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue.",
+      "A Nexus Endpoint is not a general HTTP proxy. It's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue.",
   },
   {
     q: 'If a caller workflow is canceled, what happens to pending Nexus Operations?',
@@ -50,7 +50,7 @@ export const quizQuestions: QuizQuestion[] = [
       'They continue running independently',
       'They are terminated immediately',
       'Cancel is propagated to them',
-      'Nothing — they timeout naturally',
+      'Nothing, they timeout naturally',
     ],
     correct: 2,
     explanation:
@@ -66,6 +66,6 @@ export const quizQuestions: QuizQuestion[] = [
     ],
     correct: 2,
     explanation:
-      "Team A only needs the shared service contract. Team B's internal implementation — which workflows they use, how they work — is completely hidden.",
+      "Team A only needs the shared service contract. Team B's internal implementation (which workflows they use, how they work) is completely hidden.",
   },
 ];

From 7b5c2709f6187ed2bbe3d802317b4caeb0453ff0 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 19:17:26 -0500
Subject: [PATCH 12/24] Move Nexus demo to encyclopedia sidebar, fix How It
 Works animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Relocate nexus-demo.mdx → encyclopedia/nexus-interactive-demo.mdx
- Add as first item under Temporal Nexus in encyclopedia sidebar
- Replace moving packet div with CSS ::after dot on track fill edge
- Add nodePulse ripple animation to active flow node

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../nexus-interactive-demo.mdx}               |  8 +--
 sidebars.js                                   |  1 +
 src/components/NexusDemo/HowItWorks.tsx       | 57 +++++++------------
 src/components/NexusDemo/NexusDemo.module.css | 45 ++++++++++++++-
 4 files changed, 68 insertions(+), 43 deletions(-)
 rename docs/{nexus-demo.mdx => encyclopedia/nexus-interactive-demo.mdx} (70%)

diff --git a/docs/nexus-demo.mdx b/docs/encyclopedia/nexus-interactive-demo.mdx
similarity index 70%
rename from docs/nexus-demo.mdx
rename to docs/encyclopedia/nexus-interactive-demo.mdx
index 73153d3e0b..aef77c03a3 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/encyclopedia/nexus-interactive-demo.mdx
@@ -1,9 +1,9 @@
 ---
-id: nexus-demo
-title: Temporal Nexus — Interactive Demo
-sidebar_label: Nexus Interactive Demo
+id: nexus-interactive-demo
+title: Interactive Demo
+sidebar_label: Interactive Demo
 description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
-slug: /nexus-demo
+slug: /encyclopedia/nexus-interactive-demo
 tags:
   - Nexus
 keywords:
diff --git a/sidebars.js b/sidebars.js
index 4e601b9b3b..dc5a4021fb 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -843,6 +843,7 @@ module.exports = {
             id: 'encyclopedia/nexus',
           },
           items: [
+            'encyclopedia/nexus-interactive-demo',
             'encyclopedia/nexus-endpoints',
             'encyclopedia/nexus-registry',
             'encyclopedia/nexus-services',
diff --git a/src/components/NexusDemo/HowItWorks.tsx b/src/components/NexusDemo/HowItWorks.tsx
index 1ba76250a0..ba55e5b42c 100644
--- a/src/components/NexusDemo/HowItWorks.tsx
+++ b/src/components/NexusDemo/HowItWorks.tsx
@@ -10,7 +10,7 @@ const NODES = [
   { id: 'handler',  title: 'Handler Worker',  sub: 'fraud-ns' },
 ];
 
-const AUTO_ADVANCE_MS = 1400;
+const AUTO_ADVANCE_MS = 1600;
 
 function getTimestamp(): string {
   const now = new Date();
@@ -92,6 +92,7 @@ export default function HowItWorks({ onNext }: Props) {
   }
 
   const packetPct = currentStep?.packetPct ?? 0;
+  // packetPct drives the track fills (0–50 → track 1, 50–100 → track 2)
 
   return (
     <div className={styles.section}>
@@ -101,7 +102,8 @@ export default function HowItWorks({ onNext }: Props) {
 
       <h1>How a Nexus Call Works</h1>
       <p className={styles.lead}>
-        Walk through the step-by-step lifecycle of a Nexus Operation. Choose sync or async.
+        Step through the lifecycle of a Nexus call from start to finish. Toggle between sync and
+        async to see how each mode differs.
       </p>
 
       {/* Underline tabs */}
@@ -131,45 +133,24 @@ export default function HowItWorks({ onNext }: Props) {
                 <div className={styles.flowNodeTitle}>{node.title}</div>
                 <div className={styles.flowNodeSub}>{node.sub}</div>
               </div>
-              {i < NODES.length - 1 && (
-                <div className={styles.flowTrackWrap}>
-                  <div className={styles.flowTrack}>
-                    <div
-                      className={styles.flowTrackFill}
-                      style={{
-                        width:
-                          (i === 0 && packetPct >= 50) || (i === 0 && packetPct === 100)
-                            ? '100%'
-                            : i === 1 && packetPct === 100
-                              ? '100%'
-                              : '0%',
-                      }}
-                    />
+              {i < NODES.length - 1 && (() => {
+                const fillW = i === 0
+                  ? packetPct >= 50 ? 100 : packetPct * 2
+                  : packetPct >= 100 ? 100 : packetPct > 50 ? (packetPct - 50) * 2 : 0;
+                return (
+                  <div className={styles.flowTrackWrap}>
+                    <div className={styles.flowTrack}>
+                      <div
+                        className={`${styles.flowTrackFill} ${fillW === 0 ? styles.flowTrackFillEmpty : ''}`}
+                        style={{ width: `${fillW}%` }}
+                      />
+                    </div>
                   </div>
-                  {i === 0 && (
-                    <div
-                      className={styles.packet}
-                      style={{
-                        left: `${Math.min(packetPct * 2, 100)}%`,
-                        opacity: currentStep && packetPct <= 50 ? 1 : 0,
-                        transition: 'left 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease',
-                      }}
-                    />
-                  )}
-                  {i === 1 && (
-                    <div
-                      className={styles.packet}
-                      style={{
-                        left: `${Math.max((packetPct - 50) * 2, 0)}%`,
-                        opacity: currentStep && packetPct >= 50 ? 1 : 0,
-                        transition: 'left 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease',
-                      }}
-                    />
-                  )}
-                </div>
-              )}
+                );
+              })()}
             </React.Fragment>
           ))}
+
         </div>
 
         {/* Status log */}
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index 3ee300dfd4..e464f8fe89 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -389,7 +389,7 @@
 }
 
 .flowDiagram {
-  position: relative;
+  position: relative; /* anchor for singlePacket */
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
   border-radius: 12px;
@@ -417,6 +417,13 @@
 .flowNodeActive {
   border-color: var(--ifm-color-primary);
   background: var(--nd-primary-bg);
+  animation: nodePulse 1.6s ease-out infinite;
+}
+
+@keyframes nodePulse {
+  0%   { box-shadow: 0 0 0 0px var(--ifm-color-primary); }
+  60%  { box-shadow: 0 0 0 7px transparent; }
+  100% { box-shadow: 0 0 0 7px transparent; }
 }
 
 .flowNodeTitle {
@@ -454,6 +461,27 @@
   transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* Glowing dot rides the leading edge of the fill — no calc() needed */
+.flowTrackFill::after {
+  content: '';
+  position: absolute;
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  box-shadow: 0 0 10px 2px var(--ifm-color-primary);
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+
+/* Hide the dot when the track fill is empty (no signal traveling yet) */
+.flowTrackFillEmpty::after {
+  opacity: 0;
+}
+
 .packet {
   position: absolute;
   width: 12px;
@@ -467,6 +495,20 @@
   z-index: 3;
 }
 
+/* Single continuously-moving packet across full track span */
+.singlePacket {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary);
+  box-shadow: 0 0 12px var(--ifm-color-primary);
+  top: 50%;
+  margin-top: -6px;
+  z-index: 5;
+  pointer-events: none;
+}
+
 /* ── Flow step detail ───────────────────────────────────── */
 .flowDetail {
   background: var(--nd-surface);
@@ -494,6 +536,7 @@
   display: flex;
   gap: 10px;
   align-items: center;
+  margin-top: 16px;
   margin-bottom: 20px;
 }
 

From 254000a863b5d0ae7e743c8b8c93d579d95238d5 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 19:21:33 -0500
Subject: [PATCH 13/24] Move interactive demo to end of Nexus encyclopedia,
 restore page title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/encyclopedia/nexus-interactive-demo.mdx | 2 +-
 sidebars.js                                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/encyclopedia/nexus-interactive-demo.mdx b/docs/encyclopedia/nexus-interactive-demo.mdx
index aef77c03a3..308784a92d 100644
--- a/docs/encyclopedia/nexus-interactive-demo.mdx
+++ b/docs/encyclopedia/nexus-interactive-demo.mdx
@@ -1,6 +1,6 @@
 ---
 id: nexus-interactive-demo
-title: Interactive Demo
+title: Temporal Nexus — Interactive Demo
 sidebar_label: Interactive Demo
 description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
 slug: /encyclopedia/nexus-interactive-demo
diff --git a/sidebars.js b/sidebars.js
index dc5a4021fb..4628a0076c 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -843,7 +843,6 @@ module.exports = {
             id: 'encyclopedia/nexus',
           },
           items: [
-            'encyclopedia/nexus-interactive-demo',
             'encyclopedia/nexus-endpoints',
             'encyclopedia/nexus-registry',
             'encyclopedia/nexus-services',
@@ -853,6 +852,7 @@ module.exports = {
             'encyclopedia/nexus-error-handling',
             'encyclopedia/nexus-metrics',
             'encyclopedia/nexus-security',
+            'encyclopedia/nexus-interactive-demo',
           ],
         },
         {

From d2273895ac93f7254b460f7f5d733838fd50b4f2 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 25 Mar 2026 19:30:35 -0500
Subject: [PATCH 14/24] Remove emojis, demo back to standalone page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../nexus-interactive-demo.mdx => nexus-demo.mdx}         | 4 ++--
 sidebars.js                                               | 1 -
 src/components/NexusDemo/HowItWorks.tsx                   | 6 +++---
 src/components/NexusDemo/Quiz.tsx                         | 2 +-
 src/components/NexusDemo/RunIt.tsx                        | 6 +++---
 src/components/NexusDemo/buildSteps.ts                    | 8 ++++----
 src/components/NexusDemo/flowSteps.ts                     | 2 +-
 7 files changed, 14 insertions(+), 15 deletions(-)
 rename docs/{encyclopedia/nexus-interactive-demo.mdx => nexus-demo.mdx} (84%)

diff --git a/docs/encyclopedia/nexus-interactive-demo.mdx b/docs/nexus-demo.mdx
similarity index 84%
rename from docs/encyclopedia/nexus-interactive-demo.mdx
rename to docs/nexus-demo.mdx
index 308784a92d..44dc0009c2 100644
--- a/docs/encyclopedia/nexus-interactive-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -1,9 +1,9 @@
 ---
-id: nexus-interactive-demo
+id: nexus-demo
 title: Temporal Nexus — Interactive Demo
 sidebar_label: Interactive Demo
 description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
-slug: /encyclopedia/nexus-interactive-demo
+slug: /nexus-demo
 tags:
   - Nexus
 keywords:
diff --git a/sidebars.js b/sidebars.js
index 4628a0076c..4e601b9b3b 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -852,7 +852,6 @@ module.exports = {
             'encyclopedia/nexus-error-handling',
             'encyclopedia/nexus-metrics',
             'encyclopedia/nexus-security',
-            'encyclopedia/nexus-interactive-demo',
           ],
         },
         {
diff --git a/src/components/NexusDemo/HowItWorks.tsx b/src/components/NexusDemo/HowItWorks.tsx
index ba55e5b42c..1049324e1a 100644
--- a/src/components/NexusDemo/HowItWorks.tsx
+++ b/src/components/NexusDemo/HowItWorks.tsx
@@ -185,12 +185,12 @@ export default function HowItWorks({ onNext }: Props) {
         <div className={styles.flowControls}>
           <button className={styles.btn} onClick={handleRunDemo}>
             {playing
-              ? '⏸ Pause'
+              ? 'Pause'
               : stepIdx === -1
                 ? 'Run Demo'
                 : stepIdx >= steps.length - 1
-                  ? '↺ Replay'
-                  : '▶ Resume'}
+                  ? 'Replay'
+                  : 'Resume'}
           </button>
           <button className={`${styles.btn} ${styles.btnSecondary}`} onClick={handleReset}>
             Reset
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
index 8bc9af11d8..659f5d1e5f 100644
--- a/src/components/NexusDemo/Quiz.tsx
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -77,7 +77,7 @@ export default function Quiz() {
                     given === q.correct ? styles.quizFeedbackCorrect : styles.quizFeedbackWrong
                   }`}
                 >
-                  {given === q.correct ? '✓ Correct: ' : '✗ Not quite: '}
+                  {given === q.correct ? 'Correct: ' : 'Not quite: '}
                   {q.explanation}
                 </div>
               )}
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index cf7cb45ee6..7522b03b56 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -80,7 +80,7 @@ export default function RunIt({ onNext }: Props) {
           <Cmd prompt="T1 $" cmd="dotnet run handler-worker" />
           <Cmd prompt="T2 $" cmd="dotnet run caller-worker" />
           <Cmd prompt="T3 $" cmd="dotnet run caller-workflow" />
-          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal</div>
         </>
       )}
 
@@ -119,7 +119,7 @@ export default function RunIt({ onNext }: Props) {
           <Cmd prompt="T1 $" cmd="go run ./handler/worker/main.go" />
           <Cmd prompt="T2 $" cmd="go run ./caller/worker/main.go" />
           <Cmd prompt="T3 $" cmd="go run ./caller/starter/main.go" />
-          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal</div>
         </>
       )}
 
@@ -165,7 +165,7 @@ export default function RunIt({ onNext }: Props) {
           <Cmd prompt="T1 $" cmd="npm run start:service-worker" />
           <Cmd prompt="T2 $" cmd="npm run start:caller-worker" />
           <Cmd prompt="T3 $" cmd="npm run start:caller-workflow" />
-          <div className={styles.runitOutput}># Output: ¡Hola! Temporal 👋</div>
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal</div>
         </>
       )}
 
diff --git a/src/components/NexusDemo/buildSteps.ts b/src/components/NexusDemo/buildSteps.ts
index 3bfdc32e2b..02cf0c1ece 100644
--- a/src/components/NexusDemo/buildSteps.ts
+++ b/src/components/NexusDemo/buildSteps.ts
@@ -74,9 +74,9 @@ public class HelloHandlerWorkflow
         IHelloService.HelloInput input) =>
         input.Language switch
         {
-            IHelloService.HelloLanguage.En => new("Hello " + input.Name + " 👋"),
-            IHelloService.HelloLanguage.Fr => new("Bonjour " + input.Name + " 👋"),
-            IHelloService.HelloLanguage.Es => new("¡Hola! " + input.Name + " 👋"),
+            IHelloService.HelloLanguage.En => new("Hello " + input.Name + ""),
+            IHelloService.HelloLanguage.Fr => new("Bonjour " + input.Name + ""),
+            IHelloService.HelloLanguage.Es => new("¡Hola! " + input.Name + ""),
             _ => throw new ApplicationFailureException(
                 "Unsupported: " + input.Language)
         };
@@ -145,7 +145,7 @@ var result = await client.ExecuteWorkflowAsync(
     new(id: "nexus-hello-id",
         taskQueue: "nexus-simple-caller-sample"));
 
-// result == "¡Hola! Temporal 👋"`,
+// result == "¡Hola! Temporal"`,
     note: 'Two separate namespaces. Two separate workers. Zero shared internal code, connected only by a single Nexus Endpoint and a shared interface file.',
   },
 ];
diff --git a/src/components/NexusDemo/flowSteps.ts b/src/components/NexusDemo/flowSteps.ts
index beec46fa1f..6d61ddbb35 100644
--- a/src/components/NexusDemo/flowSteps.ts
+++ b/src/components/NexusDemo/flowSteps.ts
@@ -101,6 +101,6 @@ export const asyncSteps: FlowStep[] = [
       'The Future resolves with the operation result. The caller workflow continues execution as if calling any other API.',
     activeNode: 0,
     packetPct: 0,
-    log: { level: 'success', event: 'RESUME', msg: 'Caller resumed: "¡Hola! Temporal 👋"' },
+    log: { level: 'success', event: 'RESUME', msg: 'Caller resumed: "¡Hola! Temporal"' },
   },
 ];

From d00b5a3236467125811a3dc00b1af89fbf1d462a Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 10:18:47 -0500
Subject: [PATCH 15/24] Polish NexusDemo UI: branding, copy, and animation
 cleanup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../NexusDemo/ComponentsSection.tsx           | 248 ++++++++---------
 src/components/NexusDemo/NexusDemo.module.css | 254 ++++++++++++++----
 src/components/NexusDemo/Overview.tsx         |  32 +--
 src/components/NexusDemo/RunIt.tsx            |   8 -
 src/components/NexusDemo/flowSteps.ts         |  38 +--
 src/components/NexusDemo/quizQuestions.ts     |  28 +-
 6 files changed, 371 insertions(+), 237 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index 2f4c1a2888..d682c18ea8 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -17,157 +17,137 @@ export default function ComponentsSection({ onNext }: Props) {
         Nexus has four key concepts. These four concepts are the foundation of everything in Nexus.
       </p>
 
-      <div className={styles.componentLayout}>
+      <div className={styles.compEList}>
 
         {/* 1: Endpoint */}
-        <div className={styles.card} style={{ borderLeft: '4px solid var(--ifm-color-primary)' }}>
-          <div className={styles.componentRow}>
-            <div
-              className={styles.componentNum}
-              style={{ background: 'var(--nd-primary-bg)', color: 'var(--ifm-color-primary)' }}
-            >
-              1
-            </div>
-            <div className={styles.componentContent}>
-              <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
-              <p className={styles.componentRole}>The named entry point callers use to reach a service</p>
-              <p>
-                An Endpoint is a <strong>named connection point</strong> registered in the Nexus
-                Registry. Callers reference it by name. That's all they need. Temporal handles
-                routing to the right team's namespace and task queue behind the scenes.
-              </p>
-              <p>
-                Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
-                Temporal platform, with auth, retries, and observability built in. No ports to
-                expose, no URLs to share.
-              </p>
-              <div className={styles.componentCode}>
-                Caller uses name:{' '}
-                <span style={{ color: 'var(--ifm-color-primary)' }}>"fraud-detection-prod"</span>
-                <br />
-                Temporal routes to:{' '}
-                <span style={{ color: 'var(--nd-purple)' }}>fraud-ns / fraud-task-queue</span>
-                <br />
-                <span style={{ color: 'var(--nd-muted)' }}>
-                  {'// callers never see the target, only the name'}
-                </span>
-              </div>
+        <div className={styles.compECard}>
+          <div className={styles.compENumCol}>
+            <div className={styles.compENum}>1</div>
+          </div>
+          <div className={styles.compEContent}>
+            <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
+            <p className={styles.compERole}>The named entry point callers use to reach a service</p>
+            <p>
+              An Endpoint is a <strong>named connection point</strong> registered in the Nexus
+              Registry. Callers reference it by name. That's all they need. Temporal handles
+              routing to the right team's Namespace and Task Queue behind the scenes.
+            </p>
+            <p>
+              Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
+              Temporal platform, with auth, retries, and observability built in. No ports to
+              expose, no URLs to share.
+            </p>
+            <div className={styles.compECode}>
+              Caller uses name:{' '}
+              <span style={{ color: 'var(--ifm-color-primary)' }}>"fraud-detection-prod"</span>
+              <br />
+              Temporal routes to:{' '}
+              <span style={{ color: 'var(--nd-muted)' }}>fraud-ns / fraud-task-queue</span>
+              <br />
+              <span style={{ color: 'var(--nd-muted)' }}>
+                {'// callers never see the target, only the name'}
+              </span>
             </div>
           </div>
         </div>
 
         {/* 2: Service */}
-        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-purple)' }}>
-          <div className={styles.componentRow}>
-            <div
-              className={styles.componentNum}
-              style={{ background: 'var(--nd-purple-bg)', color: 'var(--nd-purple)' }}
-            >
-              2
-            </div>
-            <div className={styles.componentContent}>
-              <h2 className={styles.componentTitle}>Nexus Service</h2>
-              <p className={styles.componentRole}>The contract you publish for others to consume</p>
-              <p>
-                A Service is a <strong>named collection of Nexus Operations</strong>, similar to an API
-                interface. Multiple services can run in the same worker. Callers import the service
-                definition to get type safety.
-              </p>
-              <p>
-                Example:{' '}
-                <code style={{ color: 'var(--nd-purple)' }}>fraud.v1</code> service exposes{' '}
-                <code>checkTransaction</code>, <code>flagUser</code>, and <code>getScore</code>{' '}
-                operations.
-              </p>
-            </div>
+        <div className={styles.compECard}>
+          <div className={styles.compENumCol}>
+            <div className={styles.compENum}>2</div>
+          </div>
+          <div className={styles.compEContent}>
+            <h2 className={styles.componentTitle}>Nexus Service</h2>
+            <p className={styles.compERole}>The contract you publish for others to consume</p>
+            <p>
+              A Service is a <strong>named collection of Nexus Operations</strong>, similar to an API
+              interface. Multiple services can run in the same Worker. Callers import the service
+              definition to get type safety.
+            </p>
+            <p>
+              Example:{' '}
+              <code style={{ color: 'var(--ifm-color-primary)' }}>fraud.v1</code> service exposes{' '}
+              <code>checkTransaction</code>, <code>flagUser</code>, and <code>getScore</code>{' '}
+              operations.
+            </p>
           </div>
         </div>
 
         {/* 3: Operation */}
-        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-green)' }}>
-          <div className={styles.componentRow}>
-            <div
-              className={styles.componentNum}
-              style={{ background: 'var(--nd-green-bg)', color: 'var(--nd-green)' }}
-            >
-              3
-            </div>
-            <div className={styles.componentContent}>
-              <h2 className={styles.componentTitle}>Nexus Operation</h2>
-              <p className={styles.componentRole}>The individual action: sync or async</p>
-
-              <div className={styles.opTabs}>
-                <button
-                  className={`${styles.opTab} ${opTab === 'sync' ? styles.opTabActive : ''}`}
-                  onClick={() => setOpTab('sync')}
-                >
-                  Synchronous
-                </button>
-                <button
-                  className={`${styles.opTab} ${opTab === 'async' ? styles.opTabActive : ''}`}
-                  onClick={() => setOpTab('async')}
-                >
-                  Asynchronous
-                </button>
-              </div>
+        <div className={styles.compECard}>
+          <div className={styles.compENumCol}>
+            <div className={styles.compENum}>3</div>
+          </div>
+          <div className={styles.compEContent}>
+            <h2 className={styles.componentTitle}>Nexus Operation</h2>
+            <p className={styles.compERole}>The individual action: sync or async</p>
 
-              {opTab === 'sync' ? (
-                <>
-                  <p>
-                    <strong>Synchronous</strong> operations complete in under 10 seconds. The
-                    result comes back in the same HTTP round-trip. Great for quick lookups, scoring,
-                    or validations.
-                  </p>
-                  <div className={styles.componentCode}>
-                    Caller → [Nexus RPC] → Handler → result → Caller
-                    <br />
-                    Duration: milliseconds to &lt;10 seconds
-                  </div>
-                </>
-              ) : (
-                <>
-                  <p>
-                    <strong>Asynchronous</strong> operations start a Workflow and return an
-                    operation token. The caller workflow is suspended. When the handler workflow
-                    completes, a callback delivers the result.
-                  </p>
-                  <div className={styles.componentCode}>
-                    Caller → [start] → Handler starts Workflow → [token]
-                    <br />
-                    ...time passes (up to 60 days)...
-                    <br />
-                    Handler Workflow completes → [callback] → Caller resumes
-                  </div>
-                </>
-              )}
+            <div className={styles.opTabs}>
+              <button
+                className={`${styles.opTab} ${opTab === 'sync' ? styles.opTabActive : ''}`}
+                onClick={() => setOpTab('sync')}
+              >
+                Synchronous
+              </button>
+              <button
+                className={`${styles.opTab} ${opTab === 'async' ? styles.opTabActive : ''}`}
+                onClick={() => setOpTab('async')}
+              >
+                Asynchronous
+              </button>
             </div>
+
+            {opTab === 'sync' ? (
+              <>
+                <p>
+                  <strong>Synchronous</strong> operations complete in under 10 seconds. The
+                  result comes back in the same HTTP round-trip. Great for quick lookups, scoring,
+                  or validations.
+                </p>
+                <div className={styles.compECode}>
+                  Caller → [Nexus RPC] → Handler → result → Caller
+                  <br />
+                  Duration: milliseconds to &lt;10 seconds
+                </div>
+              </>
+            ) : (
+              <>
+                <p>
+                  <strong>Asynchronous</strong> operations start a Workflow and return an
+                  operation token. The caller Workflow is suspended. When the handler Workflow
+                  completes, a callback delivers the result.
+                </p>
+                <div className={styles.compECode}>
+                  Caller → [start] → Handler starts Workflow → [token]
+                  <br />
+                  ...time passes (up to 60 days)...
+                  <br />
+                  Handler Workflow completes → [callback] → Caller resumes
+                </div>
+              </>
+            )}
           </div>
         </div>
 
         {/* 4: Registry */}
-        <div className={styles.card} style={{ borderLeft: '4px solid var(--nd-amber)' }}>
-          <div className={styles.componentRow}>
-            <div
-              className={styles.componentNum}
-              style={{ background: 'var(--nd-amber-bg)', color: 'var(--nd-amber)' }}
-            >
-              4
-            </div>
-            <div className={styles.componentContent}>
-              <h2 className={styles.componentTitle}>Nexus Registry</h2>
-              <p className={styles.componentRole}>The directory of all Endpoints in your account</p>
-              <p>
-                Scoped to your Temporal Cloud account or self-hosted cluster. Teams register
-                Endpoints here. The Registry is the source of truth for endpoint discovery, access
-                control, and audit logging.
-              </p>
-              <div className={styles.componentPills}>
-                <div className={styles.componentPill}>fraud-detection-prod</div>
-                <div className={styles.componentPill}>kyc-verification-v2</div>
-                <div className={styles.componentPill}>notifications-global</div>
-                <div className={`${styles.componentPill} ${styles.componentPillNew}`}>
-                  + register new
-                </div>
+        <div className={styles.compECard}>
+          <div className={styles.compENumCol}>
+            <div className={styles.compENum}>4</div>
+          </div>
+          <div className={styles.compEContent}>
+            <h2 className={styles.componentTitle}>Nexus Registry</h2>
+            <p className={styles.compERole}>The directory of all Endpoints in your account</p>
+            <p>
+              The Nexus Registry is scoped to your Temporal Cloud account or self-hosted cluster. Teams register
+              Endpoints here, and the Registry is the source of truth for Endpoint discovery, access
+              control, and audit logging.
+            </p>
+            <div className={styles.componentPills}>
+              <div className={styles.componentPill}>fraud-detection-prod</div>
+              <div className={styles.componentPill}>kyc-verification-v2</div>
+              <div className={styles.componentPill}>notifications-global</div>
+              <div className={`${styles.componentPill} ${styles.componentPillNew}`}>
+                + register new
               </div>
             </div>
           </div>
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index e464f8fe89..001f7983ec 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -8,8 +8,15 @@
 :global([data-theme='dark']) {
   --nd-surface: #1e1e1e;
   --nd-surface2: #252525;
+  --nd-accent-text: #d4d7ff; /* Very light periwinkle — readable on dark, Temporal UV family */
+  --nd-num-badge-bg: #7F86F1; /* Temporal Lilac for number badges */
   --nd-border: rgba(255, 255, 255, 0.1);
   --nd-muted: #94a3b8;
+  /* Nav tab colors — active/hover purple, inactive stays muted */
+  --nd-nav-inactive: #94a3b8;
+  --nd-nav-hover: #d4d7ff;
+  --nd-nav-active: #7F86F1;
+  --nd-progress-fill: #7F86F1;
   --nd-purple: #a78bfa;
   --nd-purple-bg: rgba(167, 139, 250, 0.12);
   --nd-green: #34d399;
@@ -19,13 +26,40 @@
   --nd-amber: #fbbf24;
   --nd-amber-bg: rgba(251, 191, 36, 0.1);
   --nd-primary-bg: rgba(191, 219, 254, 0.1);
+  /* Temporal brand accent colors */
+  --nd-uv: #444CE7;
+  --nd-uv-badge-bg: rgba(68, 76, 231, 0.2);
+  --nd-uv-badge-border: rgba(68, 76, 231, 0.4);
+  --nd-uv-glow: rgba(68, 76, 231, 0.25);
+  --nd-teal: #1FF1A5;
+  --nd-teal-badge-bg: rgba(31, 241, 165, 0.15);
+  --nd-teal-badge-border: rgba(31, 241, 165, 0.3);
+  --nd-teal-glow: rgba(31, 241, 165, 0.18);
+  --nd-pink: #FF6BFF;
+  --nd-pink-badge-bg: rgba(255, 107, 255, 0.15);
+  --nd-pink-badge-border: rgba(255, 107, 255, 0.3);
+  --nd-pink-glow: rgba(255, 107, 255, 0.18);
+  --nd-grellow: #CFFF0D;
+  --nd-grellow-badge-bg: rgba(207, 255, 13, 0.12);
+  --nd-grellow-badge-border: rgba(207, 255, 13, 0.25);
+  --nd-grellow-glow: rgba(207, 255, 13, 0.14);
+  /* Card surface for Option D style */
+  --nd-comp-card-bg: rgba(31, 32, 63, 0.6);
+  --nd-comp-card-border: rgba(127, 134, 241, 0.15);
 }
 
 :global([data-theme='light']) {
   --nd-surface: #ffffff;
   --nd-surface2: #f1f5f9;
+  --nd-accent-text: #444CE7; /* Temporal UV Blue — readable on light */
+  --nd-num-badge-bg: #444CE7; /* UV Blue for number badges in light */
   --nd-border: rgba(0, 0, 0, 0.08);
   --nd-muted: #64748b;
+  /* Nav tab colors — UV blue in light mode */
+  --nd-nav-inactive: #64748b;
+  --nd-nav-hover: #444CE7;
+  --nd-nav-active: #444CE7;
+  --nd-progress-fill: #444CE7;
   --nd-purple: #7c3aed;
   --nd-purple-bg: rgba(124, 58, 237, 0.08);
   --nd-green: #059669;
@@ -35,6 +69,26 @@
   --nd-amber: #d97706;
   --nd-amber-bg: rgba(217, 119, 6, 0.08);
   --nd-primary-bg: rgba(29, 78, 216, 0.06);
+  /* Temporal brand accent colors — light mode adapted */
+  --nd-uv: #3a41cc;
+  --nd-uv-badge-bg: rgba(58, 65, 204, 0.1);
+  --nd-uv-badge-border: rgba(58, 65, 204, 0.25);
+  --nd-uv-glow: rgba(58, 65, 204, 0.07);
+  --nd-teal: #059669;
+  --nd-teal-badge-bg: rgba(5, 150, 105, 0.1);
+  --nd-teal-badge-border: rgba(5, 150, 105, 0.25);
+  --nd-teal-glow: rgba(5, 150, 105, 0.07);
+  --nd-pink: #9333ea;
+  --nd-pink-badge-bg: rgba(147, 51, 234, 0.1);
+  --nd-pink-badge-border: rgba(147, 51, 234, 0.25);
+  --nd-pink-glow: rgba(147, 51, 234, 0.07);
+  --nd-grellow: #65a30d;
+  --nd-grellow-badge-bg: rgba(101, 163, 13, 0.1);
+  --nd-grellow-badge-border: rgba(101, 163, 13, 0.25);
+  --nd-grellow-glow: rgba(101, 163, 13, 0.07);
+  /* Card surface for Option D style */
+  --nd-comp-card-bg: #ffffff;
+  --nd-comp-card-border: rgba(0, 0, 0, 0.09);
 }
 
 /* ── Shell ─────────────────────────────────────────────── */
@@ -77,7 +131,7 @@
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
-  color: var(--nd-muted);
+  color: var(--nd-nav-inactive);
   cursor: pointer;
   font-size: 13px;
   font-family: var(--ifm-font-family-base);
@@ -89,12 +143,12 @@
 }
 
 .navBtn:hover {
-  color: var(--ifm-font-color-base);
+  color: var(--nd-nav-hover);
 }
 
 .navBtnActive {
-  color: var(--ifm-color-primary);
-  border-bottom-color: var(--ifm-color-primary);
+  color: var(--nd-nav-active);
+  border-bottom-color: var(--nd-nav-active);
 }
 
 /* ── Sections ──────────────────────────────────────────── */
@@ -120,15 +174,15 @@
 .progressBar {
   height: 3px;
   background: var(--nd-border);
-  border-radius: 2px;
+  border-radius: 0;
   margin-bottom: 36px;
   overflow: hidden;
 }
 
 .progressFill {
   height: 100%;
-  background: var(--ifm-color-primary);
-  border-radius: 2px;
+  background: var(--nd-progress-fill);
+  border-radius: 0;
   transition: width 0.4s ease;
 }
 
@@ -144,7 +198,7 @@
 .sectionHeading {
   font-size: 20px;
   font-weight: 600;
-  color: var(--ifm-color-primary);
+  color: var(--ifm-font-color-base);
   margin: 32px 0 16px;
 }
 
@@ -152,7 +206,7 @@
 .card {
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 20px;
   margin-bottom: 16px;
 }
@@ -173,7 +227,7 @@
   font-size: 11px;
   font-weight: 600;
   padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: 0;
   margin-bottom: 8px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -324,7 +378,7 @@
   color: var(--ifm-background-color);
   border: none;
   padding: 10px 20px;
-  border-radius: 8px;
+  border-radius: 0;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
@@ -374,7 +428,7 @@
   padding: 8px 18px;
   background: none;
   border: 1px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   color: var(--nd-muted);
   cursor: pointer;
   font-size: 13px;
@@ -461,25 +515,9 @@
   transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Glowing dot rides the leading edge of the fill — no calc() needed */
-.flowTrackFill::after {
-  content: '';
-  position: absolute;
-  right: -6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--ifm-color-primary);
-  box-shadow: 0 0 10px 2px var(--ifm-color-primary);
-  opacity: 1;
-  transition: opacity 0.3s;
-}
-
 /* Hide the dot when the track fill is empty (no signal traveling yet) */
 .flowTrackFillEmpty::after {
-  opacity: 0;
+  display: none;
 }
 
 .packet {
@@ -513,7 +551,7 @@
 .flowDetail {
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 16px 20px;
   margin-bottom: 16px;
   min-height: 72px;
@@ -550,7 +588,7 @@
 .statusLog {
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 14px 16px;
   font-family: var(--ifm-font-family-monospace);
   font-size: 12px;
@@ -607,7 +645,7 @@
 .buildStepBtn {
   background: none;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 12px;
   cursor: pointer;
   text-align: left;
@@ -657,7 +695,7 @@
   background: var(--nd-surface2);
   border: 1px solid var(--nd-border);
   border-bottom: none;
-  border-radius: 8px 8px 0 0;
+  border-radius: 0;
   padding: 8px 16px;
 }
 
@@ -665,7 +703,7 @@
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
   border-top: none;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0;
   padding: 14px 16px;
   font-size: 13px;
   color: var(--nd-muted);
@@ -705,7 +743,7 @@
 .componentNum {
   width: 48px;
   height: 48px;
-  border-radius: 10px;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -733,7 +771,7 @@
 
 .componentCode {
   background: var(--nd-surface2);
-  border-radius: 6px;
+  border-radius: 0;
   padding: 10px 14px;
   font-size: 12px;
   font-family: var(--ifm-font-family-monospace);
@@ -752,7 +790,7 @@
 .componentPill {
   background: var(--nd-surface2);
   border: 1px solid var(--nd-border);
-  border-radius: 6px;
+  border-radius: 0;
   padding: 5px 12px;
   font-size: 12px;
   color: var(--ifm-font-color-base);
@@ -954,7 +992,7 @@
   padding: 8px 14px;
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   font-size: 13px;
   font-weight: 500;
   color: var(--ifm-font-color-base);
@@ -974,7 +1012,7 @@
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
-  border-radius: 8px;
+  border-radius: 0;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
@@ -993,12 +1031,12 @@
 .runitLinkPrimary {
   background: var(--ifm-color-primary);
   border-color: var(--ifm-color-primary);
-  color: #fff;
+  color: #141414;
 }
 
 .runitLinkPrimary:hover {
   opacity: 0.88;
-  color: #fff;
+  color: #141414;
   border-color: var(--ifm-color-primary);
 }
 
@@ -1014,7 +1052,7 @@
 .runitCmd {
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 16px;
   font-family: var(--ifm-font-family-monospace);
   font-size: 13px;
@@ -1051,7 +1089,7 @@
 .quizCard {
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 24px;
   margin-bottom: 16px;
 }
@@ -1072,7 +1110,7 @@
 .quizOpt {
   background: var(--nd-surface2);
   border: 2px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 16px;
   cursor: pointer;
   font-size: 13px;
@@ -1103,7 +1141,7 @@
   margin-top: 12px;
   font-size: 13px;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: 0;
   line-height: 1.5;
 }
 
@@ -1120,7 +1158,7 @@
 .scoreCard {
   background: var(--nd-surface);
   border: 2px solid var(--ifm-color-primary);
-  border-radius: 16px;
+  border-radius: 0;
   padding: 32px;
   text-align: center;
   margin-top: 24px;
@@ -1186,3 +1224,127 @@
 .cross {
   color: var(--nd-muted);
 }
+
+/* ── Option E: UV blue minimal list ─────────────────────── */
+.compEList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.compECard {
+  display: flex;
+  border: 1px solid var(--nd-border);
+}
+
+.compENumCol {
+  width: 60px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 24px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--nd-border);
+  background: var(--nd-surface2);
+}
+
+.compENum {
+  width: 30px;
+  height: 30px;
+  background: var(--nd-num-badge-bg);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.compEContent {
+  padding: 24px;
+  flex: 1;
+  min-width: 0;
+}
+
+.compERole {
+  font-size: 11px;
+  color: var(--nd-accent-text);
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+}
+
+.compECode {
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 12px;
+  background: var(--nd-surface2);
+  border-left: 2px solid var(--nd-accent-text);
+  padding: 10px 14px;
+  margin-top: 12px;
+  color: var(--ifm-font-color-base);
+  line-height: 1.8;
+}
+
+/* ── Option D: glass cards with gradient glow ───────────── */
+.compCard {
+  background: var(--nd-comp-card-bg);
+  border: 1px solid var(--nd-comp-card-border);
+  padding: 24px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.compCard::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  pointer-events: none;
+}
+
+.compCard1::after { background: linear-gradient(to top, var(--nd-uv-glow), transparent); }
+.compCard2::after { background: linear-gradient(to top, var(--nd-teal-glow), transparent); }
+.compCard3::after { background: linear-gradient(to top, var(--nd-pink-glow), transparent); }
+.compCard4::after { background: linear-gradient(to top, var(--nd-grellow-glow), transparent); }
+
+.compBadge {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.compBadge1 { background: var(--nd-uv-badge-bg); color: var(--nd-uv); border: 1px solid var(--nd-uv-badge-border); }
+.compBadge2 { background: var(--nd-teal-badge-bg); color: var(--nd-teal); border: 1px solid var(--nd-teal-badge-border); }
+.compBadge3 { background: var(--nd-pink-badge-bg); color: var(--nd-pink); border: 1px solid var(--nd-pink-badge-border); }
+.compBadge4 { background: var(--nd-grellow-badge-bg); color: var(--nd-grellow); border: 1px solid var(--nd-grellow-badge-border); }
+
+.compAccent1 { color: var(--nd-uv); }
+.compAccent2 { color: var(--nd-teal); }
+.compAccent3 { color: var(--nd-pink); }
+.compAccent4 { color: var(--nd-grellow); }
+
+.compPill {
+  display: inline-block;
+  border: 1px solid var(--nd-comp-card-border);
+  color: var(--nd-muted);
+  font-size: 11px;
+  padding: 4px 10px;
+  margin: 3px 3px 0 0;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.compPillAccent {
+  border-color: var(--nd-uv-badge-border);
+  color: var(--nd-uv);
+}
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index f2d9965a74..8991b236d8 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -12,7 +12,7 @@ export default function Overview({ onNext }: Props) {
 
       <h1>What is Temporal Nexus?</h1>
       <p className={styles.lead}>
-        Nexus lets different teams share Temporal workflows across team, namespace, region,
+        Nexus lets different teams share Temporal Workflows across team, Namespace, region,
         and cloud boundaries, without exposing internal implementation details.
       </p>
 
@@ -24,12 +24,12 @@ export default function Overview({ onNext }: Props) {
           marginBottom: 32,
         }}
       >
-        <h3 style={{ color: 'var(--ifm-color-primary)', marginBottom: 8, fontSize: 15 }}>
+        <h3 style={{ color: 'var(--ifm-font-color-base)', marginBottom: 8, fontSize: 15 }}>
           The core idea in one sentence
         </h3>
         <p style={{ fontSize: 15, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.7 }}>
-          Team A can call Team B's workflows like a typed API, with full durability, retries,
-          and fault-tolerance built in, without needing access to Team B's namespace or knowing
+          Team A can call Team B's Workflows like a typed API, with full durability, retries,
+          and fault-tolerance built in, without needing access to Team B's Namespace or knowing
           how their code works.
         </p>
       </div>
@@ -39,9 +39,9 @@ export default function Overview({ onNext }: Props) {
         <div className={styles.card} style={{ borderColor: 'var(--nd-red)' }}>
           <div className={`${styles.tag} ${styles.tagRed}`}>Without Nexus</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Siloed Teams</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
-            Each team works in their own Temporal namespace. There's no clean way for the Payments
-            team to trigger an action in the Fraud Detection team's workflow without tight coupling
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
+            Each team works in their own Temporal Namespace. There's no clean way for the Payments
+            team to trigger an action in the Fraud Detection team's Workflow without tight coupling
             or shared credentials. Teams either share namespaces (messy) or build fragile HTTP
             bridges (unreliable).
           </p>
@@ -49,9 +49,9 @@ export default function Overview({ onNext }: Props) {
         <div className={styles.card} style={{ borderColor: 'var(--nd-green)' }}>
           <div className={`${styles.tag} ${styles.tagGreen}`}>With Nexus</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Modular and Safe</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
             The Fraud Detection team publishes a Nexus Service with a clear contract. The Payments
-            team calls it from their workflow like any other operation. Nexus handles routing,
+            team calls it from their Workflow like any other operation. Nexus handles routing,
             retries, security, and observability, across any boundary.
           </p>
         </div>
@@ -127,31 +127,31 @@ export default function Overview({ onNext }: Props) {
         <div className={styles.card}>
           <div className={`${styles.tag} ${styles.tagBlue}`}>Durability</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Up to 60 Days</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
-            Async Nexus Operations can run for up to 60 days in Temporal Cloud. The caller workflow
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
+            Async Nexus Operations can run for up to 60 days in Temporal Cloud. The caller Workflow
             is suspended until the result arrives.
           </p>
         </div>
         <div className={styles.card}>
           <div className={`${styles.tag} ${styles.tagGreen}`}>Reliability</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>At-Least-Once</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
-            Nexus Machinery retries failed operations automatically. Pair with workflow ID policies
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
+            Nexus Machinery retries failed Operations automatically. Pair with Workflow ID policies
             to get exactly-once semantics.
           </p>
         </div>
         <div className={styles.card}>
           <div className={`${styles.tag} ${styles.tagPurple}`}>Security</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Built-in Auth</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
-            mTLS encryption and namespace allowlists control who can call what. No API keys in
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
+            mTLS encryption and Namespace allowlists control who can call what. No API keys in
             code.
           </p>
         </div>
         <div className={styles.card}>
           <div className={`${styles.tag} ${styles.tagAmber}`}>Boundaries</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Cross-Everything</h3>
-          <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: 0, lineHeight: 1.6 }}>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
             Works across teams, namespaces, regions (AWS &amp; GCP), and clouds, with the same
             developer experience everywhere.
           </p>
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index 7522b03b56..ea0cfe6336 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -141,14 +141,6 @@ export default function RunIt({ onNext }: Props) {
               >
                 View on GitHub →
               </a>
-              <a
-                href="https://stackblitz.com/github/temporalio/samples-typescript/tree/main/nexus-hello"
-                target="_blank"
-                rel="noopener noreferrer"
-                className={styles.runitLink}
-              >
-                Open in StackBlitz ↗
-              </a>
             </div>
           </div>
 
diff --git a/src/components/NexusDemo/flowSteps.ts b/src/components/NexusDemo/flowSteps.ts
index 6d61ddbb35..a7bdd04f0a 100644
--- a/src/components/NexusDemo/flowSteps.ts
+++ b/src/components/NexusDemo/flowSteps.ts
@@ -15,31 +15,31 @@ export const syncSteps: FlowStep[] = [
   {
     label: 'Operation scheduled',
     detail:
-      'The caller workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the workflow execution.',
+      'The caller Workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the Workflow execution.',
     activeNode: 0,
     packetPct: 0,
     log: { level: 'info', event: 'SCHEDULE', msg: 'ScheduleNexusOperation command recorded' },
   },
   {
-    label: 'Request forwarded to endpoint',
+    label: 'Request forwarded to Endpoint',
     detail:
-      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint URL for the Echo operation.",
+      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint URL for the Echo Operation.",
     activeNode: 1,
     packetPct: 50,
     log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/Echo → nexus-simple-endpoint' },
   },
   {
-    label: 'Handler worker receives task',
+    label: 'Handler Worker receives Task',
     detail:
-      'The handler worker polls its task queue and picks up the Nexus Task. The handler service is invoked.',
+      'The handler Worker polls its Task Queue and picks up the Nexus Task. The handler Service is invoked.',
     activeNode: 2,
     packetPct: 100,
-    log: { level: 'info', event: 'POLL', msg: 'Handler worker dequeued Nexus Task' },
+    log: { level: 'info', event: 'POLL', msg: 'Handler Worker dequeued Nexus Task' },
   },
   {
     label: 'Executes inline (< 10s)',
     detail:
-      'The Echo handler runs directly in the worker process and returns the result immediately. No workflow is started.',
+      'The Echo handler runs directly in the Worker process and returns the result immediately. No Workflow is started.',
     activeNode: 2,
     packetPct: 100,
     log: { level: 'success', event: 'COMPLETE', msg: 'Sync handler returned in < 1ms' },
@@ -47,10 +47,10 @@ export const syncSteps: FlowStep[] = [
   {
     label: 'Result delivered to caller',
     detail:
-      'The result is routed back through the Nexus Endpoint and Temporal server. The caller workflow resumes from where it left off.',
+      'The result is routed back through the Nexus Endpoint and Temporal server. The caller Workflow resumes from where it left off.',
     activeNode: 0,
     packetPct: 0,
-    log: { level: 'success', event: 'RESUME', msg: 'Caller workflow resumed with result' },
+    log: { level: 'success', event: 'RESUME', msg: 'Caller Workflow resumed with result' },
   },
 ];
 
@@ -58,23 +58,23 @@ export const asyncSteps: FlowStep[] = [
   {
     label: 'Operation scheduled',
     detail:
-      'The caller workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the workflow.',
+      'The caller Workflow calls ExecuteNexusOperationAsync(). Temporal records a ScheduleNexusOperation command and suspends the Workflow.',
     activeNode: 0,
     packetPct: 0,
     log: { level: 'info', event: 'SCHEDULE', msg: 'ScheduleNexusOperation command recorded' },
   },
   {
-    label: 'Request forwarded to endpoint',
+    label: 'Request forwarded to Endpoint',
     detail:
-      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint for the SayHello operation.",
+      "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint for the SayHello Operation.",
     activeNode: 1,
     packetPct: 50,
     log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/SayHello → nexus-simple-endpoint' },
   },
   {
-    label: 'Handler starts a workflow',
+    label: 'Handler starts a Workflow',
     detail:
-      'The handler worker starts HelloHandlerWorkflow and immediately returns an operation token. The caller workflow stays suspended.',
+      'The handler Worker starts HelloHandlerWorkflow and immediately returns an operation token. The caller Workflow stays suspended.',
     activeNode: 2,
     packetPct: 100,
     log: { level: 'info', event: 'START_WF', msg: 'HelloHandlerWorkflow started, token returned' },
@@ -82,7 +82,7 @@ export const asyncSteps: FlowStep[] = [
   {
     label: 'Workflow runs (seconds → days)',
     detail:
-      'HelloHandlerWorkflow runs to completion. It could call external APIs, wait for signals, or run sub-workflows, for as long as needed.',
+      'HelloHandlerWorkflow runs to completion. It could call external APIs, wait for Signals, or run child Workflows, for as long as needed.',
     activeNode: 2,
     packetPct: 100,
     log: { level: 'warn', event: 'RUNNING', msg: 'HelloHandlerWorkflow executing...' },
@@ -90,15 +90,15 @@ export const asyncSteps: FlowStep[] = [
   {
     label: 'Completion callback delivered',
     detail:
-      'When the handler workflow completes, a callback is delivered back to the caller namespace via the Nexus Endpoint.',
+      'When the handler Workflow completes, a callback is delivered back to the caller Namespace via the Nexus Endpoint.',
     activeNode: 1,
     packetPct: 50,
-    log: { level: 'success', event: 'CALLBACK', msg: 'Completion callback delivered to caller namespace' },
+    log: { level: 'success', event: 'CALLBACK', msg: 'Completion callback delivered to caller Namespace' },
   },
   {
-    label: 'Caller workflow resumes',
+    label: 'Caller Workflow resumes',
     detail:
-      'The Future resolves with the operation result. The caller workflow continues execution as if calling any other API.',
+      'The Future resolves with the operation result. The caller Workflow continues execution as if calling any other API.',
     activeNode: 0,
     packetPct: 0,
     log: { level: 'success', event: 'RESUME', msg: 'Caller resumed: "¡Hola! Temporal"' },
diff --git a/src/components/NexusDemo/quizQuestions.ts b/src/components/NexusDemo/quizQuestions.ts
index d992e098c6..b46c6f4783 100644
--- a/src/components/NexusDemo/quizQuestions.ts
+++ b/src/components/NexusDemo/quizQuestions.ts
@@ -9,43 +9,43 @@ export const quizQuestions: QuizQuestion[] = [
   {
     q: 'What problem does Temporal Nexus primarily solve?',
     options: [
-      'Making workflows run faster',
-      'Connecting workflows across team and namespace boundaries safely',
+      'Making Workflows run faster',
+      'Connecting Workflows across team and Namespace boundaries safely',
       'Replacing HTTP APIs entirely',
       'Scheduling recurring jobs',
     ],
     correct: 1,
     explanation:
-      'Nexus is specifically designed to connect durable executions across team, namespace, region, and cloud boundaries, enabling modular architecture without tight coupling.',
+      'Nexus is specifically designed to connect durable executions across team, Namespace, region, and cloud boundaries, enabling modular architecture without tight coupling.',
   },
   {
     q: 'What is the maximum duration of an asynchronous Nexus Operation in Temporal Cloud?',
     options: ['10 seconds', '24 hours', '60 days', '1 year'],
     correct: 2,
     explanation:
-      'Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team operations.',
+      'Async Nexus Operations can run for up to 60 days in Temporal Cloud (Schedule-to-Close timeout). This is what makes Nexus suitable for long-running cross-team Operations.',
   },
   {
     q: 'A synchronous Nexus Operation must complete within:',
     options: ['1 second', '10 seconds', '1 minute', '1 hour'],
     correct: 1,
     explanation:
-      'Synchronous operations must complete within 10 seconds. For longer work, use asynchronous operations backed by a Workflow.',
+      'Synchronous Operations must complete within 10 seconds. For longer work, use asynchronous Operations backed by a Workflow.',
   },
   {
     q: 'What is a Nexus Endpoint?',
     options: [
       'A general-purpose HTTP reverse proxy',
-      'A named router that maps to a target namespace and task queue',
-      'A workflow definition',
+      'A named router that maps to a target Namespace and Task Queue',
+      'A Workflow definition',
       'The Temporal Cloud UI',
     ],
     correct: 1,
     explanation:
-      "A Nexus Endpoint is not a general HTTP proxy. It's a specifically-designed router with auth, retries, and observability, pointing to a handler namespace and task queue.",
+      "A Nexus Endpoint is not a general HTTP proxy. It's a specifically-designed router with auth, retries, and observability, pointing to a handler Namespace and Task Queue.",
   },
   {
-    q: 'If a caller workflow is canceled, what happens to pending Nexus Operations?',
+    q: 'If a caller Workflow is canceled, what happens to pending Nexus Operations?',
     options: [
       'They continue running independently',
       'They are terminated immediately',
@@ -54,18 +54,18 @@ export const quizQuestions: QuizQuestion[] = [
     ],
     correct: 2,
     explanation:
-      'Cancellation propagates automatically through Nexus. Canceling the caller workflow sends a cancel signal to all pending Nexus Operations, which then cancel their handler workflows.',
+      'Cancellation propagates automatically through Nexus. Canceling the caller Workflow sends a cancel Signal to all pending Nexus Operations, which then cancel their handler Workflows.',
   },
   {
     q: "What does Team A need from Team B to call a Nexus Service?",
     options: [
-      "Access to Team B's namespace and credentials",
-      "A copy of Team B's workflow code",
-      'Only the shared service contract definition',
+      "Access to Team B's Namespace and credentials",
+      "A copy of Team B's Workflow code",
+      'Only the shared Service contract definition',
       "Team B's database connection string",
     ],
     correct: 2,
     explanation:
-      "Team A only needs the shared service contract. Team B's internal implementation (which workflows they use, how they work) is completely hidden.",
+      "Team A only needs the shared Service contract. Team B's internal implementation (which Workflows they use, how they work) is completely hidden.",
   },
 ];

From a36c14dfba93cf30360a1996416bc3198d977ef5 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 10:53:33 -0500
Subject: [PATCH 16/24] Update Overview lead copy to reflect full Nexus
 capability scope

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/NexusDemo/Overview.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 8991b236d8..0d56c529bc 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -12,8 +12,9 @@ export default function Overview({ onNext }: Props) {
 
       <h1>What is Temporal Nexus?</h1>
       <p className={styles.lead}>
-        Nexus lets different teams share Temporal Workflows across team, Namespace, region,
-        and cloud boundaries, without exposing internal implementation details.
+        Nexus lets different teams share Temporal's capabilities, including Workflows, Signals,
+        Queries, and Updates, across team, Namespace, region, and cloud boundaries, without
+        exposing internal implementation details.
       </p>
 
       <div
@@ -144,8 +145,7 @@ export default function Overview({ onNext }: Props) {
           <div className={`${styles.tag} ${styles.tagPurple}`}>Security</div>
           <h3 style={{ fontSize: 15, marginBottom: 8 }}>Built-in Auth</h3>
           <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
-            mTLS encryption and Namespace allowlists control who can call what. No API keys in
-            code.
+            mTLS encryption and Namespace allowlists control who can call what. Teams don't need to share credentials with each other. Access is enforced at the platform level.
           </p>
         </div>
         <div className={styles.card}>

From c0a7924b8c7b1d11e7a8252d12d16ea70e04362e Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 13:04:12 -0500
Subject: [PATCH 17/24] Add Resources section and polish copy across NexusDemo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/NexusDemo/NexusDemo.module.css |  8 +++
 src/components/NexusDemo/Overview.tsx         |  4 +-
 src/components/NexusDemo/Quiz.tsx             | 51 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index 001f7983ec..e1d4f80ea9 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -99,6 +99,14 @@
   min-height: 100vh;
 }
 
+:global([data-theme='light']) .shell {
+  background: #f4f6f9;
+}
+
+:global([data-theme='light']) .card {
+  background: #ffffff;
+}
+
 /* ── Nav ───────────────────────────────────────────────── */
 .nav {
   position: sticky;
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 0d56c529bc..46e1f41881 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -12,8 +12,8 @@ export default function Overview({ onNext }: Props) {
 
       <h1>What is Temporal Nexus?</h1>
       <p className={styles.lead}>
-        Nexus lets different teams share Temporal's capabilities, including Workflows, Signals,
-        Queries, and Updates, across team, Namespace, region, and cloud boundaries, without
+        Nexus lets different teams share Temporal's capabilities such as Workflows, Signals,
+        Queries, and Updates - across team, Namespace, region, and cloud boundaries, without
         exposing internal implementation details.
       </p>
 
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
index 659f5d1e5f..a46509ec3d 100644
--- a/src/components/NexusDemo/Quiz.tsx
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -96,6 +96,57 @@ export default function Quiz() {
           </button>
         </div>
       )}
+
+      <h2 className={styles.sectionHeading} style={{ marginTop: 48 }}>Resources</h2>
+      <div className={styles.cardGrid} style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagBlue}`}>Encyclopedia</div>
+          <h3 style={{ fontSize: 15, marginBottom: 6 }}>Temporal Nexus</h3>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 14px', lineHeight: 1.6 }}>
+            In-depth coverage of how Nexus works, from core concepts to security and observability.
+          </p>
+          <a href="/nexus" className={`${styles.runitLink}`}>
+            Read the docs →
+          </a>
+        </div>
+
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagPurple}`}>SDK Guides</div>
+          <h3 style={{ fontSize: 15, marginBottom: 6 }}>Build with Nexus</h3>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 14px', lineHeight: 1.6 }}>
+            SDK-specific guidance for Go, TypeScript, .NET, Java, and Python.
+          </p>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <a href="/develop/go/nexus" className={`${styles.runitLink}`}>Go</a>
+            <a href="/develop/typescript/nexus" className={`${styles.runitLink}`}>TypeScript</a>
+            <a href="/develop/dotnet/nexus" className={`${styles.runitLink}`}>.NET</a>
+            <a href="/develop/java/nexus" className={`${styles.runitLink}`}>Java</a>
+            <a href="/develop/python/nexus" className={`${styles.runitLink}`}>Python</a>
+          </div>
+        </div>
+
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagGreen}`}>Temporal Cloud</div>
+          <h3 style={{ fontSize: 15, marginBottom: 6 }}>Nexus on Temporal Cloud</h3>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 14px', lineHeight: 1.6 }}>
+            Everything you need to know about using Nexus on Temporal Cloud.
+          </p>
+          <a href="/cloud/nexus" className={`${styles.runitLink}`}>
+            Cloud docs →
+          </a>
+        </div>
+
+        <div className={styles.card}>
+          <div className={`${styles.tag} ${styles.tagAmber}`}>Evaluate</div>
+          <h3 style={{ fontSize: 15, marginBottom: 6 }}>Learn More About Nexus</h3>
+          <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 14px', lineHeight: 1.6 }}>
+            Customer use cases, a breakdown of benefits, and guidance on when Nexus is the right choice.
+          </p>
+          <a href="/evaluate/nexus" className={`${styles.runitLink}`}>
+            Explore →
+          </a>
+        </div>
+      </div>
     </div>
   );
 }

From 54a1dd76a5b12a2f4ce4003f7ae453b94fb57202 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 13:12:49 -0500
Subject: [PATCH 18/24] Add Interactive Demos sidebar section, fix nexus-demo
 title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx | 4 ++--
 sidebars.js         | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index 44dc0009c2..713a7a8897 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -1,8 +1,8 @@
 ---
 id: nexus-demo
-title: Temporal Nexus — Interactive Demo
+title: Temporal Nexus - Interactive Demo
 sidebar_label: Interactive Demo
-description: An interactive walkthrough of Temporal Nexus — what it is, how it works, and how to build with it.
+description: An interactive walkthrough of Temporal Nexus - what it is, how it works, and how to build with it.
 slug: /nexus-demo
 tags:
   - Nexus
diff --git a/sidebars.js b/sidebars.js
index d5944d13fb..c95b04b524 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -890,6 +890,14 @@ module.exports = {
       ],
     },
     'glossary',
+    {
+      type: 'category',
+      label: 'Interactive Demos',
+      collapsed: false,
+      items: [
+        'nexus-demo',
+      ],
+    },
     'with-ai',
     // {
     //   type: "autogenerated",

From c8289e632ac895b8db5bea2a4be7eebf45e44322 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 14:28:20 -0500
Subject: [PATCH 19/24] Polish NexusDemo: orange Python tag, sharp corners,
 copy fixes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../NexusDemo/ComponentsSection.tsx           |  2 +-
 src/components/NexusDemo/NexusDemo.module.css | 23 +++--
 src/components/NexusDemo/Overview.tsx         |  2 +-
 src/components/NexusDemo/Quiz.tsx             |  6 +-
 src/components/NexusDemo/RunIt.tsx            | 87 +++++++++++++++++--
 5 files changed, 103 insertions(+), 17 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index d682c18ea8..097c718067 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -14,7 +14,7 @@ export default function ComponentsSection({ onNext }: Props) {
 
       <h1>The Four Building Blocks</h1>
       <p className={styles.lead}>
-        Nexus has four key concepts. These four concepts are the foundation of everything in Nexus.
+        Nexus has four core concepts.
       </p>
 
       <div className={styles.compEList}>
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index e1d4f80ea9..5ca165e49f 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -23,6 +23,8 @@
   --nd-green-bg: rgba(52, 211, 153, 0.1);
   --nd-red: #f87171;
   --nd-red-bg: rgba(248, 113, 113, 0.1);
+  --nd-orange: #fb923c;
+  --nd-orange-bg: rgba(251, 146, 60, 0.15);
   --nd-amber: #fbbf24;
   --nd-amber-bg: rgba(251, 191, 36, 0.1);
   --nd-primary-bg: rgba(191, 219, 254, 0.1);
@@ -66,6 +68,8 @@
   --nd-green-bg: rgba(5, 150, 105, 0.08);
   --nd-red: #dc2626;
   --nd-red-bg: rgba(220, 38, 38, 0.08);
+  --nd-orange: #c2410c;
+  --nd-orange-bg: rgba(194, 65, 12, 0.1);
   --nd-amber: #d97706;
   --nd-amber-bg: rgba(217, 119, 6, 0.08);
   --nd-primary-bg: rgba(29, 78, 216, 0.06);
@@ -266,6 +270,11 @@
   color: var(--nd-amber);
 }
 
+.tagOrange {
+  background: var(--nd-orange-bg);
+  color: var(--nd-orange);
+}
+
 /* ── Namespace layout ──────────────────────────────────── */
 .nsContainer {
   display: flex;
@@ -280,7 +289,7 @@
   min-width: 200px;
   background: var(--nd-surface);
   border: 2px solid var(--nd-border);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 16px;
   transition: border-color 0.2s;
 }
@@ -299,7 +308,7 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 3px 10px;
-  border-radius: 20px;
+  border-radius: 0;
   display: inline-block;
   margin-bottom: 12px;
 }
@@ -328,7 +337,7 @@
 .endpointBridge {
   background: var(--nd-primary-bg);
   border: 2px dashed var(--ifm-color-primary);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 14px 20px;
   text-align: center;
 }
@@ -349,7 +358,7 @@
 .wfBlock {
   background: var(--nd-surface2);
   border: 1px solid var(--nd-border);
-  border-radius: 8px;
+  border-radius: 0;
   padding: 10px 14px;
   margin-bottom: 8px;
   font-size: 13px;
@@ -361,7 +370,7 @@
 .wfIcon {
   width: 24px;
   height: 24px;
-  border-radius: 6px;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -454,7 +463,7 @@
   position: relative; /* anchor for singlePacket */
   background: var(--nd-surface);
   border: 1px solid var(--nd-border);
-  border-radius: 12px;
+  border-radius: 0;
   padding: 28px 20px;
   display: flex;
   align-items: center;
@@ -466,7 +475,7 @@
 .flowNode {
   background: var(--nd-surface2);
   border: 2px solid var(--nd-border);
-  border-radius: 10px;
+  border-radius: 0;
   padding: 12px 16px;
   text-align: center;
   flex: 0 0 auto;
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 46e1f41881..8392511696 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -49,7 +49,7 @@ export default function Overview({ onNext }: Props) {
         </div>
         <div className={styles.card} style={{ borderColor: 'var(--nd-green)' }}>
           <div className={`${styles.tag} ${styles.tagGreen}`}>With Nexus</div>
-          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Modular and Safe</h3>
+          <h3 style={{ fontSize: 15, marginBottom: 8 }}>Modular and Secure</h3>
           <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.6 }}>
             The Fraud Detection team publishes a Nexus Service with a clear contract. The Payments
             team calls it from their Workflow like any other operation. Nexus handles routing,
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
index a46509ec3d..1525600bd5 100644
--- a/src/components/NexusDemo/Quiz.tsx
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -106,7 +106,7 @@ export default function Quiz() {
             In-depth coverage of how Nexus works, from core concepts to security and observability.
           </p>
           <a href="/nexus" className={`${styles.runitLink}`}>
-            Read the docs →
+            Read the docs
           </a>
         </div>
 
@@ -132,7 +132,7 @@ export default function Quiz() {
             Everything you need to know about using Nexus on Temporal Cloud.
           </p>
           <a href="/cloud/nexus" className={`${styles.runitLink}`}>
-            Cloud docs →
+            Cloud docs
           </a>
         </div>
 
@@ -143,7 +143,7 @@ export default function Quiz() {
             Customer use cases, a breakdown of benefits, and guidance on when Nexus is the right choice.
           </p>
           <a href="/evaluate/nexus" className={`${styles.runitLink}`}>
-            Explore →
+            Explore
           </a>
         </div>
       </div>
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index ea0cfe6336..9e38d6d012 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -2,12 +2,14 @@ import React, { useState } from 'react';
 import styles from './NexusDemo.module.css';
 
 type Props = { onNext: () => void };
-type Lang = 'dotnet' | 'go' | 'typescript';
+type Lang = 'dotnet' | 'go' | 'typescript' | 'java' | 'python';
 
 const TABS: { id: Lang; label: string }[] = [
   { id: 'dotnet', label: '.NET' },
   { id: 'go', label: 'Go' },
   { id: 'typescript', label: 'TypeScript' },
+  { id: 'java', label: 'Java' },
+  { id: 'python', label: 'Python' },
 ];
 
 function Cmd({ prompt, cmd }: { prompt: string; cmd: string }) {
@@ -30,7 +32,7 @@ export default function RunIt({ onNext }: Props) {
 
       <h1>Run It Yourself</h1>
       <p className={styles.lead}>
-        Three official Nexus samples. Pick a language and run locally in minutes.
+        There are five official Nexus samples across different SDKs. Pick a language and run one locally.
       </p>
 
       <div className={styles.runTabs}>
@@ -62,7 +64,7 @@ export default function RunIt({ onNext }: Props) {
                 rel="noopener noreferrer"
                 className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
               >
-                View on GitHub →
+                View on GitHub
               </a>
             </div>
           </div>
@@ -101,7 +103,7 @@ export default function RunIt({ onNext }: Props) {
                 rel="noopener noreferrer"
                 className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
               >
-                View on GitHub →
+                View on GitHub
               </a>
             </div>
           </div>
@@ -139,7 +141,7 @@ export default function RunIt({ onNext }: Props) {
                 rel="noopener noreferrer"
                 className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
               >
-                View on GitHub →
+                View on GitHub
               </a>
             </div>
           </div>
@@ -161,6 +163,81 @@ export default function RunIt({ onNext }: Props) {
         </>
       )}
 
+      {lang === 'java' && (
+        <>
+          <div className={styles.card} style={{ marginBottom: 20 }}>
+            <div className={`${styles.tag} ${styles.tagAmber}`} style={{ marginBottom: 10 }}>
+              samples-java / nexus
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>
+              Java implementation using Gradle, with sync Echo and async SayHello operations across two Namespaces.
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <a
+                href="https://github.com/temporalio/samples-java/tree/main/core/src/main/java/io/temporal/samples/nexus"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
+              >
+                View on GitHub
+              </a>
+            </div>
+          </div>
+
+          <h3 className={styles.runitSectionLabel}>Setup</h3>
+          <Cmd prompt="#" cmd="Create two namespaces + a Nexus endpoint first (see README)" />
+          <Cmd
+            prompt="$"
+            cmd="git clone https://github.com/temporalio/samples-java && cd samples-java"
+          />
+
+          <h3 className={styles.runitSectionLabel} style={{ marginTop: 16 }}>
+            Run (3 terminals)
+          </h3>
+          <Cmd prompt="T1 $" cmd="./gradlew -q execute -PmainClass=io.temporal.samples.nexus.handler.HandlerWorker" />
+          <Cmd prompt="T2 $" cmd="./gradlew -q execute -PmainClass=io.temporal.samples.nexus.caller.CallerWorker" />
+          <Cmd prompt="T3 $" cmd="./gradlew -q execute -PmainClass=io.temporal.samples.nexus.caller.CallerStarter" />
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal</div>
+        </>
+      )}
+
+      {lang === 'python' && (
+        <>
+          <div className={styles.card} style={{ marginBottom: 20 }}>
+            <div className={`${styles.tag} ${styles.tagRed}`} style={{ marginBottom: 10 }}>
+              samples-python / hello_nexus
+            </div>
+            <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>
+              Python implementation with sync and async Nexus Operations across two Namespaces.
+            </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <a
+                href="https://github.com/temporalio/samples-python/tree/main/hello_nexus"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${styles.runitLink} ${styles.runitLinkPrimary}`}
+              >
+                View on GitHub
+              </a>
+            </div>
+          </div>
+
+          <h3 className={styles.runitSectionLabel}>Setup</h3>
+          <Cmd prompt="#" cmd="Create two namespaces + a Nexus endpoint first (see README)" />
+          <Cmd
+            prompt="$"
+            cmd="git clone https://github.com/temporalio/samples-python && cd samples-python"
+          />
+
+          <h3 className={styles.runitSectionLabel} style={{ marginTop: 16 }}>
+            Run (2 terminals)
+          </h3>
+          <Cmd prompt="T1 $" cmd="uv run hello_nexus/handler/worker.py" />
+          <Cmd prompt="T2 $" cmd="uv run hello_nexus/caller/app.py" />
+          <div className={styles.runitOutput}># Output: ¡Hola! Temporal</div>
+        </>
+      )}
+
       <div className={styles.nextRow}>
         <button className={styles.btn} onClick={onNext}>
           Next: Build It →

From 124f9202356e93e5508b2e8c6965244dee8c25dd Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 26 Mar 2026 14:32:28 -0500
Subject: [PATCH 20/24] Improve preciseness of core Nexus component
 descriptions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/NexusDemo/ComponentsSection.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index 097c718067..1eb4f053d0 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -34,8 +34,8 @@ export default function ComponentsSection({ onNext }: Props) {
             </p>
             <p>
               Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
-              Temporal platform, with auth, retries, and observability built in. No ports to
-              expose, no URLs to share.
+              Temporal platform, with auth, retries, and observability built in. Routing is
+              handled by the platform so callers never need connection details for the target Namespace.
             </p>
             <div className={styles.compECode}>
               Caller uses name:{' '}
@@ -61,8 +61,8 @@ export default function ComponentsSection({ onNext }: Props) {
             <p className={styles.compERole}>The contract you publish for others to consume</p>
             <p>
               A Service is a <strong>named collection of Nexus Operations</strong>, similar to an API
-              interface. Multiple services can run in the same Worker. Callers import the service
-              definition to get type safety.
+              interface. Multiple services can run in the same Worker. In supported SDKs, callers
+              can import the service definition for type-safe calls.
             </p>
             <p>
               Example:{' '}
@@ -100,9 +100,9 @@ export default function ComponentsSection({ onNext }: Props) {
             {opTab === 'sync' ? (
               <>
                 <p>
-                  <strong>Synchronous</strong> operations complete in under 10 seconds. The
-                  result comes back in the same HTTP round-trip. Great for quick lookups, scoring,
-                  or validations.
+                  <strong>Synchronous</strong> operations complete in under 10 seconds, measured
+                  from when the caller's Nexus Machinery dispatches the request. Good for quick
+                  lookups, scoring, or validations.
                 </p>
                 <div className={styles.compECode}>
                   Caller → [Nexus RPC] → Handler → result → Caller
@@ -139,8 +139,8 @@ export default function ComponentsSection({ onNext }: Props) {
             <p className={styles.compERole}>The directory of all Endpoints in your account</p>
             <p>
               The Nexus Registry is scoped to your Temporal Cloud account or self-hosted cluster. Teams register
-              Endpoints here, and the Registry is the source of truth for Endpoint discovery, access
-              control, and audit logging.
+              Endpoints here. On Temporal Cloud, the Registry also provides access control and
+              audit logging for all registered Endpoints.
             </p>
             <div className={styles.componentPills}>
               <div className={styles.componentPill}>fraud-detection-prod</div>

From 43a771ffdb01289fdf6eb0c75a1b5333bdf4dac3 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Fri, 27 Mar 2026 11:01:10 -0500
Subject: [PATCH 21/24] Fix button text color, Python tag color, Resources
 section polish

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/nexus-demo.mdx                           |  2 +-
 sidebars.js                                   |  2 +-
 src/components/NexusDemo/NexusDemo.module.css | 12 ++++++------
 src/components/NexusDemo/Quiz.tsx             |  2 +-
 src/components/NexusDemo/RunIt.tsx            |  6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/nexus-demo.mdx b/docs/nexus-demo.mdx
index 713a7a8897..da8bec1bdd 100644
--- a/docs/nexus-demo.mdx
+++ b/docs/nexus-demo.mdx
@@ -1,7 +1,7 @@
 ---
 id: nexus-demo
 title: Temporal Nexus - Interactive Demo
-sidebar_label: Interactive Demo
+sidebar_label: Temporal Nexus
 description: An interactive walkthrough of Temporal Nexus - what it is, how it works, and how to build with it.
 slug: /nexus-demo
 tags:
diff --git a/sidebars.js b/sidebars.js
index c95b04b524..e7d43f533b 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -893,7 +893,7 @@ module.exports = {
     {
       type: 'category',
       label: 'Interactive Demos',
-      collapsed: false,
+      collapsed: true,
       items: [
         'nexus-demo',
       ],
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index 5ca165e49f..6c1f1885d2 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -23,8 +23,8 @@
   --nd-green-bg: rgba(52, 211, 153, 0.1);
   --nd-red: #f87171;
   --nd-red-bg: rgba(248, 113, 113, 0.1);
-  --nd-orange: #fb923c;
-  --nd-orange-bg: rgba(251, 146, 60, 0.15);
+  --nd-orange: #f97316;
+  --nd-orange-bg: rgba(249, 115, 22, 0.15);
   --nd-amber: #fbbf24;
   --nd-amber-bg: rgba(251, 191, 36, 0.1);
   --nd-primary-bg: rgba(191, 219, 254, 0.1);
@@ -68,8 +68,8 @@
   --nd-green-bg: rgba(5, 150, 105, 0.08);
   --nd-red: #dc2626;
   --nd-red-bg: rgba(220, 38, 38, 0.08);
-  --nd-orange: #c2410c;
-  --nd-orange-bg: rgba(194, 65, 12, 0.1);
+  --nd-orange: #ea580c;
+  --nd-orange-bg: rgba(234, 88, 12, 0.1);
   --nd-amber: #d97706;
   --nd-amber-bg: rgba(217, 119, 6, 0.08);
   --nd-primary-bg: rgba(29, 78, 216, 0.06);
@@ -1048,12 +1048,12 @@
 .runitLinkPrimary {
   background: var(--ifm-color-primary);
   border-color: var(--ifm-color-primary);
-  color: #141414;
+  color: var(--ifm-background-color);
 }
 
 .runitLinkPrimary:hover {
   opacity: 0.88;
-  color: #141414;
+  color: var(--ifm-background-color);
   border-color: var(--ifm-color-primary);
 }
 
diff --git a/src/components/NexusDemo/Quiz.tsx b/src/components/NexusDemo/Quiz.tsx
index 1525600bd5..3e18c6ba3b 100644
--- a/src/components/NexusDemo/Quiz.tsx
+++ b/src/components/NexusDemo/Quiz.tsx
@@ -140,7 +140,7 @@ export default function Quiz() {
           <div className={`${styles.tag} ${styles.tagAmber}`}>Evaluate</div>
           <h3 style={{ fontSize: 15, marginBottom: 6 }}>Learn More About Nexus</h3>
           <p style={{ fontSize: 13, color: 'var(--ifm-font-color-base)', margin: '0 0 14px', lineHeight: 1.6 }}>
-            Customer use cases, a breakdown of benefits, and guidance on when Nexus is the right choice.
+            Customer use cases, a breakdown of benefits, and guidance on when Nexus is right for your use case.
           </p>
           <a href="/evaluate/nexus" className={`${styles.runitLink}`}>
             Explore
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index 9e38d6d012..9fc9f4833d 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -5,11 +5,11 @@ type Props = { onNext: () => void };
 type Lang = 'dotnet' | 'go' | 'typescript' | 'java' | 'python';
 
 const TABS: { id: Lang; label: string }[] = [
-  { id: 'dotnet', label: '.NET' },
   { id: 'go', label: 'Go' },
-  { id: 'typescript', label: 'TypeScript' },
   { id: 'java', label: 'Java' },
   { id: 'python', label: 'Python' },
+  { id: 'typescript', label: 'TypeScript' },
+  { id: 'dotnet', label: '.NET' },
 ];
 
 function Cmd({ prompt, cmd }: { prompt: string; cmd: string }) {
@@ -204,7 +204,7 @@ export default function RunIt({ onNext }: Props) {
       {lang === 'python' && (
         <>
           <div className={styles.card} style={{ marginBottom: 20 }}>
-            <div className={`${styles.tag} ${styles.tagRed}`} style={{ marginBottom: 10 }}>
+            <div className={`${styles.tag} ${styles.tagOrange}`} style={{ marginBottom: 10 }}>
               samples-python / hello_nexus
             </div>
             <p style={{ fontSize: 13, color: 'var(--nd-muted)', margin: '0 0 14px' }}>

From f017a3fd89e3d09046c635c374733d443c4d8239 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Fri, 10 Apr 2026 14:16:12 -0700
Subject: [PATCH 22/24] Add Quickstart tab replacing Build It

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/NexusDemo/BuildIt.tsx          | 82 ++++++-------------
 src/components/NexusDemo/NexusDemo.module.css | 30 +++++++
 src/components/NexusDemo/RunIt.tsx            |  2 +-
 src/components/NexusDemo/index.tsx            |  2 +-
 4 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/components/NexusDemo/BuildIt.tsx b/src/components/NexusDemo/BuildIt.tsx
index 797bad2628..73aea6f9d8 100644
--- a/src/components/NexusDemo/BuildIt.tsx
+++ b/src/components/NexusDemo/BuildIt.tsx
@@ -1,75 +1,41 @@
-import CodeBlock from '@theme/CodeBlock';
-import React, { useState } from 'react';
+import React from 'react';
 import styles from './NexusDemo.module.css';
-import { buildSteps } from './buildSteps';
 
 type Props = { onNext: () => void };
 
-export default function BuildIt({ onNext }: Props) {
-  const [idx, setIdx] = useState(0);
-  const step = buildSteps[idx];
-
-  function go(next: number) {
-    setIdx(Math.max(0, Math.min(buildSteps.length - 1, next)));
-  }
+const QUICKSTARTS = [
+  { lang: 'Go',         url: '/develop/go/nexus/quickstart',         color: 'var(--nd-purple)' },
+  { lang: 'TypeScript', url: '/develop/typescript/nexus/quickstart',  color: 'var(--nd-green)'  },
+  { lang: '.NET',       url: '/develop/dotnet/nexus/quickstart',      color: 'var(--ifm-color-primary)' },
+  { lang: 'Java',       url: '/develop/java/nexus/quickstart',        color: 'var(--nd-amber)'  },
+  { lang: 'Python',     url: '/develop/python/nexus/quickstart',      color: 'var(--nd-orange)' },
+];
 
+export default function BuildIt({ onNext }: Props) {
   return (
     <div className={styles.section}>
       <div className={styles.progressBar}>
         <div className={styles.progressFill} style={{ width: '71%' }} />
       </div>
 
-      <h1>Build It Step by Step</h1>
+      <h1>Quickstart</h1>
       <p className={styles.lead}>
-        Real code from{' '}
-        <a
-          href="https://github.com/temporalio/samples-dotnet/tree/main/src/NexusSimple"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          samples-dotnet/NexusSimple
-        </a>
-        . Walk through building a cross-namespace Nexus service from scratch.
+        Pick your language and follow the official Nexus quickstart. Each guide walks you through
+        building a cross-Namespace Nexus Service from scratch.
       </p>
 
-      <div className={styles.buildLayout}>
-        {/* Step list sidebar */}
-        <nav className={styles.buildStepList} aria-label="Build steps">
-          {buildSteps.map((s, i) => (
-            <button
-              key={i}
-              className={`${styles.buildStepBtn} ${i === idx ? styles.buildStepBtnActive : ''}`}
-              onClick={() => setIdx(i)}
-              aria-current={i === idx ? 'step' : undefined}
-            >
-              <div className={styles.buildStepNum}>{s.num}</div>
-              <div className={styles.buildStepTitle}>{s.title}</div>
-            </button>
-          ))}
-        </nav>
-
-        {/* Code panel */}
-        <div className={styles.buildPanel}>
-          <div className={styles.buildFileHeader}>{step.file}</div>
-          <CodeBlock language={step.language}>{step.code}</CodeBlock>
-          <div className={styles.buildNote}>{step.note}</div>
-          <div className={styles.buildNav}>
-            <button
-              className={`${styles.btn} ${styles.btnSecondary}`}
-              onClick={() => go(idx - 1)}
-              disabled={idx === 0}
-            >
-              ← Prev
-            </button>
-            <button
-              className={styles.btn}
-              onClick={() => go(idx + 1)}
-              disabled={idx === buildSteps.length - 1}
-            >
-              Next →
-            </button>
-          </div>
-        </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
+        {QUICKSTARTS.map(({ lang, url, color }) => (
+          <a
+            key={lang}
+            href={url}
+            className={styles.quickstartCard}
+            style={{ '--qs-accent': color } as React.CSSProperties}
+          >
+            <span className={styles.quickstartLang}>{lang}</span>
+            <span className={styles.quickstartCta}>Quickstart →</span>
+          </a>
+        ))}
       </div>
 
       <div className={styles.nextRow}>
diff --git a/src/components/NexusDemo/NexusDemo.module.css b/src/components/NexusDemo/NexusDemo.module.css
index 6c1f1885d2..4a1e629b40 100644
--- a/src/components/NexusDemo/NexusDemo.module.css
+++ b/src/components/NexusDemo/NexusDemo.module.css
@@ -1045,6 +1045,36 @@
   text-decoration: none;
 }
 
+.quickstartCard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  border: 1px solid var(--nd-border);
+  text-decoration: none;
+  background: var(--nd-surface);
+  transition: border-color 0.15s;
+}
+
+.quickstartCard:hover {
+  border-color: var(--qs-accent);
+  text-decoration: none;
+}
+
+.quickstartLang {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ifm-font-color-base);
+}
+
+.quickstartCta {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--qs-accent);
+}
+
 .runitLinkPrimary {
   background: var(--ifm-color-primary);
   border-color: var(--ifm-color-primary);
diff --git a/src/components/NexusDemo/RunIt.tsx b/src/components/NexusDemo/RunIt.tsx
index 9fc9f4833d..c620300d9f 100644
--- a/src/components/NexusDemo/RunIt.tsx
+++ b/src/components/NexusDemo/RunIt.tsx
@@ -240,7 +240,7 @@ export default function RunIt({ onNext }: Props) {
 
       <div className={styles.nextRow}>
         <button className={styles.btn} onClick={onNext}>
-          Next: Build It →
+          Next: Quickstart →
         </button>
       </div>
     </div>
diff --git a/src/components/NexusDemo/index.tsx b/src/components/NexusDemo/index.tsx
index 8efa357953..dd28c80168 100644
--- a/src/components/NexusDemo/index.tsx
+++ b/src/components/NexusDemo/index.tsx
@@ -14,7 +14,7 @@ const NAV: { id: SectionId; label: string }[] = [
   { id: 'components', label: 'Components' },
   { id: 'howitworks', label: 'How It Works' },
   { id: 'runit', label: 'Run It' },
-  { id: 'buildit', label: 'Build It' },
+  { id: 'buildit', label: 'Quickstart' },
   { id: 'quiz', label: 'Test Yourself' },
 ];
 

From 5b1f173564361fd7066f5baf7ba1c2e1c9d1ead2 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Tue, 14 Apr 2026 19:15:14 -0500
Subject: [PATCH 23/24] phils initial feedback

---
 .../NexusDemo/ComponentsSection.tsx           | 74 +++++++++----------
 src/components/NexusDemo/Overview.tsx         |  2 +-
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/NexusDemo/ComponentsSection.tsx b/src/components/NexusDemo/ComponentsSection.tsx
index 1eb4f053d0..9f11b20a2f 100644
--- a/src/components/NexusDemo/ComponentsSection.tsx
+++ b/src/components/NexusDemo/ComponentsSection.tsx
@@ -19,43 +19,11 @@ export default function ComponentsSection({ onNext }: Props) {
 
       <div className={styles.compEList}>
 
-        {/* 1: Endpoint */}
+        {/* 1: Service */}
         <div className={styles.compECard}>
           <div className={styles.compENumCol}>
             <div className={styles.compENum}>1</div>
           </div>
-          <div className={styles.compEContent}>
-            <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
-            <p className={styles.compERole}>The named entry point callers use to reach a service</p>
-            <p>
-              An Endpoint is a <strong>named connection point</strong> registered in the Nexus
-              Registry. Callers reference it by name. That's all they need. Temporal handles
-              routing to the right team's Namespace and Task Queue behind the scenes.
-            </p>
-            <p>
-              Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
-              Temporal platform, with auth, retries, and observability built in. Routing is
-              handled by the platform so callers never need connection details for the target Namespace.
-            </p>
-            <div className={styles.compECode}>
-              Caller uses name:{' '}
-              <span style={{ color: 'var(--ifm-color-primary)' }}>"fraud-detection-prod"</span>
-              <br />
-              Temporal routes to:{' '}
-              <span style={{ color: 'var(--nd-muted)' }}>fraud-ns / fraud-task-queue</span>
-              <br />
-              <span style={{ color: 'var(--nd-muted)' }}>
-                {'// callers never see the target, only the name'}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* 2: Service */}
-        <div className={styles.compECard}>
-          <div className={styles.compENumCol}>
-            <div className={styles.compENum}>2</div>
-          </div>
           <div className={styles.compEContent}>
             <h2 className={styles.componentTitle}>Nexus Service</h2>
             <p className={styles.compERole}>The contract you publish for others to consume</p>
@@ -73,10 +41,10 @@ export default function ComponentsSection({ onNext }: Props) {
           </div>
         </div>
 
-        {/* 3: Operation */}
+        {/* 2: Operation */}
         <div className={styles.compECard}>
           <div className={styles.compENumCol}>
-            <div className={styles.compENum}>3</div>
+            <div className={styles.compENum}>2</div>
           </div>
           <div className={styles.compEContent}>
             <h2 className={styles.componentTitle}>Nexus Operation</h2>
@@ -114,8 +82,8 @@ export default function ComponentsSection({ onNext }: Props) {
               <>
                 <p>
                   <strong>Asynchronous</strong> operations start a Workflow and return an
-                  operation token. The caller Workflow is suspended. When the handler Workflow
-                  completes, a callback delivers the result.
+                  operation token. The caller Workflow is blocked at the await point. When the
+                  handler Workflow completes, a callback delivers the result.
                 </p>
                 <div className={styles.compECode}>
                   Caller → [start] → Handler starts Workflow → [token]
@@ -129,6 +97,38 @@ export default function ComponentsSection({ onNext }: Props) {
           </div>
         </div>
 
+        {/* 3: Endpoint */}
+        <div className={styles.compECard}>
+          <div className={styles.compENumCol}>
+            <div className={styles.compENum}>3</div>
+          </div>
+          <div className={styles.compEContent}>
+            <h2 className={styles.componentTitle}>Nexus Endpoint</h2>
+            <p className={styles.compERole}>The named entry point callers use to reach a service</p>
+            <p>
+              An Endpoint is a <strong>named connection point</strong> registered in the Nexus
+              Registry. Callers reference it by name. That's all they need. Temporal handles
+              routing to the right team's Namespace and Task Queue behind the scenes.
+            </p>
+            <p>
+              Unlike a general HTTP proxy, a Nexus Endpoint is managed entirely within the
+              Temporal platform, with auth, retries, and observability built in. Routing is
+              handled by the platform so callers never need connection details for the target Namespace.
+            </p>
+            <div className={styles.compECode}>
+              Caller uses name:{' '}
+              <span style={{ color: 'var(--ifm-color-primary)' }}>"fraud-detection-prod"</span>
+              <br />
+              Temporal routes to:{' '}
+              <span style={{ color: 'var(--nd-muted)' }}>fraud-ns / fraud-task-queue</span>
+              <br />
+              <span style={{ color: 'var(--nd-muted)' }}>
+                {'// callers never see the target, only the name'}
+              </span>
+            </div>
+          </div>
+        </div>
+
         {/* 4: Registry */}
         <div className={styles.compECard}>
           <div className={styles.compENumCol}>
diff --git a/src/components/NexusDemo/Overview.tsx b/src/components/NexusDemo/Overview.tsx
index 8392511696..dcd97f6bb8 100644
--- a/src/components/NexusDemo/Overview.tsx
+++ b/src/components/NexusDemo/Overview.tsx
@@ -30,7 +30,7 @@ export default function Overview({ onNext }: Props) {
         </h3>
         <p style={{ fontSize: 15, color: 'var(--ifm-font-color-base)', margin: 0, lineHeight: 1.7 }}>
           Team A can call Team B's Workflows like a typed API, with full durability, retries,
-          and fault-tolerance built in, without needing access to Team B's Namespace or knowing
+          and fault-tolerance built in, without needing direct access to Team B's Namespace or knowing
           how their code works.
         </p>
       </div>

From 5d9838a535f3097aaac683366b76604964dcb496 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 16 Apr 2026 14:18:41 -0500
Subject: [PATCH 24/24] remove raw HTTP POST from dispatch log

---
 src/components/NexusDemo/flowSteps.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NexusDemo/flowSteps.ts b/src/components/NexusDemo/flowSteps.ts
index a7bdd04f0a..895370ecb2 100644
--- a/src/components/NexusDemo/flowSteps.ts
+++ b/src/components/NexusDemo/flowSteps.ts
@@ -26,7 +26,7 @@ export const syncSteps: FlowStep[] = [
       "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint URL for the Echo Operation.",
     activeNode: 1,
     packetPct: 50,
-    log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/Echo → nexus-simple-endpoint' },
+    log: { level: 'info', event: 'DISPATCH', msg: 'Temporal routes start request to Nexus Endpoint' },
   },
   {
     label: 'Handler Worker receives Task',
@@ -69,7 +69,7 @@ export const asyncSteps: FlowStep[] = [
       "Temporal's server dispatches an HTTP POST request to the Nexus Endpoint for the SayHello Operation.",
     activeNode: 1,
     packetPct: 50,
-    log: { level: 'info', event: 'DISPATCH', msg: 'POST /operations/SayHello → nexus-simple-endpoint' },
+    log: { level: 'info', event: 'DISPATCH', msg: 'Temporal routes start request to Nexus Endpoint' },
   },
   {
     label: 'Handler starts a Workflow',
