chore: update snapshot

fix guided tour for dark mode

backend/sandbox/README.md

@@ -20,7 +20,7 @@ You can modify the sandbox environment for development or to add new capabilitie
    ```
    cd backend/sandbox/docker
    docker compose build
-   docker push kortix/suna:0.1.3.9
+   docker push kortix/suna:0.1.3.11
    ```
 3. Test your changes locally using docker-compose
 

backend/sandbox/docker/docker-compose.yml

@@ -6,7 +6,7 @@ services:
       dockerfile: ${DOCKERFILE:-Dockerfile}
       args:
         TARGETPLATFORM: ${TARGETPLATFORM:-linux/amd64}
-    image: kortix/suna:0.1.3.9
+    image: kortix/suna:0.1.3.11
     ports:
       - "6080:6080"  # noVNC web interface
       - "5901:5901"  # VNC port

backend/sandbox/docker/visual_html_editor_router.py

@@ -535,6 +535,7 @@ def inject_editor_functionality(html_content: str, file_path: str) -> str:
             box-shadow: 0 4px 12px rgba(0,0,0,0.1);
             display: flex;
             gap: 4px;
+            z-index: 1000;
         }
         
         .save-btn, .cancel-btn {

backend/utils/config.py

@@ -306,8 +306,8 @@ class Configuration:
     STRIPE_PRODUCT_ID_STAGING: str = 'prod_SCgIj3G7yPOAWY'
     
     # Sandbox configuration
-    SANDBOX_IMAGE_NAME = "kortix/suna:0.1.3.9"
-    SANDBOX_SNAPSHOT_NAME = "kortix/suna:0.1.3.9"
+    SANDBOX_IMAGE_NAME = "kortix/suna:0.1.3.11"
+    SANDBOX_SNAPSHOT_NAME = "kortix/suna:0.1.3.11"
     SANDBOX_ENTRYPOINT = "/usr/bin/supervisord -n -c /etc/supervisor/conf.d/supervisord.conf"
 
     # LangFuse configuration

docs/SELF-HOSTING.md

@@ -127,8 +127,8 @@ As part of the setup, you'll need to:
 1. Create a Daytona account
 2. Generate an API key
 3. Create a Snapshot:
-   - Name: `kortix/suna:0.1.3.9`
-   - Image name: `kortix/suna:0.1.3.9`
+   - Name: `kortix/suna:0.1.3.11`
+   - Image name: `kortix/suna:0.1.3.11`
    - Entrypoint: `/usr/bin/supervisord -n -c /etc/supervisor/conf.d/supervisord.conf`
 
 ## Manual Configuration

frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { Loader2, Save, Eye } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -13,7 +13,6 @@ import { toast } from 'sonner';
 import { AgentPreview } from '../../../../../components/agents/agent-preview';
 
 import { useAgentVersionData } from '../../../../../hooks/use-agent-version-data';
-import { useSearchParams } from 'next/navigation';
 import { useAgentVersionStore } from '../../../../../lib/stores/agent-version-store';
 
 import { AgentHeader, VersionAlert, ConfigurationTab } from '@/components/agents/config';
@@ -24,6 +23,7 @@ import { useAgentConfigTour } from '@/hooks/use-agent-config-tour';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
 
+// Tour steps for agent configuration
 const agentConfigTourSteps: Step[] = [
   {
     target: '[data-tour="agent-header"]',
@@ -76,20 +76,21 @@ const agentConfigTourSteps: Step[] = [
   },
   {
     target: '[data-tour="triggers-section"]',
-    content: 'Add various triggers to your agent to help it perform tasks and automate workflows.',
-    title: 'Triggers',
+    content: 'Set up automated triggers for your agent to run on schedules or events.',
+    title: 'Triggers & Automation',
     placement: 'right',
     disableBeacon: true,
   },
   {
     target: '[data-tour="preview-agent"]',
-    content: 'You can also build your agent here, just ask it what you need and watch it self configure.',
-    title: 'Build or Test Your Agent',
+    content: 'Build and test your agent by previewing how it will behave and respond. Here you can also ask the agent to self-configure',
+    title: 'Build & Test Your Agent',
     placement: 'left',
     disableBeacon: true,
   },
 ];
 
+// Form data interface
 interface FormData {
   name: string;
   description: string;
@@ -134,8 +135,6 @@ function AgentConfigurationContent() {
   const [originalData, setOriginalData] = useState<FormData>(formData);
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
 
-
-
   useEffect(() => {
     if (!agent) return;
     let configSource = agent;
@@ -552,38 +551,38 @@ export default function AgentConfigurationPage() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: 'hsl(var(--background))',
-            textColor: 'hsl(var(--foreground))',
+            primaryColor: '#000000',
+            backgroundColor: '#ffffff',
+            textColor: '#000000',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: 'hsl(var(--background))',
+            arrowColor: '#ffffff',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: 'hsl(var(--background))',
+            backgroundColor: '#ffffff',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid hsl(var(--border))',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            border: '1px solid #e5e7eb',
           },
           tooltipContainer: {
             textAlign: 'left',
           },
           tooltipTitle: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: 'hsl(var(--primary))',
-            color: 'hsl(var(--primary-foreground))',
+            backgroundColor: '#000000',
+            color: '#ffffff',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -591,32 +590,30 @@ export default function AgentConfigurationPage() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid hsl(var(--border))',
+            border: '1px solid #e5e7eb',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
           },
         }}
       />
-      
       <TourConfirmationDialog
         open={showWelcome}
         onAccept={handleWelcomeAccept}
         onDecline={handleWelcomeDecline}
       />
-      
       <AgentConfigurationContent />
     </>
   );

frontend/src/components/agents/agent-preview.tsx

@@ -363,7 +363,7 @@ export const AgentPreview = ({ agent, agentMetadata }: AgentPreviewProps) => {
                   )}
                 </div>
                 <p className='w-[60%] text-2xl mb-3'>Start conversation with <span className='text-primary/80 font-semibold'>{agent.name}</span></p>
-                <p className='w-[70%] text-sm text-muted-foreground/60'>Test your agent's configuration and chat back and forth to see how it performs with your current settings, tools, and knowledge base.</p>
+                <p className='w-[70%] text-sm text-muted-foreground/60'>Build and test your agent by previewing how it will behave and respond. Here you can also ask the agent to self-configure</p>
               </div>
             }
           />

frontend/src/components/dashboard/dashboard-content.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, Suspense, useCallback } from 'react';
+import React, { useState, Suspense, useCallback, useEffect } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
@@ -34,6 +34,7 @@ import { toast } from 'sonner';
 import { ReleaseBadge } from '../auth/release-badge';
 import { useDashboardTour } from '@/hooks/use-dashboard-tour';
 import { TourConfirmationDialog } from '@/components/tour/TourConfirmationDialog';
+import { Calendar, MessageSquare, Plus, Sparkles, Zap } from 'lucide-react';
 
 const PENDING_PROMPT_KEY = 'pendingAgentPrompt';
 
@@ -266,38 +267,35 @@ export function DashboardContent() {
         disableScrollParentFix
         styles={{
           options: {
-            primaryColor: 'hsl(var(--primary))',
-            backgroundColor: 'hsl(var(--background))',
-            textColor: 'hsl(var(--foreground))',
+            primaryColor: '#000000',
+            backgroundColor: '#ffffff',
+            textColor: '#000000',
             overlayColor: 'rgba(0, 0, 0, 0.7)',
-            arrowColor: 'hsl(var(--background))',
+            arrowColor: '#ffffff',
             zIndex: 1000,
           },
           tooltip: {
-            backgroundColor: 'hsl(var(--background))',
+            backgroundColor: '#ffffff',
             borderRadius: 8,
             fontSize: 14,
             padding: 20,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px hsl(var(--border))',
-            border: '1px solid hsl(var(--border))',
-          },
-          tooltipContainer: {
-            textAlign: 'left',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            border: '1px solid #e5e7eb',
           },
           tooltipTitle: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 16,
             fontWeight: 600,
             marginBottom: 8,
           },
           tooltipContent: {
-            color: 'hsl(var(--foreground))',
+            color: '#000000',
             fontSize: 14,
             lineHeight: 1.5,
           },
           buttonNext: {
-            backgroundColor: 'hsl(var(--primary))',
-            color: 'hsl(var(--primary-foreground))',
+            backgroundColor: '#000000',
+            color: '#ffffff',
             fontSize: 12,
             padding: '8px 16px',
             borderRadius: 6,
@@ -305,21 +303,21 @@ export function DashboardContent() {
             fontWeight: 500,
           },
           buttonBack: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             padding: '8px 16px',
-            border: '1px solid hsl(var(--border))',
+            border: '1px solid #e5e7eb',
             borderRadius: 6,
           },
           buttonSkip: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
             fontSize: 12,
             border: 'none',
           },
           buttonClose: {
-            color: 'hsl(var(--muted-foreground))',
+            color: '#6b7280',
             backgroundColor: 'transparent',
           },
         }}

frontend/src/components/thread/tool-views/presentation-tools/FullScreenPresentationViewer.tsx

@@ -289,7 +289,7 @@ export function FullScreenPresentationViewer({
                 transformOrigin: '0 0',
                 position: 'absolute',
                 top: 0,
-                left: 0,
+                left: `calc((100% - ${1920 * scale}px) / 2)`,
                 willChange: 'transform',
                 backfaceVisibility: 'hidden',
                 WebkitBackfaceVisibility: 'hidden'

setup.py

@@ -669,8 +669,8 @@ class SetupWizard:
             f"Visit {Colors.GREEN}https://app.daytona.io/dashboard/snapshots{Colors.ENDC}{Colors.CYAN} to create a snapshot."
         )
         print_info("Create a snapshot with these exact settings:")
-        print_info(f"   - Name:\t\t{Colors.GREEN}kortix/suna:0.1.3.9{Colors.ENDC}")
-        print_info(f"   - Snapshot name:\t{Colors.GREEN}kortix/suna:0.1.3.9{Colors.ENDC}")
+        print_info(f"   - Name:\t\t{Colors.GREEN}kortix/suna:0.1.3.11{Colors.ENDC}")
+        print_info(f"   - Snapshot name:\t{Colors.GREEN}kortix/suna:0.1.3.11{Colors.ENDC}")
         print_info(
             f"   - Entrypoint:\t{Colors.GREEN}/usr/bin/supervisord -n -c /etc/supervisor/conf.d/supervisord.conf{Colors.ENDC}"
         )