Skip to content

Commit be1787d

Browse files
tikazyqtikazyq
authored
Merge pull request #48 from codervisor/copilot/move-to-phase-3
Phase 3: UI/UX Reorganization - Transform to AI Agent Observability Platform
2 parents 0c684c9 + a095adb commit be1787d

24 files changed

Lines changed: 587 additions & 51 deletions

File tree

‎apps/web/app/dashboard/page.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* Main Agent Observability Dashboard
3+
*
4+
* Primary landing page showing real-time agent activity across all projects
5+
*/
6+
7+
import { Suspense } from 'react';
8+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
9+
import { Skeleton } from '@/components/ui/skeleton';
10+
import { Activity, Zap, Clock, TrendingUp } from 'lucide-react';
11+
12+
export default function DashboardPage() {
13+
return (
14+
<div className="container mx-auto py-6 space-y-6">
15+
{/* Header */}
16+
<div className="flex items-center justify-between">
17+
<div>
18+
<h1 className="text-3xl font-bold tracking-tight">Agent Activity Dashboard</h1>
19+
<p className="text-muted-foreground mt-2">
20+
Monitor AI coding agents in real-time across all your projects
21+
</p>
22+
</div>
23+
</div>
24+
25+
{/* Overview Stats */}
26+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
27+
<Card>
28+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
29+
<CardTitle className="text-sm font-medium">Active Sessions</CardTitle>
30+
<Activity className="h-4 w-4 text-muted-foreground" />
31+
</CardHeader>
32+
<CardContent>
33+
<div className="text-2xl font-bold">0</div>
34+
<p className="text-xs text-muted-foreground">No active agent sessions</p>
35+
</CardContent>
36+
</Card>
37+
38+
<Card>
39+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
40+
<CardTitle className="text-sm font-medium">Total Events Today</CardTitle>
41+
<Zap className="h-4 w-4 text-muted-foreground" />
42+
</CardHeader>
43+
<CardContent>
44+
<div className="text-2xl font-bold">0</div>
45+
<p className="text-xs text-muted-foreground">Agent events logged</p>
46+
</CardContent>
47+
</Card>
48+
49+
<Card>
50+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
51+
<CardTitle className="text-sm font-medium">Avg Session Duration</CardTitle>
52+
<Clock className="h-4 w-4 text-muted-foreground" />
53+
</CardHeader>
54+
<CardContent>
55+
<div className="text-2xl font-bold">-</div>
56+
<p className="text-xs text-muted-foreground">No sessions yet</p>
57+
</CardContent>
58+
</Card>
59+
60+
<Card>
61+
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
62+
<CardTitle className="text-sm font-medium">Events Per Minute</CardTitle>
63+
<TrendingUp className="h-4 w-4 text-muted-foreground" />
64+
</CardHeader>
65+
<CardContent>
66+
<div className="text-2xl font-bold">0</div>
67+
<p className="text-xs text-muted-foreground">Current rate</p>
68+
</CardContent>
69+
</Card>
70+
</div>
71+
72+
{/* Recent Activity */}
73+
<Card>
74+
<CardHeader>
75+
<CardTitle>Recent Agent Activity</CardTitle>
76+
</CardHeader>
77+
<CardContent>
78+
<div className="flex flex-col items-center justify-center py-12 text-center">
79+
<div className="text-muted-foreground mb-4 text-4xl">🤖</div>
80+
<h3 className="text-lg font-semibold mb-2">No Agent Activity Yet</h3>
81+
<p className="text-sm text-muted-foreground max-w-md">
82+
Start monitoring your AI coding agents by configuring collectors and starting agent sessions.
83+
Visit the Settings page to set up your first collector.
84+
</p>
85+
</div>
86+
</CardContent>
87+
</Card>
88+
89+
{/* Active Sessions */}
90+
<Card>
91+
<CardHeader>
92+
<CardTitle>Live Agent Sessions</CardTitle>
93+
</CardHeader>
94+
<CardContent>
95+
<Suspense fallback={<Skeleton className="h-32 w-full" />}>
96+
<div className="text-sm text-muted-foreground text-center py-8">
97+
No active sessions
98+
</div>
99+
</Suspense>
100+
</CardContent>
101+
</Card>
102+
</div>
103+
);
104+
}

‎apps/web/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { AppLayout } from '@/components/layout/app-layout';
66
import { headers } from 'next/headers';
77

88
export const metadata: Metadata = {
9-
title: 'Devlog Management',
10-
description: 'Development log tracking and management dashboard',
9+
title: 'Devlog - AI Agent Observability Platform',
10+
description: 'Monitor and analyze AI coding agent activities in real-time',
1111
icons: {
1212
icon: '/devlog-logo.svg',
1313
},

‎apps/web/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { redirect } from 'next/navigation';
44
export const dynamic = 'force-dynamic';
55

66
export default function Home() {
7-
// Redirect to the projects page as the main entry point
8-
redirect('/projects');
7+
// Redirect to the dashboard as the main entry point (agent observability)
8+
redirect('/dashboard');
99
}

‎apps/web/app/projects/[name]/agent-sessions/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
*/
66

77
import { Suspense } from 'react';
8-
import { SessionList } from '@/components/feature/agent-sessions/session-list';
9-
import { ActiveSessionsPanel } from '@/components/feature/agent-sessions/active-sessions-panel';
8+
import { SessionList } from '@/components/agent-observability/agent-sessions/session-list';
9+
import { ActiveSessionsPanel } from '@/components/agent-observability/agent-sessions/active-sessions-panel';
1010

1111
export default function AgentSessionsPage({ params }: { params: { name: string } }) {
1212
return (

‎apps/web/app/projects/[name]/devlogs/[id]/devlog-details-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { toast } from 'sonner';
1010
import { DevlogEntry } from '@codervisor/devlog-core';
1111
import { useProjectName } from '@/components/provider/project-provider';
1212
import { useDevlogId } from '@/components/provider/devlog-provider';
13-
import { DevlogDetails } from '@/components/feature/devlog/devlog-details';
13+
import { DevlogDetails } from '@/components/project-management/devlog/devlog-details';
1414

1515
export function DevlogDetailsPage() {
1616
const projectName = useProjectName();

‎apps/web/app/projects/[name]/devlogs/devlog-list-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useDevlogEvents } from '@/hooks/use-realtime';
66
import { DevlogEntry, DevlogId } from '@codervisor/devlog-core';
77
import { useRouter } from 'next/navigation';
88
import { useProjectName } from '@/components/provider/project-provider';
9-
import { DevlogList } from '@/components/feature/devlog/devlog-list';
9+
import { DevlogList } from '@/components/project-management/devlog/devlog-list';
1010

1111
export function DevlogListPage() {
1212
const projectName = useProjectName();

‎apps/web/app/projects/[name]/project-details-page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import React, { useEffect } from 'react';
4-
import { Dashboard } from '@/components/feature/dashboard/dashboard';
4+
import { Dashboard } from '@/components/project-management/dashboard/dashboard';
55
import { useDevlogStore, useProjectStore } from '@/stores';
66
import { useDevlogEvents } from '@/hooks/use-realtime';
77
import { DevlogEntry } from '@codervisor/devlog-core';

‎apps/web/app/sessions/page.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* Global Agent Sessions Page
3+
*
4+
* Displays all AI agent sessions across all projects with filtering and search
5+
*/
6+
7+
import { Suspense } from 'react';
8+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
9+
import { Skeleton } from '@/components/ui/skeleton';
10+
11+
export default function SessionsPage() {
12+
return (
13+
<div className="container mx-auto py-6 space-y-6">
14+
{/* Header */}
15+
<div className="flex items-center justify-between">
16+
<div>
17+
<h1 className="text-3xl font-bold tracking-tight">Agent Sessions</h1>
18+
<p className="text-muted-foreground mt-2">
19+
View and manage AI coding agent sessions across all projects
20+
</p>
21+
</div>
22+
</div>
23+
24+
{/* Active Sessions */}
25+
<Card>
26+
<CardHeader>
27+
<CardTitle>Active Sessions</CardTitle>
28+
</CardHeader>
29+
<CardContent>
30+
<Suspense fallback={<Skeleton className="h-32 w-full" />}>
31+
<div className="flex flex-col items-center justify-center py-12 text-center">
32+
<div className="text-muted-foreground mb-4 text-4xl">⚡</div>
33+
<h3 className="text-lg font-semibold mb-2">No Active Sessions</h3>
34+
<p className="text-sm text-muted-foreground max-w-md">
35+
No agents are currently running. Start a coding session with your AI agent to see it here.
36+
</p>
37+
</div>
38+
</Suspense>
39+
</CardContent>
40+
</Card>
41+
42+
{/* Recent Sessions */}
43+
<Card>
44+
<CardHeader>
45+
<CardTitle>Recent Sessions</CardTitle>
46+
</CardHeader>
47+
<CardContent>
48+
<Suspense fallback={<Skeleton className="h-96 w-full" />}>
49+
<div className="flex flex-col items-center justify-center py-12 text-center">
50+
<div className="text-muted-foreground mb-4 text-4xl">📊</div>
51+
<h3 className="text-lg font-semibold mb-2">No Session History</h3>
52+
<p className="text-sm text-muted-foreground max-w-md">
53+
Once you start using AI coding agents, their sessions will appear here for review and analysis.
54+
</p>
55+
</div>
56+
</Suspense>
57+
</CardContent>
58+
</Card>
59+
</div>
60+
);
61+
}

apps/web/components/feature/agent-sessions/active-sessions-panel.tsx renamed to apps/web/components/agent-observability/agent-sessions/active-sessions-panel.tsx

File renamed without changes.

‎apps/web/components/agent-observability/agent-sessions/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { SessionList } from './session-list';
2+
export { SessionCard } from './session-card';
3+
export { ActiveSessionsPanel } from './active-sessions-panel';

0 commit comments

Comments
 (0)