UI Enhancements

This commit is contained in:
Stijnus 2025-01-24 16:14:48 +01:00
parent 505f1db071
commit 027f6529f2
8 changed files with 774 additions and 418 deletions

View File

@ -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>
);
}

View File

@ -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 };

View File

@ -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 };

View File

@ -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 };

View File

@ -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 };

6
app/lib/utils.ts Normal file
View File

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

View File

@ -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",

View File

@ -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