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>
-              )}
-              <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>
+      <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="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
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.system ? 'rotate-180' : '',
+              )}
+            />
+          </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>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">Loading system information...</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>
+      <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="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
+              className={cn(
+                'i-ph:caret-down w-4 h-4 transform transition-transform duration-200',
+                openSections.performance ? 'rotate-180' : '',
+              )}
+            />
+          </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>
+            )}
           </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>
-                <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
+              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="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 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>
-              )}
-              {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 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>
-                  <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}
+                  {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>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Description: {webAppInfo.repoInfo.description}
+                  )}
+                  {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>
-                    <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}
+                  )}
+                  {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 className="text-xs text-bolt-elements-textPrimary">
-                      Default Branch: {webAppInfo.repoInfo.defaultBranch}
+                  )}
+                </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>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Last Update: {webAppInfo.repoInfo.lastUpdate}
+                    <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 className="text-xs text-bolt-elements-textPrimary">
-                      Owner: {webAppInfo.repoInfo.owner.login}
+                  </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>
-                    <div className="text-xs text-bolt-elements-textPrimary">
-                      Avatar URL: {webAppInfo.repoInfo.owner.avatarUrl}
+                  )}
+                  {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>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="text-sm text-bolt-elements-textSecondary">
-            {loading.webAppInfo ? 'Loading webapp information...' : 'No webapp information available'}
+              </div>
+            ) : (
+              <div className="text-sm text-bolt-elements-textSecondary">
+                {loading.webAppInfo ? 'Loading webapp information...' : 'No webapp information available'}
+              </div>
+            )}
           </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>
-          </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>
+      <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>
-          {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 };

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package.json

@@ -59,11 +59,13 @@
     "@octokit/rest": "^21.0.2",
     "@octokit/types": "^13.6.2",
     "@openrouter/ai-sdk-provider": "^0.0.5",
-    "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.5",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
@@ -80,6 +82,7 @@
     "ai": "^4.0.13",
     "chalk": "^5.4.1",
     "chart.js": "^4.4.7",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "diff": "^5.2.0",

pnpm-lock.yaml

@@ -98,9 +98,9 @@ importers:
       '@openrouter/ai-sdk-provider':
         specifier: ^0.0.5
         version: 0.0.5(zod@3.23.8)
-      '@phosphor-icons/react':
-        specifier: ^2.1.7
-        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.0.3
+        version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-context-menu':
         specifier: ^2.2.2
         version: 2.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -111,8 +111,14 @@ importers:
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-popover':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^1.1.5
+        version: 1.1.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress':
+        specifier: ^1.0.3
+        version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -161,6 +167,9 @@ importers:
       chart.js:
         specifier: ^4.4.7
         version: 4.4.7
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1872,13 +1881,6 @@ packages:
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@phosphor-icons/react@2.1.7':
-    resolution: {integrity: sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>= 16.8'
-      react-dom: '>= 16.8'
-
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1890,6 +1892,9 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
   '@radix-ui/primitive@1.1.0':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
@@ -1922,6 +1927,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -2019,8 +2037,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.3':
-    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+  '@radix-ui/react-dismissable-layer@1.1.4':
+    resolution: {integrity: sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2102,8 +2120,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.1.4':
-    resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+  '@radix-ui/react-popover@1.1.5':
+    resolution: {integrity: sha512-YXkTAftOIW2Bt3qKH8vYr6n9gCkVrvyvfiTObVjoHVTHnNj26rmvO87IKa3VgtgCjb8FAQ6qOjNViwl+9iIzlg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2219,6 +2237,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.0':
     resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
     peerDependencies:
@@ -2232,6 +2263,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.0':
     resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==}
     peerDependencies:
@@ -3430,6 +3474,9 @@ packages:
     resolution: {integrity: sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==}
     engines: {node: '>= 0.10'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-git-ref@2.0.1:
     resolution: {integrity: sha512-bLSptAy2P0s6hU4PzuIMKmMJJSE6gLXGH1cntDu7bWJUksvuM+7ReOK61mozULErYvP6a15rnYl0zFDef+pyPw==}
 
@@ -5590,8 +5637,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.6.2:
-    resolution: {integrity: sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==}
+  react-remove-scroll@2.6.3:
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
@@ -6488,6 +6535,16 @@ packages:
       '@types/react':
         optional: true
 
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.2.2:
     resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
     peerDependencies:
@@ -8476,11 +8533,6 @@ snapshots:
 
   '@opentelemetry/api@1.9.0': {}
 
-  '@phosphor-icons/react@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -8488,6 +8540,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
+  '@radix-ui/number@1.1.0': {}
+
   '@radix-ui/primitive@1.1.0': {}
 
   '@radix-ui/primitive@1.1.1': {}
@@ -8510,6 +8564,22 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-collapsible@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -8601,7 +8671,7 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
-  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.1.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
@@ -8690,12 +8760,12 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
-  '@radix-ui/react-popover@1.1.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popover@1.1.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
       '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
       '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.12)(react@18.3.1)
       '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -8708,7 +8778,7 @@ snapshots:
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.6.2(@types/react@18.3.12)(react@18.3.1)
+      react-remove-scroll: 2.6.3(@types/react@18.3.12)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
@@ -8807,6 +8877,16 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-progress@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -8824,6 +8904,23 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-scroll-area@1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -10360,6 +10457,10 @@ snapshots:
       inherits: 2.0.4
       safe-buffer: 5.2.1
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-git-ref@2.0.1: {}
 
   clean-stack@2.2.0: {}
@@ -13075,14 +13176,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
-  react-remove-scroll@2.6.2(@types/react@18.3.12)(react@18.3.1):
+  react-remove-scroll@2.6.3(@types/react@18.3.12)(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.8(@types/react@18.3.12)(react@18.3.1)
-      react-style-singleton: 2.2.1(@types/react@18.3.12)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.12)(react@18.3.1)
       tslib: 2.8.1
       use-callback-ref: 1.3.3(@types/react@18.3.12)(react@18.3.1)
-      use-sidecar: 1.1.2(@types/react@18.3.12)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.12)(react@18.3.1)
     optionalDependencies:
       '@types/react': 18.3.12
 
@@ -14062,6 +14163,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  use-sidecar@1.1.3(@types/react@18.3.12)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   use-sync-external-store@1.2.2(react@18.3.1):
     dependencies:
       react: 18.3.1