claude-session-viewer 0.3.4 → 0.3.6

package/dist/server/statistics/service.js

@@ -0,0 +1,226 @@
+import { PRICING, DEFAULT_PRICING_MODEL, WEEKDAY_NAMES } from '../claude/config.js';
+import { aggregateTokenUsage, calculateCost } from './tokenUsage.js';
+import { fillMissingDates } from './utils.js';
+import { aggregateAllProjects, aggregateProject } from './aggregator.js';
+/**
+ * Calculate cutoff date based on days parameter
+ */
+function calculateCutoffDate(days) {
+    const cutoffDate = new Date();
+    if (days === 'all') {
+        cutoffDate.setFullYear(2000, 0, 1);
+    }
+    else {
+        const daysNum = typeof days === 'string' ? parseInt(days, 10) : days;
+        cutoffDate.setDate(cutoffDate.getDate() - daysNum);
+        cutoffDate.setHours(0, 0, 0, 0);
+    }
+    return cutoffDate;
+}
+/**
+ * Get overall usage statistics across all projects
+ */
+export async function getOverallStatistics(days = 7) {
+    const daysParam = days.toString();
+    const cutoffDate = calculateCutoffDate(days);
+    const data = await aggregateAllProjects(cutoffDate);
+    // Calculate totals
+    const totalUsage = aggregateTokenUsage(data.allUsages);
+    const defaultPricing = PRICING[DEFAULT_PRICING_MODEL];
+    const costBreakdown = calculateCost(totalUsage, defaultPricing);
+    const savedCost = (data.totalCacheRead / 1000000) * (defaultPricing.input - defaultPricing.cacheRead);
+    // Determine date range first (this drives all other date-based statistics)
+    const startDate = daysParam === 'all' && data.minDate
+        ? data.minDate
+        : cutoffDate;
+    const endDate = new Date();
+    // Fill daily stats based on the determined date range
+    const daily = fillMissingDates(data.dailyMap, startDate, endDate);
+    // Build project stats
+    const byProject = Array.from(data.projectMap.entries())
+        .map(([project, projectData]) => ({
+        id: project,
+        name: projectData.name,
+        tokenUsage: projectData.tokenUsage,
+        sessionCount: projectData.sessionIds.size
+    }))
+        .sort((a, b) => b.tokenUsage.totalTokens - a.tokenUsage.totalTokens);
+    // Build model stats
+    const byModel = Array.from(data.modelMap.entries())
+        .map(([model, modelData]) => ({
+        model,
+        tokenUsage: modelData.tokenUsage,
+        messageCount: modelData.messageCount
+    }))
+        .sort((a, b) => b.tokenUsage.totalTokens - a.tokenUsage.totalTokens);
+    // Build tool usage stats
+    const toolUsage = Array.from(data.toolUsageMap.entries())
+        .map(([toolName, stats]) => ({
+        toolName,
+        totalUses: stats.total,
+        successfulUses: stats.successful,
+        successRate: stats.total > 0 ? (stats.successful / stats.total) * 100 : 0
+    }))
+        .sort((a, b) => b.totalUses - a.totalUses);
+    const totalToolCalls = Array.from(data.toolUsageMap.values()).reduce((sum, stats) => sum + stats.total, 0);
+    const agentUsageRate = data.totalSessions > 0 ? (data.totalAgentSessions / data.totalSessions) * 100 : 0;
+    // Build hourly stats
+    const byHour = Array.from(data.hourlyMap.entries())
+        .map(([hour, hourData]) => ({
+        hour,
+        sessionCount: hourData.sessionIds.size,
+        messageCount: hourData.messageCount,
+        tokenUsage: hourData.tokenUsage
+    }))
+        .sort((a, b) => a.hour - b.hour);
+    // Build weekday stats
+    const byWeekday = Array.from(data.weekdayMap.entries())
+        .map(([weekday, weekdayData]) => ({
+        weekday,
+        weekdayName: WEEKDAY_NAMES[weekday],
+        sessionCount: weekdayData.sessionIds.size,
+        messageCount: weekdayData.messageCount,
+        tokenUsage: weekdayData.tokenUsage
+    }))
+        .sort((a, b) => a.weekday - b.weekday);
+    const statistics = {
+        overview: {
+            tokenUsage: totalUsage,
+            sessionCount: data.totalSessions,
+            messageCount: data.totalMessages,
+            dateRange: {
+                start: startDate?.toISOString() || endDate.toISOString(),
+                end: endDate.toISOString()
+            }
+        },
+        daily,
+        byProject,
+        byModel,
+        cache: {
+            totalCacheCreation: data.totalCacheCreation,
+            totalCacheRead: data.totalCacheRead,
+            ephemeral5mTokens: data.ephemeral5mTokens,
+            ephemeral1hTokens: data.ephemeral1hTokens,
+            cacheHitRate: (data.totalCacheCreation + data.totalCacheRead) > 0
+                ? (data.totalCacheRead / (data.totalCacheCreation + data.totalCacheRead)) * 100
+                : 0,
+            estimatedSavings: savedCost
+        },
+        cost: costBreakdown,
+        productivity: {
+            toolUsage,
+            totalToolCalls,
+            agentSessions: data.totalAgentSessions,
+            totalSessions: data.totalSessions,
+            agentUsageRate
+        },
+        trends: {
+            byHour,
+            byWeekday
+        }
+    };
+    return statistics;
+}
+/**
+ * Get usage statistics for a specific project
+ */
+export async function getProjectStatistics(projectId, days = 7) {
+    const daysParam = days.toString();
+    const cutoffDate = calculateCutoffDate(days);
+    const data = await aggregateProject(projectId, cutoffDate);
+    // Calculate totals
+    const totalUsage = aggregateTokenUsage(data.allUsages);
+    const defaultPricing = PRICING[DEFAULT_PRICING_MODEL];
+    const costBreakdown = calculateCost(totalUsage, defaultPricing);
+    const savedCost = (data.totalCacheRead / 1000000) * (defaultPricing.input - defaultPricing.cacheRead);
+    // Determine date range first (this drives all other date-based statistics)
+    const startDate = daysParam === 'all' && data.minDate
+        ? data.minDate
+        : cutoffDate;
+    const endDate = new Date();
+    // Fill daily stats based on the determined date range
+    const daily = fillMissingDates(data.dailyMap, startDate, endDate);
+    // Build project stats (single project)
+    const projectData = data.projectMap.get(projectId);
+    const byProject = projectData ? [{
+            id: projectId,
+            name: projectData.name,
+            tokenUsage: totalUsage,
+            sessionCount: data.totalSessions
+        }] : [];
+    // Build model stats
+    const byModel = Array.from(data.modelMap.entries())
+        .map(([model, modelData]) => ({
+        model,
+        tokenUsage: modelData.tokenUsage,
+        messageCount: modelData.messageCount
+    }))
+        .sort((a, b) => b.tokenUsage.totalTokens - a.tokenUsage.totalTokens);
+    // Build tool usage stats
+    const toolUsage = Array.from(data.toolUsageMap.entries())
+        .map(([toolName, stats]) => ({
+        toolName,
+        totalUses: stats.total,
+        successfulUses: stats.successful,
+        successRate: stats.total > 0 ? (stats.successful / stats.total) * 100 : 0
+    }))
+        .sort((a, b) => b.totalUses - a.totalUses);
+    const totalToolCalls = Array.from(data.toolUsageMap.values()).reduce((sum, stats) => sum + stats.total, 0);
+    const agentUsageRate = data.totalSessions > 0 ? (data.totalAgentSessions / data.totalSessions) * 100 : 0;
+    // Build hourly stats
+    const byHour = Array.from(data.hourlyMap.entries())
+        .map(([hour, hourData]) => ({
+        hour,
+        sessionCount: hourData.sessionIds.size,
+        messageCount: hourData.messageCount,
+        tokenUsage: hourData.tokenUsage
+    }))
+        .sort((a, b) => a.hour - b.hour);
+    // Build weekday stats
+    const byWeekday = Array.from(data.weekdayMap.entries())
+        .map(([weekday, weekdayData]) => ({
+        weekday,
+        weekdayName: WEEKDAY_NAMES[weekday],
+        sessionCount: weekdayData.sessionIds.size,
+        messageCount: weekdayData.messageCount,
+        tokenUsage: weekdayData.tokenUsage
+    }))
+        .sort((a, b) => a.weekday - b.weekday);
+    const statistics = {
+        overview: {
+            tokenUsage: totalUsage,
+            sessionCount: data.totalSessions,
+            messageCount: data.totalMessages,
+            dateRange: {
+                start: startDate?.toISOString() || endDate.toISOString(),
+                end: endDate.toISOString()
+            }
+        },
+        daily,
+        byProject,
+        byModel,
+        cache: {
+            totalCacheCreation: data.totalCacheCreation,
+            totalCacheRead: data.totalCacheRead,
+            ephemeral5mTokens: data.ephemeral5mTokens,
+            ephemeral1hTokens: data.ephemeral1hTokens,
+            cacheHitRate: (data.totalCacheCreation + data.totalCacheRead) > 0
+                ? (data.totalCacheRead / (data.totalCacheCreation + data.totalCacheRead)) * 100
+                : 0,
+            estimatedSavings: savedCost
+        },
+        cost: costBreakdown,
+        productivity: {
+            toolUsage,
+            totalToolCalls,
+            agentSessions: data.totalAgentSessions,
+            totalSessions: data.totalSessions,
+            agentUsageRate
+        },
+        trends: {
+            byHour,
+            byWeekday
+        }
+    };
+    return statistics;
+}

package/dist/server/statistics/tokenStats.js

@@ -0,0 +1,66 @@
+/**
+ * Token statistics utilities
+ * Pure calculation functions for token usage analysis
+ */
+/**
+ * Extract token usage from a message object
+ */
+export function extractTokenUsage(message) {
+    if (message.type !== 'assistant' || !message.message?.usage) {
+        return null;
+    }
+    const usage = message.message.usage;
+    const model = message.message.model || 'unknown';
+    return {
+        usage: {
+            inputTokens: usage.input_tokens || 0,
+            cacheCreationTokens: usage.cache_creation_input_tokens || 0,
+            cacheReadTokens: usage.cache_read_input_tokens || 0,
+            outputTokens: usage.output_tokens || 0,
+            totalTokens: (usage.input_tokens || 0) +
+                (usage.cache_creation_input_tokens || 0) +
+                (usage.cache_read_input_tokens || 0) +
+                (usage.output_tokens || 0)
+        },
+        model
+    };
+}
+/**
+ * Aggregate multiple token usages into a single total
+ */
+export function aggregateTokenUsage(usages) {
+    return usages.reduce((acc, usage) => ({
+        inputTokens: acc.inputTokens + usage.inputTokens,
+        cacheCreationTokens: acc.cacheCreationTokens + usage.cacheCreationTokens,
+        cacheReadTokens: acc.cacheReadTokens + usage.cacheReadTokens,
+        outputTokens: acc.outputTokens + usage.outputTokens,
+        totalTokens: acc.totalTokens + usage.totalTokens
+    }), createEmptyTokenUsage());
+}
+/**
+ * Calculate cost for token usage based on pricing
+ */
+export function calculateCost(usage, pricing) {
+    return {
+        inputCost: (usage.inputTokens / 1000000) * pricing.input,
+        outputCost: (usage.outputTokens / 1000000) * pricing.output,
+        cacheCreationCost: (usage.cacheCreationTokens / 1000000) * pricing.cacheCreation,
+        cacheReadCost: (usage.cacheReadTokens / 1000000) * pricing.cacheRead,
+        totalCost: (usage.inputTokens / 1000000) * pricing.input +
+            (usage.outputTokens / 1000000) * pricing.output +
+            (usage.cacheCreationTokens / 1000000) * pricing.cacheCreation +
+            (usage.cacheReadTokens / 1000000) * pricing.cacheRead
+    };
+}
+/**
+ * Create an empty token usage object
+ */
+export function createEmptyTokenUsage() {
+    return {
+        inputTokens: 0,
+        cacheCreationTokens: 0,
+        cacheReadTokens: 0,
+        outputTokens: 0,
+        totalTokens: 0
+    };
+}

package/dist/server/statistics/tokenUsage.js

@@ -0,0 +1,66 @@
+/**
+ * Token statistics utilities
+ * Pure calculation functions for token usage analysis
+ */
+/**
+ * Extract token usage from a message object
+ */
+export function extractTokenUsage(message) {
+    if (message.type !== 'assistant' || !message.message?.usage) {
+        return null;
+    }
+    const usage = message.message.usage;
+    const model = message.message.model || 'unknown';
+    return {
+        usage: {
+            inputTokens: usage.input_tokens || 0,
+            cacheCreationTokens: usage.cache_creation_input_tokens || 0,
+            cacheReadTokens: usage.cache_read_input_tokens || 0,
+            outputTokens: usage.output_tokens || 0,
+            totalTokens: (usage.input_tokens || 0) +
+                (usage.cache_creation_input_tokens || 0) +
+                (usage.cache_read_input_tokens || 0) +
+                (usage.output_tokens || 0)
+        },
+        model
+    };
+}
+/**
+ * Aggregate multiple token usages into a single total
+ */
+export function aggregateTokenUsage(usages) {
+    return usages.reduce((acc, usage) => ({
+        inputTokens: acc.inputTokens + usage.inputTokens,
+        cacheCreationTokens: acc.cacheCreationTokens + usage.cacheCreationTokens,
+        cacheReadTokens: acc.cacheReadTokens + usage.cacheReadTokens,
+        outputTokens: acc.outputTokens + usage.outputTokens,
+        totalTokens: acc.totalTokens + usage.totalTokens
+    }), createEmptyTokenUsage());
+}
+/**
+ * Calculate cost for token usage based on pricing
+ */
+export function calculateCost(usage, pricing) {
+    return {
+        inputCost: (usage.inputTokens / 1000000) * pricing.input,
+        outputCost: (usage.outputTokens / 1000000) * pricing.output,
+        cacheCreationCost: (usage.cacheCreationTokens / 1000000) * pricing.cacheCreation,
+        cacheReadCost: (usage.cacheReadTokens / 1000000) * pricing.cacheRead,
+        totalCost: (usage.inputTokens / 1000000) * pricing.input +
+            (usage.outputTokens / 1000000) * pricing.output +
+            (usage.cacheCreationTokens / 1000000) * pricing.cacheCreation +
+            (usage.cacheReadTokens / 1000000) * pricing.cacheRead
+    };
+}
+/**
+ * Create an empty token usage object
+ */
+export function createEmptyTokenUsage() {
+    return {
+        inputTokens: 0,
+        cacheCreationTokens: 0,
+        cacheReadTokens: 0,
+        outputTokens: 0,
+        totalTokens: 0
+    };
+}

package/dist/server/statistics/utils.js

@@ -0,0 +1,33 @@
+import { createEmptyTokenUsage } from './tokenUsage.js';
+/**
+ * Format date to YYYY-MM-DD in local timezone
+ */
+function formatDateLocal(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * Fill in missing dates in daily statistics with zero values
+ * @param dailyMap Map of date string to usage data
+ * @param startDate Start date for the range (inclusive)
+ * @param endDate End date for the range (inclusive)
+ * @returns Array of daily stats with all dates filled in
+ */
+export function fillMissingDates(dailyMap, startDate, endDate) {
+    const daily = [];
+    const currentDate = new Date(startDate);
+    const end = new Date(endDate);
+    while (currentDate <= end) {
+        const dateKey = formatDateLocal(currentDate);
+        const data = dailyMap.get(dateKey);
+        daily.push({
+            date: dateKey,
+            tokenUsage: data?.tokenUsage || createEmptyTokenUsage(),
+            sessionCount: data?.sessionIds.size || 0
+        });
+        currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return daily;
+}

package/dist/server/utils/sessionWindows.js

@@ -0,0 +1,159 @@
+import { SESSION_WINDOW_DURATION_MS, EXPIRING_SOON_THRESHOLD_MINUTES, PLAN_LIMITS } from '../claude/config.js';
+import { extractTokenUsage } from './tokenStats.js';
+/**
+ * Calculate 5-hour session windows from messages
+ * Claude Code uses a 5-hour rolling window starting from the first message
+ */
+export function calculateSessionWindows(sessionsData, planConfig) {
+    const windows = [];
+    const windowMap = new Map();
+    // Collect all messages with timestamps
+    const allMessages = [];
+    for (const session of sessionsData) {
+        for (const message of session.messages) {
+            if (message.timestamp) {
+                allMessages.push({ message, sessionId: session.sessionId });
+            }
+        }
+    }
+    // Sort messages by timestamp
+    allMessages.sort((a, b) => new Date(a.message.timestamp).getTime() - new Date(b.message.timestamp).getTime());
+    if (allMessages.length === 0) {
+        return [];
+    }
+    // Group messages into 5-hour windows
+    for (const { message, sessionId } of allMessages) {
+        const messageTime = new Date(message.timestamp);
+        let assignedToWindow = false;
+        // Check existing windows to see if this message fits
+        for (const [windowId, windowData] of windowMap.entries()) {
+            const windowEnd = new Date(windowData.startTime.getTime() + SESSION_WINDOW_DURATION_MS);
+            if (messageTime >= windowData.startTime && messageTime < windowEnd) {
+                windowData.messages.push(message);
+                windowData.sessionIds.add(sessionId);
+                assignedToWindow = true;
+                break;
+            }
+        }
+        // Create new window if message doesn't fit in existing windows
+        if (!assignedToWindow) {
+            const windowId = `window-${messageTime.getTime()}`;
+            windowMap.set(windowId, {
+                messages: [message],
+                sessionIds: new Set([sessionId]),
+                startTime: messageTime
+            });
+        }
+    }
+    // Convert window map to SessionWindow objects
+    const now = new Date();
+    for (const [windowId, windowData] of windowMap.entries()) {
+        const startTime = windowData.startTime;
+        const endTime = new Date(startTime.getTime() + SESSION_WINDOW_DURATION_MS);
+        // Calculate token usage
+        let totalTokens = 0;
+        for (const message of windowData.messages) {
+            const tokenData = extractTokenUsage(message);
+            if (tokenData) {
+                totalTokens += tokenData.usage.totalTokens;
+            }
+        }
+        // Get first and last message times
+        const messageTimes = windowData.messages.map(m => new Date(m.timestamp).getTime());
+        const firstMessageTime = new Date(Math.min(...messageTimes));
+        const lastMessageTime = new Date(Math.max(...messageTimes));
+        // Calculate status
+        const remainingMs = endTime.getTime() - now.getTime();
+        const remainingMinutes = Math.floor(remainingMs / (1000 * 60));
+        const isCurrentWindow = now >= startTime && now < endTime;
+        let status = 'expired';
+        if (isCurrentWindow) {
+            if (remainingMinutes <= EXPIRING_SOON_THRESHOLD_MINUTES) {
+                status = 'expiring_soon';
+            }
+            else {
+                status = 'active';
+            }
+        }
+        const tokenLimit = planConfig.limits.tokensPerSession;
+        const percentage = (totalTokens / tokenLimit) * 100;
+        windows.push({
+            id: windowId,
+            startTime: startTime.toISOString(),
+            endTime: endTime.toISOString(),
+            firstMessageTime: firstMessageTime.toISOString(),
+            lastMessageTime: lastMessageTime.toISOString(),
+            tokenUsage: {
+                used: totalTokens,
+                limit: tokenLimit,
+                percentage: Math.min(percentage, 100)
+            },
+            messageCount: windowData.messages.length,
+            status,
+            sessionIds: Array.from(windowData.sessionIds),
+            remainingMinutes: isCurrentWindow ? Math.max(remainingMinutes, 0) : undefined,
+            isCurrentWindow
+        });
+    }
+    // Sort windows by start time (most recent first)
+    windows.sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime());
+    return windows;
+}
+/**
+ * Get the currently active session window
+ */
+export function getActiveWindow(windows) {
+    return windows.find(w => w.isCurrentWindow) || null;
+}
+/**
+ * Detect user's plan based on historical usage (P90 method)
+ * Analyzes the 90th percentile of token usage across sessions
+ */
+export function detectUserPlan(windows) {
+    if (windows.length === 0) {
+        return {
+            name: 'Custom',
+            limits: PLAN_LIMITS.Custom,
+            autoDetected: false
+        };
+    }
+    // Get token usage from all windows
+    const tokenUsages = windows.map(w => w.tokenUsage.used).sort((a, b) => a - b);
+    // Calculate P90 (90th percentile)
+    const p90Index = Math.floor(tokenUsages.length * 0.9);
+    const p90Value = tokenUsages[p90Index] || 0;
+    // Match to known plans with tolerance
+    const tolerance = 0.15; // 15% tolerance
+    for (const [planName, limits] of Object.entries(PLAN_LIMITS)) {
+        const planLimit = limits.tokensPerSession;
+        const lowerBound = planLimit * (1 - tolerance);
+        const upperBound = planLimit * (1 + tolerance);
+        if (p90Value >= lowerBound && p90Value <= upperBound) {
+            const confidence = 100 - Math.abs((p90Value - planLimit) / planLimit) * 100;
+            return {
+                name: planName,
+                limits,
+                autoDetected: true,
+                confidence: Math.round(confidence)
+            };
+        }
+    }
+    // If no match, use Custom plan with P90 as limit
+    return {
+        name: 'Custom',
+        limits: {
+            tokensPerSession: Math.round(p90Value * 1.1), // Add 10% buffer
+            messagesPerSession: undefined
+        },
+        autoDetected: true,
+        confidence: 50
+    };
+}
+/**
+ * Load plan configuration from settings or auto-detect
+ */
+export function loadPlanConfig(windows) {
+    // TODO: Load from user settings/config file if exists
+    // For now, use auto-detection
+    return detectUserPlan(windows);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-session-viewer",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "bin": {
     "claude-session-viewer": "./bin/cli.js"
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "dev": "node bin/dev.js",
-    "dev:server": "tsx watch src/server/index.ts",
+    "dev:server": "tsx watch --clear-screen=false src/server/index.ts",
     "dev:client": "vite",
     "build:server": "tsc -p tsconfig.server.json",
     "build:client": "vite build --outDir dist/client",

package/dist/client/assets/index-DvK33tag.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.right-0{right:0}.top-0{top:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-96{height:24rem}.h-full{height:100%}.h-screen{height:100vh}.w-1{width:.25rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-12{width:3rem}.w-16{width:4rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-5\/6{width:83.333333%}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-col-resize{cursor:col-resize}.resize{resize:both}.auto-rows-fr{grid-auto-rows:minmax(0,1fr)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-400{--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-blue-500\/20{border-color:#3b82f633}.border-cyan-500\/20{border-color:#06b6d433}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-green-500\/20{border-color:#22c55e33}.border-orange-500\/20{border-color:#f9731633}.border-pink-500\/20{border-color:#ec489933}.border-purple-500\/20{border-color:#a855f733}.border-transparent{border-color:transparent}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:#3b82f61a}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-900{--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.bg-blue-900\/50{background-color:#1e3a8a80}.bg-cyan-500{--tw-bg-opacity: 1;background-color:rgb(6 182 212 / var(--tw-bg-opacity, 1))}.bg-cyan-500\/10{background-color:#06b6d41a}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/30{background-color:#1f29374d}.bg-gray-800\/50{background-color:#1f293780}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-900\/50{background-color:#11182780}.bg-gray-900\/70{background-color:#111827b3}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/10{background-color:#22c55e1a}.bg-green-900{--tw-bg-opacity: 1;background-color:rgb(20 83 45 / var(--tw-bg-opacity, 1))}.bg-green-900\/30{background-color:#14532d4d}.bg-green-900\/50{background-color:#14532d80}.bg-orange-500{--tw-bg-opacity: 1;background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1))}.bg-orange-500\/10{background-color:#f973161a}.bg-pink-500{--tw-bg-opacity: 1;background-color:rgb(236 72 153 / var(--tw-bg-opacity, 1))}.bg-pink-500\/10{background-color:#ec48991a}.bg-purple-500{--tw-bg-opacity: 1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-purple-500\/10{background-color:#a855f71a}.bg-purple-700{--tw-bg-opacity: 1;background-color:rgb(126 34 206 / var(--tw-bg-opacity, 1))}.bg-purple-900\/50{background-color:#581c8780}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-yellow-900\/30{background-color:#713f124d}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-green-500{--tw-gradient-to: #22c55e var(--tw-gradient-to-position)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-14{padding-left:3.5rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-tight{line-height:1.25}.text-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-cyan-400{--tw-text-opacity: 1;color:rgb(34 211 238 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-200{--tw-text-opacity: 1;color:rgb(187 247 208 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-purple-100{--tw-text-opacity: 1;color:rgb(243 232 255 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.\@container{container-type:inline-size}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{scrollbar-width:thin;scrollbar-color:#4B5563 #1F2937}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:#1f2937}*::-webkit-scrollbar-thumb{background-color:#4b5563;border-radius:4px}*::-webkit-scrollbar-thumb:hover{background-color:#6b7280}.last\:border-b-0:last-child{border-bottom-width:0px}.last\:pb-0:last-child{padding-bottom:0}.hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-700\/50:hover{background-color:#37415180}.hover\:bg-gray-800:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-purple-600:hover{--tw-bg-opacity: 1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.hover\:text-blue-400:hover{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.hover\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.hover\:text-gray-300:hover{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}@container (min-width: 300px){.\@\[300px\]\:inline{display:inline}.\@\[300px\]\:hidden{display:none}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}