diff --git a/backend/supabase/migrations/20250504123828_fix_thread_select_policy.sql b/backend/supabase/migrations/20250504123828_fix_thread_select_policy.sql
new file mode 100644
index 00000000..b15cb8bc
--- /dev/null
+++ b/backend/supabase/migrations/20250504123828_fix_thread_select_policy.sql
@@ -0,0 +1,16 @@
+DROP POLICY IF EXISTS thread_select_policy ON threads;
+
+CREATE POLICY thread_select_policy ON threads
+FOR SELECT
+USING (
+    is_public IS TRUE
+    OR basejump.has_role_on_account(account_id) = true
+    OR EXISTS (
+        SELECT 1 FROM projects
+        WHERE projects.project_id = threads.project_id
+        AND (
+            projects.is_public IS TRUE
+            OR basejump.has_role_on_account(projects.account_id) = true
+        )
+    )
+);
diff --git a/frontend/src/app/share/[threadId]/page.tsx b/frontend/src/app/share/[threadId]/page.tsx
index cfcb1e0a..1b33e56d 100644
--- a/frontend/src/app/share/[threadId]/page.tsx
+++ b/frontend/src/app/share/[threadId]/page.tsx
@@ -143,7 +143,7 @@ function renderMarkdownContent(
       // Extract attachments from the XML attributes
       const attachmentsMatch = rawXml.match(/attachments=["']([^"']*)["']/i);
       const attachments = attachmentsMatch
-        ? attachmentsMatch[1].split(',').map((a) => a.trim())
+        ? attachmentsMatch[1].split(',').map(a => a.trim())
         : [];
 
       // Extract content from the ask tag
@@ -153,9 +153,7 @@ function renderMarkdownContent(
       // Render <ask> tag content with attachment UI
       contentParts.push(
         <div key={`ask-${match.index}-${timestamp}`} className="space-y-3">
-          <Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3">
-            {askContent}
-          </Markdown>
+          <Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3">{askContent}</Markdown>
 
           {attachments.length > 0 && (
             <div className="mt-3 space-y-2">
@@ -175,28 +173,13 @@ function renderMarkdownContent(
                   ].includes(extension || '');
                   const isPdf = extension === 'pdf';
                   const isMd = extension === 'md';
-                  const isCode = [
-                    'js',
-                    'jsx',
-                    'ts',
-                    'tsx',
-                    'py',
-                    'html',
-                    'css',
-                    'json',
-                  ].includes(extension || '');
+                  const isCode = ['js', 'jsx', 'ts', 'tsx', 'py', 'html', 'css', 'json'].includes(extension || '');
 
-                  let icon = (
-                    <File className="h-3.5 w-3.5 text-muted-foreground" />
-                  );
-                  if (isImage)
-                    icon = <File className="h-3.5 w-3.5 text-purple-500" />;
-                  if (isPdf)
-                    icon = <File className="h-3.5 w-3.5 text-red-500" />;
-                  if (isMd)
-                    icon = <File className="h-3.5 w-3.5 text-blue-500" />;
-                  if (isCode)
-                    icon = <File className="h-3.5 w-3.5 text-emerald-500" />;
+                  let icon = <File className="h-3.5 w-3.5 text-muted-foreground" />;
+                  if (isImage) icon = <File className="h-3.5 w-3.5 text-purple-500" />;
+                  if (isPdf) icon = <File className="h-3.5 w-3.5 text-red-500" />;
+                  if (isMd) icon = <File className="h-3.5 w-3.5 text-blue-500" />;
+                  if (isCode) icon = <File className="h-3.5 w-3.5 text-emerald-500" />;
 
                   return (
                     <button
@@ -362,12 +345,10 @@ export default function ThreadPage({
       `[STREAM HANDLER] Received message: ID=${message.message_id}, Type=${message.type}`,
     );
     if (!message.message_id) {
-      console.warn(
-        `[STREAM HANDLER] Received message is missing ID: Type=${message.type}, Content=${message.content?.substring(0, 50)}...`,
-      );
+      console.warn(`[STREAM HANDLER] Received message is missing ID: Type=${message.type}, Content=${message.content?.substring(0, 50)}...`);
     }
 
-    setMessages((prev) => {
+    setMessages(prev => {
       // First check if the message already exists
       const messageExists = prev.some(
         (m) => m.message_id === message.message_id,
@@ -389,79 +370,66 @@ export default function ThreadPage({
     }
   }, []);
 
-  const handleStreamStatusChange = useCallback(
-    (hookStatus: string) => {
-      console.log(`[PAGE] Hook status changed: ${hookStatus}`);
-      switch (hookStatus) {
-        case 'idle':
-        case 'completed':
-        case 'stopped':
-        case 'agent_not_running':
+  const handleStreamStatusChange = useCallback((hookStatus: string) => {
+    console.log(`[PAGE] Hook status changed: ${hookStatus}`);
+    switch (hookStatus) {
+      case 'idle':
+      case 'completed':
+      case 'stopped':
+      case 'agent_not_running':
+        setAgentStatus('idle');
+        setAgentRunId(null);
+        // Reset auto-opened state when agent completes to trigger tool detection
+        setAutoOpenedPanel(false);
+
+        // Refetch messages to ensure we have the final state after completion OR stopping
+        if (hookStatus === 'completed' || hookStatus === 'stopped') {
+          getMessages(threadId).then(messagesData => {
+            if (messagesData) {
+              console.log(`[PAGE] Refetched messages after ${hookStatus}:`, messagesData.length);
+              // Map API message type to UnifiedMessage type
+              const unifiedMessages = (messagesData || [])
+                .filter(msg => msg.type !== 'status')
+                .map((msg: ApiMessageType) => ({
+                  message_id: msg.message_id || null,
+                  thread_id: msg.thread_id || threadId,
+                  type: (msg.type || 'system') as UnifiedMessage['type'],
+                  is_llm_message: Boolean(msg.is_llm_message),
+                  content: msg.content || '',
+                  metadata: msg.metadata || '{}',
+                  created_at: msg.created_at || new Date().toISOString(),
+                  updated_at: msg.updated_at || new Date().toISOString()
+                }));
+
+              setMessages(unifiedMessages);
+              scrollToBottom('smooth');
+            }
+          }).catch(err => {
+            console.error(`Error refetching messages after ${hookStatus}:`, err);
+          });
+        }
+        break;
+      case 'connecting':
+        setAgentStatus('connecting');
+        break;
+      case 'streaming':
+        setAgentStatus('running');
+        break;
+      case 'error':
+        setAgentStatus('error');
+        // Handle errors by going back to idle state after a short delay
+        setTimeout(() => {
           setAgentStatus('idle');
           setAgentRunId(null);
-          // Reset auto-opened state when agent completes to trigger tool detection
-          setAutoOpenedPanel(false);
-
-          // Refetch messages to ensure we have the final state after completion OR stopping
-          if (hookStatus === 'completed' || hookStatus === 'stopped') {
-            getMessages(threadId)
-              .then((messagesData) => {
-                if (messagesData) {
-                  console.log(
-                    `[PAGE] Refetched messages after ${hookStatus}:`,
-                    messagesData.length,
-                  );
-                  // Map API message type to UnifiedMessage type
-                  const unifiedMessages = (messagesData || [])
-                    .filter((msg) => msg.type !== 'status')
-                    .map((msg: ApiMessageType) => ({
-                      message_id: msg.message_id || null,
-                      thread_id: msg.thread_id || threadId,
-                      type: (msg.type || 'system') as UnifiedMessage['type'],
-                      is_llm_message: Boolean(msg.is_llm_message),
-                      content: msg.content || '',
-                      metadata: msg.metadata || '{}',
-                      created_at: msg.created_at || new Date().toISOString(),
-                      updated_at: msg.updated_at || new Date().toISOString(),
-                    }));
-
-                  setMessages(unifiedMessages);
-                  scrollToBottom('smooth');
-                }
-              })
-              .catch((err) => {
-                console.error(
-                  `Error refetching messages after ${hookStatus}:`,
-                  err,
-                );
-              });
-          }
-          break;
-        case 'connecting':
-          setAgentStatus('connecting');
-          break;
-        case 'streaming':
-          setAgentStatus('running');
-          break;
-        case 'error':
-          setAgentStatus('error');
-          // Handle errors by going back to idle state after a short delay
-          setTimeout(() => {
-            setAgentStatus('idle');
-            setAgentRunId(null);
-          }, 3000);
-          break;
-      }
-    },
-    [threadId],
-  );
+        }, 3000);
+        break;
+    }
+  }, [threadId]);
 
   const handleStreamError = useCallback((errorMessage: string) => {
     console.error(`[PAGE] Stream hook error: ${errorMessage}`);
-    if (
-      !errorMessage.toLowerCase().includes('not found') &&
-      !errorMessage.toLowerCase().includes('agent run is not running')
-    ) {
+    if (!errorMessage.toLowerCase().includes('not found') &&
+      !errorMessage.toLowerCase().includes('agent run is not running')) {
       toast.error(`Stream Error: ${errorMessage}`);
     }
   }, []);
@@ -471,161 +439,154 @@ export default function ThreadPage({
   }, [agentStatus]);
 
   // Streaming text function
-  const streamText = useCallback(
-    (text: string, onComplete: () => void) => {
-      if (!text || !isPlaying) {
-        onComplete();
-        return () => {};
-      }
+  const streamText = useCallback((text: string, onComplete: () => void) => {
+    if (!text || !isPlaying) {
+      onComplete();
+      return () => { };
+    }
 
-      setIsStreamingText(true);
-      setStreamingText('');
+    setIsStreamingText(true);
+    setStreamingText("");
 
-      // Define regex to find tool calls in text
-      const toolCallRegex =
-        /<([a-zA-Z\-_]+)(?:\s+[^>]*)?>(?:[\s\S]*?)<\/\1>|<([a-zA-Z\-_]+)(?:\s+[^>]*)?\/>/g;
+    // Define regex to find tool calls in text
+    const toolCallRegex = /<([a-zA-Z\-_]+)(?:\s+[^>]*)?>(?:[\s\S]*?)<\/\1>|<([a-zA-Z\-_]+)(?:\s+[^>]*)?\/>/g;
 
-      // Split text into chunks (handling tool calls as special chunks)
-      const chunks: { text: string; isTool: boolean; toolName?: string }[] = [];
-      let lastIndex = 0;
-      let match;
+    // Split text into chunks (handling tool calls as special chunks)
+    const chunks: { text: string; isTool: boolean; toolName?: string }[] = [];
+    let lastIndex = 0;
+    let match;
 
-      while ((match = toolCallRegex.exec(text)) !== null) {
-        // Add text before the tool call
-        if (match.index > lastIndex) {
-          chunks.push({
-            text: text.substring(lastIndex, match.index),
-            isTool: false,
-          });
-        }
-
-        // Add the tool call
-        const toolName = match[1] || match[2];
+    while ((match = toolCallRegex.exec(text)) !== null) {
+      // Add text before the tool call
+      if (match.index > lastIndex) {
         chunks.push({
-          text: match[0],
-          isTool: true,
-          toolName,
-        });
-
-        lastIndex = toolCallRegex.lastIndex;
-      }
-
-      // Add any remaining text after the last tool call
-      if (lastIndex < text.length) {
-        chunks.push({
-          text: text.substring(lastIndex),
-          isTool: false,
+          text: text.substring(lastIndex, match.index),
+          isTool: false
         });
       }
 
-      let currentIndex = 0;
-      let chunkIndex = 0;
-      let currentText = '';
-      let isPaused = false;
+      // Add the tool call
+      const toolName = match[1] || match[2];
+      chunks.push({
+        text: match[0],
+        isTool: true,
+        toolName
+      });
 
-      const processNextCharacter = () => {
-        if (!isPlaying || isPaused) {
-          setTimeout(processNextCharacter, 100); // Check again after a short delay
-          return;
-        }
+      lastIndex = toolCallRegex.lastIndex;
+    }
 
-        if (chunkIndex >= chunks.length) {
-          // All chunks processed, we're done
-          setIsStreamingText(false);
+    // Add any remaining text after the last tool call
+    if (lastIndex < text.length) {
+      chunks.push({
+        text: text.substring(lastIndex),
+        isTool: false
+      });
+    }
 
-          // Update visible messages with the complete message
-          const currentMessage = messages[currentMessageIndex];
-          setVisibleMessages((prev) => {
-            const lastMessage = prev[prev.length - 1];
-            if (lastMessage?.message_id === currentMessage.message_id) {
-              // Replace the streaming message with the complete one
-              return [...prev.slice(0, -1), currentMessage];
-            } else {
-              // Add the complete message
-              return [...prev, currentMessage];
-            }
-          });
+    let currentIndex = 0;
+    let chunkIndex = 0;
+    let currentText = '';
+    let isPaused = false;
 
-          onComplete();
-          return;
-        }
+    const processNextCharacter = () => {
+      if (!isPlaying || isPaused) {
+        setTimeout(processNextCharacter, 100); // Check again after a short delay
+        return;
+      }
 
-        const currentChunk = chunks[chunkIndex];
-
-        // If this is a tool call chunk and we're at the start of it
-        if (currentChunk.isTool && currentIndex === 0) {
-          // For tool calls, check if they should be hidden during streaming
-          if (
-            currentChunk.toolName &&
-            HIDE_STREAMING_XML_TAGS.has(currentChunk.toolName)
-          ) {
-            // Instead of showing the XML, create a tool call object
-            const toolCall: StreamingToolCall = {
-              name: currentChunk.toolName,
-              arguments: currentChunk.text,
-              xml_tag_name: currentChunk.toolName,
-            };
-
-            setCurrentToolCall(toolCall);
-            setIsSidePanelOpen(true);
-            setCurrentToolIndex(toolPlaybackIndex + 1);
-            setToolPlaybackIndex((prev) => prev + 1);
-
-            // Pause streaming briefly while showing the tool
-            isPaused = true;
-            setTimeout(() => {
-              isPaused = false;
-              setCurrentToolCall(null);
-              chunkIndex++; // Move to next chunk
-              currentIndex = 0; // Reset index for next chunk
-              processNextCharacter();
-            }, 500); // Reduced from 1500ms to 500ms pause for tool display
-
-            return;
-          }
-        }
-
-        // Handle normal text streaming for non-tool chunks or visible tool chunks
-        if (currentIndex < currentChunk.text.length) {
-          // Dynamically adjust typing speed for a more realistic effect
-          const baseDelay = 5; // Reduced from 15ms to 5ms
-          let typingDelay = baseDelay;
-
-          // Add more delay for punctuation to make it feel more natural
-          const char = currentChunk.text[currentIndex];
-          if ('.!?,;:'.includes(char)) {
-            typingDelay = baseDelay + Math.random() * 100 + 50; // Reduced from 300+100 to 100+50ms pause after punctuation
-          } else {
-            const variableDelay = Math.random() * 5; // Reduced from 15 to 5ms
-            typingDelay = baseDelay + variableDelay; // 5-10ms for normal typing
-          }
-
-          // Add the next character
-          currentText += currentChunk.text[currentIndex];
-          setStreamingText(currentText);
-          currentIndex++;
-
-          // Process next character with dynamic delay
-          setTimeout(processNextCharacter, typingDelay);
-        } else {
-          // Move to the next chunk
-          chunkIndex++;
-          currentIndex = 0;
-          processNextCharacter();
-        }
-      };
-
-      processNextCharacter();
-
-      // Return cleanup function
-      return () => {
+      if (chunkIndex >= chunks.length) {
+        // All chunks processed, we're done
         setIsStreamingText(false);
-        setStreamingText('');
-        isPaused = true; // Stop processing
-      };
-    },
-    [isPlaying, messages, currentMessageIndex],
-  );
+
+        // Update visible messages with the complete message
+        const currentMessage = messages[currentMessageIndex];
+        setVisibleMessages(prev => {
+          const lastMessage = prev[prev.length - 1];
+          if (lastMessage?.message_id === currentMessage.message_id) {
+            // Replace the streaming message with the complete one
+            return [...prev.slice(0, -1), currentMessage];
+          } else {
+            // Add the complete message
+            return [...prev, currentMessage];
+          }
+        });
+
+        onComplete();
+        return;
+      }
+
+      const currentChunk = chunks[chunkIndex];
+
+      // If this is a tool call chunk and we're at the start of it
+      if (currentChunk.isTool && currentIndex === 0) {
+        // For tool calls, check if they should be hidden during streaming
+        if (currentChunk.toolName && HIDE_STREAMING_XML_TAGS.has(currentChunk.toolName)) {
+          // Instead of showing the XML, create a tool call object
+          const toolCall: StreamingToolCall = {
+            name: currentChunk.toolName,
+            arguments: currentChunk.text,
+            xml_tag_name: currentChunk.toolName
+          };
+
+          setCurrentToolCall(toolCall);
+          setIsSidePanelOpen(true);
+          setCurrentToolIndex(toolPlaybackIndex + 1);
+          setToolPlaybackIndex(prev => prev + 1);
+
+          // Pause streaming briefly while showing the tool
+          isPaused = true;
+          setTimeout(() => {
+            isPaused = false;
+            setCurrentToolCall(null);
+            chunkIndex++; // Move to next chunk
+            currentIndex = 0; // Reset index for next chunk
+            processNextCharacter();
+          }, 500); // Reduced from 1500ms to 500ms pause for tool display
+
+          return;
+        }
+      }
+
+      // Handle normal text streaming for non-tool chunks or visible tool chunks
+      if (currentIndex < currentChunk.text.length) {
+        // Dynamically adjust typing speed for a more realistic effect
+        const baseDelay = 5; // Reduced from 15ms to 5ms
+        let typingDelay = baseDelay;
+
+        // Add more delay for punctuation to make it feel more natural
+        const char = currentChunk.text[currentIndex];
+        if (".!?,;:".includes(char)) {
+          typingDelay = baseDelay + Math.random() * 100 + 50; // Reduced from 300+100 to 100+50ms pause after punctuation
+        } else {
+          const variableDelay = Math.random() * 5; // Reduced from 15 to 5ms
+          typingDelay = baseDelay + variableDelay; // 5-10ms for normal typing
+        }
+
+        // Add the next character
+        currentText += currentChunk.text[currentIndex];
+        setStreamingText(currentText);
+        currentIndex++;
+
+        // Process next character with dynamic delay
+        setTimeout(processNextCharacter, typingDelay);
+      } else {
+        // Move to the next chunk
+        chunkIndex++;
+        currentIndex = 0;
+        processNextCharacter();
+      }
+    };
+
+    processNextCharacter();
+
+    // Return cleanup function
+    return () => {
+      setIsStreamingText(false);
+      setStreamingText("");
+      isPaused = true; // Stop processing
+    };
+  }, [isPlaying, messages, currentMessageIndex]);
 
   // Main playback function
   useEffect(() => {
@@ -641,11 +602,7 @@ export default function ThreadPage({
       }
 
       const currentMessage = messages[currentMessageIndex];
-      console.log(
-        `Playing message ${currentMessageIndex}:`,
-        currentMessage.type,
-        currentMessage.message_id,
-      );
+      console.log(`Playing message ${currentMessageIndex}:`, currentMessage.type, currentMessage.message_id);
 
       // If it's an assistant message, stream it
       if (currentMessage.type === 'assistant') {
@@ -671,7 +628,7 @@ export default function ThreadPage({
         }
       } else {
         // For non-assistant messages, just add them to visible messages
-        setVisibleMessages((prev) => [...prev, currentMessage]);
+        setVisibleMessages(prev => [...prev, currentMessage]);
 
         // Wait a moment before showing the next message
         await new Promise((resolve) => setTimeout(resolve, 500));
@@ -727,15 +684,11 @@ export default function ThreadPage({
         if (!threadId) throw new Error('Thread ID is required');
 
         // Start loading all data in parallel
-        const [threadData, agentRuns, messagesData] = await Promise.all([
-          getThread(threadId).catch((err) => {
+        const [threadData, messagesData] = await Promise.all([
+          getThread(threadId).catch(err => {
             throw new Error('Failed to load thread data: ' + err.message);
           }),
-          getAgentRuns(threadId).catch((err) => {
-            console.warn('Failed to load agent runs:', err);
-            return [];
-          }),
-          getMessages(threadId).catch((err) => {
+          getMessages(threadId).catch(err => {
             console.warn('Failed to load messages:', err);
             return [];
           }),
@@ -749,12 +702,11 @@ export default function ThreadPage({
         // }
 
         // Load project data if we have a project ID
-        const projectData = threadData?.project_id
-          ? await getProject(threadData.project_id).catch((err) => {
-              console.warn('[SHARE] Could not load project data:', err);
-              return null;
-            })
-          : null;
+        const projectData = threadData?.project_id ?
+          await getProject(threadData.project_id).catch(err => {
+            console.warn('[SHARE] Could not load project data:', err);
+            return null;
+          }) : null;
 
         if (isMounted) {
           if (projectData) {
@@ -776,14 +728,6 @@ export default function ThreadPage({
             setProjectName('Shared Conversation');
           }
 
-          // Set agent run ID if available
-          if (agentRuns && agentRuns.length > 0) {
-            const latestRun = agentRuns[0];
-            if (latestRun.status === 'running') {
-              setAgentRunId(latestRun.id);
-            }
-          }
-
           // Process messages data
           console.log('[SHARE] Raw messages fetched:', messagesData);
 
@@ -805,15 +749,9 @@ export default function ThreadPage({
 
           // Calculate historical tool pairs
           const historicalToolPairs: ToolCallInput[] = [];
-          const assistantMessages = unifiedMessages.filter(
-            (m) => m.type === 'assistant' && m.message_id,
-          );
+          const assistantMessages = unifiedMessages.filter(m => m.type === 'assistant' && m.message_id);
 
-          console.log(
-            'Building tool calls from',
-            assistantMessages.length,
-            'assistant messages',
-          );
+          console.log('Building tool calls from', assistantMessages.length, 'assistant messages');
 
           // Map to track which assistant messages have tool results
           const assistantToolMap = new Map<string, UnifiedMessage>();
@@ -832,11 +770,7 @@ export default function ThreadPage({
             }
           });
 
-          console.log(
-            'Found',
-            assistantToolMap.size,
-            'tool messages with assistant IDs',
-          );
+          console.log('Found', assistantToolMap.size, 'tool messages with assistant IDs');
 
           // Now process each assistant message
           assistantMessages.forEach((assistantMsg, index) => {
@@ -857,24 +791,16 @@ export default function ThreadPage({
               assistantContent = { content: assistantMsg.content };
             }
 
-            const assistantMessageText =
-              assistantContent.content || assistantMsg.content;
+            const assistantMessageText = assistantContent.content || assistantMsg.content;
 
             // Use a regex to find tool calls in the message content
             const toolCalls = extractToolCallsFromMessage(assistantMessageText);
-            console.log(
-              `Found ${toolCalls.length} tool calls in message ${messageId}`,
-            );
+            console.log(`Found ${toolCalls.length} tool calls in message ${messageId}`);
 
             if (toolCalls.length > 0 && toolMessage) {
               // For each tool call in the message, create a pair
               toolCalls.forEach((toolCall, callIndex) => {
-                console.log(
-                  `Adding tool call ${callIndex}:`,
-                  toolCall.name,
-                  'for message',
-                  messageId,
-                );
+                console.log(`Adding tool call ${callIndex}:`, toolCall.name, 'for message', messageId);
 
                 let toolContent: any;
                 try {
@@ -906,11 +832,7 @@ export default function ThreadPage({
             return timeA - timeB;
           });
 
-          console.log(
-            'Created',
-            historicalToolPairs.length,
-            'total tool calls',
-          );
+          console.log('Created', historicalToolPairs.length, 'total tool calls');
 
           setToolCalls(historicalToolPairs);
 
@@ -974,21 +896,13 @@ export default function ThreadPage({
   };
 
   useEffect(() => {
-    console.log(
-      `[PAGE] 🔄 Page AgentStatus: ${agentStatus}, Hook Status: ${streamHookStatus}, Target RunID: ${agentRunId || 'none'}, Hook RunID: ${currentHookRunId || 'none'}`,
-    );
+    console.log(`[PAGE] 🔄 Page AgentStatus: ${agentStatus}, Hook Status: ${streamHookStatus}, Target RunID: ${agentRunId || 'none'}, Hook RunID: ${currentHookRunId || 'none'}`);
 
     // If the stream hook reports completion/stopping but our UI hasn't updated
-    if (
-      (streamHookStatus === 'completed' ||
-        streamHookStatus === 'stopped' ||
-        streamHookStatus === 'agent_not_running' ||
-        streamHookStatus === 'error') &&
-      (agentStatus === 'running' || agentStatus === 'connecting')
-    ) {
-      console.log(
-        '[PAGE] Detected hook completed but UI still shows running, updating status',
-      );
+    if ((streamHookStatus === 'completed' || streamHookStatus === 'stopped' ||
+      streamHookStatus === 'agent_not_running' || streamHookStatus === 'error') &&
+      (agentStatus === 'running' || agentStatus === 'connecting')) {
+      console.log('[PAGE] Detected hook completed but UI still shows running, updating status');
       setAgentStatus('idle');
       setAgentRunId(null);
       setAutoOpenedPanel(false);
@@ -1008,18 +922,11 @@ export default function ThreadPage({
   useEffect(() => {
     // Calculate historical tool pairs regardless of panel state
     const historicalToolPairs: ToolCallInput[] = [];
-    const assistantMessages = messages.filter(
-      (m) => m.type === 'assistant' && m.message_id,
-    );
+    const assistantMessages = messages.filter(m => m.type === 'assistant' && m.message_id);
 
-    assistantMessages.forEach((assistantMsg) => {
-      const resultMessage = messages.find((toolMsg) => {
-        if (
-          toolMsg.type !== 'tool' ||
-          !toolMsg.metadata ||
-          !assistantMsg.message_id
-        )
-          return false;
+    assistantMessages.forEach(assistantMsg => {
+      const resultMessage = messages.find(toolMsg => {
+        if (toolMsg.type !== 'tool' || !toolMsg.metadata || !assistantMsg.message_id) return false;
         try {
           const metadata = JSON.parse(toolMsg.metadata);
           return metadata.assistant_message_id === assistantMsg.message_id;
@@ -1050,7 +957,7 @@ export default function ThreadPage({
               toolName = assistantContentParsed.tool_calls[0].name || 'unknown';
             }
           }
-        } catch {}
+        } catch { }
 
         // Skip adding <ask> tags to the tool calls
         if (toolName === 'ask') {
@@ -1060,12 +967,10 @@ export default function ThreadPage({
         let isSuccess = true;
         try {
           const toolContent = resultMessage.content?.toLowerCase() || '';
-          isSuccess = !(
-            toolContent.includes('failed') ||
+          isSuccess = !(toolContent.includes('failed') ||
             toolContent.includes('error') ||
-            toolContent.includes('failure')
-          );
-        } catch {}
+            toolContent.includes('failure'));
+        } catch { }
 
         historicalToolPairs.push({
           assistantCall: {
@@ -1091,11 +996,7 @@ export default function ThreadPage({
       if (isSidePanelOpen && !userClosedPanelRef.current) {
         // Always jump to the latest tool call index
         setCurrentToolIndex(historicalToolPairs.length - 1);
-      } else if (
-        !isSidePanelOpen &&
-        !autoOpenedPanel &&
-        !userClosedPanelRef.current
-      ) {
+      } else if (!isSidePanelOpen && !autoOpenedPanel && !userClosedPanelRef.current) {
         // Auto-open the panel only the first time tools are detected
         setCurrentToolIndex(historicalToolPairs.length - 1);
         setIsSidePanelOpen(true);
@@ -1112,73 +1013,53 @@ export default function ThreadPage({
   }, [isSidePanelOpen]);
 
   // Process the assistant call data
-  const toolViewAssistant = useCallback(
-    (assistantContent?: string, toolContent?: string) => {
-      if (!assistantContent) return null;
+  const toolViewAssistant = useCallback((assistantContent?: string, toolContent?: string) => {
+    if (!assistantContent) return null;
 
-      return (
-        <div className="space-y-1">
-          <div className="text-xs font-medium text-muted-foreground">
-            Assistant Message
-          </div>
-          <div className="rounded-md border bg-muted/50 p-3">
-            <Markdown className="text-xs prose prose-xs dark:prose-invert chat-markdown max-w-none">
-              {assistantContent}
-            </Markdown>
-          </div>
+    return (
+      <div className="space-y-1">
+        <div className="text-xs font-medium text-muted-foreground">Assistant Message</div>
+        <div className="rounded-md border bg-muted/50 p-3">
+          <Markdown className="text-xs prose prose-xs dark:prose-invert chat-markdown max-w-none">{assistantContent}</Markdown>
         </div>
-      );
-    },
-    [],
-  );
+      </div>
+    );
+  }, []);
 
   // Process the tool result data
-  const toolViewResult = useCallback(
-    (toolContent?: string, isSuccess?: boolean) => {
-      if (!toolContent) return null;
+  const toolViewResult = useCallback((toolContent?: string, isSuccess?: boolean) => {
+    if (!toolContent) return null;
 
-      return (
-        <div className="space-y-1">
-          <div className="flex justify-between items-center">
-            <div className="text-xs font-medium text-muted-foreground">
-              Tool Result
-            </div>
-            <div
-              className={`px-2 py-0.5 rounded-full text-xs ${
-                isSuccess
-                  ? 'bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300'
-                  : 'bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300'
-              }`}
-            >
-              {isSuccess ? 'Success' : 'Failed'}
-            </div>
-          </div>
-          <div className="rounded-md border bg-muted/50 p-3">
-            <Markdown className="text-xs prose prose-xs dark:prose-invert chat-markdown max-w-none">
-              {toolContent}
-            </Markdown>
+    return (
+      <div className="space-y-1">
+        <div className="flex justify-between items-center">
+          <div className="text-xs font-medium text-muted-foreground">Tool Result</div>
+          <div className={`px-2 py-0.5 rounded-full text-xs ${isSuccess
+              ? 'bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300'
+              : 'bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300'
+            }`}>
+            {isSuccess ? 'Success' : 'Failed'}
           </div>
         </div>
-      );
-    },
-    [],
-  );
+        <div className="rounded-md border bg-muted/50 p-3">
+          <Markdown className="text-xs prose prose-xs dark:prose-invert chat-markdown max-w-none">{toolContent}</Markdown>
+        </div>
+      </div>
+    );
+  }, []);
 
   // Update handleToolClick to respect user closing preference and navigate correctly
-  const handleToolClick = useCallback(
-    (clickedAssistantMessageId: string | null, clickedToolName: string) => {
-      // Explicitly ignore ask tags from opening the side panel
-      if (clickedToolName === 'ask') {
-        return;
-      }
+  const handleToolClick = useCallback((clickedAssistantMessageId: string | null, clickedToolName: string) => {
+    // Explicitly ignore ask tags from opening the side panel
+    if (clickedToolName === 'ask') {
+      return;
+    }
 
-      if (!clickedAssistantMessageId) {
-        console.warn(
-          'Clicked assistant message ID is null. Cannot open side panel.',
-        );
-        toast.warning('Cannot view details: Assistant message ID is missing.');
-        return;
-      }
+    if (!clickedAssistantMessageId) {
+      console.warn("Clicked assistant message ID is null. Cannot open side panel.");
+      toast.warning("Cannot view details: Assistant message ID is missing.");
+      return;
+    }
 
       // Reset user closed state when explicitly clicking a tool
       userClosedPanelRef.current = false;
@@ -1200,26 +1081,22 @@ export default function ThreadPage({
         );
         if (!assistantMessage) return false;
 
-        // Find the corresponding tool message using metadata
-        const toolMessage = messages.find((m) => {
-          if (m.type !== 'tool' || !m.metadata) return false;
-          try {
-            const metadata = safeJsonParse<ParsedMetadata>(m.metadata, {});
-            return (
-              metadata.assistant_message_id === assistantMessage.message_id
-            );
-          } catch {
-            return false;
-          }
-        });
-
-        // Check if the current toolCall 'tc' corresponds to this assistant/tool message pair
-        return (
-          tc.assistantCall?.content === assistantMessage.content &&
-          tc.toolResult?.content === toolMessage?.content
-        );
+      // Find the corresponding tool message using metadata
+      const toolMessage = messages.find(m => {
+        if (m.type !== 'tool' || !m.metadata) return false;
+        try {
+          const metadata = safeJsonParse<ParsedMetadata>(m.metadata, {});
+          return metadata.assistant_message_id === assistantMessage.message_id;
+        } catch {
+          return false;
+        }
       });
 
+      // Check if the current toolCall 'tc' corresponds to this assistant/tool message pair
+      return tc.assistantCall?.content === assistantMessage.content &&
+        tc.toolResult?.content === toolMessage?.content;
+    });
+
       if (toolIndex !== -1) {
         console.log(
           `[PAGE] Found tool call at index ${toolIndex} for assistant message ${clickedAssistantMessageId}`,
@@ -1239,93 +1116,78 @@ export default function ThreadPage({
   ); // Add toolCalls as a dependency
 
   // Handle streaming tool calls
-  const handleStreamingToolCall = useCallback(
-    (toolCall: StreamingToolCall | null) => {
-      if (!toolCall) return;
+  const handleStreamingToolCall = useCallback((toolCall: StreamingToolCall | null) => {
+    if (!toolCall) return;
 
-      const toolName = toolCall.name || toolCall.xml_tag_name || 'Unknown Tool';
+    const toolName = toolCall.name || toolCall.xml_tag_name || 'Unknown Tool';
 
-      // Skip <ask> tags from showing in the side panel during streaming
-      if (toolName === 'ask') {
-        return;
+    // Skip <ask> tags from showing in the side panel during streaming
+    if (toolName === 'ask') {
+      return;
+    }
+
+    console.log("[STREAM] Received tool call:", toolName);
+
+    // If user explicitly closed the panel, don't reopen it for streaming calls
+    if (userClosedPanelRef.current) return;
+
+    // Create a properly formatted tool call input for the streaming tool
+    // that matches the format of historical tool calls
+    const toolArguments = toolCall.arguments || '';
+
+    // Format the arguments in a way that matches the expected XML format for each tool
+    // This ensures the specialized tool views render correctly
+    let formattedContent = toolArguments;
+    if (toolName.toLowerCase().includes('command') && !toolArguments.includes('<execute-command>')) {
+      formattedContent = `<execute-command>${toolArguments}</execute-command>`;
+    } else if (toolName.toLowerCase().includes('file') && !toolArguments.includes('<create-file>')) {
+      // For file operations, wrap with appropriate tag if not already wrapped
+      const fileOpTags = ['create-file', 'delete-file', 'full-file-rewrite'];
+      const matchingTag = fileOpTags.find(tag => toolName.toLowerCase().includes(tag));
+      if (matchingTag && !toolArguments.includes(`<${matchingTag}>`)) {
+        formattedContent = `<${matchingTag}>${toolArguments}</${matchingTag}>`;
       }
+    }
 
-      console.log('[STREAM] Received tool call:', toolName);
-
-      // If user explicitly closed the panel, don't reopen it for streaming calls
-      if (userClosedPanelRef.current) return;
-
-      // Create a properly formatted tool call input for the streaming tool
-      // that matches the format of historical tool calls
-      const toolArguments = toolCall.arguments || '';
-
-      // Format the arguments in a way that matches the expected XML format for each tool
-      // This ensures the specialized tool views render correctly
-      let formattedContent = toolArguments;
-      if (
-        toolName.toLowerCase().includes('command') &&
-        !toolArguments.includes('<execute-command>')
-      ) {
-        formattedContent = `<execute-command>${toolArguments}</execute-command>`;
-      } else if (
-        toolName.toLowerCase().includes('file') &&
-        !toolArguments.includes('<create-file>')
-      ) {
-        // For file operations, wrap with appropriate tag if not already wrapped
-        const fileOpTags = ['create-file', 'delete-file', 'full-file-rewrite'];
-        const matchingTag = fileOpTags.find((tag) =>
-          toolName.toLowerCase().includes(tag),
-        );
-        if (matchingTag && !toolArguments.includes(`<${matchingTag}>`)) {
-          formattedContent = `<${matchingTag}>${toolArguments}</${matchingTag}>`;
-        }
+    const newToolCall: ToolCallInput = {
+      assistantCall: {
+        name: toolName,
+        content: formattedContent,
+        timestamp: new Date().toISOString()
+      },
+      // For streaming tool calls, provide empty content that indicates streaming
+      toolResult: {
+        content: "STREAMING",
+        isSuccess: true,
+        timestamp: new Date().toISOString()
       }
+    };
 
-      const newToolCall: ToolCallInput = {
-        assistantCall: {
-          name: toolName,
-          content: formattedContent,
-          timestamp: new Date().toISOString(),
-        },
-        // For streaming tool calls, provide empty content that indicates streaming
-        toolResult: {
-          content: 'STREAMING',
-          isSuccess: true,
-          timestamp: new Date().toISOString(),
-        },
-      };
+    // Update the tool calls state to reflect the streaming tool
+    setToolCalls(prev => {
+      // If the same tool is already being streamed, update it instead of adding a new one
+      if (prev.length > 0 && prev[0].assistantCall.name === toolName) {
+        return [{
+          ...prev[0],
+          assistantCall: {
+            ...prev[0].assistantCall,
+            content: formattedContent
+          }
+        }];
+      }
+      return [newToolCall];
+    });
 
-      // Update the tool calls state to reflect the streaming tool
-      setToolCalls((prev) => {
-        // If the same tool is already being streamed, update it instead of adding a new one
-        if (prev.length > 0 && prev[0].assistantCall.name === toolName) {
-          return [
-            {
-              ...prev[0],
-              assistantCall: {
-                ...prev[0].assistantCall,
-                content: formattedContent,
-              },
-            },
-          ];
-        }
-        return [newToolCall];
-      });
-
-      setCurrentToolIndex(0);
-      setIsSidePanelOpen(true);
-    },
-    [],
-  );
+    setCurrentToolIndex(0);
+    setIsSidePanelOpen(true);
+  }, []);
 
   // SEO title update
   useEffect(() => {
     if (projectName) {
       document.title = `${projectName} | Shared Thread`;
 
-      const metaDescription = document.querySelector(
-        'meta[name="description"]',
-      );
+      const metaDescription = document.querySelector('meta[name="description"]');
       if (metaDescription) {
         metaDescription.setAttribute(
           'content',
@@ -1341,9 +1203,7 @@ export default function ThreadPage({
         );
       }
 
-      const ogDescription = document.querySelector(
-        'meta[property="og:description"]',
-      );
+      const ogDescription = document.querySelector('meta[property="og:description"]');
       if (ogDescription) {
         ogDescription.setAttribute(
           'content',
@@ -1360,11 +1220,8 @@ export default function ThreadPage({
       messages.length > 0
     ) {
       // Find the last assistant message to update with streaming content
-      const lastAssistantIndex = messages.findIndex(
-        (m) =>
-          m.type === 'assistant' &&
-          m.message_id === messages[currentMessageIndex]?.message_id,
-      );
+      const lastAssistantIndex = messages.findIndex(m =>
+        m.type === 'assistant' && m.message_id === messages[currentMessageIndex]?.message_id);
 
       if (lastAssistantIndex >= 0) {
         const assistantMessage = { ...messages[lastAssistantIndex] };
@@ -1411,9 +1268,7 @@ export default function ThreadPage({
   ]);
 
   // Create a message-to-tool-index map for faster lookups
-  const [messageToToolIndex, setMessageToToolIndex] = useState<
-    Record<string, number>
-  >({});
+  const [messageToToolIndex, setMessageToToolIndex] = useState<Record<string, number>>({});
 
   // Build the message-to-tool-index map when tool calls change
   useEffect(() => {
@@ -1481,7 +1336,7 @@ export default function ThreadPage({
     // Skip if not playing or no messages
     if (!isPlaying || messages.length === 0 || currentMessageIndex <= 0) return;
 
-    // Get all messages up to the current index
+    // Get all messages up to the current index 
     const currentMessages = messages.slice(0, currentMessageIndex);
 
     // Find the most recent tool message to determine which panel to show
@@ -1493,9 +1348,7 @@ export default function ThreadPage({
           const assistantId = metadata.assistant_message_id;
 
           if (assistantId) {
-            console.log(
-              `Looking for tool panel for assistant message ${assistantId}`,
-            );
+            console.log(`Looking for tool panel for assistant message ${assistantId}`);
 
             // Scan for matching tool call
             for (let j = 0; j < toolCalls.length; j++) {
@@ -1520,8 +1373,7 @@ export default function ThreadPage({
   // This replaces the existing ToolCallSidePanel component with a wrapper that adds debug info
   const ToolCallPanelWithDebugInfo = React.useMemo(() => {
     const WrappedPanel = (props: any) => {
-      const { isOpen, onClose, toolCalls, currentIndex, onNavigate, ...rest } =
-        props;
+      const { isOpen, onClose, toolCalls, currentIndex, onNavigate, ...rest } = props;
 
       // Add a function to show debug info for the current tool call
       const showDebugInfo = useCallback(() => {
@@ -1695,13 +1547,7 @@ export default function ThreadPage({
             <div className="flex-1">
               <div className="flex items-center gap-2">
                 <div className="flex items-center justify-center w-6 h-6 rounded-md overflow-hidden bg-primary/10">
-                  <Image
-                    src="/kortix-symbol.svg"
-                    alt="Kortix"
-                    width={16}
-                    height={16}
-                    className="object-contain"
-                  />
+                  <Image src="/kortix-symbol.svg" alt="Kortix" width={16} height={16} className="object-contain" />
                 </div>
                 <span className="font-medium text-foreground">
                   {projectName || 'Shared Conversation'}
@@ -1725,9 +1571,8 @@ export default function ThreadPage({
                 className="h-8 w-8"
                 aria-label={isPlaying ? 'Pause Replay' : 'Play Replay'}
               >
-                {isPlaying ? (
-                  <Pause className="h-4 w-4" />
-                ) : (
+                {isPlaying ?
+                  <Pause className="h-4 w-4" /> :
                   <Play className="h-4 w-4" />
                 )}
               </Button>
@@ -1883,13 +1728,7 @@ export default function ThreadPage({
                         >
                           <div className="flex items-start gap-3">
                             <div className="flex-shrink-0 w-5 h-5 mt-2 rounded-md flex items-center justify-center overflow-hidden bg-primary/10">
-                              <Image
-                                src="/kortix-symbol.svg"
-                                alt="Suna"
-                                width={14}
-                                height={14}
-                                className="object-contain"
-                              />
+                              <Image src="/kortix-symbol.svg" alt="Suna" width={14} height={14} className="object-contain" />
                             </div>
                             <div className="flex-1">
                               <div className="inline-flex max-w-[90%] rounded-lg bg-muted/5 px-4 py-3 text-sm">
@@ -1917,8 +1756,7 @@ export default function ThreadPage({
                                       }
                                     });
 
-                                    const renderedToolResultIds =
-                                      new Set<string>();
+                                    const renderedToolResultIds = new Set<string>();
                                     const elements: React.ReactNode[] = [];
 
                                     group.messages.forEach(
@@ -1935,13 +1773,12 @@ export default function ThreadPage({
 
                                           if (!parsedContent.content) return;
 
-                                          const renderedContent =
-                                            renderMarkdownContent(
-                                              parsedContent.content,
-                                              handleToolClick,
-                                              message.message_id,
-                                              handleOpenFileViewer,
-                                            );
+                                        const renderedContent = renderMarkdownContent(
+                                          parsedContent.content,
+                                          handleToolClick,
+                                          message.message_id,
+                                          handleOpenFileViewer
+                                        );
 
                                           elements.push(
                                             <div
@@ -1962,64 +1799,51 @@ export default function ThreadPage({
                                     return elements;
                                   })()}
 
-                                  {groupIndex === groupedMessages.length - 1 &&
-                                    isStreamingText && (
-                                      <div className="mt-2">
-                                        {(() => {
-                                          let detectedTag: string | null = null;
-                                          let tagStartIndex = -1;
-                                          if (streamingText) {
-                                            for (const tag of HIDE_STREAMING_XML_TAGS) {
-                                              const openingTagPattern = `<${tag}`;
-                                              const index =
-                                                streamingText.indexOf(
-                                                  openingTagPattern,
-                                                );
-                                              if (index !== -1) {
-                                                detectedTag = tag;
-                                                tagStartIndex = index;
-                                                break;
-                                              }
+                                  {groupIndex === groupedMessages.length - 1 && isStreamingText && (
+                                    <div className="mt-2">
+                                      {(() => {
+                                        let detectedTag: string | null = null;
+                                        let tagStartIndex = -1;
+                                        if (streamingText) {
+                                          for (const tag of HIDE_STREAMING_XML_TAGS) {
+                                            const openingTagPattern = `<${tag}`;
+                                            const index = streamingText.indexOf(openingTagPattern);
+                                            if (index !== -1) {
+                                              detectedTag = tag;
+                                              tagStartIndex = index;
+                                              break;
                                             }
                                           }
+                                        }
 
-                                          const textToRender =
-                                            streamingText || '';
-                                          const textBeforeTag = detectedTag
-                                            ? textToRender.substring(
-                                                0,
-                                                tagStartIndex,
-                                              )
-                                            : textToRender;
-                                          const showCursor =
-                                            isStreamingText && !detectedTag;
+                                        const textToRender = streamingText || '';
+                                        const textBeforeTag = detectedTag ? textToRender.substring(0, tagStartIndex) : textToRender;
+                                        const showCursor = isStreamingText && !detectedTag;
 
-                                          return (
-                                            <>
-                                              {textBeforeTag && (
-                                                <Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3">
-                                                  {textBeforeTag}
-                                                </Markdown>
-                                              )}
-                                              {showCursor && (
-                                                <span className="inline-block h-4 w-0.5 bg-primary ml-0.5 -mb-1 animate-pulse" />
-                                              )}
+                                        return (
+                                          <>
+                                            {textBeforeTag && (
+                                              <Markdown className="text-sm prose prose-sm dark:prose-invert chat-markdown max-w-none [&>:first-child]:mt-0 prose-headings:mt-3">{textBeforeTag}</Markdown>
+                                            )}
+                                            {showCursor && (
+                                              <span className="inline-block h-4 w-0.5 bg-primary ml-0.5 -mb-1 animate-pulse" />
+                                            )}
 
-                                              {detectedTag && (
-                                                <div className="mt-2 mb-1">
-                                                  <button className="inline-flex items-center gap-1.5 py-1 px-2.5 text-xs font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-md transition-colors cursor-pointer border border-primary/20">
-                                                    <CircleDashed className="h-3.5 w-3.5 text-primary flex-shrink-0 animate-spin animation-duration-2000" />
-                                                    <span className="font-mono text-xs text-primary">
-                                                      {detectedTag}
-                                                    </span>
-                                                  </button>
-                                                </div>
-                                              )}
-                                            </>
-                                          );
-                                        })()}
-                                      </div>
-                                    )}
+                                            {detectedTag && (
+                                              <div className="mt-2 mb-1">
+                                                <button
+                                                  className="inline-flex items-center gap-1.5 py-1 px-2.5 text-xs font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-md transition-colors cursor-pointer border border-primary/20"
+                                                >
+                                                  <CircleDashed className="h-3.5 w-3.5 text-primary flex-shrink-0 animate-spin animation-duration-2000" />
+                                                  <span className="font-mono text-xs text-primary">{detectedTag}</span>
+                                                </button>
+                                              </div>
+                                            )}
+                                          </>
+                                        );
+                                      })()}
+                                    </div>
+                                  )}
                                 </div>
                               </div>
                             </div>
@@ -2036,13 +1860,7 @@ export default function ThreadPage({
                   <div ref={latestMessageRef}>
                     <div className="flex items-start gap-3">
                       <div className="flex-shrink-0 w-5 h-5 mt-2 rounded-md flex items-center justify-center overflow-hidden bg-primary/10">
-                        <Image
-                          src="/kortix-symbol.svg"
-                          alt="Suna"
-                          width={14}
-                          height={14}
-                          className="object-contain"
-                        />
+                        <Image src="/kortix-symbol.svg" alt="Suna" width={14} height={14} className="object-contain" />
                       </div>
                       <div className="flex-1 space-y-2">
                         <div className="inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium text-primary bg-primary/10 rounded-md border border-primary/20">
@@ -2061,13 +1879,7 @@ export default function ThreadPage({
                   <div ref={latestMessageRef}>
                     <div className="flex items-start gap-3">
                       <div className="flex-shrink-0 w-5 h-5 mt-2 rounded-md flex items-center justify-center overflow-hidden bg-primary/10">
-                        <Image
-                          src="/kortix-symbol.svg"
-                          alt="Suna"
-                          width={14}
-                          height={14}
-                          className="object-contain"
-                        />
+                        <Image src="/kortix-symbol.svg" alt="Suna" width={14} height={14} className="object-contain" />
                       </div>
                       <div className="flex-1 space-y-2">
                         <div className="max-w-[90%] px-4 py-3 text-sm">
@@ -2089,13 +1901,10 @@ export default function ThreadPage({
 
         {/* Floating playback controls - moved to be centered in the chat area when side panel is open */}
         {messages.length > 0 && (
-          <div
-            className={`fixed bottom-4 z-10 transform bg-background/90 backdrop-blur rounded-full border shadow-md px-3 py-1.5 transition-all duration-200 ${
-              isSidePanelOpen
-                ? 'left-1/2 -translate-x-1/4 sm:left-[calc(50%-225px)] md:left-[calc(50%-250px)] lg:left-[calc(50%-275px)] xl:left-[calc(50%-325px)]'
-                : 'left-1/2 -translate-x-1/2'
-            }`}
-          >
+          <div className={`fixed bottom-4 z-10 transform bg-background/90 backdrop-blur rounded-full border shadow-md px-3 py-1.5 transition-all duration-200 ${isSidePanelOpen
+              ? 'left-1/2 -translate-x-1/4 sm:left-[calc(50%-225px)] md:left-[calc(50%-250px)] lg:left-[calc(50%-275px)] xl:left-[calc(50%-325px)]'
+              : 'left-1/2 -translate-x-1/2'
+            }`}>
             <div className="flex items-center gap-2">
               <Button
                 variant="ghost"
@@ -2103,9 +1912,8 @@ export default function ThreadPage({
                 onClick={togglePlayback}
                 className="h-8 w-8"
               >
-                {isPlaying ? (
-                  <Pause className="h-4 w-4" />
-                ) : (
+                {isPlaying ?
+                  <Pause className="h-4 w-4" /> :
                   <Play className="h-4 w-4" />
                 )}
               </Button>
diff --git a/frontend/src/components/sidebar/nav-agents.tsx b/frontend/src/components/sidebar/nav-agents.tsx
index 5625ece2..9d94be51 100644
--- a/frontend/src/components/sidebar/nav-agents.tsx
+++ b/frontend/src/components/sidebar/nav-agents.tsx
@@ -9,9 +9,10 @@ import {
   Plus,
   MessagesSquare,
   Loader2,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { usePathname, useRouter } from 'next/navigation';
+  Share2
+} from "lucide-react"
+import { toast } from "sonner"
+import { usePathname, useRouter } from "next/navigation"
 
 import {
   DropdownMenu,
@@ -32,12 +33,13 @@ import {
 import {
   Tooltip,
   TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { getProjects, getThreads, Project, deleteThread } from '@/lib/api';
-import Link from 'next/link';
-import { DeleteConfirmationDialog } from '@/components/thread/DeleteConfirmationDialog';
-import { useDeleteOperation } from '@/contexts/DeleteOperationContext';
+  TooltipTrigger
+} from "@/components/ui/tooltip"
+import { getProjects, getThreads, Project, deleteThread } from "@/lib/api"
+import Link from "next/link"
+import { ShareModal } from "./share-modal"
+import { DeleteConfirmationDialog } from "@/components/thread/DeleteConfirmationDialog"
+import { useDeleteOperation } from '@/contexts/DeleteOperationContext'
 
 // Thread with associated project info for display in sidebar
 type ThreadWithProject = {
@@ -49,19 +51,18 @@ type ThreadWithProject = {
 };
 
 export function NavAgents() {
-  const { isMobile, state } = useSidebar();
-  const [threads, setThreads] = useState<ThreadWithProject[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadingThreadId, setLoadingThreadId] = useState<string | null>(null);
-  const pathname = usePathname();
-  const router = useRouter();
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [threadToDelete, setThreadToDelete] = useState<{
-    id: string;
-    name: string;
-  } | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const isNavigatingRef = useRef(false);
+  const { isMobile, state } = useSidebar()
+  const [threads, setThreads] = useState<ThreadWithProject[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [loadingThreadId, setLoadingThreadId] = useState<string | null>(null)
+  const [showShareModal, setShowShareModal] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<{ threadId: string, projectId: string } | null>(null)
+  const pathname = usePathname()
+  const router = useRouter()
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [threadToDelete, setThreadToDelete] = useState<{ id: string; name: string } | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const isNavigatingRef = useRef(false)
   const { performDelete, isOperationInProgress } = useDeleteOperation();
   const isPerformingActionRef = useRef(false);
 
@@ -82,12 +83,8 @@ export function NavAgents() {
       }
 
       // Get all projects
-      const projects = (await getProjects()) as Project[];
-      console.log(
-        'Projects loaded:',
-        projects.length,
-        projects.map((p) => ({ id: p.id, name: p.name })),
-      );
+      const projects = await getProjects() as Project[]
+      console.log("Projects loaded:", projects.length, projects.map(p => ({ id: p.id, name: p.name })));
 
       // If no projects are found, the user might not be logged in
       if (projects.length === 0) {
@@ -102,15 +99,8 @@ export function NavAgents() {
       });
 
       // Get all threads at once
-      const allThreads = await getThreads();
-      console.log(
-        'Threads loaded:',
-        allThreads.length,
-        allThreads.map((t) => ({
-          thread_id: t.thread_id,
-          project_id: t.project_id,
-        })),
-      );
+      const allThreads = await getThreads()
+      console.log("Threads loaded:", allThreads.length, allThreads.map(t => ({ thread_id: t.thread_id, project_id: t.project_id })));
 
       // Create display objects for threads with their project info
       const threadsWithProjects: ThreadWithProject[] = [];
@@ -129,9 +119,7 @@ export function NavAgents() {
           continue;
         }
 
-        console.log(
-          `✅ Thread ${thread.thread_id} matched with project "${project.name}" (${projectId})`,
-        );
+        console.log(`✅ Thread ${thread.thread_id} matched with project "${project.name}" (${projectId})`);
 
         // Add to our list
         threadsWithProjects.push({
@@ -170,14 +158,14 @@ export function NavAgents() {
         const { projectId, updatedData } = customEvent.detail;
 
         // Update just the name for the threads with the matching project ID
-        setThreads((prevThreads) => {
-          const updatedThreads = prevThreads.map((thread) =>
+        setThreads(prevThreads => {
+          const updatedThreads = prevThreads.map(thread =>
             thread.projectId === projectId
               ? {
-                  ...thread,
-                  projectName: updatedData.name,
-                }
-              : thread,
+                ...thread,
+                projectName: updatedData.name,
+              }
+              : thread
           );
 
           // Return the threads without re-sorting immediately
@@ -190,10 +178,7 @@ export function NavAgents() {
     };
 
     // Add event listener
-    window.addEventListener(
-      'project-updated',
-      handleProjectUpdate as EventListener,
-    );
+    window.addEventListener('project-updated', handleProjectUpdate as EventListener);
 
     // Cleanup
     return () => {
@@ -217,12 +202,12 @@ export function NavAgents() {
       isNavigatingRef.current = false;
     };
 
-    window.addEventListener('popstate', handleNavigationComplete);
+    window.addEventListener("popstate", handleNavigationComplete);
 
     return () => {
       window.removeEventListener('popstate', handleNavigationComplete);
       // Ensure we clean up any leftover styles
-      document.body.style.pointerEvents = 'auto';
+      document.body.style.pointerEvents = "auto";
     };
   }, []);
 
@@ -233,15 +218,11 @@ export function NavAgents() {
   }, [pathname]);
 
   // Function to handle thread click with loading state
-  const handleThreadClick = (
-    e: React.MouseEvent<HTMLAnchorElement>,
-    threadId: string,
-    url: string,
-  ) => {
-    e.preventDefault();
-    setLoadingThreadId(threadId);
-    router.push(url);
-  };
+  const handleThreadClick = (e: React.MouseEvent<HTMLAnchorElement>, threadId: string, url: string) => {
+    e.preventDefault()
+    setLoadingThreadId(threadId)
+    router.push(url)
+  }
 
   // Function to handle thread deletion
   const handleDeleteThread = async (threadId: string, threadName: string) => {
@@ -279,7 +260,7 @@ export function NavAgents() {
         await deleteThread(threadId);
 
         // Update the thread list
-        setThreads((prev) => prev.filter((t) => t.threadId !== threadId));
+        setThreads(prev => prev.filter(t => t.threadId !== threadId));
 
         // Show success message
         toast.success('Conversation deleted successfully');
@@ -413,16 +394,12 @@ export function NavAgents() {
                         side={isMobile ? 'bottom' : 'right'}
                         align={isMobile ? 'end' : 'start'}
                       >
-                        <DropdownMenuItem
-                          onClick={() => {
-                            navigator.clipboard.writeText(
-                              window.location.origin + thread.url,
-                            );
-                            toast.success('Link copied to clipboard');
-                          }}
-                        >
-                          <LinkIcon className="text-muted-foreground" />
-                          <span>Copy Link</span>
+                        <DropdownMenuItem onClick={() => {
+                          setSelectedItem({ threadId: thread?.threadId, projectId: thread?.projectId })
+                          setShowShareModal(true)
+                        }}>
+                          <Share2 className="text-muted-foreground" />
+                          <span>Share Chat</span>
                         </DropdownMenuItem>
                         <DropdownMenuItem asChild>
                           <a
@@ -463,6 +440,12 @@ export function NavAgents() {
           </SidebarMenuItem>
         )}
       </SidebarMenu>
+      <ShareModal
+        isOpen={showShareModal}
+        onClose={() => setShowShareModal(false)}
+        threadId={selectedItem?.threadId}
+        projectId={selectedItem?.projectId}
+      />
 
       {threadToDelete && (
         <DeleteConfirmationDialog
diff --git a/frontend/src/components/sidebar/share-modal.tsx b/frontend/src/components/sidebar/share-modal.tsx
new file mode 100644
index 00000000..3cd902bb
--- /dev/null
+++ b/frontend/src/components/sidebar/share-modal.tsx
@@ -0,0 +1,236 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { X, Copy, Share2, Link, Link2Off, Check } from "lucide-react";
+import { toast } from "sonner";
+import { getThread, updateProject, updateThread } from "@/lib/api";
+
+interface SocialShareOption {
+    name: string;
+    icon: JSX.Element;
+    onClick: () => void;
+}
+
+interface ShareModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    threadId?: string;
+    projectId?: string;
+}
+
+export function ShareModal({ isOpen, onClose, threadId, projectId }: ShareModalProps) {
+    const [shareLink, setShareLink] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isChecking, setIsChecking] = useState(false);
+    const [isCopying, setIsCopying] = useState(false);
+    useEffect(() => {
+        if (isOpen && threadId) {
+            checkShareStatus();
+        }
+    }, [isOpen, threadId]);
+
+    const checkShareStatus = async () => {
+        if (!threadId) return;
+
+        setIsChecking(true);
+
+        try {
+            const threadData = await getThread(threadId);
+
+            if (threadData?.is_public) {
+                const publicUrl = generateShareLink();
+                setShareLink(publicUrl);
+            } else {
+                setShareLink(null);
+            }
+        } catch (error) {
+            console.error("Error checking share status:", error);
+            toast.error("Failed to check sharing status");
+            setShareLink(null);
+        } finally {
+            setIsChecking(false);
+        }
+    };
+
+    const generateShareLink = () => {
+        if (!threadId) return "";
+        return `${process.env.NEXT_PUBLIC_URL || window.location.origin}/share/${threadId}`;
+    };
+
+    const createShareLink = async () => {
+        if (!threadId) return;
+
+        setIsLoading(true);
+
+        try {
+            // Use the API to mark the thread as public
+            await updatePublicStatus(true);
+            const generatedLink = generateShareLink();
+            setShareLink(generatedLink);
+            toast.success("Shareable link created successfully");
+        } catch (error) {
+            console.error("Error creating share link:", error);
+            toast.error("Failed to create shareable link");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const removeShareLink = async () => {
+        if (!threadId) return;
+
+        setIsLoading(true);
+
+        try {
+            // Use the API to mark the thread as private
+            await updatePublicStatus(false);
+            setShareLink(null);
+            toast.success("Shareable link removed");
+        } catch (error) {
+            console.error("Error removing share link:", error);
+            toast.error("Failed to remove shareable link");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const updatePublicStatus = async (isPublic: boolean) => {
+        console.log("Updating public status for thread:", threadId, "and project:", projectId, "to", isPublic);
+        if (!threadId) return;
+        await updateProject(projectId, { is_public: isPublic });
+        await updateThread(threadId, { is_public: isPublic });
+    };
+
+    const copyToClipboard = () => {
+        if (shareLink) {
+            setIsCopying(true);
+            navigator.clipboard.writeText(shareLink);
+            toast.success("Link copied to clipboard");
+            setTimeout(() => {
+                setIsCopying(false);
+            }, 500);
+        }
+    };
+
+    const socialOptions: SocialShareOption[] = [
+        {
+            name: "LinkedIn",
+            icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="size-5 text-current">
+                <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+            </svg>,
+            onClick: () => {
+                if (shareLink) {
+                    window.open(`https://www.linkedin.com/shareArticle?url=${encodeURIComponent(shareLink)}&text=Shared conversation`, '_blank');
+                }
+            }
+        },
+        {
+            name: "X",
+            icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="size-5 text-current">
+                <path fill="currentColor" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+            </svg>,
+            onClick: () => {
+                if (shareLink) {
+                    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareLink)}&text=Shared conversation`, '_blank');
+                }
+            }
+        }
+    ];
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-md p-0 gap-0 overflow-hidden">
+                <DialogTitle className="p-4 font-medium">
+                    Share Chat
+                    <button
+                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        onClick={onClose}>
+                        <X className="h-4 w-4" />
+                        <span className="sr-only">Close</span>
+                    </button>
+                </DialogTitle>
+
+                <div className="p-4 space-y-6">
+                    {isChecking ? (
+                        <div className="flex flex-col items-center justify-center py-10">
+                            <div className="h-6 w-6 border-2 border-t-primary border-primary/30 rounded-full animate-spin"></div>
+                            <p className="text-sm text-muted-foreground mt-4">Checking share status...</p>
+                        </div>
+                    ) : shareLink ? (
+                        <>
+                            <p className="text-sm text-muted-foreground">
+                                Your chat is now publicly accessible with the link below. Anyone with this link can view this conversation.
+                            </p>
+
+                            <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
+                                <div className="relative flex flex-1 items-center">
+                                    <input
+                                        type="text"
+                                        readOnly
+                                        value={shareLink}
+                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                    />
+                                </div>
+                                <Button variant="outline" className="h-10 px-4 py-2" onClick={copyToClipboard}>
+                                    {isCopying ? <Check className=" h-4 w-4" /> : <Copy className=" h-4 w-4" />}
+                                </Button>
+                            </div>
+
+                            <div className="flex justify-center gap-6 pt-2">
+                                {socialOptions.map((option, index) => (
+                                    <button
+                                        key={index}
+                                        className="p-2 rounded-full flex flex-col items-center group"
+                                        onClick={option.onClick}
+                                    >
+                                        <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-200">
+                                            {option.icon}
+                                        </div>
+                                        <span className="text-xs mt-1 group-hover:text-primary transition-colors duration-200">{option.name}</span>
+                                    </button>
+                                ))}
+                            </div>
+
+                            <div className="pt-1">
+                                <Button
+                                    variant="default"
+                                    className="w-full"
+                                    onClick={removeShareLink}
+                                    disabled={isLoading}
+                                >
+                                    <Link2Off className="mr-2 h-4 w-4" />
+                                    {isLoading ? "Processing..." : "Remove link"}
+                                </Button>
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <div className="flex flex-col items-center justify-center py-6 text-center">
+                                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
+                                    <Share2 className="h-6 w-6 text-primary" />
+                                </div>
+                                <h3 className="text-lg font-medium mb-2">Share this chat</h3>
+                                <p className="text-sm text-muted-foreground max-w-sm mb-6">
+                                    Create a shareable link that allows others to view this conversation.
+                                </p>
+                                <Button
+                                    onClick={createShareLink}
+                                    className="w-full max-w-xs"
+                                    disabled={isLoading}
+                                >
+                                    <Link className="mr-2 h-4 w-4" />
+                                    {isLoading ? "Creating link..." : "Create shareable link"}
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </DialogContent >
+        </Dialog >
+    );
+}
+
diff --git a/frontend/src/components/thread/thread-site-header.tsx b/frontend/src/components/thread/thread-site-header.tsx
index b7d73904..02a99e65 100644
--- a/frontend/src/components/thread/thread-site-header.tsx
+++ b/frontend/src/components/thread/thread-site-header.tsx
@@ -1,22 +1,23 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
-import { FolderOpen, Link, PanelRightOpen, Check, X, Menu } from 'lucide-react';
-import { usePathname } from 'next/navigation';
-import { toast } from 'sonner';
+import { Button } from "@/components/ui/button"
+import { FolderOpen, Link, PanelRightOpen, Check, X, Menu, Share2 } from "lucide-react"
+import { usePathname } from "next/navigation"
+import { toast } from "sonner"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { useState, useRef, KeyboardEvent } from 'react';
-import { Input } from '@/components/ui/input';
-import { updateProject } from '@/lib/api';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
-import { useSidebar } from '@/components/ui/sidebar';
+} from "@/components/ui/tooltip"
+import { useState, useRef, KeyboardEvent } from "react"
+import { Input } from "@/components/ui/input"
+import { updateProject } from "@/lib/api"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "@/components/ui/sidebar"
+import { ShareModal } from "@/components/sidebar/share-modal"
 
 interface ThreadSiteHeaderProps {
   threadId: string;
@@ -37,18 +38,18 @@ export function SiteHeader({
   onProjectRenamed,
   isMobileView,
 }: ThreadSiteHeaderProps) {
-  const pathname = usePathname();
-  const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState(projectName);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isMobile = useIsMobile() || isMobileView;
-  const { setOpenMobile } = useSidebar();
+  const pathname = usePathname()
+  const [isEditing, setIsEditing] = useState(false)
+  const [editName, setEditName] = useState(projectName)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [showShareModal, setShowShareModal] = useState(false)
 
-  const copyCurrentUrl = () => {
-    const url = window.location.origin + pathname;
-    navigator.clipboard.writeText(url);
-    toast.success('URL copied to clipboard');
-  };
+  const isMobile = useIsMobile() || isMobileView
+  const { setOpenMobile } = useSidebar()
+
+  const openShareModal = () => {
+    setShowShareModal(true)
+  }
 
   const startEditing = () => {
     setEditName(projectName);
@@ -80,9 +81,7 @@ export function SiteHeader({
           return;
         }
 
-        const updatedProject = await updateProject(projectId, {
-          name: editName,
-        });
+        const updatedProject = await updateProject(projectId, { name: editName })
         if (updatedProject) {
           onProjectRenamed?.(editName);
           toast.success('Project renamed successfully');
@@ -98,8 +97,8 @@ export function SiteHeader({
       }
     }
 
-    setIsEditing(false);
-  };
+    setIsEditing(false)
+  }
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -110,131 +109,137 @@ export function SiteHeader({
   };
 
   return (
-    <header
-      className={cn(
-        'bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2 z-20 w-full',
-        isMobile && 'px-2',
-      )}
-    >
-      {isMobile && (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setOpenMobile(true)}
-          className="h-9 w-9 mr-1"
-          aria-label="Open sidebar"
-        >
-          <Menu className="h-4 w-4" />
-        </Button>
-      )}
-
-      <div className="flex flex-1 items-center gap-2 px-3">
-        {isEditing ? (
-          <div className="flex items-center gap-1">
-            <Input
-              ref={inputRef}
-              value={editName}
-              onChange={(e) => setEditName(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onBlur={saveNewName}
-              className="h-8 w-auto min-w-[180px] text-base font-medium"
-              maxLength={50}
-            />
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7"
-              onClick={saveNewName}
-            >
-              <Check className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7"
-              onClick={cancelEditing}
-            >
-              <X className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        ) : !projectName || projectName === 'Project' ? (
-          <Skeleton className="h-5 w-32" />
-        ) : (
-          <div
-            className="text-base font-medium text-muted-foreground hover:text-foreground cursor-pointer flex items-center"
-            onClick={startEditing}
-            title="Click to rename project"
-          >
-            {projectName}
-          </div>
-        )}
-      </div>
-
-      <div className="flex items-center gap-1 pr-4">
-        {isMobile ? (
-          // Mobile view - only show the side panel toggle
+    <>
+      <header className={cn(
+        "bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2 z-20 w-full",
+        isMobile && "px-2"
+      )}>
+        {isMobile && (
           <Button
             variant="ghost"
             size="icon"
-            onClick={onToggleSidePanel}
-            className="h-9 w-9 cursor-pointer"
-            aria-label="Toggle computer panel"
+            onClick={() => setOpenMobile(true)}
+            className="h-9 w-9 mr-1"
+            aria-label="Open sidebar"
           >
-            <PanelRightOpen className="h-4 w-4" />
+            <Menu className="h-4 w-4" />
           </Button>
-        ) : (
-          // Desktop view - show all buttons with tooltips
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={onViewFiles}
-                  className="h-9 w-9 cursor-pointer"
-                >
-                  <FolderOpen className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>View Files in Task</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={copyCurrentUrl}
-                  className="h-9 w-9 cursor-pointer"
-                >
-                  <Link className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Copy Link</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={onToggleSidePanel}
-                  className="h-9 w-9 cursor-pointer"
-                >
-                  <PanelRightOpen className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Toggle Computer Preview (CMD+I)</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
         )}
-      </div>
-    </header>
-  );
-}
+
+        <div className="flex flex-1 items-center gap-2 px-3">
+          {isEditing ? (
+            <div className="flex items-center gap-1">
+              <Input
+                ref={inputRef}
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={saveNewName}
+                className="h-8 w-auto min-w-[180px] text-base font-medium"
+                maxLength={50}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={saveNewName}
+              >
+                <Check className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={cancelEditing}
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          ) : !projectName || projectName === 'Project' ? (
+            <Skeleton className="h-5 w-32" />
+          ) : (
+            <div
+              className="text-base font-medium text-muted-foreground hover:text-foreground cursor-pointer flex items-center"
+              onClick={startEditing}
+              title="Click to rename project"
+            >
+              {projectName}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1 pr-4">
+          {isMobile ? (
+            // Mobile view - only show the side panel toggle
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onToggleSidePanel}
+              className="h-9 w-9 cursor-pointer"
+              aria-label="Toggle computer panel"
+            >
+              <PanelRightOpen className="h-4 w-4" />
+            </Button>
+          ) : (
+            // Desktop view - show all buttons with tooltips
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={onViewFiles}
+                    className="h-9 w-9 cursor-pointer"
+                  >
+                    <FolderOpen className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>View Files in Task</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={openShareModal}
+                    className="h-9 w-9 cursor-pointer"
+                  >
+                    <Share2 className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Share Chat</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={onToggleSidePanel}
+                    className="h-9 w-9 cursor-pointer"
+                  >
+                    <PanelRightOpen className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Toggle Computer Preview (CMD+I)</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      </header>
+      <ShareModal
+        isOpen={showShareModal}
+        onClose={() => setShowShareModal(false)}
+        threadId={threadId}
+        projectId={projectId}
+      />
+    </>
+  )
+} 
\ No newline at end of file
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index db6cd8d4..18b2fa32 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -236,6 +236,7 @@ export const getProject = async (projectId: string): Promise<Project> => {
       name: data.name || '',
       description: data.description || '',
       account_id: data.account_id,
+      is_public: data.is_public || false,
       created_at: data.created_at,
       sandbox: data.sandbox || {
         id: '',