Merge pull request #45 from codervisor/copilot/implement-phase-1-2

Implement AI Agent Observability Phase 1-2: Foundation Infrastructure & Session Management UI

Author: tikazyq

apps/web/app/api/projects/[name]/agent-sessions/route.ts

@@ -0,0 +1,57 @@
+/**
+ * API endpoint for agent sessions
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { AgentSessionService } from '@codervisor/devlog-core/server';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  try {
+    const projectName = params.name;
+    const searchParams = request.nextUrl.searchParams;
+    
+    // Parse query parameters
+    const agentId = searchParams.get('agentId') || undefined;
+    const outcome = searchParams.get('outcome') || undefined;
+    const startTimeFrom = searchParams.get('startTimeFrom') || undefined;
+    const startTimeTo = searchParams.get('startTimeTo') || undefined;
+    const limit = parseInt(searchParams.get('limit') || '100');
+    const offset = parseInt(searchParams.get('offset') || '0');
+
+    // Get project ID from name (simplified - in production, query from database)
+    const projectId = 1; // TODO: Query project by name
+
+    const sessionService = AgentSessionService.getInstance(projectId);
+    await sessionService.initialize();
+
+    const filter: any = { projectId, limit, offset };
+    if (agentId) filter.agentId = agentId;
+    if (outcome) filter.outcome = outcome;
+    if (startTimeFrom) filter.startTimeFrom = new Date(startTimeFrom);
+    if (startTimeTo) filter.startTimeTo = new Date(startTimeTo);
+
+    const sessions = await sessionService.listSessions(filter);
+
+    return NextResponse.json({
+      success: true,
+      data: sessions,
+      pagination: {
+        limit,
+        offset,
+        total: sessions.length,
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching agent sessions:', error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch agent sessions',
+      },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Agent Sessions Dashboard Page
+ * 
+ * Displays all AI agent sessions for a project with filtering and search
+ */
+
+import { Suspense } from 'react';
+import { SessionList } from '@/components/feature/agent-sessions/session-list';
+import { ActiveSessionsPanel } from '@/components/feature/agent-sessions/active-sessions-panel';
+
+export default function AgentSessionsPage({ params }: { params: { name: string } }) {
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Agent Sessions</h1>
+          <p className="text-muted-foreground mt-2">
+            Monitor and analyze AI coding agent activities for {params.name}
+          </p>
+        </div>
+      </div>
+
+      {/* Active Sessions Panel */}
+      <Suspense fallback={<div className="animate-pulse h-32 bg-gray-100 rounded-lg" />}>
+        <ActiveSessionsPanel projectName={params.name} />
+      </Suspense>
+
+      {/* Session History */}
+      <div className="mt-8">
+        <h2 className="text-2xl font-semibold mb-4">Session History</h2>
+        <Suspense fallback={<div className="animate-pulse h-96 bg-gray-100 rounded-lg" />}>
+          <SessionList projectName={params.name} />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,109 @@
+/**
+ * Active Sessions Panel Component
+ * 
+ * Displays currently active agent sessions with real-time updates
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { AgentSession } from '@codervisor/devlog-core';
+import { Activity } from 'lucide-react';
+
+interface ActiveSessionsPanelProps {
+  projectName: string;
+}
+
+export function ActiveSessionsPanel({ projectName }: ActiveSessionsPanelProps) {
+  const [activeSessions, setActiveSessions] = useState<AgentSession[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchActiveSessions() {
+      try {
+        const response = await fetch(`/api/projects/${projectName}/agent-sessions?outcome=`);
+        const data = await response.json();
+        
+        if (data.success) {
+          // Filter for sessions without endTime (active sessions)
+          const active = (data.data || []).filter((s: AgentSession) => !s.endTime);
+          setActiveSessions(active);
+        }
+      } catch (error) {
+        console.error('Failed to fetch active sessions:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchActiveSessions();
+    
+    // Refresh every 5 seconds
+    const interval = setInterval(fetchActiveSessions, 5000);
+    return () => clearInterval(interval);
+  }, [projectName]);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="h-5 w-5 animate-pulse" />
+            Active Sessions
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="animate-pulse h-20 bg-gray-100 rounded" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Activity className="h-5 w-5" />
+          Active Sessions
+          {activeSessions.length > 0 && (
+            <Badge variant="secondary" className="ml-2">
+              {activeSessions.length}
+            </Badge>
+          )}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {activeSessions.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No active sessions</p>
+            <p className="text-sm mt-1">AI agent sessions will appear here when they start</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {activeSessions.map((session) => (
+              <div
+                key={session.id}
+                className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse" />
+                  <div>
+                    <div className="font-medium">{session.agentId}</div>
+                    <div className="text-sm text-muted-foreground">
+                      {session.context.objective || 'In progress...'}
+                    </div>
+                  </div>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {session.metrics.eventsCount || 0} events
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/components/feature/agent-sessions/session-card.tsx

@@ -0,0 +1,105 @@
+/**
+ * Session Card Component
+ * 
+ * Displays a single agent session with key metrics
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { AgentSession } from '@codervisor/devlog-core';
+import { formatDistanceToNow } from 'date-fns';
+
+interface SessionCardProps {
+  session: AgentSession;
+  projectName: string;
+}
+
+const outcomeColors = {
+  success: 'bg-green-100 text-green-800 border-green-200',
+  partial: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  failure: 'bg-red-100 text-red-800 border-red-200',
+  abandoned: 'bg-gray-100 text-gray-800 border-gray-200',
+};
+
+const agentNames = {
+  'github-copilot': 'GitHub Copilot',
+  'claude-code': 'Claude Code',
+  'cursor': 'Cursor',
+  'gemini-cli': 'Gemini CLI',
+  'cline': 'Cline',
+  'aider': 'Aider',
+  'mcp-generic': 'MCP Generic',
+};
+
+export function SessionCard({ session, projectName }: SessionCardProps) {
+  const startTime = new Date(session.startTime);
+  const timeAgo = formatDistanceToNow(startTime, { addSuffix: true });
+  const duration = session.duration ? `${Math.floor(session.duration / 60)}m ${session.duration % 60}s` : 'In progress';
+  
+  return (
+    <Link href={`/projects/${projectName}/agent-sessions/${session.id}`}>
+      <Card className="hover:shadow-md transition-shadow cursor-pointer">
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <CardTitle className="text-lg">
+                {agentNames[session.agentId as keyof typeof agentNames] || session.agentId}
+              </CardTitle>
+              <CardDescription>
+                Started {timeAgo} • {duration}
+              </CardDescription>
+            </div>
+            <div className="flex gap-2">
+              {session.outcome && (
+                <Badge 
+                  variant="outline" 
+                  className={outcomeColors[session.outcome as keyof typeof outcomeColors]}
+                >
+                  {session.outcome}
+                </Badge>
+              )}
+              {session.qualityScore !== undefined && (
+                <Badge variant="outline" className="bg-blue-100 text-blue-800 border-blue-200">
+                  Quality: {Math.round(session.qualityScore)}%
+                </Badge>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+            <div>
+              <div className="text-muted-foreground">Events</div>
+              <div className="font-semibold">{session.metrics.eventsCount || 0}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Files Modified</div>
+              <div className="font-semibold">{session.metrics.filesModified || 0}</div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Lines Changed</div>
+              <div className="font-semibold">
+                +{session.metrics.linesAdded || 0} -{session.metrics.linesRemoved || 0}
+              </div>
+            </div>
+            <div>
+              <div className="text-muted-foreground">Tokens Used</div>
+              <div className="font-semibold">
+                {(session.metrics.tokensUsed || 0).toLocaleString()}
+              </div>
+            </div>
+          </div>
+          
+          {session.context.objective && (
+            <div className="mt-4 text-sm text-muted-foreground">
+              <span className="font-medium">Objective:</span> {session.context.objective}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}