put all demos in one place

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.
 

docs/develop/activity-retry-simulator.mdx → docs/demos/activity-retry-simulator.mdx

@@ -1,7 +1,8 @@
 ---
 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.
 tags:
   - Activities

docs/evaluate/development-production-features/serverless-workers/demo.mdx → 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

docs/develop/standalone-activities-interactive-demo.mdx → 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

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.
 
 ---
 

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

sidebars.js

@@ -37,12 +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: ['evaluate/development-production-features/serverless-workers/demo'],
-            },
+            'evaluate/development-production-features/serverless-workers/index',
             {
               type: 'category',
               label: 'Product release stages',
@@ -1068,7 +1063,6 @@ module.exports = {
           ],
         },
         'develop/environment-configuration',
-        'develop/activity-retry-simulator',
         'develop/worker-performance',
         'develop/worker-tuning-reference',
         'develop/safe-deployments',
@@ -1725,7 +1719,9 @@ module.exports = {
       label: 'Interactive Demos',
       collapsed: true,
       items: [
-        'develop/standalone-activities-interactive-demo',
+        'demos/standalone-activities',
+        'demos/serverless-workers',
+        'demos/activity-retry-simulator',
       ],
     },    {
       type: 'category',

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}>