From bb05dcd6002d7f177b5f5b34f1c33b8747346115 Mon Sep 17 00:00:00 2001
From: Adam Cohen Hillel <adamcohenhillel@gmail.com>
Date: Sun, 20 Apr 2025 17:03:13 +0100
Subject: [PATCH] fucking legend

---
 frontend/src/app/share/[threadId]/page.tsx | 30 ++++++++++++++++------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/share/[threadId]/page.tsx b/frontend/src/app/share/[threadId]/page.tsx
index 13938e3a..adcf6e4b 100644
--- a/frontend/src/app/share/[threadId]/page.tsx
+++ b/frontend/src/app/share/[threadId]/page.tsx
@@ -228,11 +228,19 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
   // Initialize as if user already closed panel to prevent auto-opening
   useEffect(() => {
     userClosedPanelRef.current = true;
+    // Initially hide the side panel
+    setIsSidePanelOpen(false);
   }, []);
 
   // Define togglePlayback and resetPlayback functions explicitly
   const togglePlayback = useCallback(() => {
-    setIsPlaying(prev => !prev);
+    setIsPlaying(prev => {
+      if (!prev) {
+        // When starting playback, show the side panel
+        setIsSidePanelOpen(true);
+      }
+      return !prev;
+    });
   }, []);
 
   const resetPlayback = useCallback(() => {
@@ -243,6 +251,8 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
     setStreamingText("");
     setIsStreamingText(false);
     setCurrentToolCall(null);
+    // Hide the side panel when resetting
+    setIsSidePanelOpen(false);
   }, []);
 
   const toggleSidePanel = useCallback(() => {
@@ -1414,19 +1424,23 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
         >
           <div className="mx-auto max-w-3xl">
             {visibleMessages.length === 0 && !streamingText && !currentToolCall ? (
-              <div className="flex flex-col items-center justify-center min-h-[50vh] py-12">
-                <div className="text-center max-w-md mx-auto">
-                  <div className="rounded-full bg-primary/10 w-12 h-12 mx-auto flex items-center justify-center mb-4">
+              <div className="fixed inset-0 flex flex-col items-center justify-center">
+                {/* Gradient overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent dark:from-black/90 dark:via-black/50 dark:to-transparent" />
+                
+                <div className="text-center max-w-md mx-auto relative z-10 px-4">
+                  <div className="rounded-full bg-primary/10 backdrop-blur-sm w-12 h-12 mx-auto flex items-center justify-center mb-4">
                     <Play className="h-5 w-5 text-primary" />
                   </div>
-                  <h3 className="text-lg font-medium mb-2">Watch this conversation</h3>
-                  <p className="text-sm text-muted-foreground mb-4">
-                    This is a shared view-only conversation. Click play to replay the entire conversation with realistic timing.
+                  <h3 className="text-lg font-medium mb-2 text-white">Watch this agent in action</h3>
+                  <p className="text-sm text-white/80 mb-4">
+                    This is a shared view-only agent run. Click play to replay the entire conversation with realistic timing.
                   </p>
                   <Button 
                     onClick={togglePlayback} 
-                    className="flex items-center mx-auto"
+                    className="flex items-center mx-auto bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-white/20"
                     size="lg"
+                    variant="outline"
                   >
                     <Play className="h-4 w-4 mr-2" /> 
                     Start Playback