From fdba5bfef34da345323fbb27b17cbaf31d910d7b Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Thu, 16 Jul 2026 12:24:02 -0500
Subject: [PATCH 1/3] move demos

---
 docs/best-practices/cost-optimization.mdx       |  4 ++--
 .../activity-retry-simulator.mdx                |  1 +
 .../demo.mdx => demos/serverless-workers.mdx}   |  6 +++---
 .../standalone-activities.mdx}                  |  3 ++-
 docs/encyclopedia/retry-policies.mdx            |  2 +-
 .../serverless-workers/index.mdx                |  2 +-
 sidebars.js                                     | 14 +++++++++++---
 vercel.json                                     | 17 ++++++++++++++++-
 8 files changed, 37 insertions(+), 12 deletions(-)
 rename docs/{develop => demos}/activity-retry-simulator.mdx (97%)
 rename docs/{evaluate/development-production-features/serverless-workers/demo.mdx => demos/serverless-workers.mdx} (95%)
 rename docs/{develop/standalone-activities-interactive-demo.mdx => demos/standalone-activities.mdx} (98%)

diff --git a/docs/best-practices/cost-optimization.mdx b/docs/best-practices/cost-optimization.mdx
index aed3fc0a99..9705672d90 100644
--- a/docs/best-practices/cost-optimization.mdx
+++ b/docs/best-practices/cost-optimization.mdx
@@ -96,7 +96,7 @@ Focus optimization efforts on what's driving costs with a specific workload:
 - [Many Activities per Workflow](https://temporal.io/blog/how-many-activities-should-i-use-in-my-temporal-workflow)
 - Frequent [Signals, Queries, or Updates](/encyclopedia/workflow-message-passing#choosing-messages)
 - Long-running Activities with [Heartbeats](/cloud/worker-health#manage-worker-heartbeating)
-- High [Activity retry rates](/develop/activity-retry-simulator)
+- High [Activity retry rates](/demos/activity-retry-simulator)
 - Extensive Query usage
 
 **High Storage costs generally indicate**:
@@ -158,7 +158,7 @@ For expensive external operations like this, consider:
 - Using [next retry delay](/encyclopedia/retry-policies#per-error-next-retry-delay) to dynamically control retry timing based on failure types (for example, respecting rate-limit headers)
 - Implementing an [Activity pause pattern](/cli/command-reference/activity#pause) to wait for manual intervention rather than automatic retries
 
-Use the [Activity Retry Simulator](/develop/activity-retry-simulator) to visualize how different Retry Policy configurations affect retry behavior and Action consumption.
+Use the [Activity Retry Simulator](/demos/activity-retry-simulator) to visualize how different Retry Policy configurations affect retry behavior and Action consumption.
 
 Refer to this blog post on [Mastering Workflow retry logic for resilient applications](https://temporal.io/blog/failure-handling-in-practice) for additional guidance.
 
diff --git a/docs/develop/activity-retry-simulator.mdx b/docs/demos/activity-retry-simulator.mdx
similarity index 97%
rename from docs/develop/activity-retry-simulator.mdx
rename to docs/demos/activity-retry-simulator.mdx
index 08338a8108..3e11363a8d 100644
--- a/docs/develop/activity-retry-simulator.mdx
+++ b/docs/demos/activity-retry-simulator.mdx
@@ -2,6 +2,7 @@
 id: activity-retry-simulator
 title: How to visualize an Activity Retry Policy with timeouts
 sidebar_label: Activity retry simulator
+slug: /demos/activity-retry-simulator
 description: Visualize Activity Execution times, experiment with timeouts, Retry Policies, and simulate scenarios with our tool. Configure retries and see their impact on success or failure.
 tags:
   - Activities
diff --git a/docs/evaluate/development-production-features/serverless-workers/demo.mdx b/docs/demos/serverless-workers.mdx
similarity index 95%
rename from docs/evaluate/development-production-features/serverless-workers/demo.mdx
rename to docs/demos/serverless-workers.mdx
index d5271dab93..15d83203b3 100644
--- a/docs/evaluate/development-production-features/serverless-workers/demo.mdx
+++ b/docs/demos/serverless-workers.mdx
@@ -1,8 +1,8 @@
 ---
-id: demo
+id: serverless-workers
 title: Serverless Workers Interactive Demo
-sidebar_label: Interactive Demo
-slug: /evaluate/serverless-workers/demo
+sidebar_label: Serverless Workers
+slug: /demos/serverless-workers
 toc_max_heading_level: 3
 keywords:
   - serverless
diff --git a/docs/develop/standalone-activities-interactive-demo.mdx b/docs/demos/standalone-activities.mdx
similarity index 98%
rename from docs/develop/standalone-activities-interactive-demo.mdx
rename to docs/demos/standalone-activities.mdx
index 0386f03138..3db8bb4602 100644
--- a/docs/develop/standalone-activities-interactive-demo.mdx
+++ b/docs/demos/standalone-activities.mdx
@@ -1,7 +1,8 @@
 ---
-id: standalone-activities-interactive-demo
+id: standalone-activities
 title: Standalone Activities Demo
 sidebar_label: Standalone Activities
+slug: /demos/standalone-activities
 hide_table_of_contents: true
 keywords:
   - standalone activity
diff --git a/docs/encyclopedia/retry-policies.mdx b/docs/encyclopedia/retry-policies.mdx
index 061d9bf3a3..c65bd1e9cf 100644
--- a/docs/encyclopedia/retry-policies.mdx
+++ b/docs/encyclopedia/retry-policies.mdx
@@ -35,7 +35,7 @@ unlimited by default) with an exponential backoff and a max interval of 10 minut
 Temporal Service how to retry a failure of either a [Workflow Execution](/workflow-execution) or an
 [Activity Task Execution](/tasks#activity-task-execution).
 
-Try out the [Activity retry simulator](/develop/activity-retry-simulator) to visualize how a Retry Policy works.
+Try out the [Activity retry simulator](/demos/activity-retry-simulator) to visualize how a Retry Policy works.
 
 ---
 
diff --git a/docs/evaluate/development-production-features/serverless-workers/index.mdx b/docs/evaluate/development-production-features/serverless-workers/index.mdx
index 87b0e82519..f4ec3dc18d 100644
--- a/docs/evaluate/development-production-features/serverless-workers/index.mdx
+++ b/docs/evaluate/development-production-features/serverless-workers/index.mdx
@@ -112,7 +112,7 @@ Serverless Workers may not be ideal when:
 
 ## Next steps
 
-- [Interactive demo](/evaluate/serverless-workers/demo) to explore the configuration and invocation flow.
+- [Interactive demo](/demos/serverless-workers) to explore the configuration and invocation flow.
 - [How Serverless Workers work](/serverless-workers) for a deeper look at the invocation lifecycle, compute providers,
   and architecture.
 - [Deploy a Serverless Worker](/production-deployment/worker-deployments/serverless-workers) for the end-to-end
diff --git a/sidebars.js b/sidebars.js
index 967d06928f..97b70153ce 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -41,7 +41,13 @@ module.exports = {
               type: 'category',
               label: 'Serverless Workers',
               link: { type: 'doc', id: 'evaluate/development-production-features/serverless-workers/index' },
-              items: ['evaluate/development-production-features/serverless-workers/demo'],
+              items: [
+                {
+                  type: 'doc',
+                  id: 'demos/serverless-workers',
+                  label: 'Interactive Demo',
+                },
+              ],
             },
             {
               type: 'category',
@@ -1056,7 +1062,7 @@ module.exports = {
           ],
         },
         'develop/environment-configuration',
-        'develop/activity-retry-simulator',
+        'demos/activity-retry-simulator',
         'develop/worker-performance',
         'develop/worker-tuning-reference',
         'develop/safe-deployments',
@@ -1711,7 +1717,9 @@ module.exports = {
       label: 'Interactive Demos',
       collapsed: true,
       items: [
-        'develop/standalone-activities-interactive-demo',
+        'demos/standalone-activities',
+        'demos/serverless-workers',
+        'demos/activity-retry-simulator',
       ],
     },
     'integrations',
diff --git a/vercel.json b/vercel.json
index f5dfc51cf3..65db4b4c47 100644
--- a/vercel.json
+++ b/vercel.json
@@ -91,7 +91,22 @@
     },
     {
       "source": "/evaluate/serverless-workers-demo",
-      "destination": "/evaluate/serverless-workers/demo",
+      "destination": "/demos/serverless-workers",
+      "permanent": true
+    },
+    {
+      "source": "/evaluate/serverless-workers/demo",
+      "destination": "/demos/serverless-workers",
+      "permanent": true
+    },
+    {
+      "source": "/develop/activity-retry-simulator",
+      "destination": "/demos/activity-retry-simulator",
+      "permanent": true
+    },
+    {
+      "source": "/develop/standalone-activities-interactive-demo",
+      "destination": "/demos/standalone-activities",
       "permanent": true
     },
     {

From 5642b7edb6d5bfb684d601655604eabfee270319 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 22 Jul 2026 13:11:26 -0500
Subject: [PATCH 2/3] modify sidebar

---
 docs/demos/activity-retry-simulator.mdx |  2 +-
 sidebars.js                             | 14 +-------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/docs/demos/activity-retry-simulator.mdx b/docs/demos/activity-retry-simulator.mdx
index 3e11363a8d..b503e5c030 100644
--- a/docs/demos/activity-retry-simulator.mdx
+++ b/docs/demos/activity-retry-simulator.mdx
@@ -1,6 +1,6 @@
 ---
 id: activity-retry-simulator
-title: How to visualize an Activity Retry Policy with timeouts
+title: Visualize an Activity Retry Policy with timeouts
 sidebar_label: Activity retry simulator
 slug: /demos/activity-retry-simulator
 description: Visualize Activity Execution times, experiment with timeouts, Retry Policies, and simulate scenarios with our tool. Configure retries and see their impact on success or failure.
diff --git a/sidebars.js b/sidebars.js
index 97b70153ce..0c8f900c98 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -37,18 +37,7 @@ module.exports = {
             'evaluate/development-production-features/low-latency',
             'evaluate/development-production-features/multi-tenancy',
             'evaluate/development-production-features/job-queue',
-            {
-              type: 'category',
-              label: 'Serverless Workers',
-              link: { type: 'doc', id: 'evaluate/development-production-features/serverless-workers/index' },
-              items: [
-                {
-                  type: 'doc',
-                  id: 'demos/serverless-workers',
-                  label: 'Interactive Demo',
-                },
-              ],
-            },
+            'evaluate/development-production-features/serverless-workers/index',
             {
               type: 'category',
               label: 'Product release stages',
@@ -1062,7 +1051,6 @@ module.exports = {
           ],
         },
         'develop/environment-configuration',
-        'demos/activity-retry-simulator',
         'develop/worker-performance',
         'develop/worker-tuning-reference',
         'develop/safe-deployments',

From 0e2ee0d314e42b7ef0a18173c3e4f418b519d926 Mon Sep 17 00:00:00 2001
From: Jwahir Sundai <jwahir.sundai@temporal.io>
Date: Wed, 22 Jul 2026 13:28:54 -0500
Subject: [PATCH 3/3] add panels to make each part visually distinctive and fix
 dark mode red box

---
 .../Demos/RetrySimulator/RetrySimulator.js    | 179 ++++++++++--------
 .../RetrySimulator/retry-simulator.module.css | 129 ++++++++++---
 2 files changed, 194 insertions(+), 114 deletions(-)

diff --git a/src/components/Demos/RetrySimulator/RetrySimulator.js b/src/components/Demos/RetrySimulator/RetrySimulator.js
index 06028354f4..1ef751831e 100644
--- a/src/components/Demos/RetrySimulator/RetrySimulator.js
+++ b/src/components/Demos/RetrySimulator/RetrySimulator.js
@@ -214,7 +214,7 @@ export default function RetrySimulator() {
     <div className={styles.retrySimulator}>
       <div className={styles.retryRow}>
         <div className={styles.retryCol}>
-          <div className="retries">
+          <div className={styles.sampleActivity}>
             <h3>Sample Activity</h3>
 
             <div>
@@ -227,8 +227,11 @@ export default function RetrySimulator() {
             <CodeBlock language={state.language} className={styles.codeBlock}>
               {languageSamples.get(state.language)}
             </CodeBlock>
+          </div>
 
-            <h3>Activity Retries (in ms)</h3>
+          <section className={styles.panel}>
+            <h3 className={styles.panelTitle}>Activity Retries (in ms)</h3>
+            <p className={styles.panelHint}>How each attempt behaves (succeed or fail, and how long it runs).</p>
 
             <select className={styles.dropdown} onChange={(ev) => applyRetryScenario(ev.target.value)}>
               <option value="">Generate a Scenario</option>
@@ -245,95 +248,103 @@ export default function RetrySimulator() {
                 Slow request (100ms), 50% success rate
               </option>
             </select>
-          </div>
-          <div className={styles.scheduleTime}>
-            <div className={styles.inputContainer}>
-              <label className={styles.numberInputLabel}>Task Time in Queue</label>
+
+            <div className={styles.scheduleTime}>
+              <div className={styles.inputContainer}>
+                <label className={styles.numberInputLabel}>Task Time in Queue</label>
+                <input
+                  className={styles.numberInput}
+                  value={state.scheduleTime}
+                  onChange={(ev) => updateRetryPolicyParam("scheduleTime", ev)}
+                  type="number"
+                />
+              </div>
               <input
-                className={styles.numberInput}
+                type="range"
                 value={state.scheduleTime}
                 onChange={(ev) => updateRetryPolicyParam("scheduleTime", ev)}
-                type="number"
+                className={styles.slider}
+                min="0"
+                max="1000"
+                step="5"
               />
             </div>
-            <input
-              type="range"
-              value={state.scheduleTime}
-              onChange={(ev) => updateRetryPolicyParam("scheduleTime", ev)}
-              className={styles.slider}
-              min="0"
-              max="1000"
-              step="5"
-            />
-          </div>
-          <div className="retries-list">
-            {state.retries.map((retry, index) => {
-              return (
-                <RetryConfig
-                  retry={retry}
-                  numRetries={state.retries.length}
-                  index={index}
-                  updateRetry={updateRetry}
-                  deleteRetry={deleteRetry}
-                  key={index}
-                />
-              );
-            })}
-          </div>
-          <button className={styles.addButton} onClick={() => addRetry(true, 1)}>
-            + Add
-          </button>
+            <div className="retries-list">
+              {state.retries.map((retry, index) => {
+                return (
+                  <RetryConfig
+                    retry={retry}
+                    numRetries={state.retries.length}
+                    index={index}
+                    updateRetry={updateRetry}
+                    deleteRetry={deleteRetry}
+                    key={index}
+                  />
+                );
+              })}
+            </div>
+            <button className={styles.addButton} onClick={() => addRetry(true, 1)}>
+              + Add
+            </button>
+          </section>
         </div>
         <div className={styles.retryCol}>
-          <h3>Activity Timeouts (in ms)</h3>
-          <RetryPolicyParamInputs
-            param="startToCloseTimeout"
-            value={state.startToCloseTimeout}
-            max={100000}
-            step={100}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <RetryPolicyParamInputs
-            param="scheduleToStartTimeout"
-            value={state.scheduleToStartTimeout}
-            max={100000}
-            step={100}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <RetryPolicyParamInputs
-            param="scheduleToCloseTimeout"
-            value={state.scheduleToCloseTimeout}
-            max={100000}
-            step={100}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <h3>Retry Policy (in ms)</h3>
-          <RetryPolicyParamInputs
-            param="backoffCoefficient"
-            value={state.backoffCoefficient}
-            min={1}
-            max={10}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <RetryPolicyParamInputs
-            param="initialInterval"
-            value={state.initialInterval}
-            max={10000}
-            step={50}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <RetryPolicyParamInputs
-            param="maximumAttempts"
-            value={state.maximumAttempts}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
-          <RetryPolicyParamInputs
-            param="maximumInterval"
-            value={state.maximumInterval}
-            max={100000}
-            step={100}
-            updateRetryPolicyParam={updateRetryPolicyParam}
-          />
+          <section className={styles.panel}>
+            <h3 className={styles.panelTitle}>Activity Timeouts (in ms)</h3>
+            <p className={styles.panelHint}>Hard limits that stop the Activity.</p>
+            <RetryPolicyParamInputs
+              param="startToCloseTimeout"
+              value={state.startToCloseTimeout}
+              max={100000}
+              step={100}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+            <RetryPolicyParamInputs
+              param="scheduleToStartTimeout"
+              value={state.scheduleToStartTimeout}
+              max={100000}
+              step={100}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+            <RetryPolicyParamInputs
+              param="scheduleToCloseTimeout"
+              value={state.scheduleToCloseTimeout}
+              max={100000}
+              step={100}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+          </section>
+
+          <section className={styles.panel}>
+            <h3 className={styles.panelTitle}>Retry Policy (in ms)</h3>
+            <p className={styles.panelHint}>How long to wait between attempts.</p>
+            <RetryPolicyParamInputs
+              param="backoffCoefficient"
+              value={state.backoffCoefficient}
+              min={1}
+              max={10}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+            <RetryPolicyParamInputs
+              param="initialInterval"
+              value={state.initialInterval}
+              max={10000}
+              step={50}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+            <RetryPolicyParamInputs
+              param="maximumAttempts"
+              value={state.maximumAttempts}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+            <RetryPolicyParamInputs
+              param="maximumInterval"
+              value={state.maximumInterval}
+              max={100000}
+              step={100}
+              updateRetryPolicyParam={updateRetryPolicyParam}
+            />
+          </section>
         </div>
       </div>
       <div className={styles.retryRow}>
diff --git a/src/components/Demos/RetrySimulator/retry-simulator.module.css b/src/components/Demos/RetrySimulator/retry-simulator.module.css
index 4cb3022a96..68df1de279 100644
--- a/src/components/Demos/RetrySimulator/retry-simulator.module.css
+++ b/src/components/Demos/RetrySimulator/retry-simulator.module.css
@@ -2,32 +2,88 @@
   border: 0px;
 }
 
+.sampleActivity {
+  margin-bottom: 12px;
+}
+
+.sampleActivity h3 {
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
+.sampleActivity :global(.theme-code-block) {
+  margin-bottom: 0;
+}
+
+.panel {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  background: var(--ifm-background-surface-color);
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.panel:last-child {
+  margin-bottom: 0;
+}
+
+.panelTitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 0 0 2px;
+  color: var(--ifm-font-color-base);
+}
+
+.panelHint {
+  margin: 0 0 10px;
+  font-size: 0.85rem;
+  line-height: 1.35;
+  color: var(--ifm-font-color-secondary);
+}
+
+.panel .dropdown {
+  margin-bottom: 8px;
+}
+
+.panel .scheduleTime,
+.panel .retry,
+.panel .parameter {
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.panel .scheduleTime:last-child,
+.panel .retry:last-child,
+.panel .parameter:last-child {
+  margin-bottom: 0;
+}
+
 .retryRow {
   border: 0;
   background-color: transparent !important;
   display: flex;
+  gap: 16px;
+  align-items: flex-start;
 }
 
 .retryRow:not(:first-of-type) {
-  margin-top: 0.75em;
-  border-top: 1px solid #ddd;
-  padding-top: 1em;
+  margin-top: 12px;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  padding-top: 12px;
 }
 
 .retryCol {
   border: 0;
-  padding-top: 0px !important;
+  padding-top: 0 !important;
   vertical-align: top;
-  flex-grow: 1;
-  width: 50%;
-}
-
-.retryCol:first-of-type {
-  margin-right: 0.25em;
+  flex: 1;
+  min-width: 0;
+  width: auto;
 }
 
+.retryCol:first-of-type,
 .retryCol:not(:first-of-type) {
-  margin-left: 0.25em;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 @media screen and (max-width: 966px) {
@@ -50,19 +106,17 @@
 }
 
 .scheduleTime {
-  padding: 10px;
-  padding-top: 15px;
-  border: 1px solid #ddd;
-  margin-bottom: 15px;
-  background-color: var(--ifm-badge-background-color);
+  padding: 8px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  margin-bottom: 8px;
+  background-color: var(--ifm-background-color);
 }
 
 .retry {
   position: relative;
-  padding: 10px;
-  padding-top: 15px;
-  border: 1px solid #ddd;
-  margin-bottom: 15px;
+  padding: 8px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  margin-bottom: 8px;
 }
 
 .result {
@@ -77,12 +131,23 @@
 }
 
 .success {
-  background-color: #d4eddc;
-  color: black;
+  background-color: var(--ifm-color-success-contrast-background, #d4eddc);
+  color: var(--ifm-color-success-contrast-foreground, #155724);
 }
 
 .fail {
-  background-color: #f8d7da;
+  background-color: var(--ifm-color-danger-contrast-background, #f8d7da);
+  color: var(--ifm-color-danger-contrast-foreground, #721c24);
+}
+
+:global(html[data-theme='dark']) .success {
+  background-color: rgba(76, 175, 80, 0.2);
+  color: #a5d6a7;
+}
+
+:global(html[data-theme='dark']) .fail {
+  background-color: rgba(244, 67, 54, 0.22);
+  color: #ef9a9a;
 }
 
 .inputContainer {
@@ -114,10 +179,10 @@
 
 .dropdown {
   padding: 0.25em 0.5em;
-  border: 1px solid #ddd;
+  border: 1px solid var(--ifm-color-emphasis-200);
   background-color: var(--ifm-background-color);
   color: var(--docsearch-text-color);
-  margin-bottom: 1em;
+  margin-bottom: 8px;
 }
 
 .codeBlock {
@@ -125,16 +190,20 @@
 }
 
 .parameter {
-  padding: 10px;
-  padding-top: 15px;
-  border: 1px solid #ddd;
-  margin-bottom: 15px;
+  padding: 8px;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  margin-bottom: 8px;
+}
+
+.parameter:last-child {
+  margin-bottom: 0;
 }
 
 .slider {
   width: 100%;
+  margin-top: 6px;
   background: #d3d3d3;
-  height: 10px;
+  height: 8px;
   border-radius: 5px;
 }