feat: add CompactionEventsDialog and SubagentSpawnsDialog with tests
Implements two Radar drilldown dialog components following the AddAccountDialog pattern (Radix UI Dialog + tRPC lazy query + skeleton loading). CompactionEventsDialog shows a simple table of compaction events; SubagentSpawnsDialog adds expandable rows that reveal the full Agent tool prompt. Shared DrilldownDialogProps type in types.ts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas May
111
apps/web/src/components/radar/CompactionEventsDialog.tsx
Normal file
111
apps/web/src/components/radar/CompactionEventsDialog.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
function formatTimestamp(ts: string): string {
|
||||
const date = new Date(ts)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffSecs = Math.floor(diffMs / 1000)
|
||||
const diffMins = Math.floor(diffSecs / 60)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
let relative: string
|
||||
if (diffSecs < 60) {
|
||||
relative = `${diffSecs}s ago`
|
||||
} else if (diffMins < 60) {
|
||||
relative = `${diffMins}m ago`
|
||||
} else if (diffHours < 24) {
|
||||
relative = `${diffHours}h ago`
|
||||
} else {
|
||||
relative = `${diffDays}d ago`
|
||||
}
|
||||
|
||||
const absolute = date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
|
||||
return `${relative} · ${absolute}`
|
||||
}
|
||||
|
||||
export function CompactionEventsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
agentId,
|
||||
agentName,
|
||||
}: DrilldownDialogProps) {
|
||||
const { data, isLoading } = trpc.agent.getCompactionEvents.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{`Compaction Events — ${agentName}`}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Each row is a context-window compaction — the model's history was summarized to
|
||||
free up space. Frequent compactions indicate a long-running agent with large context.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[70vh] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i}>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Skeleton className="w-40 h-4" />
|
||||
<Skeleton className="w-12 h-4" />
|
||||
</div>
|
||||
{i < 2 && <div className="border-b" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">No data found</p>
|
||||
) : (
|
||||
<>
|
||||
{data.length >= 200 && (
|
||||
<p className="text-sm text-muted-foreground mb-2">Showing first 200 instances.</p>
|
||||
)}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 pr-4 font-medium">Timestamp</th>
|
||||
<th className="text-center py-2 font-medium">Session #</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((row, i) => (
|
||||
<tr key={i} className="border-b last:border-0">
|
||||
<td className="py-2 pr-4 text-muted-foreground">
|
||||
{formatTimestamp(row.timestamp)}
|
||||
</td>
|
||||
<td className="py-2 text-center">{row.sessionNumber}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
143
apps/web/src/components/radar/SubagentSpawnsDialog.tsx
Normal file
143
apps/web/src/components/radar/SubagentSpawnsDialog.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { useState, useEffect, Fragment } from 'react'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
function formatTimestamp(ts: string): string {
|
||||
const date = new Date(ts)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffSecs = Math.floor(diffMs / 1000)
|
||||
const diffMins = Math.floor(diffSecs / 60)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
let relative: string
|
||||
if (diffSecs < 60) {
|
||||
relative = `${diffSecs}s ago`
|
||||
} else if (diffMins < 60) {
|
||||
relative = `${diffMins}m ago`
|
||||
} else if (diffHours < 24) {
|
||||
relative = `${diffHours}h ago`
|
||||
} else {
|
||||
relative = `${diffDays}d ago`
|
||||
}
|
||||
|
||||
const absolute = date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
|
||||
return `${relative} · ${absolute}`
|
||||
}
|
||||
|
||||
export function SubagentSpawnsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
agentId,
|
||||
agentName,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading } = trpc.agent.getSubagentSpawns.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setExpandedIndex(null)
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{`Subagent Spawns — ${agentName}`}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Each row is an Agent tool call — a subagent spawned by this agent. The description and
|
||||
first 200 characters of the prompt are shown.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[70vh] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i}>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Skeleton className="w-32 h-4" />
|
||||
<Skeleton className="w-48 h-4" />
|
||||
<Skeleton className="w-64 h-4" />
|
||||
</div>
|
||||
{i < 2 && <div className="border-b" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">No data found</p>
|
||||
) : (
|
||||
<>
|
||||
{data.length >= 200 && (
|
||||
<p className="text-sm text-muted-foreground mb-2">Showing first 200 instances.</p>
|
||||
)}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 pr-4 font-medium">Timestamp</th>
|
||||
<th className="text-left py-2 pr-4 font-medium">Description</th>
|
||||
<th className="text-left py-2 font-medium">Prompt Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((row, i) => (
|
||||
<Fragment key={i}>
|
||||
<tr
|
||||
className="border-b last:border-0 cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => setExpandedIndex(i === expandedIndex ? null : i)}
|
||||
>
|
||||
<td className="py-2 pr-4 text-muted-foreground whitespace-nowrap">
|
||||
{formatTimestamp(row.timestamp)}
|
||||
</td>
|
||||
<td className="py-2 pr-4">{row.description}</td>
|
||||
<td className="py-2">
|
||||
{row.promptPreview}
|
||||
{row.fullPrompt.length > row.promptPreview.length && (
|
||||
<span>…</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
{expandedIndex === i && (
|
||||
<tr>
|
||||
<td colSpan={3} className="pb-2">
|
||||
<div
|
||||
className="bg-muted/30 p-3 rounded"
|
||||
style={{ maxHeight: '300px', overflowY: 'auto', fontFamily: 'monospace' }}
|
||||
>
|
||||
<pre>{row.fullPrompt}</pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getCompactionEvents: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
import { CompactionEventsDialog } from '../CompactionEventsDialog'
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
onOpenChange: vi.fn(),
|
||||
agentId: 'agent-123',
|
||||
agentName: 'test-agent',
|
||||
}
|
||||
|
||||
describe('CompactionEventsDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||
})
|
||||
|
||||
it('does not render dialog content when open=false', () => {
|
||||
render(<CompactionEventsDialog {...defaultProps} open={false} />)
|
||||
expect(screen.queryByText(/Compaction Events/)).toBeNull()
|
||||
})
|
||||
|
||||
it('shows skeleton rows when loading', () => {
|
||||
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
const skeletons = document.querySelectorAll('.animate-pulse')
|
||||
expect(skeletons.length).toBeGreaterThanOrEqual(3)
|
||||
expect(screen.queryByRole('table')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows "No data found" when data is empty', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false }
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders data rows correctly', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [{ timestamp: '2026-03-06T10:00:00.000Z', sessionNumber: 3 }],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('3')).toBeInTheDocument()
|
||||
// Timestamp includes year 2026
|
||||
expect(screen.getByText(/2026/)).toBeInTheDocument()
|
||||
expect(screen.queryByText('Showing first 200 instances.')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows 200-instance note when data length is 200', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: Array(200).fill({ timestamp: '2026-03-06T10:00:00.000Z', sessionNumber: 1 }),
|
||||
isLoading: false,
|
||||
}
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders dialog title and subtitle', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false }
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText(/Compaction Events — test-agent/)).toBeInTheDocument()
|
||||
expect(screen.getByText(/context-window compaction/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,127 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getSubagentSpawns: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
import { SubagentSpawnsDialog } from '../SubagentSpawnsDialog'
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
onOpenChange: vi.fn(),
|
||||
agentId: 'agent-123',
|
||||
agentName: 'test-agent',
|
||||
}
|
||||
|
||||
describe('SubagentSpawnsDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||
})
|
||||
|
||||
it('does not render dialog content when open=false', () => {
|
||||
render(<SubagentSpawnsDialog {...defaultProps} open={false} />)
|
||||
expect(screen.queryByText(/Subagent Spawns/)).toBeNull()
|
||||
})
|
||||
|
||||
it('shows skeleton rows when loading', () => {
|
||||
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
const skeletons = document.querySelectorAll('.animate-pulse')
|
||||
expect(skeletons.length).toBeGreaterThanOrEqual(3)
|
||||
expect(screen.queryByRole('table')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows "No data found" when data is empty', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false }
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders data rows correctly', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
description: 'my task',
|
||||
promptPreview: 'hello',
|
||||
fullPrompt: 'hello world full',
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('my task')).toBeInTheDocument()
|
||||
expect(screen.getByText('hello')).toBeInTheDocument()
|
||||
expect(screen.queryByText('hello world full')).toBeNull()
|
||||
})
|
||||
|
||||
it('expands and collapses row on click', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
description: 'my task',
|
||||
promptPreview: 'hello',
|
||||
fullPrompt: 'hello world full',
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
|
||||
// Click the row — should expand
|
||||
fireEvent.click(screen.getByText('my task').closest('tr')!)
|
||||
expect(screen.getByText('hello world full')).toBeInTheDocument()
|
||||
|
||||
// Click again — should collapse
|
||||
fireEvent.click(screen.getByText('my task').closest('tr')!)
|
||||
expect(screen.queryByText('hello world full')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows ellipsis suffix when fullPrompt is longer than promptPreview', () => {
|
||||
const fullPrompt = 'A'.repeat(201)
|
||||
const promptPreview = fullPrompt.slice(0, 200)
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
description: 'truncated task',
|
||||
promptPreview,
|
||||
fullPrompt,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('…')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows 200-instance note when data length is 200', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: Array(200).fill({
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
description: 'task',
|
||||
promptPreview: 'prompt',
|
||||
fullPrompt: 'full prompt',
|
||||
}),
|
||||
isLoading: false,
|
||||
}
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
6
apps/web/src/components/radar/types.ts
Normal file
6
apps/web/src/components/radar/types.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface DrilldownDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
agentId: string
|
||||
agentName: string
|
||||
}
|
||||
Reference in New Issue
Block a user