fix: show netlify deployed link

netlify deploy button to be disabled on streaming and show link icon when deployed

app/components/@settings/tabs/connections/GithubConnection.tsx

@@ -73,22 +73,13 @@ export function GithubConnection() {
   });
   const [isLoading, setIsLoading] = useState(true);
   const [isConnecting, setIsConnecting] = useState(false);
-  const [expandedSections, setExpandedSections] = useState({
-    organizations: false,
-    languages: false,
-    recentActivity: false,
-    repositories: false,
-  });
-
-  const toggleSection = (section: keyof typeof expandedSections) => {
-    setExpandedSections((prev) => ({
-      ...prev,
-      [section]: !prev[section],
-    }));
-  };
+  const [isFetchingStats, setIsFetchingStats] = useState(false);
+  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
 
   const fetchGitHubStats = async (token: string) => {
     try {
+      setIsFetchingStats(true);
+
       const reposResponse = await fetch(
         'https://api.github.com/user/repos?sort=updated&per_page=10&affiliation=owner,organization_member,collaborator',
         {
@@ -165,6 +156,7 @@ export function GithubConnection() {
       logStore.logError('Failed to fetch GitHub stats', { error });
       toast.error('Failed to fetch GitHub statistics');
     } finally {
+      setIsFetchingStats(false);
     }
   };
 
@@ -188,7 +180,7 @@ export function GithubConnection() {
     setIsLoading(false);
   }, []);
 
-  if (isLoading) {
+  if (isLoading || isConnecting || isFetchingStats) {
     return <LoadingSpinner />;
   }
 
@@ -350,7 +342,7 @@ export function GithubConnection() {
                 'hover:bg-red-600',
               )}
             >
-              <div className="i-ph:plug w-4 h-4" />
+              <div className="i-ph:plug-x w-4 h-4" />
               Disconnect
             </button>
           )}
@@ -365,161 +357,144 @@ export function GithubConnection() {
 
         {connection.user && connection.stats && (
           <div className="mt-6 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-6">
-            <div className="flex items-center gap-4 mb-6">
-              <img src={connection.user.avatar_url} alt={connection.user.login} className="w-16 h-16 rounded-full" />
-              <div>
-                <h3 className="text-lg font-medium text-bolt-elements-textPrimary">
-                  {connection.user.name || connection.user.login}
-                </h3>
-                {connection.user.bio && (
-                  <p className="text-sm text-bolt-elements-textSecondary">{connection.user.bio}</p>
-                )}
-                <div className="flex gap-4 mt-2 text-sm text-bolt-elements-textSecondary">
-                  <span className="flex items-center gap-1">
-                    <div className="i-ph:users w-4 h-4" />
-                    {connection.user.followers} followers
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <div className="i-ph:book-bookmark w-4 h-4" />
-                    {connection.user.public_repos} public repos
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <div className="i-ph:star w-4 h-4" />
-                    {connection.stats.totalStars} stars
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <div className="i-ph:git-fork w-4 h-4" />
-                    {connection.stats.totalForks} forks
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            {/* Organizations Section */}
-            {connection.stats.organizations.length > 0 && (
-              <div className="space-y-3">
-                <button
-                  onClick={() => toggleSection('organizations')}
-                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
-                >
-                  <div className="i-ph:buildings w-4 h-4" />
-                  Organizations ({connection.stats.organizations.length})
-                  <div
-                    className={classNames(
-                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
-                      expandedSections.organizations ? 'rotate-180' : '',
-                    )}
-                  />
-                </button>
-                {expandedSections.organizations && (
-                  <div className="flex flex-wrap gap-3 pb-4">
-                    {connection.stats.organizations.map((org) => (
-                      <a
-                        key={org.login}
-                        href={org.html_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-2 p-2 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
-                      >
-                        <img src={org.avatar_url} alt={org.login} className="w-6 h-6 rounded-md" />
-                        <span className="text-sm text-bolt-elements-textPrimary">{org.login}</span>
-                      </a>
-                    ))}
+            <button onClick={() => setIsStatsExpanded(!isStatsExpanded)} className="w-full bg-transparent">
+              <div className="flex items-center gap-4">
+                <img src={connection.user.avatar_url} alt={connection.user.login} className="w-16 h-16 rounded-full" />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.user.name || connection.user.login}
+                    </h3>
+                    <div
+                      className={classNames(
+                        'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary transition-transform',
+                        isStatsExpanded ? 'rotate-180' : '',
+                      )}
+                    />
                   </div>
-                )}
-              </div>
-            )}
-
-            {/* Languages Section */}
-            <div className="space-y-3">
-              <button
-                onClick={() => toggleSection('languages')}
-                className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
-              >
-                <div className="i-ph:code w-4 h-4" />
-                Top Languages ({Object.keys(connection.stats.languages).length})
-                <div
-                  className={classNames(
-                    'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
-                    expandedSections.languages ? 'rotate-180' : '',
+                  {connection.user.bio && (
+                    <p className="text-sm text-start text-bolt-elements-textSecondary">{connection.user.bio}</p>
                   )}
-                />
-              </button>
-              {expandedSections.languages && (
-                <div className="flex flex-wrap gap-2 pb-4">
-                  {Object.entries(connection.stats.languages)
-                    .sort(([, a], [, b]) => b - a)
-                    .slice(0, 5)
-                    .map(([language]) => (
-                      <span
-                        key={language}
-                        className="px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-500/20"
-                      >
-                        {language}
-                      </span>
-                    ))}
+                  <div className="flex gap-4 mt-2 text-sm text-bolt-elements-textSecondary">
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:users w-4 h-4" />
+                      {connection.user.followers} followers
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:book-bookmark w-4 h-4" />
+                      {connection.user.public_repos} public repos
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:star w-4 h-4" />
+                      {connection.stats.totalStars} stars
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="i-ph:git-fork w-4 h-4" />
+                      {connection.stats.totalForks} forks
+                    </span>
+                  </div>
                 </div>
-              )}
-            </div>
+              </div>
+            </button>
 
-            {/* Recent Activity Section */}
-            <div className="space-y-3">
-              <button
-                onClick={() => toggleSection('recentActivity')}
-                className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
-              >
-                <div className="i-ph:activity w-4 h-4" />
-                Recent Activity ({connection.stats.recentActivity.length})
-                <div
-                  className={classNames(
-                    'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
-                    expandedSections.recentActivity ? 'rotate-180' : '',
-                  )}
-                />
-              </button>
-              {expandedSections.recentActivity && (
-                <div className="space-y-3 pb-4">
-                  {connection.stats.recentActivity.map((event) => (
-                    <div key={event.id} className="p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] text-sm">
-                      <div className="flex items-center gap-2 text-bolt-elements-textPrimary">
-                        <div className="i-ph:git-commit w-4 h-4 text-bolt-elements-textSecondary" />
-                        <span className="font-medium">{event.type.replace('Event', '')}</span>
-                        <span>on</span>
+            {isStatsExpanded && (
+              <div className="pt-4">
+                {connection.stats.organizations.length > 0 && (
+                  <div className="mb-6">
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Organizations</h4>
+                    <div className="flex flex-wrap gap-3">
+                      {connection.stats.organizations.map((org) => (
                         <a
-                          href={`https://github.com/${event.repo.name}`}
+                          key={org.login}
+                          href={org.html_url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-purple-500 hover:underline"
+                          className="flex items-center gap-2 p-2 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] hover:bg-[#F0F0F0] dark:hover:bg-[#252525] transition-colors"
                         >
-                          {event.repo.name}
+                          <img src={org.avatar_url} alt={org.login} className="w-6 h-6 rounded-md" />
+                          <span className="text-sm text-bolt-elements-textPrimary">{org.login}</span>
                         </a>
-                      </div>
-                      <div className="mt-1 text-xs text-bolt-elements-textSecondary">
-                        {new Date(event.created_at).toLocaleDateString()} at{' '}
-                        {new Date(event.created_at).toLocaleTimeString()}
-                      </div>
+                      ))}
                     </div>
-                  ))}
-                </div>
-              )}
-            </div>
+                  </div>
+                )}
 
-            {/* Repositories Section */}
-            <div className="space-y-3">
-              <button
-                onClick={() => toggleSection('repositories')}
-                className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
-              >
-                <div className="i-ph:clock-counter-clockwise w-4 h-4" />
-                Recent Repositories ({connection.stats.repos.length})
-                <div
-                  className={classNames(
-                    'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
-                    expandedSections.repositories ? 'rotate-180' : '',
-                  )}
-                />
-              </button>
-              {expandedSections.repositories && (
+                {/* Languages Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Top Languages</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(connection.stats.languages)
+                      .sort(([, a], [, b]) => b - a)
+                      .slice(0, 5)
+                      .map(([language]) => (
+                        <span
+                          key={language}
+                          className="px-3 py-1 text-xs rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-500/20"
+                        >
+                          {language}
+                        </span>
+                      ))}
+                  </div>
+                </div>
+
+                {/* Recent Activity Section */}
+                <div className="mb-6">
+                  <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Activity</h4>
+                  <div className="space-y-3">
+                    {connection.stats.recentActivity.map((event) => (
+                      <div key={event.id} className="p-3 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A] text-sm">
+                        <div className="flex items-center gap-2 text-bolt-elements-textPrimary">
+                          <div className="i-ph:git-commit w-4 h-4 text-bolt-elements-textSecondary" />
+                          <span className="font-medium">{event.type.replace('Event', '')}</span>
+                          <span>on</span>
+                          <a
+                            href={`https://github.com/${event.repo.name}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline"
+                          >
+                            {event.repo.name}
+                          </a>
+                        </div>
+                        <div className="mt-1 text-xs text-bolt-elements-textSecondary">
+                          {new Date(event.created_at).toLocaleDateString()} at{' '}
+                          {new Date(event.created_at).toLocaleTimeString()}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Additional Stats */}
+                <div className="grid grid-cols-4 gap-4 mb-6">
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Member Since</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {new Date(connection.user.created_at).toLocaleDateString()}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Public Gists</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.totalGists}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Organizations</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {connection.stats.organizations.length}
+                    </div>
+                  </div>
+                  <div className="p-4 rounded-lg bg-[#F8F8F8] dark:bg-[#1A1A1A]">
+                    <div className="text-sm text-bolt-elements-textSecondary">Languages</div>
+                    <div className="text-lg font-medium text-bolt-elements-textPrimary">
+                      {Object.keys(connection.stats.languages).length}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Repositories Section */}
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary mb-3">Recent Repositories</h4>
                 <div className="space-y-3">
                   {connection.stats.repos.map((repo) => (
                     <a
@@ -561,8 +536,8 @@ export function GithubConnection() {
                     </a>
                   ))}
                 </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         )}
       </div>

app/components/@settings/tabs/connections/NetlifyConnection.tsx

@@ -4,8 +4,14 @@ import { toast } from 'react-toastify';
 import { useStore } from '@nanostores/react';
 import { logStore } from '~/lib/stores/logs';
 import { classNames } from '~/utils/classNames';
-import { netlifyConnection, isConnecting, isFetchingStats, updateNetlifyConnection } from '~/lib/stores/netlify';
-import type { NetlifyUser, NetlifySite } from '~/types/netlify';
+import {
+  netlifyConnection,
+  isConnecting,
+  isFetchingStats,
+  updateNetlifyConnection,
+  fetchNetlifyStats,
+} from '~/lib/stores/netlify';
+import type { NetlifyUser } from '~/types/netlify';
 
 export function NetlifyConnection() {
   const connection = useStore(netlifyConnection);
@@ -22,40 +28,6 @@ export function NetlifyConnection() {
     fetchSites();
   }, [connection.user, connection.token]);
 
-  const fetchNetlifyStats = async (token: string) => {
-    try {
-      isFetchingStats.set(true);
-
-      const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'Content-Type': 'application/json',
-        },
-      });
-
-      if (!sitesResponse.ok) {
-        throw new Error(`Failed to fetch sites: ${sitesResponse.status}`);
-      }
-
-      const sites = (await sitesResponse.json()) as NetlifySite[];
-
-      const currentState = netlifyConnection.get();
-      updateNetlifyConnection({
-        ...currentState,
-        stats: {
-          sites,
-          totalSites: sites.length,
-        },
-      });
-    } catch (error) {
-      console.error('Netlify API Error:', error);
-      logStore.logError('Failed to fetch Netlify stats', { error });
-      toast.error('Failed to fetch Netlify statistics');
-    } finally {
-      isFetchingStats.set(false);
-    }
-  };
-
   const handleConnect = async (event: React.FormEvent) => {
     event.preventDefault();
     isConnecting.set(true);

app/components/chat/BaseChat.tsx

@@ -45,6 +45,7 @@ interface BaseChatProps {
   showChat?: boolean;
   chatStarted?: boolean;
   isStreaming?: boolean;
+  onStreamingChange?: (streaming: boolean) => void;
   messages?: Message[];
   description?: string;
   enhancingPrompt?: boolean;
@@ -79,6 +80,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       showChat = true,
       chatStarted = false,
       isStreaming = false,
+      onStreamingChange,
       model,
       setModel,
       provider,
@@ -126,6 +128,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       console.log(transcript);
     }, [transcript]);
 
+    useEffect(() => {
+      onStreamingChange?.(isStreaming);
+    }, [isStreaming, onStreamingChange]);
+
     useEffect(() => {
       if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -337,7 +343,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 }}
               </ClientOnly>
               <div
-                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt', {
+                className={classNames('flex flex-col w-full max-w-chat mx-auto z-prompt', {
                   'sticky bottom-2': chatStarted,
                   'position-absolute': chatStarted,
                 })}

app/components/chat/Chat.client.tsx

@@ -24,6 +24,7 @@ import { useSearchParams } from '@remix-run/react';
 import { createSampler } from '~/utils/sampler';
 import { getTemplates, selectStarterTemplate } from '~/utils/selectStarterTemplate';
 import { logStore } from '~/lib/stores/logs';
+import { streamingState } from '~/lib/stores/streaming';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -465,6 +466,9 @@ export const ChatImpl = memo(
         showChat={showChat}
         chatStarted={chatStarted}
         isStreaming={isLoading || fakeLoading}
+        onStreamingChange={(streaming) => {
+          streamingState.set(streaming);
+        }}
         enhancingPrompt={enhancingPrompt}
         promptEnhanced={promptEnhanced}
         sendMessage={sendMessage}

app/components/chat/ChatAlert.tsx

@@ -24,7 +24,7 @@ export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -20 }}
         transition={{ duration: 0.3 }}
-        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4`}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}
       >
         <div className="flex items-start">
           {/* Icon */}

app/components/chat/NetlifyDeploymentLink.client.tsx

@@ -0,0 +1,51 @@
+import { useStore } from '@nanostores/react';
+import { netlifyConnection, fetchNetlifyStats } from '~/lib/stores/netlify';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useEffect } from 'react';
+
+export function NetlifyDeploymentLink() {
+  const connection = useStore(netlifyConnection);
+  const currentChatId = useStore(chatId);
+
+  useEffect(() => {
+    if (connection.token && currentChatId) {
+      fetchNetlifyStats(connection.token);
+    }
+  }, [connection.token, currentChatId]);
+
+  const deployedSite = connection.stats?.sites?.find((site) => site.name.includes(`bolt-diy-${currentChatId}`));
+
+  if (!deployedSite) {
+    return null;
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <a
+            href={deployedSite.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#00AD9F] z-50"
+            onClick={(e) => {
+              e.stopPropagation(); // Add this to prevent click from bubbling up
+            }}
+          >
+            <div className="i-ph:rocket-launch w-5 h-5" />
+          </a>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="px-3 py-2 rounded bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary text-xs z-50"
+            sideOffset={5}
+          >
+            {deployedSite.url}
+            <Tooltip.Arrow className="fill-bolt-elements-background-depth-3" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

app/components/chat/ProgressCompilation.tsx

@@ -42,7 +42,6 @@ export default function ProgressCompilation({ data }: { data?: ProgressAnnotatio
           'shadow-lg rounded-lg  relative w-full max-w-chat mx-auto z-prompt',
           'p-1',
         )}
-        style={{ transform: 'translateY(1rem)' }}
       >
         <div
           className={classNames(

app/components/header/HeaderActionButtons.client.tsx

@@ -10,6 +10,8 @@ import { path } from '~/utils/path';
 import { useEffect, useRef, useState } from 'react';
 import type { ActionCallbackData } from '~/lib/runtime/message-parser';
 import { chatId } from '~/lib/persistence/useChatHistory'; // Add this import
+import { streamingState } from '~/lib/stores/streaming';
+import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.client';
 
 interface HeaderActionButtonsProps {}
 
@@ -25,6 +27,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const canHideChat = showWorkbench || !showChat;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const isStreaming = useStore(streamingState);
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -41,7 +44,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
 
   const handleDeploy = async () => {
     if (!connection.user || !connection.token) {
-      toast.error('Please connect to Netlify first');
+      toast.error('Please connect to Netlify first in the settings tab!');
       return;
     }
 
@@ -206,7 +209,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
         <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden mr-2 text-sm">
           <Button
             active
-            disabled={isDeploying || !activePreview}
+            disabled={isDeploying || !activePreview || isStreaming}
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             className="px-4 hover:bg-bolt-elements-item-backgroundActive flex items-center gap-2"
           >
@@ -225,8 +228,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                 handleDeploy();
                 setIsDropdownOpen(false);
               }}
-              disabled={isDeploying || !activePreview}
-              className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md"
+              disabled={isDeploying || !activePreview || !connection.user}
+              className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
             >
               <img
                 className="w-5 h-5"
@@ -235,7 +238,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                 crossOrigin="anonymous"
                 src="https://cdn.simpleicons.org/netlify"
               />
-              <span className="mx-auto">Deploy to Netlify</span>
+              <span className="mx-auto">{!connection.user ? 'No Account Connected' : 'Deploy to Netlify'}</span>
+              {connection.user && <NetlifyDeploymentLink />}
             </Button>
             <Button
               active={false}

app/lib/stores/netlify.ts

@@ -1,5 +1,7 @@
 import { atom } from 'nanostores';
 import type { NetlifyConnection } from '~/types/netlify';
+import { logStore } from './logs';
+import { toast } from 'react-toastify';
 
 // Initialize with stored connection or defaults
 const storedConnection = typeof window !== 'undefined' ? localStorage.getItem('netlify_connection') : null;
@@ -25,3 +27,37 @@ export const updateNetlifyConnection = (updates: Partial<NetlifyConnection>) =>
     localStorage.setItem('netlify_connection', JSON.stringify(newState));
   }
 };
+
+export async function fetchNetlifyStats(token: string) {
+  try {
+    isFetchingStats.set(true);
+
+    const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!sitesResponse.ok) {
+      throw new Error(`Failed to fetch sites: ${sitesResponse.status}`);
+    }
+
+    const sites = (await sitesResponse.json()) as any;
+
+    const currentState = netlifyConnection.get();
+    updateNetlifyConnection({
+      ...currentState,
+      stats: {
+        sites,
+        totalSites: sites.length,
+      },
+    });
+  } catch (error) {
+    console.error('Netlify API Error:', error);
+    logStore.logError('Failed to fetch Netlify stats', { error });
+    toast.error('Failed to fetch Netlify statistics');
+  } finally {
+    isFetchingStats.set(false);
+  }
+}

app/lib/stores/streaming.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const streamingState = atom<boolean>(false);