280 lines
11 KiB
TypeScript
280 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { auth, db } from '@/lib/firebase/config';
|
|
import { collection, query, where, getDocs, orderBy, limit } from 'firebase/firestore';
|
|
import { RefreshCw, CheckCircle2, AlertCircle, Link as LinkIcon } from 'lucide-react';
|
|
|
|
interface SessionDebugInfo {
|
|
id: string;
|
|
projectId?: string;
|
|
workspacePath?: string;
|
|
workspaceName?: string;
|
|
needsProjectAssociation: boolean;
|
|
model?: string;
|
|
tokensUsed?: number;
|
|
cost?: number;
|
|
createdAt: any;
|
|
}
|
|
|
|
export default function DebugSessionsPage() {
|
|
const [sessions, setSessions] = useState<SessionDebugInfo[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [userId, setUserId] = useState<string>('');
|
|
|
|
const loadSessions = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const user = auth.currentUser;
|
|
if (!user) {
|
|
setError('Not authenticated');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
setUserId(user.uid);
|
|
|
|
const sessionsRef = collection(db, 'sessions');
|
|
// Remove orderBy to avoid index issues - just get recent sessions
|
|
const sessionsQuery = query(
|
|
sessionsRef,
|
|
where('userId', '==', user.uid),
|
|
limit(50)
|
|
);
|
|
const snapshot = await getDocs(sessionsQuery);
|
|
|
|
const sessionsData = snapshot.docs.map(doc => {
|
|
const data = doc.data();
|
|
return {
|
|
id: doc.id,
|
|
projectId: data.projectId || null,
|
|
workspacePath: data.workspacePath || null,
|
|
workspaceName: data.workspaceName || null,
|
|
needsProjectAssociation: data.needsProjectAssociation || false,
|
|
model: data.model,
|
|
tokensUsed: data.tokensUsed,
|
|
cost: data.cost,
|
|
createdAt: data.createdAt,
|
|
};
|
|
});
|
|
|
|
console.log('DEBUG: All sessions from Firebase:', sessionsData);
|
|
setSessions(sessionsData);
|
|
} catch (err: any) {
|
|
console.error('Error loading sessions:', err);
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
const unsubscribe = auth.onAuthStateChanged((user) => {
|
|
if (!mounted) return;
|
|
|
|
if (user) {
|
|
loadSessions();
|
|
} else {
|
|
setError('Please sign in');
|
|
setLoading(false);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
mounted = false;
|
|
unsubscribe();
|
|
};
|
|
}, [loadSessions]);
|
|
|
|
const unassociatedSessions = sessions.filter(s => s.needsProjectAssociation);
|
|
const associatedSessions = sessions.filter(s => !s.needsProjectAssociation);
|
|
|
|
// Group unassociated sessions by workspace path
|
|
const sessionsByWorkspace = unassociatedSessions.reduce((acc, session) => {
|
|
const path = session.workspacePath || 'No workspace path';
|
|
if (!acc[path]) acc[path] = [];
|
|
acc[path].push(session);
|
|
return acc;
|
|
}, {} as Record<string, SessionDebugInfo[]>);
|
|
|
|
return (
|
|
<div className="min-h-screen p-8 bg-background">
|
|
<div className="max-w-7xl mx-auto space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">🔍 Sessions Debug Page</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
View all your chat sessions and their workspace paths
|
|
</p>
|
|
{userId && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
User ID: <code className="bg-muted px-2 py-1 rounded">{userId}</code>
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button onClick={loadSessions} disabled={loading}>
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{error && (
|
|
<Card className="border-red-500">
|
|
<CardContent className="pt-6">
|
|
<p className="text-red-600">Error: {error}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{loading && !error && (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<p className="text-center text-muted-foreground">Loading sessions...</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{!loading && !error && (
|
|
<>
|
|
{/* Summary */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Summary</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Total Sessions</p>
|
|
<p className="text-2xl font-bold">{sessions.length}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Linked to Projects</p>
|
|
<p className="text-2xl font-bold text-green-600">{associatedSessions.length}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Unassociated (Available)</p>
|
|
<p className="text-2xl font-bold text-orange-600">{unassociatedSessions.length}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Unassociated Sessions by Workspace */}
|
|
{unassociatedSessions.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<AlertCircle className="h-5 w-5 text-orange-600" />
|
|
Unassociated Sessions (Available to Link)
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{Object.entries(sessionsByWorkspace).map(([path, workspaceSessions]) => {
|
|
const folderName = path !== 'No workspace path' ? path.split('/').pop() : null;
|
|
return (
|
|
<div key={path} className="border rounded-lg p-4">
|
|
<div className="mb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold">📁 {folderName || 'Unknown folder'}</p>
|
|
<code className="text-xs text-muted-foreground break-all">{path}</code>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-2xl font-bold">{workspaceSessions.length}</p>
|
|
<p className="text-xs text-muted-foreground">sessions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{workspaceSessions.slice(0, 3).map((session) => (
|
|
<div key={session.id} className="text-xs bg-muted/50 p-2 rounded">
|
|
<div className="flex justify-between">
|
|
<span className="font-mono">{session.id.substring(0, 12)}...</span>
|
|
<span>{session.model || 'unknown'}</span>
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
{session.tokensUsed?.toLocaleString()} tokens • ${session.cost?.toFixed(4)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{workspaceSessions.length > 3 && (
|
|
<p className="text-xs text-muted-foreground">
|
|
+ {workspaceSessions.length - 3} more sessions...
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 p-3 bg-blue-50 dark:bg-blue-950/20 rounded text-sm">
|
|
<p className="text-blue-600 dark:text-blue-400 font-medium mb-1">
|
|
💡 To link these sessions:
|
|
</p>
|
|
<ol className="text-xs text-muted-foreground space-y-1 ml-4 list-decimal">
|
|
<li>Create a project with workspace path: <code className="bg-muted px-1 rounded">{path}</code></li>
|
|
<li>OR connect GitHub to a project that already has this workspace path set</li>
|
|
</ol>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Folder name: <code className="bg-muted px-1 rounded">{folderName}</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Associated Sessions */}
|
|
{associatedSessions.length > 0 && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<CheckCircle2 className="h-5 w-5 text-green-600" />
|
|
Linked Sessions
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground mb-3">
|
|
These sessions are already linked to projects
|
|
</p>
|
|
<div className="space-y-2">
|
|
{associatedSessions.slice(0, 5).map((session) => (
|
|
<div key={session.id} className="flex items-center justify-between p-2 border rounded text-sm">
|
|
<div>
|
|
<code className="text-xs">{session.id.substring(0, 12)}...</code>
|
|
<p className="text-xs text-muted-foreground">
|
|
{session.workspaceName || 'No workspace'}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<LinkIcon className="h-4 w-4 text-green-600" />
|
|
<p className="text-xs text-muted-foreground">
|
|
Project: {session.projectId?.substring(0, 8)}...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{sessions.length === 0 && (
|
|
<Card>
|
|
<CardContent className="pt-6 text-center">
|
|
<p className="text-muted-foreground">No sessions found. Start coding with Cursor to track sessions!</p>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|