Merge branch 'cw/radar-phase-drilldown-dialog-components' into cw-merge-1772824266700
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
167
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
167
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
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 { Badge } from '@/components/ui/badge'
|
||||||
|
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 InterAgentMessagesDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
agentId,
|
||||||
|
agentName,
|
||||||
|
}: DrilldownDialogProps) {
|
||||||
|
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||||
|
|
||||||
|
const { data, isLoading } = trpc.conversation.getByFromAgent.useQuery(
|
||||||
|
{ agentId },
|
||||||
|
{ enabled: open }
|
||||||
|
)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) setExpandedIndex(null)
|
||||||
|
}, [open])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{`Inter-Agent Messages — ${agentName}`}</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Each row is a conversation this agent initiated with another agent. Click a row to see
|
||||||
|
the full question and answer.
|
||||||
|
</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-28 h-4" />
|
||||||
|
<Skeleton className="w-32 h-4" />
|
||||||
|
<Skeleton className="w-20 h-5" />
|
||||||
|
</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">Target Agent</th>
|
||||||
|
<th className="text-left py-2 font-medium">Status</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.toAgentName}</td>
|
||||||
|
<td className="py-2">
|
||||||
|
{row.status === 'answered' ? (
|
||||||
|
<Badge variant="secondary">answered</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline" className="text-muted-foreground">
|
||||||
|
pending
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{expandedIndex === i && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={3} className="pb-2">
|
||||||
|
<div className="bg-muted/10 p-3 rounded mt-1 mb-1 space-y-2">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-wide mb-1">
|
||||||
|
Question
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
style={{ maxHeight: '200px', overflowY: 'auto' }}
|
||||||
|
className="bg-muted/50 p-2 rounded font-mono text-sm whitespace-pre-wrap"
|
||||||
|
>
|
||||||
|
{row.question}
|
||||||
|
</div>
|
||||||
|
{row.status === 'answered' ? (
|
||||||
|
<>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-wide mb-1">
|
||||||
|
Answer
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
style={{ maxHeight: '200px', overflowY: 'auto' }}
|
||||||
|
className="bg-muted/50 p-2 rounded font-mono text-sm whitespace-pre-wrap"
|
||||||
|
>
|
||||||
|
{row.answer}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<p className="text-muted-foreground italic text-sm">No answer yet</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
159
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
159
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
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}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function truncate(text: string, max: number): string {
|
||||||
|
return text.length > max ? text.slice(0, max) + '…' : text
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuestionsAskedDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
agentId,
|
||||||
|
agentName,
|
||||||
|
}: DrilldownDialogProps) {
|
||||||
|
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||||
|
|
||||||
|
const { data, isLoading } = trpc.agent.getQuestionsAsked.useQuery(
|
||||||
|
{ agentId },
|
||||||
|
{ enabled: open }
|
||||||
|
)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) setExpandedIndex(null)
|
||||||
|
}, [open])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{`Questions Asked — ${agentName}`}</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Each row is a question this agent sent to the user via the AskUserQuestion tool.
|
||||||
|
</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-28 h-4" />
|
||||||
|
<Skeleton className="w-20 h-4" />
|
||||||
|
<Skeleton className="w-36 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"># Questions</th>
|
||||||
|
<th className="text-left py-2 font-medium">First Question Header</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.map((row, i) => {
|
||||||
|
const n = row.questions.length
|
||||||
|
const countLabel = `${n} question${n !== 1 ? 's' : ''}`
|
||||||
|
const firstHeader = truncate(row.questions[0]?.header ?? '', 40)
|
||||||
|
return (
|
||||||
|
<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">{countLabel}</td>
|
||||||
|
<td className="py-2">{firstHeader}</td>
|
||||||
|
</tr>
|
||||||
|
{expandedIndex === i && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={3} className="pb-2">
|
||||||
|
<div className="bg-muted/30 p-3 rounded mt-1 mb-1">
|
||||||
|
<ol className="space-y-3 list-decimal list-inside">
|
||||||
|
{row.questions.map((q, qi) => (
|
||||||
|
<li key={qi}>
|
||||||
|
<span className="font-bold bg-muted px-1 py-0.5 rounded text-sm mr-2">
|
||||||
|
{q.header}
|
||||||
|
</span>
|
||||||
|
{q.question}
|
||||||
|
<ul className="ml-4 mt-1 space-y-0.5">
|
||||||
|
{q.options.map((opt, oi) => (
|
||||||
|
<li key={oi} className="text-sm text-muted-foreground">
|
||||||
|
{`• ${opt.label} — ${opt.description}`}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</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,172 @@
|
|||||||
|
// @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: {
|
||||||
|
conversation: {
|
||||||
|
getByFromAgent: {
|
||||||
|
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
import { InterAgentMessagesDialog } from '../InterAgentMessagesDialog'
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
open: true,
|
||||||
|
onOpenChange: vi.fn(),
|
||||||
|
agentId: 'agent-123',
|
||||||
|
agentName: 'test-agent',
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('InterAgentMessagesDialog', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks()
|
||||||
|
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not render dialog content when open=false', () => {
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} open={false} />)
|
||||||
|
expect(screen.queryByText(/Inter-Agent Messages/)).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows skeleton rows when loading', () => {
|
||||||
|
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||||
|
render(<InterAgentMessagesDialog {...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(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders data rows for answered conversation', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'c1',
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
toAgentName: 'target-agent',
|
||||||
|
toAgentId: 'agent-2',
|
||||||
|
question: 'What is the export path?',
|
||||||
|
answer: 'It is src/api/index.ts',
|
||||||
|
status: 'answered',
|
||||||
|
taskId: null,
|
||||||
|
phaseId: null,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('target-agent')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('answered')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('What is the export path?')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('expands answered row to show question and answer', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'c1',
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
toAgentName: 'target-agent',
|
||||||
|
toAgentId: 'agent-2',
|
||||||
|
question: 'What is the export path?',
|
||||||
|
answer: 'It is src/api/index.ts',
|
||||||
|
status: 'answered',
|
||||||
|
taskId: null,
|
||||||
|
phaseId: null,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('target-agent').closest('tr')!)
|
||||||
|
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('It is src/api/index.ts')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('No answer yet')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('expands pending row to show question and "No answer yet"', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'c2',
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
toAgentName: 'target-agent',
|
||||||
|
toAgentId: 'agent-2',
|
||||||
|
question: 'What is the export path?',
|
||||||
|
answer: null,
|
||||||
|
status: 'pending',
|
||||||
|
taskId: null,
|
||||||
|
phaseId: null,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('target-agent').closest('tr')!)
|
||||||
|
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('No answer yet')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('It is src/api/index.ts')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('collapses row when clicked again', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
id: 'c1',
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
toAgentName: 'target-agent',
|
||||||
|
toAgentId: 'agent-2',
|
||||||
|
question: 'What is the export path?',
|
||||||
|
answer: 'It is src/api/index.ts',
|
||||||
|
status: 'answered',
|
||||||
|
taskId: null,
|
||||||
|
phaseId: null,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
|
||||||
|
const row = screen.getByText('target-agent').closest('tr')!
|
||||||
|
fireEvent.click(row)
|
||||||
|
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||||
|
fireEvent.click(row)
|
||||||
|
expect(screen.queryByText('What is the export path?')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows 200-instance note when data length is 200', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: Array(200).fill({
|
||||||
|
id: 'c1',
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
toAgentName: 'target-agent',
|
||||||
|
toAgentId: 'agent-2',
|
||||||
|
question: 'What is the export path?',
|
||||||
|
answer: null,
|
||||||
|
status: 'pending',
|
||||||
|
taskId: null,
|
||||||
|
phaseId: null,
|
||||||
|
}),
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
// @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: {
|
||||||
|
getQuestionsAsked: {
|
||||||
|
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
import { QuestionsAskedDialog } from '../QuestionsAskedDialog'
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
open: true,
|
||||||
|
onOpenChange: vi.fn(),
|
||||||
|
agentId: 'agent-123',
|
||||||
|
agentName: 'test-agent',
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('QuestionsAskedDialog', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks()
|
||||||
|
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not render dialog content when open=false', () => {
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} open={false} />)
|
||||||
|
expect(screen.queryByText(/Questions Asked/)).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows skeleton rows when loading', () => {
|
||||||
|
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||||
|
render(<QuestionsAskedDialog {...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(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders data rows correctly', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
questions: [
|
||||||
|
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||||
|
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('2 questions')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('Method')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('Pick a method')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('expands row to show all sub-questions on click', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
questions: [
|
||||||
|
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||||
|
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('2 questions').closest('tr')!)
|
||||||
|
expect(screen.getByText('Pick a method')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('Pick a strategy')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('• A — Option A')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('collapses row when clicked again', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
questions: [
|
||||||
|
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||||
|
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
|
||||||
|
const row = screen.getByText('2 questions').closest('tr')!
|
||||||
|
fireEvent.click(row)
|
||||||
|
expect(screen.getByText('Pick a method')).toBeInTheDocument()
|
||||||
|
fireEvent.click(row)
|
||||||
|
expect(screen.queryByText('Pick a method')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows 200-instance note when data length is 200', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: Array(200).fill({
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
questions: [
|
||||||
|
{ question: 'Pick a method', header: 'Method', options: [] },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows singular "1 question" for single-question rows', () => {
|
||||||
|
mockUseQueryReturn = {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
timestamp: '2026-03-06T10:00:00.000Z',
|
||||||
|
questions: [
|
||||||
|
{ question: 'Only one', header: 'Single', options: [] },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isLoading: false,
|
||||||
|
}
|
||||||
|
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||||
|
expect(screen.getByText('1 question')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('1 questions')).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -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