UI Enhancements

app/components/settings/debug/DebugTab.tsx

@@ -3,6 +3,11 @@ import { toast } from 'react-toastify';
 import { classNames } from '~/utils/classNames';
 import { logStore } from '~/lib/stores/logs';
 import type { LogEntry } from '~/lib/stores/logs';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/Collapsible';
+import { Progress } from '~/components/ui/Progress';
+import { ScrollArea } from '~/components/ui/ScrollArea';
+import { Badge, type BadgeProps } from '~/components/ui/Badge';
+import { cn } from '~/lib/utils';
 
 interface SystemInfo {
   os: string;
@@ -124,18 +129,11 @@ interface WebAppInfo {
   };
 }
 
-interface GitInfo {
-  branch: string;
-  commit: string;
-  commitTime: string;
-  author: string;
-  remoteUrl: string;
-}
-
-interface RepoData {
+// Add interface for GitHub API response
+interface GitHubRepoResponse {
   name: string;
   full_name: string;
-  description: string;
+  description: string | null;
   stargazers_count: number;
   forks_count: number;
   open_issues_count: number;
@@ -147,14 +145,13 @@ interface RepoData {
   };
 }
 
-interface AppData {
-  name: string;
-  version: string;
-  description: string;
-  license: string;
-  nodeVersion: string;
-  dependencies: { [key: string]: string };
-  devDependencies: { [key: string]: string };
+// Add interface for Git info response
+interface GitInfo {
+  branch: string;
+  commit: string;
+  commitTime: string;
+  author: string;
+  remoteUrl: string;
 }
 
 export default function DebugTab() {
@@ -174,6 +171,14 @@ export default function DebugTab() {
     lastCheck: null,
   });
 
+  // Add section collapse state
+  const [openSections, setOpenSections] = useState({
+    system: true,
+    performance: true,
+    webapp: true,
+    errors: true,
+  });
+
   // Fetch initial data
   useEffect(() => {
     getSystemInfo();
@@ -368,13 +373,11 @@ export default function DebugTab() {
       if (!appInfoResponse.ok) {
         throw new Error('Failed to fetch webapp info');
       }
-
-      const appData = (await appInfoResponse.json()) as AppData;
+      const appData = (await appInfoResponse.json()) as Record<string, unknown>;
 
       // Fetch git info
       const gitInfoResponse = await fetch('/api/system/git-info');
       let gitInfo: GitInfo | undefined;
-
       if (gitInfoResponse.ok) {
         gitInfo = (await gitInfoResponse.json()) as GitInfo;
       }
@@ -382,13 +385,12 @@ export default function DebugTab() {
       // Fetch GitHub repository info
       const repoInfoResponse = await fetch('https://api.github.com/repos/stackblitz-labs/bolt.diy');
       let repoInfo: WebAppInfo['repoInfo'] | undefined;
-
       if (repoInfoResponse.ok) {
-        const repoData = (await repoInfoResponse.json()) as RepoData;
+        const repoData = (await repoInfoResponse.json()) as GitHubRepoResponse;
         repoInfo = {
           name: repoData.name,
           fullName: repoData.full_name,
-          description: repoData.description,
+          description: repoData.description ?? '',
           stars: repoData.stargazers_count,
           forks: repoData.forks_count,
           openIssues: repoData.open_issues_count,
@@ -409,7 +411,13 @@ export default function DebugTab() {
       };
 
       setWebAppInfo({
-        ...appData,
+        name: appData.name as string,
+        version: appData.version as string,
+        description: appData.description as string,
+        license: appData.license as string,
+        nodeVersion: appData.nodeVersion as string,
+        dependencies: appData.dependencies as Record<string, string>,
+        devDependencies: appData.devDependencies as Record<string, string>,
         ...buildInfo,
         gitInfo,
         repoInfo,
@@ -587,7 +595,44 @@ export default function DebugTab() {
   };
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
+      {/* Quick Stats Banner */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="p-4 rounded-xl bg-gradient-to-br from-purple-500/10 to-purple-500/5 border border-purple-500/20">
+          <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
+          <div className="text-2xl font-semibold text-bolt-elements-textPrimary mt-1">
+            {systemInfo?.memory.percentage}%
+          </div>
+          <Progress value={systemInfo?.memory.percentage || 0} className="mt-2" />
+        </div>
+
+        <div className="p-4 rounded-xl bg-gradient-to-br from-blue-500/10 to-blue-500/5 border border-blue-500/20">
+          <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
+          <div className="text-2xl font-semibold text-bolt-elements-textPrimary mt-1">
+            {systemInfo ? (systemInfo.performance.timing.loadTime / 1000).toFixed(2) + 's' : '-'}
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2">
+            DOM Ready: {systemInfo ? (systemInfo.performance.timing.domReadyTime / 1000).toFixed(2) + 's' : '-'}
+          </div>
+        </div>
+
+        <div className="p-4 rounded-xl bg-gradient-to-br from-green-500/10 to-green-500/5 border border-green-500/20">
+          <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
+          <div className="text-2xl font-semibold text-bolt-elements-textPrimary mt-1">
+            {systemInfo?.network.downlink || '-'} Mbps
+          </div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2">RTT: {systemInfo?.network.rtt || '-'} ms</div>
+        </div>
+
+        <div className="p-4 rounded-xl bg-gradient-to-br from-red-500/10 to-red-500/5 border border-red-500/20">
+          <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
+          <div className="text-2xl font-semibold text-bolt-elements-textPrimary mt-1">{errorLog.errors.length}</div>
+          <div className="text-xs text-bolt-elements-textSecondary mt-2">
+            Last Check: {errorLog.lastCheck ? new Date(errorLog.lastCheck).toLocaleTimeString() : 'Never'}
+          </div>
+        </div>
+      </div>
+
       {/* Action Buttons */}
       <div className="flex flex-wrap gap-4">
         <button
@@ -598,7 +643,7 @@ export default function DebugTab() {
             'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
             'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
             'text-bolt-elements-textPrimary dark:hover:text-purple-500',
-            'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
+            'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
             { 'opacity-50 cursor-not-allowed': loading.systemInfo },
           )}
         >
@@ -686,385 +731,474 @@ export default function DebugTab() {
       </div>
 
       {/* System Information */}
-      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="i-ph:cpu text-purple-500 w-5 h-5" />
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Information</h3>
-        </div>
-        {systemInfo ? (
-          <div className="grid grid-cols-2 gap-6">
-            <div className="space-y-2">
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:desktop text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">OS: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.os}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:device-mobile text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Platform: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Architecture: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:cpu text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">CPU Cores: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Node Version: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:wifi-high text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Network Type: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.network.type} ({systemInfo.network.effectiveType})
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:gauge text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Network Speed: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
-                </span>
-              </div>
-              {systemInfo.battery && (
-                <div className="text-sm flex items-center gap-2">
-                  <div className="i-ph:battery-charging text-bolt-elements-textSecondary w-4 h-4" />
-                  <span className="text-bolt-elements-textSecondary">Battery: </span>
-                  <span className="text-bolt-elements-textPrimary">
-                    {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
-                  </span>
-                </div>
+      <Collapsible
+        open={openSections.system}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, system: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:cpu text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">System Information</h3>
+            </div>
+            <div
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.system ? 'rotate-180' : '',
               )}
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:hard-drive text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Storage: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
-                  {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
-                </span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:database text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Memory Usage: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:browser text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Browser: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.browser.name} {systemInfo.browser.version}
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:monitor text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Screen: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Timezone: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.time.timezone}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:translate text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Language: </span>
-                <span className="text-bolt-elements-textPrimary">{systemInfo.browser.language}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:chart-pie text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">JS Heap: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
-                  {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
-                  {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:timer text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Page Load: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:code text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">DOM Ready: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-            </div>
+            />
           </div>
-        ) : (
-          <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</div>
-        )}
-      </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo ? (
+              <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:desktop text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">OS: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.os}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:device-mobile text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Platform: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Architecture: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:cpu text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">CPU Cores: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Node Version: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:wifi-high text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.type} ({systemInfo.network.effectiveType})
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:gauge text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Network Speed: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.network.downlink}Mbps (RTT: {systemInfo.network.rtt}ms)
+                    </span>
+                  </div>
+                  {systemInfo.battery && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:battery-charging text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Battery: </span>
+                      <span className="text-bolt-elements-textPrimary">
+                        {systemInfo.battery.level.toFixed(1)}% {systemInfo.battery.charging ? '(Charging)' : ''}
+                      </span>
+                    </div>
+                  )}
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:hard-drive text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Storage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.storage.usage / (1024 * 1024 * 1024)).toFixed(2)}GB /{' '}
+                      {(systemInfo.storage.quota / (1024 * 1024 * 1024)).toFixed(2)}GB
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:database text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Memory Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.memory.used} / {systemInfo.memory.total} ({systemInfo.memory.percentage}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:browser text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Browser: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.browser.name} {systemInfo.browser.version}
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:monitor text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Screen: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.screen.width}x{systemInfo.screen.height} ({systemInfo.screen.pixelRatio}x)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:clock text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Timezone: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.time.timezone}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:translate text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Language: </span>
+                    <span className="text-bolt-elements-textPrimary">{systemInfo.browser.language}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:chart-pie text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">JS Heap: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB (
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%)
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:timer text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Page Load: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:code text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">DOM Ready: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* Performance Metrics */}
-      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="i-ph:chart-line text-purple-500 w-5 h-5" />
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance Metrics</h3>
-        </div>
-        {systemInfo && (
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Page Load Time: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">DOM Ready Time: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Request Time: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Redirect Time: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
-                </span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">JS Heap Usage: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
-                  {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Heap Utilization: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Navigation Type: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.performance.navigation.type === 0
-                    ? 'Navigate'
-                    : systemInfo.performance.navigation.type === 1
-                      ? 'Reload'
-                      : systemInfo.performance.navigation.type === 2
-                        ? 'Back/Forward'
-                        : 'Other'}
-                </span>
-              </div>
-              <div className="text-sm">
-                <span className="text-bolt-elements-textSecondary">Redirects: </span>
-                <span className="text-bolt-elements-textPrimary">
-                  {systemInfo.performance.navigation.redirectCount}
-                </span>
-              </div>
+      <Collapsible
+        open={openSections.performance}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, performance: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:chart-line text-purple-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Performance Metrics</h3>
             </div>
+            <div
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.performance ? 'rotate-180' : '',
+              )}
+            />
           </div>
-        )}
-      </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {systemInfo && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Page Load Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.loadTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">DOM Ready Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.domReadyTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Request Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.requestTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirect Time: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.timing.redirectTime / 1000).toFixed(2)}s
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">JS Heap Usage: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {(systemInfo.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1)}MB /{' '}
+                      {(systemInfo.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1)}MB
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Heap Utilization: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.memory.usagePercentage.toFixed(1)}%
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Navigation Type: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.type === 0
+                        ? 'Navigate'
+                        : systemInfo.performance.navigation.type === 1
+                          ? 'Reload'
+                          : systemInfo.performance.navigation.type === 2
+                            ? 'Back/Forward'
+                            : 'Other'}
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="text-bolt-elements-textSecondary">Redirects: </span>
+                    <span className="text-bolt-elements-textPrimary">
+                      {systemInfo.performance.navigation.redirectCount}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* WebApp Information */}
-      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="i-ph:info text-blue-500 w-5 h-5" />
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">WebApp Information</h3>
-        </div>
-        {webAppInfo ? (
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:app-window text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Name: </span>
-                <span className="text-bolt-elements-textPrimary">{webAppInfo.name}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:tag text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Version: </span>
-                <span className="text-bolt-elements-textPrimary">{webAppInfo.version}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:file-text text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Description: </span>
-                <span className="text-bolt-elements-textPrimary">{webAppInfo.description}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:certificate text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">License: </span>
-                <span className="text-bolt-elements-textPrimary">{webAppInfo.license}</span>
-              </div>
-              <div className="text-sm flex items-center gap-2">
-                <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
-                <span className="text-bolt-elements-textSecondary">Node Version: </span>
-                <span className="text-bolt-elements-textPrimary">{webAppInfo.nodeVersion}</span>
-              </div>
-              {webAppInfo.buildTime && (
-                <div className="text-sm flex items-center gap-2">
-                  <div className="i-ph:calendar text-bolt-elements-textSecondary w-4 h-4" />
-                  <span className="text-bolt-elements-textSecondary">Build Time: </span>
-                  <span className="text-bolt-elements-textPrimary">{webAppInfo.buildTime}</span>
-                </div>
-              )}
-              {webAppInfo.buildNumber && (
-                <div className="text-sm flex items-center gap-2">
-                  <div className="i-ph:hash text-bolt-elements-textSecondary w-4 h-4" />
-                  <span className="text-bolt-elements-textSecondary">Build Number: </span>
-                  <span className="text-bolt-elements-textPrimary">{webAppInfo.buildNumber}</span>
-                </div>
-              )}
-              {webAppInfo.environment && (
-                <div className="text-sm flex items-center gap-2">
-                  <div className="i-ph:cloud text-bolt-elements-textSecondary w-4 h-4" />
-                  <span className="text-bolt-elements-textSecondary">Environment: </span>
-                  <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
-                </div>
-              )}
+      <Collapsible
+        open={openSections.webapp}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, webapp: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:info text-blue-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">WebApp Information</h3>
             </div>
-            <div className="space-y-2">
-              <div className="text-sm">
-                <div className="flex items-center gap-2 mb-2">
-                  <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
-                  <span className="text-bolt-elements-textSecondary">Key Dependencies:</span>
+            <div
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.webapp ? 'rotate-180' : '',
+              )}
+            />
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            {webAppInfo ? (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:app-window text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Name: </span>
+                    <span className="text-bolt-elements-textPrimary">{webAppInfo.name}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:tag text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Version: </span>
+                    <span className="text-bolt-elements-textPrimary">{webAppInfo.version}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:file-text text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Description: </span>
+                    <span className="text-bolt-elements-textPrimary">{webAppInfo.description}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:certificate text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">License: </span>
+                    <span className="text-bolt-elements-textPrimary">{webAppInfo.license}</span>
+                  </div>
+                  <div className="text-sm flex items-center gap-2">
+                    <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                    <span className="text-bolt-elements-textSecondary">Node Version: </span>
+                    <span className="text-bolt-elements-textPrimary">{webAppInfo.nodeVersion}</span>
+                  </div>
+                  {webAppInfo.buildTime && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:calendar text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Build Time: </span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.buildTime}</span>
+                    </div>
+                  )}
+                  {webAppInfo.buildNumber && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:hash text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Build Number: </span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.buildNumber}</span>
+                    </div>
+                  )}
+                  {webAppInfo.environment && (
+                    <div className="text-sm flex items-center gap-2">
+                      <div className="i-ph:cloud text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Environment: </span>
+                      <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
+                    </div>
+                  )}
                 </div>
-                <div className="pl-6 space-y-1">
-                  {Object.entries(webAppInfo.dependencies)
-                    .filter(([key]) => ['react', '@remix-run/react', 'next', 'typescript'].includes(key))
-                    .map(([key, version]) => (
-                      <div key={key} className="text-xs text-bolt-elements-textPrimary">
-                        {key}: {version}
+                <div className="space-y-2">
+                  <div className="text-sm">
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="i-ph:package text-bolt-elements-textSecondary w-4 h-4" />
+                      <span className="text-bolt-elements-textSecondary">Key Dependencies:</span>
+                    </div>
+                    <div className="pl-6 space-y-1">
+                      {Object.entries(webAppInfo.dependencies)
+                        .filter(([key]) => ['react', '@remix-run/react', 'next', 'typescript'].includes(key))
+                        .map(([key, version]) => (
+                          <div key={key} className="text-xs text-bolt-elements-textPrimary">
+                            {key}: {version}
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                  {webAppInfo.gitInfo && (
+                    <div className="text-sm">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="i-ph:git-branch text-bolt-elements-textSecondary w-4 h-4" />
+                        <span className="text-bolt-elements-textSecondary">Git Info:</span>
                       </div>
-                    ))}
+                      <div className="pl-6 space-y-1">
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Branch: {webAppInfo.gitInfo.branch}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Commit: {webAppInfo.gitInfo.commit}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Commit Time: {webAppInfo.gitInfo.commitTime}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Author: {webAppInfo.gitInfo.author}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Remote URL: {webAppInfo.gitInfo.remoteUrl}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {webAppInfo.repoInfo && (
+                    <div className="text-sm">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="i-ph:github text-bolt-elements-textSecondary w-4 h-4" />
+                        <span className="text-bolt-elements-textSecondary">GitHub Repository:</span>
+                      </div>
+                      <div className="pl-6 space-y-1">
+                        <div className="text-xs text-bolt-elements-textPrimary">Name: {webAppInfo.repoInfo.name}</div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Full Name: {webAppInfo.repoInfo.fullName}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Description: {webAppInfo.repoInfo.description}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">Stars: {webAppInfo.repoInfo.stars}</div>
+                        <div className="text-xs text-bolt-elements-textPrimary">Forks: {webAppInfo.repoInfo.forks}</div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Open Issues: {webAppInfo.repoInfo.openIssues}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Default Branch: {webAppInfo.repoInfo.defaultBranch}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Last Update: {webAppInfo.repoInfo.lastUpdate}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Owner: {webAppInfo.repoInfo.owner.login}
+                        </div>
+                        <div className="text-xs text-bolt-elements-textPrimary">
+                          Avatar URL: {webAppInfo.repoInfo.owner.avatarUrl}
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
-              {webAppInfo.gitInfo && (
-                <div className="text-sm">
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="i-ph:git-branch text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">Git Info:</span>
-                  </div>
-                  <div className="pl-6 space-y-1">
-                    <div className="text-xs text-bolt-elements-textPrimary">Branch: {webAppInfo.gitInfo.branch}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">Commit: {webAppInfo.gitInfo.commit}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Commit Time: {webAppInfo.gitInfo.commitTime}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">Author: {webAppInfo.gitInfo.author}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Remote URL: {webAppInfo.gitInfo.remoteUrl}
-                    </div>
-                  </div>
-                </div>
-              )}
-              {webAppInfo.repoInfo && (
-                <div className="text-sm">
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="i-ph:github text-bolt-elements-textSecondary w-4 h-4" />
-                    <span className="text-bolt-elements-textSecondary">GitHub Repository:</span>
-                  </div>
-                  <div className="pl-6 space-y-1">
-                    <div className="text-xs text-bolt-elements-textPrimary">Name: {webAppInfo.repoInfo.name}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Full Name: {webAppInfo.repoInfo.fullName}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Description: {webAppInfo.repoInfo.description}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">Stars: {webAppInfo.repoInfo.stars}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">Forks: {webAppInfo.repoInfo.forks}</div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Open Issues: {webAppInfo.repoInfo.openIssues}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Default Branch: {webAppInfo.repoInfo.defaultBranch}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Last Update: {webAppInfo.repoInfo.lastUpdate}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Owner: {webAppInfo.repoInfo.owner.login}
-                    </div>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Avatar URL: {webAppInfo.repoInfo.owner.avatarUrl}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">
+                {loading.webAppInfo ? 'Loading webapp information...' : 'No webapp information available'}
+              </div>
+            )}
           </div>
-        ) : (
-          <div className="text-sm text-bolt-elements-textSecondary">
-            {loading.webAppInfo ? 'Loading webapp information...' : 'No webapp information available'}
-          </div>
-        )}
-      </div>
+        </CollapsibleContent>
+      </Collapsible>
 
       {/* Error Check */}
-      <div className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="i-ph:warning text-purple-500 w-5 h-5" />
-          <h3 className="text-base font-medium text-bolt-elements-textPrimary">Error Check</h3>
-        </div>
-        <div className="space-y-4">
-          <div className="text-sm text-bolt-elements-textSecondary">
-            Checks for:
-            <ul className="list-disc list-inside mt-2 space-y-1">
-              <li>Unhandled JavaScript errors</li>
-              <li>Unhandled Promise rejections</li>
-              <li>Runtime exceptions</li>
-              <li>Network errors</li>
-            </ul>
+      <Collapsible
+        open={openSections.errors}
+        onOpenChange={(open: boolean) => setOpenSections((prev) => ({ ...prev, errors: open }))}
+        className="w-full"
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:warning text-red-500 w-5 h-5" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary">Error Check</h3>
+              {errorLog.errors.length > 0 && (
+                <Badge variant="destructive" className="ml-2">
+                  {errorLog.errors.length} Errors
+                </Badge>
+              )}
+            </div>
+            <div
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.errors ? 'rotate-180' : '',
+              )}
+            />
           </div>
-          <div className="text-sm">
-            <span className="text-bolt-elements-textSecondary">Last Check: </span>
-            <span className="text-bolt-elements-textPrimary">
-              {loading.errors
-                ? 'Checking...'
-                : errorLog.lastCheck
-                  ? `Last checked ${new Date(errorLog.lastCheck).toLocaleString()} (${errorLog.errors.length} errors found)`
-                  : 'Click to check for errors'}
-            </span>
-          </div>
-          {errorLog.errors.length > 0 && (
-            <div className="mt-4">
-              <div className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Errors:</div>
-              <div className="space-y-2">
-                {errorLog.errors.slice(0, 3).map((error, index) => (
-                  <div key={index} className="text-sm text-red-500 dark:text-red-400">
-                    {error.type === 'error' && `${error.message} (${error.filename}:${error.lineNumber})`}
-                    {error.type === 'unhandledRejection' && `Unhandled Promise Rejection: ${error.reason}`}
-                    {error.type === 'networkError' && `Network Error: Failed to load ${error.resource}`}
-                  </div>
-                ))}
-                {errorLog.errors.length > 3 && (
-                  <div className="text-sm text-bolt-elements-textSecondary">
-                    And {errorLog.errors.length - 3} more errors...
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 mt-2 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+            <ScrollArea className="h-[300px]">
+              <div className="space-y-4">
+                <div className="text-sm text-bolt-elements-textSecondary">
+                  Checks for:
+                  <ul className="list-disc list-inside mt-2 space-y-1">
+                    <li>Unhandled JavaScript errors</li>
+                    <li>Unhandled Promise rejections</li>
+                    <li>Runtime exceptions</li>
+                    <li>Network errors</li>
+                  </ul>
+                </div>
+                <div className="text-sm">
+                  <span className="text-bolt-elements-textSecondary">Last Check: </span>
+                  <span className="text-bolt-elements-textPrimary">
+                    {loading.errors
+                      ? 'Checking...'
+                      : errorLog.lastCheck
+                        ? `Last checked ${new Date(errorLog.lastCheck).toLocaleString()} (${errorLog.errors.length} errors found)`
+                        : 'Click to check for errors'}
+                  </span>
+                </div>
+                {errorLog.errors.length > 0 && (
+                  <div className="mt-4">
+                    <div className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Recent Errors:</div>
+                    <div className="space-y-2">
+                      {errorLog.errors.slice(0, 3).map((error, index) => (
+                        <div key={index} className="text-sm text-red-500 dark:text-red-400">
+                          {error.type === 'error' && `${error.message} (${error.filename}:${error.lineNumber})`}
+                          {error.type === 'unhandledRejection' && `Unhandled Promise Rejection: ${error.reason}`}
+                          {error.type === 'networkError' && `Network Error: Failed to load ${error.resource}`}
+                        </div>
+                      ))}
+                      {errorLog.errors.length > 3 && (
+                        <div className="text-sm text-bolt-elements-textSecondary">
+                          And {errorLog.errors.length - 3} more errors...
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
               </div>
-            </div>
-          )}
-        </div>
-      </div>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 }

app/components/ui/Badge.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-red-500/10 text-red-500 dark:bg-red-900/30',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+}
+
+function Badge({ className, variant = 'default', ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
+export type { BadgeProps };

app/components/ui/Collapsible.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

app/components/ui/Progress.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '~/lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-bolt-elements-background', className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-purple-500 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

app/components/ui/ScrollArea.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '~/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };