VIBN Frontend for Coolify deployment
This commit is contained in:
209
app/[workspace]/project/[projectId]/sessions/page.tsx
Normal file
209
app/[workspace]/project/[projectId]/sessions/page.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Activity, Clock, DollarSign, MessageSquare } from "lucide-react";
|
||||
import type { Session, DashboardStats } from "@/lib/types";
|
||||
import { PageHeader } from "@/components/layout/page-header";
|
||||
|
||||
async function getSessions(projectId: string): Promise<Session[]> {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/sessions?projectId=${projectId}&limit=20`,
|
||||
{ cache: 'no-store' }
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch sessions');
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching sessions:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getStats(projectId: string): Promise<DashboardStats> {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/stats?projectId=${projectId}`,
|
||||
{ cache: 'no-store' }
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch stats');
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
return {
|
||||
totalSessions: 0,
|
||||
totalCost: 0,
|
||||
totalTokens: 0,
|
||||
totalFeatures: 0,
|
||||
completedFeatures: 0,
|
||||
totalDuration: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default async function SessionsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ workspace: string; projectId: string }>;
|
||||
}) {
|
||||
const { workspace, projectId } = await params;
|
||||
const [sessions, stats] = await Promise.all([
|
||||
getSessions(projectId),
|
||||
getStats(projectId),
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
projectId={projectId}
|
||||
projectName="Project"
|
||||
projectEmoji="📦"
|
||||
pageName="Sessions"
|
||||
/>
|
||||
<div className="flex h-full flex-col overflow-auto">
|
||||
{/* Stats Section */}
|
||||
<div className="border-b bg-card/50 px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Sessions</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Track all your AI coding sessions
|
||||
</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Activity className="mr-2 h-4 w-4" />
|
||||
New Session
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Sessions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">{stats.totalSessions}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Duration
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
{Math.round(stats.totalDuration / 60)}h
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Cost
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
${stats.totalCost.toFixed(2)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sessions List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Sessions</CardTitle>
|
||||
<CardDescription>
|
||||
Your AI coding activity with conversation history
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sessions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<div className="mb-4 rounded-full bg-muted p-3">
|
||||
<Activity className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2">No sessions yet</h3>
|
||||
<p className="text-sm text-center text-muted-foreground max-w-sm">
|
||||
Start coding with AI and your sessions will appear here
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className="flex items-center justify-between rounded-lg border p-4 hover:bg-accent/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-full bg-primary/10 p-2">
|
||||
<Activity className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium">
|
||||
{session.summary || `Session ${session.session_id.substring(0, 8)}...`}
|
||||
</h3>
|
||||
<div className="mt-1 flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{session.duration_minutes} min
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{session.message_count} messages
|
||||
</span>
|
||||
{session.estimated_cost_usd && (
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="h-3 w-3" />
|
||||
${session.estimated_cost_usd.toFixed(3)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
{session.primary_ai_model && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.primary_ai_model}
|
||||
</Badge>
|
||||
)}
|
||||
{session.ide_name && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.ide_name}
|
||||
</Badge>
|
||||
)}
|
||||
{session.github_branch && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{session.github_branch}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
View Details
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
208
app/[workspace]/project/[projectId]/sessions/sessions/page.tsx
Normal file
208
app/[workspace]/project/[projectId]/sessions/sessions/page.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Activity, Clock, DollarSign, MessageSquare } from "lucide-react";
|
||||
import type { Session, DashboardStats } from "@/lib/types";
|
||||
import { PageHeader } from "@/components/layout/page-header";
|
||||
|
||||
async function getSessions(projectId: string): Promise<Session[]> {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://localhost:3000/api/sessions?projectId=${projectId}&limit=20`,
|
||||
{ cache: 'no-store' }
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch sessions');
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching sessions:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function getStats(projectId: string): Promise<DashboardStats> {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`http://localhost:3000/api/stats?projectId=${projectId}`,
|
||||
{ cache: 'no-store' }
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch stats');
|
||||
return res.json();
|
||||
} catch (error) {
|
||||
return {
|
||||
totalSessions: 0,
|
||||
totalCost: 0,
|
||||
totalTokens: 0,
|
||||
totalFeatures: 0,
|
||||
completedFeatures: 0,
|
||||
totalDuration: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default async function SessionsPage({
|
||||
params,
|
||||
}: {
|
||||
params: { projectId: string };
|
||||
}) {
|
||||
const [sessions, stats] = await Promise.all([
|
||||
getSessions(params.projectId),
|
||||
getStats(params.projectId),
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
projectId={params.projectId}
|
||||
projectName="AI Proxy"
|
||||
projectEmoji="🤖"
|
||||
pageName="Sessions"
|
||||
/>
|
||||
<div className="flex h-full flex-col overflow-auto">
|
||||
{/* Stats Section */}
|
||||
<div className="border-b bg-card/50 px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Sessions</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Track all your AI coding sessions
|
||||
</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Activity className="mr-2 h-4 w-4" />
|
||||
New Session
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Sessions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">{stats.totalSessions}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Duration
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
{Math.round(stats.totalDuration / 60)}h
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Cost
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
${stats.totalCost.toFixed(2)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Sessions List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Sessions</CardTitle>
|
||||
<CardDescription>
|
||||
Your AI coding activity with conversation history
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sessions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<div className="mb-4 rounded-full bg-muted p-3">
|
||||
<Activity className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2">No sessions yet</h3>
|
||||
<p className="text-sm text-center text-muted-foreground max-w-sm">
|
||||
Start coding with AI and your sessions will appear here
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
className="flex items-center justify-between rounded-lg border p-4 hover:bg-accent/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-full bg-primary/10 p-2">
|
||||
<Activity className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium">
|
||||
{session.summary || `Session ${session.session_id.substring(0, 8)}...`}
|
||||
</h3>
|
||||
<div className="mt-1 flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{session.duration_minutes} min
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{session.message_count} messages
|
||||
</span>
|
||||
{session.estimated_cost_usd && (
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="h-3 w-3" />
|
||||
${session.estimated_cost_usd.toFixed(3)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
{session.primary_ai_model && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.primary_ai_model}
|
||||
</Badge>
|
||||
)}
|
||||
{session.ide_name && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.ide_name}
|
||||
</Badge>
|
||||
)}
|
||||
{session.github_branch && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{session.github_branch}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
View Details
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user