Add Docs for Test Mode V2

docs/accounts-billing/new-pricing-comparison.md

@@ -290,6 +290,14 @@ export const PricingToggles = () => {
             <td>✅</td>
             <td>✅</td>
           </tr>
+          <tr>
+            <td>Test Mode Session Expiration<br/><span className="feature-description">How long a Test Mode session remains active before expiring</span></td>
+            <td>20 minutes</td>
+            <td>No expiration</td>
+            <td>No expiration</td>
+            <td>No expiration</td>
+            <td>No expiration</td>
+          </tr>
           <tr>
             <td>Visual Logic Builder<br/><span className="feature-description">Create app logic with a visual editor</span></td>
             <td>✅</td>
@@ -754,4 +762,4 @@ Choose the plan that fits your development needs and team size.
 Includes all Business features, plus the ability to add up to 7 additional seats (12 total per team) at **$85/seat/month** (USD) or **₹2,850/seat/month** (INR) and collaborate with up to 20 other paid users at the project level via Single Project Collaborator Passes. Must be approved as an Expert Agency via [Contra](https://contra.com/opportunity/rWlmk2Yv-become-a-flutter-flow-agency).
 
 ### Localized Pricing
-INR pricing reflects localized rates adjusted for local purchasing power, providing the same features and plan structures as USD pricing. All plans include the same comprehensive feature set regardless of currency.
+INR pricing reflects localized rates adjusted for local purchasing power, providing the same features and plan structures as USD pricing. All plans include the same comprehensive feature set regardless of currency.

docs/ff-designer/collaboration/collaboration.md

@@ -123,7 +123,7 @@ Because changes are merged automatically as they're made, multiple people can ed
 </div>
 <p></p>
 
-Active collaborators are shown on the canvas as you work, so you always know who else is in the design and what they're focused on:
+Active collaborators are shown on the canvas as you work, so you always know who else is in the design and what they're focused on.
 
 ## Comments
 
@@ -209,9 +209,6 @@ These actions appear only on comments you authored.
 2. The agent reads the full thread, original comment and replies and applies the requested change to the target frame or element. It's unavailable while the editor is already busy.
 3. When it finishes, the agent posts a reply in the thread confirming the change. 
 
-:::info
-For comments on the canvas, this action instead creates a new frame from the comment.
-:::
 
 <div style={{
     position: 'relative',
@@ -239,4 +236,8 @@ For comments on the canvas, this action instead creates a new frame from the com
 </div>
 <p></p>
 
+:::info
+For comments on the canvas, this action instead creates a new frame from the comment.
+:::
+
 

docs/intro/ff-ui/builder.md

@@ -26,18 +26,19 @@ Here is a list of all the features accessible from the navigation menu:
 3. **Page Selector**: Manage pages and components, create folders as needed.
 4. **Widget Tree**: Get an overview of all widgets on a selected page.
 5. **Storyboard**: Visualize app's design and navigation.
-6. **Firestore**: Create collections and adjust Firestore-related settings.
-7. **Data Types**: Create custom data types for your app.
-8. **App Values**: Manage [App State variables](../../resources/data-representation/app-state.md) and Constants.
-9. **API Calls**: Define API calls.
-10. **Media Assets**: Upload assets for your app and team.
-11. **Custom Functions**: Add custom functionalities, widgets, and actions.
-12. **Cloud Functions**: Write and deploy cloud functions for Firebase.
-13. **Tests**: Add automated tests.
-14. **Agents**: Create, configure, and manage [AI Agents](../../ff-integrations/ai/ai-agents.md) to integrate conversational AI interactions into your app.
-15. **App Events**: Define and manage [App Events](../../ff-concepts/app-events/app-events.md) that allow different parts of your app to communicate without being directly connected.
-16. **Theme settings**: Customize visual appearance.
-17. **Settings and Integrations**: Access app-related settings and integrations.
+6. **Test Mode**: [Test your app](../../testing-deployment-publishing/running-your-app/run-your-app.md#test-mode) in a live debugging environment.
+7. **Firestore**: Create collections and adjust Firestore-related settings.
+8. **Data Types**: Create custom data types for your app.
+9. **App Values**: Manage [App State variables](../../resources/data-representation/app-state.md) and Constants.
+10. **API Calls**: Define API calls.
+12. **Media Assets**: Upload assets for your app and team.
+13. **Custom Functions**: Add custom functionalities, widgets, and actions.
+14. **Cloud Functions**: Write and deploy cloud functions for Firebase.
+15. **Tests**: Add automated tests.
+16. **Agents**: Create, configure, and manage [AI Agents](../../ff-integrations/ai/ai-agents.md) to integrate conversational AI interactions into your app.
+17. **App Events**: Define and manage [App Events](../../ff-concepts/app-events/app-events.md) that allow different parts of your app to communicate without being directly connected.
+18. **Theme settings**: Customize visual appearance.
+19. **Settings and Integrations**: Access app-related settings and integrations.
 
 ## ToolBar
 

docs/testing-deployment-publishing/running-your-app/run-your-app.md

@@ -48,47 +48,117 @@ functionality.
 
 ## Test Mode
 
-The **Test Mode** runs a web version of your FlutterFlow app and uses Flutter's [Hot Reload](https://docs.flutter.dev/tools/hot-reload) feature, which lets you immediately see any changes made to code in an
-emulator or on-device. Running your app in Test Mode helps you experiment,
-test UIs, and fix bugs faster.
+The **Test Mode** runs a web version of your FlutterFlow app and uses Flutter's Hot Reload feature, which lets you immediately see any changes made to code in an emulator or on-device. Running your app in Test Mode helps you experiment, test UIs, and fix bugs faster.
 
 To run your app in Test Mode:
 
-1. Click on the **Test icon** or press **Cmd/Ctrl + I** (a keyboard shortcut).
-   This will run your app in a new browser window.
-2. Switch to the app builder and make some changes, such as changing colors and
-   alignment.
-3. Now switch to the Test Mode tab and click **Instant Reload** or press **Cmd/Ctrl + J** to see the changes in under 10 seconds.
+1. Select **Test Mode** from the left-side menu. The test environment will launch and be ready to use within a few minutes.
+2. Once Test Mode is running, make changes in the FlutterFlow builder, such as updating colors, layouts, or widgets.
+3. In Test Mode, **Sync changes automatically** is enabled by default, so changes made in FlutterFlow are automatically synced to the running app.
+4. If you disable auto-sync, click **Hot Reload** or press `Cmd/Ctrl + J` whenever you want to manually sync and preview the latest changes.
+5. Use **Hot Restart** when changes require a full restart, such as dependency updates or certain state model changes.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/95jxxYi1bzeY27KUek50?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+:::note
+
+**For users on a paid plan**, Test Mode sessions do not expire and can remain active indefinitely until manually stopped.
+
+**For users on the Free plan**, Test Mode sessions expire after 20 minutes. Once a session expires, you can start a new one by clicking the **New Session** button.
+
+![new-session](imgs/new-session.avif)
 
-:::info[Test Mode Button Colors]
-The test mode button color indicates the following status:
-
-- **Orange**: Building
-- **Green**: Ready
-- **Yellow**: Expiring Soon
-- **Red**: Expired
 :::
 
-### When to use Test Mode
+### Floating Window
+
+A Floating Window displays the running app on top of the builder, allowing you to design and test at the same time without switching between tabs.
+
+The Floating Window makes iteration much faster because you can immediately see the impact of your changes while working in the builder. It makes it easier to fine-tune layouts, styling, and interactions.
+
+To open the Floating Window, start a Test Mode session and click the **Floating Window** icon in the Test Mode toolbar. A movable preview of your app will appear over the builder, allowing you to keep the live app and editor visible at the same time. You can drag the window anywhere on the screen and resize it as needed while continuing to edit your app.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/LQBn8B4PGst1MKD6QVIm?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+### Inspect Mode
+
+Inspect Mode helps you quickly locate widgets in the FlutterFlow builder while testing your app. This is especially useful when working with large pages or deeply nested layouts. Instead of manually searching through the Widget Tree to find a specific button, image, text, or container, you can simply click it in the running app and jump directly to its location in the builder.
 
-When designing and developing your app, Test Mode is the second most common
-testing mode (next to Local Run).
-Its "Hot Reloading" allows for fast
-iteration and testing. Its downsides compared to Local Run are its restricted
-time (30 min.) and lack of access to some features (e.g. camera).
+To use Inspect Mode, click the **Inspect Mode** icon in the Test Mode toolbar. Once enabled, select any widget in the running app preview. FlutterFlow will automatically navigate to and highlight the corresponding widget in the builder, allowing you to inspect or edit it immediately. 
 
-:::danger[Troubleshooting – Slow Loading]
-If you see a progress bar at the top of the device running for over 15 seconds,
-try refreshing the page.
+When you're finished, click the Inspect Mode icon again to exit inspection mode and continue interacting with the app normally.
+
+### Test Mode on Mobile
+
+You can open the current Test Mode session directly on a physical mobile device. This allows you to test your app on actual hardware and verify touch interactions, layouts, scrolling behavior, and overall user experience.
+
+To open the session on your phone, click the **QR Code** icon in the Test Mode toolbar. FlutterFlow will generate a QR code and a unique session link. Scan the QR code using your phone's camera or open the generated link on your mobile device. The app will load the same active Test Mode session that is running in your browser.
+
+:::warning
+The generated link is tied to the current Test Mode session and will stop working when the session ends.
 :::
 
+![test-mode-in-phone](imgs/test-mode-in-phone.avif)
+
+
+### Debug info
+Test mode also includes a **Debug Info** panel, which provides a real-time view of all variables with their current values. It includes search and filter options, allowing you to find variables based on type or nullability. This is particularly useful for developers who need to track the state of the app and diagnose issues efficiently.
+
+![deubg-info](../imgs/deubg-info.avif)
+
 :::caution[Test Mode Limitations]
 **Test Mode** has certain limitations because some packages are not supported on
 the web and because of the way FlutterFlow configures your project to run in the
 cloud.
 
-- 30 minute testing time. After the 30 minutes has expired, you can start
-  another test mode session.
 - If you see a grey "broken" screen with a sad face, it may be a DNS server
   issue with your network provider. We recommend using CloudFlare's 1.1.1.1 DNS
   server. [**Click here**](https://developers.cloudflare.com/1.1.1.1/setup/) to see instructions.
@@ -106,11 +176,6 @@ cloud.
   Settings to test recording audio or test it on emulator via Local Run.
   :::
 
-### Debug info
-Test mode also includes a **Debug Info** panel, which provides a real-time view of all variables with their current values. It includes search and filter options, allowing you to find variables based on type or nullability. This is particularly useful for developers who need to track the state of the app and diagnose issues efficiently.
-
-![deubg-info](../imgs/deubg-info.avif)
-
 ## Run Mode
 
 You can test a fully functional version of your app using the **Run Mode**,
@@ -143,4 +208,8 @@ Local Run downloads the code locally and gives you the option to use [Flutter's
 
 :::info
 Please note that Local Run is currently available only on the [**Paid Plans**](https://flutterflow.io/pricing).
-:::
+:::
+
+## FAQ
+
+<details> <summary> I don't see the new Test Mode option in the left sidebar.</summary> <p> If the new Test Mode option is not visible in the left sidebar, open the test menu and enable the <strong>Use new test mode</strong> option. Once enabled, the new Test Mode option will appear in the navigation menu. </p> </details>