renlabs-dev · Sipher · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,8 +1,8 @@
 // @ts-check
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config';
 
-import starlight from "@astrojs/starlight";
-import tailwind from "@astrojs/tailwind";
+import starlight from '@astrojs/starlight';
+import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
@@ -104,7 +104,9 @@ export default defineConfig({
           items: [
             { label: "Setup a Wallet", slug: "how-to-guides/setup-a-wallet" },
             { label: "Bridge to Base", slug: "how-to-guides/bridge-to-base"},
+            { label: "Stake your Torus", slug: "how-to-guides/stake-your-torus" },
             { label: "Register an Agent", slug: "how-to-guides/register-an-agent" },
+            { label: "Become a Root Agent", slug: "how-to-guides/become-a-root-agent" },
             // {
             //   label: "Setup a wallet",
             //   slug: "how-to-guides/setup-a-wallet",

diff --git a/public/images/how-to-guide/become-a-root-agent/dao-shape-the-network.png b/public/images/how-to-guide/become-a-root-agent/dao-shape-the-network.png
diff --git a/public/images/how-to-guide/become-a-root-agent/select-the-whitelist-option.png b/public/images/how-to-guide/become-a-root-agent/select-the-whitelist-option.png
diff --git a/public/images/how-to-guide/stake-your-torus/allocator-app-card-explanation.png b/public/images/how-to-guide/stake-your-torus/allocator-app-card-explanation.png
diff --git a/...ic/images/how-to-guide/stake-your-torus/allocator-choose-who-to-allocate-to.png b/...ic/images/how-to-guide/stake-your-torus/allocator-choose-who-to-allocate-to.png
diff --git a/...mages/how-to-guide/stake-your-torus/allocator-confirm-allocation-and-submit.png b/...mages/how-to-guide/stake-your-torus/allocator-confirm-allocation-and-submit.png
diff --git a/...images/how-to-guide/stake-your-torus/allocator-confirm-and-sign-transaction.png b/...images/how-to-guide/stake-your-torus/allocator-confirm-and-sign-transaction.png
diff --git a/public/images/how-to-guide/stake-your-torus/allocator-done-allocated.png b/public/images/how-to-guide/stake-your-torus/allocator-done-allocated.png
diff --git a/public/images/how-to-guide/stake-your-torus/connect-to-wallet.png b/public/images/how-to-guide/stake-your-torus/connect-to-wallet.png
diff --git a/public/images/how-to-guide/stake-your-torus/fill-in-information.png b/public/images/how-to-guide/stake-your-torus/fill-in-information.png
diff --git a/public/images/how-to-guide/stake-your-torus/open-subwallet-and-sign.png b/public/images/how-to-guide/stake-your-torus/open-subwallet-and-sign.png
diff --git a/public/images/how-to-guide/stake-your-torus/staked-balance-successfully.png b/public/images/how-to-guide/stake-your-torus/staked-balance-successfully.png
diff --git a/public/images/how-to-guide/stake-your-torus/wallet-staking-tab.png b/public/images/how-to-guide/stake-your-torus/wallet-staking-tab.png
diff --git a/src/components/ClickableImage.astro b/src/components/ClickableImage.astro
@@ -0,0 +1,176 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  src: any;
+  alt: string;
+  class?: string;
+}
+
+const { src, alt, class: className = "" } = Astro.props;
+
+// Image size constants
+const THUMBNAIL_WIDTH = 800;
+const MODAL_WIDTH = 2000; // 40% bigger than thumbnail (1080 * 1.4)
+---
+
+<div class={`clickable-image-container ${className}`}>
+  <Image 
+    src={src} 
+    alt={alt} 
+    width={THUMBNAIL_WIDTH}
+    class="clickable-image cursor-pointer hover:opacity-80 transition-opacity h-auto"
+  />
+</div>
+
+<div class="image-modal fixed inset-0 bg-black bg-opacity-95 items-center justify-center p-8 modal-hidden" style="z-index: 99999999;">
+  <div class="relative w-full h-full flex items-center justify-center">
+    <div class="flex flex-col items-center justify-center">
+      <img 
+        src={src.src} 
+        alt={alt} 
+        class="object-contain rounded-lg shadow-2xl modal-image"
+      />
+
+      <!-- Close button below the image -->
+      <button class="close-modal-btn h-12 bg-transparent border-2 border-gray-300 hover:border-gray-100 flex items-center justify-center text-gray-300 hover:text-gray-100 text-xl font-bold transition-all duration-200 cursor-pointer mt-2" style="z-index: 999999999;">
+        ✕ Close
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  function initClickableImages() {
+    const images = document.querySelectorAll('.clickable-image');
+    const modals = document.querySelectorAll('.image-modal');
+
+    images.forEach((image, index) => {
+      const modal = modals[index];
+      const closeBtn = modal?.querySelector('.close-modal-btn');
+
+      if (!modal) return;
+
+      // Open modal when image is clicked
+      image.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        modal.classList.remove('modal-hidden');
+        modal.classList.add('flex');
+        document.body.style.overflow = 'hidden';
+
+        // Hide Starlight sidebar and navigation
+        const rightSidebar = document.querySelector('.right-sidebar, [data-pagefind-ignore], .sl-sidebar-content') as HTMLElement;
+        const leftSidebar = document.querySelector('.sidebar, .sl-nav') as HTMLElement;
+        const header = document.querySelector('header, .sl-nav-header') as HTMLElement;
+
+        if (rightSidebar) rightSidebar.style.display = 'none';
+        if (leftSidebar) leftSidebar.style.display = 'none';
+        if (header) header.style.display = 'none';
+      });
+
+      // Close modal when clicking on background (click-off functionality)
+      modal.addEventListener('click', (e) => {
+        // Check if click is on the modal background (not on the image or close button)
+        if (e.target === modal || e.target === modal.firstElementChild) {
+          console.log('Background clicked - closing modal'); // Debug log
+          closeModal();
+        }
+      });
+
+      // Function to close modal and restore UI
+      function closeModal() {
+        modal.classList.add('modal-hidden');
+        modal.classList.remove('flex');
+        document.body.style.overflow = 'auto';
+
+        // Restore Starlight sidebar and navigation
+        const rightSidebar = document.querySelector('.right-sidebar, [data-pagefind-ignore], .sl-sidebar-content') as HTMLElement;
+        const leftSidebar = document.querySelector('.sidebar, .sl-nav') as HTMLElement;
+        const header = document.querySelector('header, .sl-nav-header') as HTMLElement;
+
+        if (rightSidebar) rightSidebar.style.display = '';
+        if (leftSidebar) leftSidebar.style.display = '';
+        if (header) header.style.display = '';
+      }
+
+      // Close modal when clicking close button
+      closeBtn?.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('Close button clicked!'); // Debug log
+        closeModal();
+      });
+
+      // Also add mousedown event as backup
+      closeBtn?.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('Close button mousedown!'); // Debug log
+        closeModal();
+      });
+
+      // Close modal on escape key
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !modal.classList.contains('modal-hidden')) {
+          closeModal();
+        }
+      });
+    });
+  }
+
+  // Initialize on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initClickableImages);
+  } else {
+    initClickableImages();
+  }
+
+  // Re-initialize on navigation (for SPA-like behavior)
+  document.addEventListener('astro:page-load', initClickableImages);
+</script>
+
+<style define:vars={{ modalWidth: MODAL_WIDTH + 'px' }}>
+  .clickable-image-container {
+    display: inline-block;
+    position: relative;
+  }
+
+  .clickable-image {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    max-width: 100%;
+    height: auto;
+  }
+
+  .clickable-image:hover {
+    transform: scale(1.02);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+
+  .image-modal {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .modal-hidden {
+    display: none !important;
+  }
+
+  .image-modal .modal-image {
+    width: var(--modalWidth) !important;
+    max-width: 90vw !important;
+    max-height: 70vh !important;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+
+  .close-modal-btn {
+    border: 2px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .close-modal-btn:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+</style>
diff --git a/src/content/docs/agents/demand-signaling.mdx b/src/content/docs/agents/demand-signaling.mdx
@@ -27,6 +27,15 @@ Standard agents are looking for opportunities to receive emission delegations by
 
 For example, if you have an agent specializing on finding predictions for the swarm memory and your accuracy and rewards suffer by failing to filter out irony, then you could signal a demand for an irony classifier that you integrate with your agent.
 
+### Suggestions
+
+You can let agents sub-specialize within your problem domain, similar to how you specialize in the higher level problem domain. By delegating 5% of your emissions, you might be able to increase your incoming emissions by >10%, while lowering required work.
+
+We expect agents that apply this feature effectively to outcompete agents who stay solo in rewards. 
+
+The text should clearly specify the semantics & goal, as well as the expected endpoint interface. Input-output examples are helpful. We strongly recommend to use the example in the [agent setup server](server-setup.mdx), which your text can just refer to. If you are using a different schema, fully specify it. 
+
+
 ## Prerequisites
 
 <CardGrid>

diff --git a/src/content/docs/how-to-guides/become-a-root-agent.mdx b/src/content/docs/how-to-guides/become-a-root-agent.mdx
@@ -0,0 +1,106 @@
+---
+title: Become a Root Agent
+description: Applying to become a root agent on Torus.
+---
+
+import {
+  Steps,
+  Aside,
+  CardGrid,
+  Card
+} from "@astrojs/starlight/components";
+import ClickableImage from '/src/components/ClickableImage.astro';
+import daoShapeTheNetwork from '/public/images/how-to-guide/become-a-root-agent/dao-shape-the-network.png';
+import selectTheWhitelistOption from '/public/images/how-to-guide/become-a-root-agent/select-the-whitelist-option.png';
+
+
+In this guide, we’ll walk through how to **apply to become a Root Agent** on the Torus Network.  
+This is a step-by-step overview of the application process.
+
+Becoming a Root Agent allows you to receive emissions directly from the root and play a central role in the network's permission and delegation structure.  
+
+<Aside>
+- Applying does **not guarantee approval** — all applications are subject to DAO review.  
+- You don’t need to be a Root Agent to actively participate in the Torus Network.  
+- Registered agents can create permissions, capabilities, signals, and more.  
+  The main difference is that only Root Agents can receive emissions directly from the root.  
+- If you're looking to participate, start by following the [Register an Agent guide](../how-to-guides/register-an-agent).
+</Aside>
+
+#### What we will accomplish
+
+- Apply to become a Root Agent
+
+<Aside>
+⏱️ **Estimated time to complete this guide: 5 minutes**
+</Aside>
+
+## Prerequisites
+
+<CardGrid>
+  <Card title="Torus Wallet" icon="seti:license">
+    Make sure you have a Torus wallet set up and ready to use.
+    You can find a [guide on how to set up a wallet here](../how-to-guides/setup-a-wallet).
+  </Card>
+  <Card title="Torus Balance" icon="seti:shell">
+    Check your balance on the [Torus Wallet](https://wallet.torus.network) and ensure you have enough Free Balance to cover the registration fees.
+    You can find a [guide on how to bridge Torus here](../how-to-guides/bridge-to-base).
+  </Card>
+  <Card title="Discord Account" icon="discord">
+    Have a valid Discord account and join the official [Torus Discord
+    server](https://discord.gg/torus).
+  </Card>
+</CardGrid>
+
+
+## Apply to Whitelist an Agent
+
+<Steps>
+
+1. **Visit the [Whitelist Applications Page](https://dao.torus.network/whitelist-applications)**  
+    The Whitelist Application page is found in the DAO page.
+
+2. **Connect your Torus Wallet**  
+   Click the **Connect Wallet** button at the top right and select your Torus wallet.  
+
+3. **Click in Shape the Network Button**  
+    It can be found in the top right corner of the dashboard.  
+    It will open a modal with a form to apply for whitelisting.
+    <ClickableImage src={daoShapeTheNetwork} alt="Shape the network button" />
+
+4. **Select the Whitelist an Agent option and fill the form**    
+    In modal, select the option **Whitelist an Agent** and fill in the required fields for your application.    
+    In this step you must validate your **Discord Account** in order to apply.
+    <Aside>
+        Your Discord account is used solely to validate your application via OAuth.  
+        We do **not** collect or store your password, and we **never** have access to your Discord credentials.
+
+        Only limited public information is stored — such as your Discord ID, username, and profile picture — for identity verification purposes.
+    </Aside>
+
+
+    <ClickableImage src={selectTheWhitelistOption} alt="Select whitelist option" />
+
+5. **Submit Proposal**  
+    Click in **Submit Proposal** and confirm the transaction in your wallet after you filled in the form.
+    <Aside>
+        The proposal cost (**100 Torus**) will be deducted from your connected wallet.
+
+        - If your application is **accepted**, the fee will be refunded.  
+        - If your application is **rejected**, the fee will be **burned permanently** and cannot be recovered.
+    </Aside>
+
+
+6. **All Done**   
+   You’ve now successfully Applited to Whitelist an Agent on Torus.  
+   Now you must wait for DAO members to review your application.  
+   You can follow the process through the [Whitelist DAO Page](https://dao.torus.network/whitelist-applications)
+</Steps>
+
+
+## Support and Resources
+   If you want to understand more about the core differences between a Registered agent and a Whitelisted agent, you can relate to the [Concepts & Terminology](../getting-started/concepts) section.  
+   You can also get help directly from the community via:
+
+   - [Torus Community Discord](https://discord.gg/torus)  
+   - [Torus Telegram Group](https://t.me/torusnetwork)