Building a Conversation Log Browser with Next.js and shadcn/ui

import { MongoClient, Db } from 'mongodb';

const uri = process.env.MONGO_URI || 'mongodb://localhost:27017';
const dbName = process.env.MONGO_DB || 'claude_logs';

let cachedClient: MongoClient | null = null;
let cachedDb: Db | null = null;

export async function getDatabase(): Promise<Db> {
  if (cachedDb) {
    return cachedDb;
  }

  if (!cachedClient) {
    cachedClient = await MongoClient.connect(uri, {
      maxPoolSize: 10,
    });
  }

  cachedDb = cachedClient.db(dbName);
  return cachedDb;
}

export async function getConversationsCollection() {
  const db = await getDatabase();
  return db.collection('conversations');
}

import { NextRequest, NextResponse } from 'next/server';
import { ObjectId, Filter, Document } from 'mongodb';
import { z } from 'zod';
import { getConversationsCollection } from '@/lib/mongodb';

const querySchema = z.object({
  projectId: z.string().min(1),
  sessionId: z.string().optional(),
  search: z.string().optional(),
  startDate: z.string().optional(),
  endDate: z.string().optional(),
  cursor: z.string().optional(),
  limit: z.coerce.number().min(1).max(100).default(50),
  sortOrder: z.enum(['asc', 'desc']).default('desc'),
});

export async function GET(request: NextRequest) {
  const searchParams = Object.fromEntries(request.nextUrl.searchParams);
  const parsed = querySchema.safeParse(searchParams);

  if (!parsed.success) {
    return NextResponse.json(
      { error: 'Invalid parameters', details: parsed.error.issues },
      { status: 400 }
    );
  }

  const { projectId, sessionId, search, startDate, endDate, cursor, limit, sortOrder } = parsed.data;

  try {
    const collection = await getConversationsCollection();
    const query: Filter<Document> = { projectId };

    // Build query filters...
    if (sessionId) query.sessionId = sessionId;
    if (search) query.$text = { $search: search };

    // Date range filtering
    if (startDate || endDate) {
      query.timestamp = { $ne: null, $exists: true };
      if (startDate) query.timestamp.$gte = startDate;
      if (endDate) query.timestamp.$lte = endDate + 'T23:59:59.999Z';
    }

    // Cursor-based pagination (details below)
    // ...

    const docs = await collection
      .find(query)
      .sort({ timestamp: sortOrder === 'desc' ? -1 : 1, _id: sortOrder === 'desc' ? -1 : 1 })
      .limit(limit + 1)
      .toArray();

    const hasMore = docs.length > limit;
    const data = hasMore ? docs.slice(0, -1) : docs;

    return NextResponse.json({
      data,
      pagination: { nextCursor, hasMore, total },
    });
  } catch (error) {
    console.error('Failed to fetch conversations:', error);
    return NextResponse.json({ error: 'Failed to fetch conversations' }, { status: 500 });
  }
}

const pipeline = [
  { $match: matchStage },
  {
    $group: {
      _id: {
        period: { $dateToString: { format: dateFormat, date: { $toDate: '$timestamp' } } },
        type: '$type',
      },
      count: { $sum: 1 },
    },
  },
  { $sort: { '_id.period': -1 } },
  { $limit: periodCount * 10 },
];

const results = await collection.aggregate(pipeline).toArray();

'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export function FilterPanel({ onExport, chartFilterActive, onResetChartFilter }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [projects, setProjects] = useState<string[]>([]);
  const projectId = searchParams.get('projectId') || '';
  const sessionId = searchParams.get('sessionId') || '';

  // Update URL when filter changes
  const updateFilter = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (value) {
      params.set(key, value);
    } else {
      params.delete(key);
    }
    // Clear dependent filters
    if (key === 'projectId') {
      params.delete('sessionId');
    }
    router.push(`?${params.toString()}`);
  };

  return (
    <Card className="mb-6">
      <CardContent className="pt-6 space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Select
            value={projectId}
            onValueChange={(value) => updateFilter('projectId', value)}
          >
            <SelectTrigger>
              <SelectValue placeholder="Select project" />
            </SelectTrigger>
            <SelectContent>
              {projects.map((p) => (
                <SelectItem key={p} value={p}>
                  {getProjectDisplayName(p)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {/* More filters... */}
        </div>
      </CardContent>
    </Card>
  );
}

'use client';

import { useInfiniteQuery } from '@tanstack/react-query';

export function useConversations(filters: Omit<FilterParams, 'cursor' | 'limit'>) {
  return useInfiniteQuery({
    queryKey: ['conversations', filters],
    queryFn: ({ pageParam }) =>
      fetchConversations({ ...filters, cursor: pageParam, limit: 50 }),
    getNextPageParam: (lastPage) => lastPage.pagination.nextCursor,
    initialPageParam: undefined,
    enabled: !!filters.projectId,
  });
}

export function ConversationList({
  conversations,
  hasMore,
  total,
  onLoadMore,
  isLoading,
  sortOrder,
  onSortChange,
}) {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <div className="flex gap-6">
      <div className={cn('flex-1', selectedConversation && 'max-w-[60%]')}>
        <Card>
          <CardHeader>
            <CardTitle>
              Showing {conversations.length} of {total} conversations
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <ScrollArea className="h-[600px]">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Type</TableHead>
                    <TableHead>
                      <Button variant="ghost" onClick={toggleSort}>
                        Timestamp
                        {sortOrder === 'desc' ? <ArrowDown /> : <ArrowUp />}
                      </Button>
                    </TableHead>
                    <TableHead>Preview</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {conversations.map((conv) => (
                    <TableRow
                      key={conv._id.toString()}
                      onClick={() => setSelectedId(conv._id.toString())}
                      className={cn('cursor-pointer', selectedId === conv._id.toString() && 'bg-muted')}
                    >
                      <TableCell><Badge>{conv.type}</Badge></TableCell>
                      <TableCell>{formatTimestamp(conv.timestamp)}</TableCell>
                      <TableCell className="truncate">{conv.message?.slice(0, 60)}...</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </ScrollArea>

            {hasMore && (
              <div className="p-4 border-t text-center">
                <Button variant="outline" onClick={onLoadMore} disabled={isLoading}>
                  {isLoading ? <Loader2 className="animate-spin" /> : 'Load More'}
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {selectedConversation && (
        <ConversationDetail
          conversation={selectedConversation}
          onClose={() => setSelectedId(null)}
        />
      )}
    </div>
  );
}

'use client';

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import { ChartContainer, ChartConfig, ChartTooltip, ChartLegend } from '@/components/ui/chart';

const chartConfig: ChartConfig = {
  user: {
    label: 'User',
    color: 'hsl(221, 83%, 53%)',
  },
  assistant: {
    label: 'Assistant',
    color: 'hsl(142, 71%, 45%)',
  },
};

export function SessionChart({ projectId, sessionId, onBarClick }) {
  const [granularity, setGranularity] = useState<TimeGranularity>('day');
  const { data: statsData, isLoading } = useStats({
    projectId,
    sessionId,
    granularity,
    periodCount: 14,
  });

  const handleBarClick = (data) => {
    if (onBarClick && data.payload?.periodStart) {
      onBarClick(data.payload.periodStart, granularity);
    }
  };

  return (
    <Card className="mb-6">
      <CardHeader>
        <CardTitle>Message Activity</CardTitle>
        <div className="flex gap-2">
          <Select value={granularity} onValueChange={setGranularity}>
            <SelectTrigger className="w-[100px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="hour">Hourly</SelectItem>
              <SelectItem value="day">Daily</SelectItem>
              <SelectItem value="week">Weekly</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[250px] w-full">
          <BarChart data={statsData?.data}>
            <CartesianGrid vertical={false} />
            <XAxis dataKey="period" tickLine={false} />
            <YAxis tickLine={false} />
            <ChartTooltip />
            <ChartLegend />
            <Bar
              dataKey="user"
              stackId="messages"
              fill="var(--color-user)"
              onClick={handleBarClick}
              style={{ cursor: 'pointer' }}
            />
            <Bar
              dataKey="assistant"
              stackId="messages"
              fill="var(--color-assistant)"
              radius={[4, 4, 0, 0]}
              onClick={handleBarClick}
            />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}

const handleChartBarClick = (periodStart: string, granularity: TimeGranularity) => {
  const { startDate, endDate } = periodToDateRange(periodStart, granularity);
  const params = new URLSearchParams(searchParams.toString());
  params.set('startDate', startDate);
  params.set('endDate', endDate);
  params.set('chartFilter', 'true'); // Visual indicator
  router.push(`?${params.toString()}`);
};

export function periodToDateRange(periodStart: string, granularity: TimeGranularity): DateRange {
  switch (granularity) {
    case 'hour':
      const date = parseISO(periodStart);
      const dayStr = format(date, 'yyyy-MM-dd');
      return { startDate: dayStr, endDate: dayStr };
    case 'day':
      return { startDate: periodStart, endDate: periodStart };
    case 'week':
      return parseISOWeekToDateRange(periodStart);
  }
}

import { config } from "dotenv";
import path from "path";

config({ path: path.resolve(__dirname, "../.env") });

const nextConfig: NextConfig = {};
export default nextConfig;