Merge branch 'cw/radar' into cw-merge-1772825408137
This commit is contained in:
Lukas May
@@ -20,4 +20,18 @@ export interface ConversationRepository {
|
||||
findById(id: string): Promise<Conversation | null>;
|
||||
findPendingForAgent(toAgentId: string): Promise<Conversation[]>;
|
||||
answer(id: string, answer: string): Promise<Conversation | null>;
|
||||
|
||||
/**
|
||||
* Count conversations grouped by fromAgentId for a batch of agent IDs.
|
||||
* Returns only agents that have at least one conversation (count > 0).
|
||||
* Used by listForRadar to compute messagesCount without N+1 queries.
|
||||
*/
|
||||
countByFromAgentIds(agentIds: string[]): Promise<{ agentId: string; count: number }[]>;
|
||||
|
||||
/**
|
||||
* Find all conversations initiated by a given agent, ordered by createdAt ascending.
|
||||
* Used by conversation.getByFromAgent drilldown procedure.
|
||||
* Cap at 200 results.
|
||||
*/
|
||||
findByFromAgentId(agentId: string): Promise<Conversation[]>;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Implements ConversationRepository interface using Drizzle ORM.
|
||||
*/
|
||||
|
||||
import { eq, and, asc } from 'drizzle-orm';
|
||||
import { eq, and, asc, count, inArray } from 'drizzle-orm';
|
||||
import { nanoid } from 'nanoid';
|
||||
import type { DrizzleDatabase } from '../../index.js';
|
||||
import { conversations, type Conversation } from '../../schema.js';
|
||||
@@ -64,4 +64,26 @@ export class DrizzleConversationRepository implements ConversationRepository {
|
||||
.where(eq(conversations.id, id));
|
||||
return this.findById(id);
|
||||
}
|
||||
|
||||
async countByFromAgentIds(agentIds: string[]): Promise<{ agentId: string; count: number }[]> {
|
||||
if (agentIds.length === 0) return [];
|
||||
const rows = await this.db
|
||||
.select({
|
||||
agentId: conversations.fromAgentId,
|
||||
count: count(),
|
||||
})
|
||||
.from(conversations)
|
||||
.where(inArray(conversations.fromAgentId, agentIds))
|
||||
.groupBy(conversations.fromAgentId);
|
||||
return rows.map(r => ({ agentId: r.agentId, count: Number(r.count) }));
|
||||
}
|
||||
|
||||
async findByFromAgentId(agentId: string): Promise<Conversation[]> {
|
||||
return this.db
|
||||
.select()
|
||||
.from(conversations)
|
||||
.where(eq(conversations.fromAgentId, agentId))
|
||||
.orderBy(asc(conversations.createdAt))
|
||||
.limit(200);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* Implements LogChunkRepository interface using Drizzle ORM.
|
||||
*/
|
||||
|
||||
import { eq, asc, max } from 'drizzle-orm';
|
||||
import { eq, asc, max, inArray } from 'drizzle-orm';
|
||||
import { nanoid } from 'nanoid';
|
||||
import type { DrizzleDatabase } from '../../index.js';
|
||||
import { agentLogChunks } from '../../schema.js';
|
||||
@@ -41,6 +41,20 @@ export class DrizzleLogChunkRepository implements LogChunkRepository {
|
||||
.orderBy(asc(agentLogChunks.createdAt));
|
||||
}
|
||||
|
||||
async findByAgentIds(agentIds: string[]): Promise<{ agentId: string; content: string; sessionNumber: number; createdAt: Date }[]> {
|
||||
if (agentIds.length === 0) return [];
|
||||
return this.db
|
||||
.select({
|
||||
agentId: agentLogChunks.agentId,
|
||||
content: agentLogChunks.content,
|
||||
sessionNumber: agentLogChunks.sessionNumber,
|
||||
createdAt: agentLogChunks.createdAt,
|
||||
})
|
||||
.from(agentLogChunks)
|
||||
.where(inArray(agentLogChunks.agentId, agentIds))
|
||||
.orderBy(asc(agentLogChunks.createdAt));
|
||||
}
|
||||
|
||||
async deleteByAgentId(agentId: string): Promise<void> {
|
||||
await this.db
|
||||
.delete(agentLogChunks)
|
||||
|
||||
@@ -17,6 +17,13 @@ export interface LogChunkRepository {
|
||||
|
||||
findByAgentId(agentId: string): Promise<Pick<AgentLogChunk, 'content' | 'sessionNumber' | 'createdAt'>[]>;
|
||||
|
||||
/**
|
||||
* Batch-fetch chunks for multiple agent IDs in a single query.
|
||||
* Returns chunks ordered by createdAt ascending.
|
||||
* agentId field is included so results can be grouped by agent.
|
||||
*/
|
||||
findByAgentIds(agentIds: string[]): Promise<{ agentId: string; content: string; sessionNumber: number; createdAt: Date }[]>;
|
||||
|
||||
deleteByAgentId(agentId: string): Promise<void>;
|
||||
|
||||
getSessionCount(agentId: string): Promise<number>;
|
||||
|
||||
@@ -88,6 +88,24 @@ class InMemoryConversationRepository implements ConversationRepository {
|
||||
return updated;
|
||||
}
|
||||
|
||||
async countByFromAgentIds(agentIds: string[]): Promise<{ agentId: string; count: number }[]> {
|
||||
if (agentIds.length === 0) return [];
|
||||
const counts = new Map<string, number>();
|
||||
for (const conv of this.store.values()) {
|
||||
if (agentIds.includes(conv.fromAgentId)) {
|
||||
counts.set(conv.fromAgentId, (counts.get(conv.fromAgentId) ?? 0) + 1);
|
||||
}
|
||||
}
|
||||
return [...counts.entries()].map(([agentId, count]) => ({ agentId, count }));
|
||||
}
|
||||
|
||||
async findByFromAgentId(agentId: string): Promise<Conversation[]> {
|
||||
return [...this.store.values()]
|
||||
.filter((c) => c.fromAgentId === agentId)
|
||||
.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
|
||||
.slice(0, 200);
|
||||
}
|
||||
|
||||
/** Test helper — return all conversations */
|
||||
getAll(): Conversation[] {
|
||||
return [...this.store.values()];
|
||||
|
||||
476
apps/server/test/unit/radar-procedures.test.ts
Normal file
476
apps/server/test/unit/radar-procedures.test.ts
Normal file
@@ -0,0 +1,476 @@
|
||||
/**
|
||||
* Unit tests for Radar tRPC procedures.
|
||||
*
|
||||
* Tests listForRadar, getCompactionEvents, getSubagentSpawns,
|
||||
* getQuestionsAsked, and conversation.getByFromAgent.
|
||||
*
|
||||
* Uses in-memory Drizzle DB + inline MockAgentManager for isolation.
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { router, publicProcedure, createCallerFactory } from '../../trpc/trpc.js';
|
||||
import { agentProcedures } from '../../trpc/routers/agent.js';
|
||||
import { conversationProcedures } from '../../trpc/routers/conversation.js';
|
||||
import type { TRPCContext } from '../../trpc/context.js';
|
||||
import type { AgentManager, AgentInfo, PendingQuestions } from '../../agent/types.js';
|
||||
import { createTestDatabase } from '../../db/repositories/drizzle/test-helpers.js';
|
||||
import {
|
||||
DrizzleAgentRepository,
|
||||
DrizzleLogChunkRepository,
|
||||
DrizzleConversationRepository,
|
||||
DrizzleInitiativeRepository,
|
||||
DrizzleTaskRepository,
|
||||
} from '../../db/repositories/drizzle/index.js';
|
||||
|
||||
// =============================================================================
|
||||
// MockAgentManager
|
||||
// =============================================================================
|
||||
|
||||
class MockAgentManager implements AgentManager {
|
||||
private agents: AgentInfo[] = [];
|
||||
private questions: Map<string, PendingQuestions> = new Map();
|
||||
|
||||
addAgent(info: Partial<AgentInfo> & Pick<AgentInfo, 'id' | 'name' | 'status'>): void {
|
||||
this.agents.push({
|
||||
taskId: null,
|
||||
initiativeId: null,
|
||||
sessionId: null,
|
||||
worktreeId: info.id,
|
||||
mode: 'execute',
|
||||
provider: 'claude',
|
||||
accountId: null,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
userDismissedAt: null,
|
||||
exitCode: null,
|
||||
prompt: null,
|
||||
...info,
|
||||
});
|
||||
}
|
||||
|
||||
setQuestions(agentId: string, questions: PendingQuestions): void {
|
||||
this.questions.set(agentId, questions);
|
||||
}
|
||||
|
||||
async list(): Promise<AgentInfo[]> {
|
||||
return [...this.agents];
|
||||
}
|
||||
|
||||
async getPendingQuestions(agentId: string): Promise<PendingQuestions | null> {
|
||||
return this.questions.get(agentId) ?? null;
|
||||
}
|
||||
|
||||
async spawn(): Promise<AgentInfo> { throw new Error('Not implemented'); }
|
||||
async stop(): Promise<void> { throw new Error('Not implemented'); }
|
||||
async get(): Promise<AgentInfo | null> { return null; }
|
||||
async getByName(): Promise<AgentInfo | null> { return null; }
|
||||
async resume(): Promise<void> { throw new Error('Not implemented'); }
|
||||
async getResult() { return null; }
|
||||
async delete(): Promise<void> { throw new Error('Not implemented'); }
|
||||
async dismiss(): Promise<void> { throw new Error('Not implemented'); }
|
||||
async resumeForConversation(): Promise<boolean> { return false; }
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Test routers
|
||||
// =============================================================================
|
||||
|
||||
const agentRouter = router({ ...agentProcedures(publicProcedure) });
|
||||
const conversationRouter = router({ ...conversationProcedures(publicProcedure) });
|
||||
|
||||
const createAgentCaller = createCallerFactory(agentRouter);
|
||||
const createConversationCaller = createCallerFactory(conversationRouter);
|
||||
|
||||
// =============================================================================
|
||||
// Helpers
|
||||
// =============================================================================
|
||||
|
||||
function makeCtx(agentManager: MockAgentManager): TRPCContext {
|
||||
const db = createTestDatabase();
|
||||
return {
|
||||
eventBus: { emit: () => {}, on: () => {}, off: () => {} } as unknown as TRPCContext['eventBus'],
|
||||
serverStartedAt: null,
|
||||
processCount: 0,
|
||||
agentManager,
|
||||
logChunkRepository: new DrizzleLogChunkRepository(db),
|
||||
conversationRepository: new DrizzleConversationRepository(db),
|
||||
initiativeRepository: new DrizzleInitiativeRepository(db),
|
||||
taskRepository: new DrizzleTaskRepository(db),
|
||||
// Expose DB-backed agent repo seeder via a non-context helper
|
||||
_agentRepository: new DrizzleAgentRepository(db),
|
||||
} as unknown as TRPCContext & { _agentRepository: DrizzleAgentRepository };
|
||||
}
|
||||
|
||||
// Typed helper to access seeder repos
|
||||
function getRepos(ctx: ReturnType<typeof makeCtx>) {
|
||||
const c = ctx as unknown as {
|
||||
_agentRepository: DrizzleAgentRepository;
|
||||
logChunkRepository: DrizzleLogChunkRepository;
|
||||
conversationRepository: DrizzleConversationRepository;
|
||||
initiativeRepository: DrizzleInitiativeRepository;
|
||||
taskRepository: DrizzleTaskRepository;
|
||||
};
|
||||
return {
|
||||
agentRepo: c._agentRepository,
|
||||
logChunkRepo: c.logChunkRepository,
|
||||
convRepo: c.conversationRepository,
|
||||
initiativeRepo: c.initiativeRepository,
|
||||
taskRepo: c.taskRepository,
|
||||
};
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Tests: agent.listForRadar
|
||||
// =============================================================================
|
||||
|
||||
describe('agent.listForRadar', () => {
|
||||
it('timeRange=24h — excludes agents older than 24h', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
|
||||
const oldDate = new Date(Date.now() - 48 * 3600_000);
|
||||
const recentDate = new Date(Date.now() - 12 * 3600_000);
|
||||
|
||||
agents.addAgent({ id: 'agent-old', name: 'old-agent', status: 'stopped', createdAt: oldDate });
|
||||
agents.addAgent({ id: 'agent-recent', name: 'recent-agent', status: 'running', createdAt: recentDate });
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: '24h' });
|
||||
|
||||
expect(result.map(r => r.id)).not.toContain('agent-old');
|
||||
expect(result.map(r => r.id)).toContain('agent-recent');
|
||||
});
|
||||
|
||||
it('status=running filter — only running agents returned', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-running', name: 'running-agent', status: 'running', createdAt: now });
|
||||
agents.addAgent({ id: 'agent-stopped', name: 'stopped-agent', status: 'stopped', createdAt: now });
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all', status: 'running' });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].id).toBe('agent-running');
|
||||
expect(result[0].status).toBe('running');
|
||||
});
|
||||
|
||||
it('status=completed filter — maps to stopped in DB', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-stopped', name: 'stopped-agent', status: 'stopped', createdAt: now });
|
||||
agents.addAgent({ id: 'agent-running', name: 'running-agent', status: 'running', createdAt: now });
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all', status: 'completed' });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].id).toBe('agent-stopped');
|
||||
});
|
||||
|
||||
it('mode=execute filter — only execute agents returned', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-exec', name: 'exec-agent', status: 'running', mode: 'execute', createdAt: now });
|
||||
agents.addAgent({ id: 'agent-plan', name: 'plan-agent', status: 'running', mode: 'plan', createdAt: now });
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all', mode: 'execute' });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].id).toBe('agent-exec');
|
||||
});
|
||||
|
||||
it('computes messagesCount from conversations table', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { agentRepo, convRepo } = getRepos(ctx);
|
||||
|
||||
const now = new Date();
|
||||
// Seed in DB (needed for FK on conversations)
|
||||
const fromAgent = await agentRepo.create({ name: 'from-agent', worktreeId: 'wt-from', status: 'running' });
|
||||
const toAgent = await agentRepo.create({ name: 'to-agent', worktreeId: 'wt-to', status: 'running' });
|
||||
|
||||
// Seed in MockAgentManager for agentManager.list()
|
||||
agents.addAgent({ id: fromAgent.id, name: fromAgent.name, status: 'running', createdAt: now });
|
||||
agents.addAgent({ id: toAgent.id, name: toAgent.name, status: 'running', createdAt: now });
|
||||
|
||||
// Create 3 conversations from fromAgent to toAgent
|
||||
await convRepo.create({ fromAgentId: fromAgent.id, toAgentId: toAgent.id, question: 'Q1' });
|
||||
await convRepo.create({ fromAgentId: fromAgent.id, toAgentId: toAgent.id, question: 'Q2' });
|
||||
await convRepo.create({ fromAgentId: fromAgent.id, toAgentId: toAgent.id, question: 'Q3' });
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all' });
|
||||
|
||||
const fromRow = result.find(r => r.id === fromAgent.id);
|
||||
expect(fromRow).toBeDefined();
|
||||
expect(fromRow!.messagesCount).toBe(3);
|
||||
|
||||
const toRow = result.find(r => r.id === toAgent.id);
|
||||
expect(toRow!.messagesCount).toBe(0);
|
||||
});
|
||||
|
||||
it('computes subagentsCount from log chunks', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-1', name: 'agent-one', status: 'running', createdAt: now });
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-1',
|
||||
agentName: 'agent-one',
|
||||
sessionNumber: 1,
|
||||
content: JSON.stringify({ type: 'tool_use', name: 'Agent', input: { description: 'do stuff', prompt: 'some prompt' } }),
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all' });
|
||||
|
||||
const row = result.find(r => r.id === 'agent-1');
|
||||
expect(row).toBeDefined();
|
||||
expect(row!.subagentsCount).toBe(1);
|
||||
expect(row!.questionsCount).toBe(0);
|
||||
expect(row!.compactionsCount).toBe(0);
|
||||
});
|
||||
|
||||
it('computes compactionsCount from log chunks', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-1', name: 'agent-one', status: 'running', createdAt: now });
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-1',
|
||||
agentName: 'agent-one',
|
||||
sessionNumber: 1,
|
||||
content: JSON.stringify({ type: 'system', subtype: 'init', source: 'compact' }),
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all' });
|
||||
|
||||
const row = result.find(r => r.id === 'agent-1');
|
||||
expect(row).toBeDefined();
|
||||
expect(row!.compactionsCount).toBe(1);
|
||||
expect(row!.subagentsCount).toBe(0);
|
||||
expect(row!.questionsCount).toBe(0);
|
||||
});
|
||||
|
||||
it('computes questionsCount from log chunks — sums questions array length', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-1', name: 'agent-one', status: 'running', createdAt: now });
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-1',
|
||||
agentName: 'agent-one',
|
||||
sessionNumber: 1,
|
||||
content: JSON.stringify({
|
||||
type: 'tool_use',
|
||||
name: 'AskUserQuestion',
|
||||
input: {
|
||||
questions: [
|
||||
{ question: 'First?', header: 'H1', options: [] },
|
||||
{ question: 'Second?', header: 'H2', options: [] },
|
||||
],
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.listForRadar({ timeRange: 'all' });
|
||||
|
||||
const row = result.find(r => r.id === 'agent-1');
|
||||
expect(row).toBeDefined();
|
||||
expect(row!.questionsCount).toBe(2);
|
||||
expect(row!.subagentsCount).toBe(0);
|
||||
expect(row!.compactionsCount).toBe(0);
|
||||
});
|
||||
|
||||
it('handles malformed JSON in log chunks without throwing', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
const now = new Date();
|
||||
agents.addAgent({ id: 'agent-1', name: 'agent-one', status: 'running', createdAt: now });
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-1',
|
||||
agentName: 'agent-one',
|
||||
sessionNumber: 1,
|
||||
content: 'not valid json {{{',
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
// Should not throw
|
||||
const result = await caller.listForRadar({ timeRange: 'all' });
|
||||
const row = result.find(r => r.id === 'agent-1');
|
||||
expect(row).toBeDefined();
|
||||
expect(row!.questionsCount).toBe(0);
|
||||
expect(row!.subagentsCount).toBe(0);
|
||||
expect(row!.compactionsCount).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// Tests: agent.getCompactionEvents
|
||||
// =============================================================================
|
||||
|
||||
describe('agent.getCompactionEvents', () => {
|
||||
it('returns compaction events sorted ascending, capped at 200', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
// Seed 201 compaction chunks
|
||||
for (let i = 0; i < 201; i++) {
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-compact',
|
||||
agentName: 'compact-agent',
|
||||
sessionNumber: i + 1,
|
||||
content: JSON.stringify({ type: 'system', subtype: 'init', source: 'compact' }),
|
||||
});
|
||||
}
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.getCompactionEvents({ agentId: 'agent-compact' });
|
||||
|
||||
expect(result).toHaveLength(200);
|
||||
// Each result has correct shape
|
||||
expect(result[0]).toHaveProperty('timestamp');
|
||||
expect(result[0]).toHaveProperty('sessionNumber');
|
||||
expect(typeof result[0].timestamp).toBe('string');
|
||||
expect(typeof result[0].sessionNumber).toBe('number');
|
||||
// Sorted ascending — sessionNumber of first should be lower than last
|
||||
expect(result[0].sessionNumber).toBeLessThan(result[199].sessionNumber);
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// Tests: agent.getSubagentSpawns
|
||||
// =============================================================================
|
||||
|
||||
describe('agent.getSubagentSpawns', () => {
|
||||
it('returns spawns with correct promptPreview (first 200 chars)', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
const fullPrompt = 'x'.repeat(300);
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-spawn',
|
||||
agentName: 'spawn-agent',
|
||||
sessionNumber: 1,
|
||||
content: JSON.stringify({
|
||||
type: 'tool_use',
|
||||
name: 'Agent',
|
||||
input: { description: 'my subagent', prompt: fullPrompt },
|
||||
}),
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.getSubagentSpawns({ agentId: 'agent-spawn' });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].promptPreview).toHaveLength(200);
|
||||
expect(result[0].fullPrompt).toHaveLength(300);
|
||||
expect(result[0].description).toBe('my subagent');
|
||||
expect(typeof result[0].timestamp).toBe('string');
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// Tests: agent.getQuestionsAsked
|
||||
// =============================================================================
|
||||
|
||||
describe('agent.getQuestionsAsked', () => {
|
||||
it('returns questions arrays correctly', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { logChunkRepo } = getRepos(ctx);
|
||||
|
||||
await logChunkRepo.insertChunk({
|
||||
agentId: 'agent-q',
|
||||
agentName: 'question-agent',
|
||||
sessionNumber: 1,
|
||||
content: JSON.stringify({
|
||||
type: 'tool_use',
|
||||
name: 'AskUserQuestion',
|
||||
input: {
|
||||
questions: [
|
||||
{ question: 'Which way?', header: 'Direction', options: [{ label: 'Left', description: 'Go left' }] },
|
||||
{ question: 'How fast?', header: 'Speed', options: [{ label: 'Fast', description: 'Go fast' }] },
|
||||
],
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const caller = createAgentCaller(ctx);
|
||||
const result = await caller.getQuestionsAsked({ agentId: 'agent-q' });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].questions).toHaveLength(2);
|
||||
expect(result[0].questions[0].question).toBe('Which way?');
|
||||
expect(result[0].questions[0].header).toBe('Direction');
|
||||
expect(result[0].questions[0].options).toHaveLength(1);
|
||||
expect(result[0].questions[0].options[0].label).toBe('Left');
|
||||
expect(result[0].questions[1].question).toBe('How fast?');
|
||||
expect(typeof result[0].timestamp).toBe('string');
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// Tests: conversation.getByFromAgent
|
||||
// =============================================================================
|
||||
|
||||
describe('conversation.getByFromAgent', () => {
|
||||
it('returns conversations with toAgentName resolved', async () => {
|
||||
const agents = new MockAgentManager();
|
||||
const ctx = makeCtx(agents);
|
||||
const { agentRepo, convRepo } = getRepos(ctx);
|
||||
|
||||
// Seed agents in DB (FK requirement)
|
||||
const fromAgent = await agentRepo.create({ name: 'from-agent', worktreeId: 'wt-from', status: 'running' });
|
||||
const toAgent = await agentRepo.create({ name: 'to-agent', worktreeId: 'wt-to', status: 'running' });
|
||||
|
||||
// Seed in MockAgentManager for name resolution
|
||||
agents.addAgent({ id: fromAgent.id, name: 'from-agent', status: 'running' });
|
||||
agents.addAgent({ id: toAgent.id, name: 'to-agent', status: 'running' });
|
||||
|
||||
// Create conversation
|
||||
await convRepo.create({
|
||||
fromAgentId: fromAgent.id,
|
||||
toAgentId: toAgent.id,
|
||||
question: 'What is 2+2?',
|
||||
});
|
||||
|
||||
const caller = createConversationCaller(ctx);
|
||||
const result = await caller.getByFromAgent({ agentId: fromAgent.id });
|
||||
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].toAgentName).toBe('to-agent');
|
||||
expect(result[0].toAgentId).toBe(toAgent.id);
|
||||
expect(result[0].question).toBe('What is 2+2?');
|
||||
expect(result[0].status).toBe('pending');
|
||||
expect(result[0].answer).toBeNull();
|
||||
expect(typeof result[0].timestamp).toBe('string');
|
||||
expect(result[0].taskId).toBeNull();
|
||||
expect(result[0].phaseId).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -11,7 +11,23 @@ import type { ProcedureBuilder } from '../trpc.js';
|
||||
import type { TRPCContext } from '../context.js';
|
||||
import type { AgentInfo, AgentResult, PendingQuestions } from '../../agent/types.js';
|
||||
import type { AgentOutputEvent } from '../../events/types.js';
|
||||
import { requireAgentManager, requireLogChunkRepository, requireTaskRepository, requireInitiativeRepository } from './_helpers.js';
|
||||
import { requireAgentManager, requireLogChunkRepository, requireTaskRepository, requireInitiativeRepository, requireConversationRepository } from './_helpers.js';
|
||||
|
||||
export type AgentRadarRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
mode: string;
|
||||
status: string;
|
||||
initiativeId: string | null;
|
||||
initiativeName: string | null;
|
||||
taskId: string | null;
|
||||
taskName: string | null;
|
||||
createdAt: string;
|
||||
questionsCount: number;
|
||||
messagesCount: number;
|
||||
subagentsCount: number;
|
||||
compactionsCount: number;
|
||||
};
|
||||
|
||||
export const spawnAgentInputSchema = z.object({
|
||||
name: z.string().min(1).optional(),
|
||||
@@ -410,5 +426,177 @@ export function agentProcedures(publicProcedure: ProcedureBuilder) {
|
||||
|
||||
return { content: truncateIfNeeded(raw) };
|
||||
}),
|
||||
|
||||
listForRadar: publicProcedure
|
||||
.input(z.object({
|
||||
timeRange: z.enum(['1h', '6h', '24h', '7d', 'all']).default('24h'),
|
||||
status: z.enum(['running', 'completed', 'crashed']).optional(),
|
||||
initiativeId: z.string().optional(),
|
||||
mode: z.enum(['execute', 'discuss', 'plan', 'detail', 'refine', 'chat', 'errand']).optional(),
|
||||
}))
|
||||
.query(async ({ ctx, input }): Promise<AgentRadarRow[]> => {
|
||||
const agentManager = requireAgentManager(ctx);
|
||||
const allAgents = await agentManager.list();
|
||||
|
||||
// Compute cutoff
|
||||
const cutoffMap: Record<string, number> = {
|
||||
'1h': Date.now() - 3_600_000,
|
||||
'6h': Date.now() - 21_600_000,
|
||||
'24h': Date.now() - 86_400_000,
|
||||
'7d': Date.now() - 604_800_000,
|
||||
};
|
||||
const cutoff = input.timeRange !== 'all' ? cutoffMap[input.timeRange] : null;
|
||||
|
||||
// Filter agents
|
||||
let filteredAgents = allAgents;
|
||||
if (cutoff !== null) {
|
||||
filteredAgents = filteredAgents.filter(a => a.createdAt.getTime() >= cutoff!);
|
||||
}
|
||||
if (input.status !== undefined) {
|
||||
const dbStatus = input.status === 'completed' ? 'stopped' : input.status;
|
||||
filteredAgents = filteredAgents.filter(a => a.status === dbStatus);
|
||||
}
|
||||
if (input.initiativeId !== undefined) {
|
||||
filteredAgents = filteredAgents.filter(a => a.initiativeId === input.initiativeId);
|
||||
}
|
||||
if (input.mode !== undefined) {
|
||||
filteredAgents = filteredAgents.filter(a => a.mode === input.mode);
|
||||
}
|
||||
|
||||
const matchingIds = filteredAgents.map(a => a.id);
|
||||
|
||||
// Batch fetch in parallel
|
||||
const logChunkRepo = requireLogChunkRepository(ctx);
|
||||
const conversationRepo = requireConversationRepository(ctx);
|
||||
const initiativeRepo = requireInitiativeRepository(ctx);
|
||||
const taskRepo = requireTaskRepository(ctx);
|
||||
|
||||
// Collect unique taskIds and initiativeIds for batch lookup
|
||||
const uniqueTaskIds = [...new Set(filteredAgents.map(a => a.taskId).filter(Boolean) as string[])];
|
||||
const uniqueInitiativeIds = [...new Set(filteredAgents.map(a => a.initiativeId).filter(Boolean) as string[])];
|
||||
|
||||
const [chunks, messageCounts, taskResults, initiativeResults] = await Promise.all([
|
||||
logChunkRepo.findByAgentIds(matchingIds),
|
||||
conversationRepo.countByFromAgentIds(matchingIds),
|
||||
Promise.all(uniqueTaskIds.map(id => taskRepo.findById(id))),
|
||||
Promise.all(uniqueInitiativeIds.map(id => initiativeRepo.findById(id))),
|
||||
]);
|
||||
|
||||
// Build lookup maps
|
||||
const taskMap = new Map(taskResults.filter(Boolean).map(t => [t!.id, t!.name]));
|
||||
const initiativeMap = new Map(initiativeResults.filter(Boolean).map(i => [i!.id, i!.name]));
|
||||
const messagesMap = new Map(messageCounts.map(m => [m.agentId, m.count]));
|
||||
|
||||
// Group chunks by agentId
|
||||
const chunksByAgent = new Map<string, typeof chunks>();
|
||||
for (const chunk of chunks) {
|
||||
const existing = chunksByAgent.get(chunk.agentId);
|
||||
if (existing) {
|
||||
existing.push(chunk);
|
||||
} else {
|
||||
chunksByAgent.set(chunk.agentId, [chunk]);
|
||||
}
|
||||
}
|
||||
|
||||
// Build result rows
|
||||
return filteredAgents.map(agent => {
|
||||
const agentChunks = chunksByAgent.get(agent.id) ?? [];
|
||||
let questionsCount = 0;
|
||||
let subagentsCount = 0;
|
||||
let compactionsCount = 0;
|
||||
|
||||
for (const chunk of agentChunks) {
|
||||
try {
|
||||
const parsed = JSON.parse(chunk.content);
|
||||
if (parsed.type === 'tool_use' && parsed.name === 'AskUserQuestion') {
|
||||
questionsCount += parsed.input?.questions?.length ?? 0;
|
||||
} else if (parsed.type === 'tool_use' && parsed.name === 'Agent') {
|
||||
subagentsCount++;
|
||||
} else if (parsed.type === 'system' && parsed.subtype === 'init' && parsed.source === 'compact') {
|
||||
compactionsCount++;
|
||||
}
|
||||
} catch { /* skip malformed */ }
|
||||
}
|
||||
|
||||
return {
|
||||
id: agent.id,
|
||||
name: agent.name,
|
||||
mode: agent.mode,
|
||||
status: agent.status,
|
||||
initiativeId: agent.initiativeId,
|
||||
initiativeName: agent.initiativeId ? (initiativeMap.get(agent.initiativeId) ?? null) : null,
|
||||
taskId: agent.taskId,
|
||||
taskName: agent.taskId ? (taskMap.get(agent.taskId) ?? null) : null,
|
||||
createdAt: agent.createdAt.toISOString(),
|
||||
questionsCount,
|
||||
messagesCount: messagesMap.get(agent.id) ?? 0,
|
||||
subagentsCount,
|
||||
compactionsCount,
|
||||
};
|
||||
});
|
||||
}),
|
||||
|
||||
getCompactionEvents: publicProcedure
|
||||
.input(z.object({ agentId: z.string().min(1) }))
|
||||
.query(async ({ ctx, input }) => {
|
||||
const logChunkRepo = requireLogChunkRepository(ctx);
|
||||
const chunks = await logChunkRepo.findByAgentId(input.agentId);
|
||||
const results: { timestamp: string; sessionNumber: number }[] = [];
|
||||
for (const chunk of chunks) {
|
||||
try {
|
||||
const parsed = JSON.parse(chunk.content);
|
||||
if (parsed.type === 'system' && parsed.subtype === 'init' && parsed.source === 'compact') {
|
||||
results.push({ timestamp: chunk.createdAt.toISOString(), sessionNumber: chunk.sessionNumber });
|
||||
}
|
||||
} catch { /* skip malformed */ }
|
||||
if (results.length >= 200) break;
|
||||
}
|
||||
return results;
|
||||
}),
|
||||
|
||||
getSubagentSpawns: publicProcedure
|
||||
.input(z.object({ agentId: z.string().min(1) }))
|
||||
.query(async ({ ctx, input }) => {
|
||||
const logChunkRepo = requireLogChunkRepository(ctx);
|
||||
const chunks = await logChunkRepo.findByAgentId(input.agentId);
|
||||
const results: { timestamp: string; description: string; promptPreview: string; fullPrompt: string }[] = [];
|
||||
for (const chunk of chunks) {
|
||||
try {
|
||||
const parsed = JSON.parse(chunk.content);
|
||||
if (parsed.type === 'tool_use' && parsed.name === 'Agent') {
|
||||
const fullPrompt: string = parsed.input?.prompt ?? '';
|
||||
const description: string = parsed.input?.description ?? '';
|
||||
results.push({
|
||||
timestamp: chunk.createdAt.toISOString(),
|
||||
description,
|
||||
promptPreview: fullPrompt.slice(0, 200),
|
||||
fullPrompt,
|
||||
});
|
||||
}
|
||||
} catch { /* skip malformed */ }
|
||||
if (results.length >= 200) break;
|
||||
}
|
||||
return results;
|
||||
}),
|
||||
|
||||
getQuestionsAsked: publicProcedure
|
||||
.input(z.object({ agentId: z.string().min(1) }))
|
||||
.query(async ({ ctx, input }) => {
|
||||
const logChunkRepo = requireLogChunkRepository(ctx);
|
||||
const chunks = await logChunkRepo.findByAgentId(input.agentId);
|
||||
type QuestionItem = { question: string; header: string; options: { label: string; description: string }[] };
|
||||
const results: { timestamp: string; questions: QuestionItem[] }[] = [];
|
||||
for (const chunk of chunks) {
|
||||
try {
|
||||
const parsed = JSON.parse(chunk.content);
|
||||
if (parsed.type === 'tool_use' && parsed.name === 'AskUserQuestion') {
|
||||
const questions: QuestionItem[] = parsed.input?.questions ?? [];
|
||||
results.push({ timestamp: chunk.createdAt.toISOString(), questions });
|
||||
}
|
||||
} catch { /* skip malformed */ }
|
||||
if (results.length >= 200) break;
|
||||
}
|
||||
return results;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -302,5 +302,31 @@ export function conversationProcedures(publicProcedure: ProcedureBuilder) {
|
||||
cleanup();
|
||||
}
|
||||
}),
|
||||
|
||||
getByFromAgent: publicProcedure
|
||||
.input(z.object({ agentId: z.string().min(1) }))
|
||||
.query(async ({ ctx, input }) => {
|
||||
const repo = requireConversationRepository(ctx);
|
||||
const agentManager = requireAgentManager(ctx);
|
||||
|
||||
const convs = await repo.findByFromAgentId(input.agentId);
|
||||
|
||||
// Build toAgent name map without N+1
|
||||
const toAgentIds = [...new Set(convs.map(c => c.toAgentId))];
|
||||
const allAgents = toAgentIds.length > 0 ? await agentManager.list() : [];
|
||||
const agentNameMap = new Map(allAgents.map(a => [a.id, a.name]));
|
||||
|
||||
return convs.map(c => ({
|
||||
id: c.id,
|
||||
timestamp: c.createdAt.toISOString(),
|
||||
toAgentName: agentNameMap.get(c.toAgentId) ?? c.toAgentId,
|
||||
toAgentId: c.toAgentId,
|
||||
question: c.question,
|
||||
answer: c.answer ?? null,
|
||||
status: c.status as 'pending' | 'answered',
|
||||
taskId: c.taskId ?? null,
|
||||
phaseId: c.phaseId ?? null,
|
||||
}));
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
157
apps/web/src/components/radar/CompactionEventsDialog.tsx
Normal file
157
apps/web/src/components/radar/CompactionEventsDialog.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { useSubscriptionWithErrorHandling } from '@/hooks'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
const RELEVANT_EVENTS = ['agent:waiting']
|
||||
|
||||
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,
|
||||
isAgentRunning,
|
||||
}: DrilldownDialogProps) {
|
||||
const { data, isLoading, refetch } = trpc.agent.getCompactionEvents.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null)
|
||||
const [secondsAgo, setSecondsAgo] = useState(0)
|
||||
|
||||
useSubscriptionWithErrorHandling(
|
||||
() => trpc.onEvent.useSubscription(undefined),
|
||||
{
|
||||
enabled: open && !!isAgentRunning,
|
||||
onData: (event: any) => {
|
||||
const eventType: string = event?.data?.type ?? event?.type ?? ''
|
||||
const eventAgentId: string = event?.data?.agentId ?? event?.agentId ?? ''
|
||||
if (RELEVANT_EVENTS.some(e => eventType.startsWith(e)) && eventAgentId === agentId) {
|
||||
void refetch().then(() => {
|
||||
setLastRefreshedAt(new Date())
|
||||
setSecondsAgo(0)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !isAgentRunning || !lastRefreshedAt) return
|
||||
const interval = setInterval(() => {
|
||||
setSecondsAgo(Math.floor((Date.now() - lastRefreshedAt.getTime()) / 1000))
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [open, isAgentRunning, lastRefreshedAt])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setLastRefreshedAt(null)
|
||||
setSecondsAgo(0)
|
||||
}
|
||||
}, [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>
|
||||
|
||||
{isAgentRunning && lastRefreshedAt && (
|
||||
<p className="mt-2 text-xs text-muted-foreground text-right">
|
||||
Last refreshed: {secondsAgo === 0 ? 'just now' : `${secondsAgo}s ago`}
|
||||
</p>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
209
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
209
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
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 { useSubscriptionWithErrorHandling } from '@/hooks'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
const RELEVANT_EVENTS = ['conversation:created', 'conversation:answered']
|
||||
|
||||
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,
|
||||
isAgentRunning,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading, refetch } = trpc.conversation.getByFromAgent.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null)
|
||||
const [secondsAgo, setSecondsAgo] = useState(0)
|
||||
|
||||
useSubscriptionWithErrorHandling(
|
||||
() => trpc.onEvent.useSubscription(undefined),
|
||||
{
|
||||
enabled: open && !!isAgentRunning,
|
||||
onData: (event: any) => {
|
||||
const eventType: string = event?.data?.type ?? event?.type ?? ''
|
||||
const eventAgentId: string = event?.data?.fromAgentId ?? event?.data?.agentId ?? event?.agentId ?? ''
|
||||
if (RELEVANT_EVENTS.some(e => eventType.startsWith(e)) && eventAgentId === agentId) {
|
||||
void refetch().then(() => {
|
||||
setLastRefreshedAt(new Date())
|
||||
setSecondsAgo(0)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !isAgentRunning || !lastRefreshedAt) return
|
||||
const interval = setInterval(() => {
|
||||
setSecondsAgo(Math.floor((Date.now() - lastRefreshedAt.getTime()) / 1000))
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [open, isAgentRunning, lastRefreshedAt])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setExpandedIndex(null)
|
||||
setLastRefreshedAt(null)
|
||||
setSecondsAgo(0)
|
||||
}
|
||||
}, [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>
|
||||
|
||||
{isAgentRunning && lastRefreshedAt && (
|
||||
<p className="mt-2 text-xs text-muted-foreground text-right">
|
||||
Last refreshed: {secondsAgo === 0 ? 'just now' : `${secondsAgo}s ago`}
|
||||
</p>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
201
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
201
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
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 { useSubscriptionWithErrorHandling } from '@/hooks'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
const RELEVANT_EVENTS = ['agent:waiting']
|
||||
|
||||
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,
|
||||
isAgentRunning,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading, refetch } = trpc.agent.getQuestionsAsked.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null)
|
||||
const [secondsAgo, setSecondsAgo] = useState(0)
|
||||
|
||||
useSubscriptionWithErrorHandling(
|
||||
() => trpc.onEvent.useSubscription(undefined),
|
||||
{
|
||||
enabled: open && !!isAgentRunning,
|
||||
onData: (event: any) => {
|
||||
const eventType: string = event?.data?.type ?? event?.type ?? ''
|
||||
const eventAgentId: string = event?.data?.agentId ?? event?.agentId ?? ''
|
||||
if (RELEVANT_EVENTS.some(e => eventType.startsWith(e)) && eventAgentId === agentId) {
|
||||
void refetch().then(() => {
|
||||
setLastRefreshedAt(new Date())
|
||||
setSecondsAgo(0)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !isAgentRunning || !lastRefreshedAt) return
|
||||
const interval = setInterval(() => {
|
||||
setSecondsAgo(Math.floor((Date.now() - lastRefreshedAt.getTime()) / 1000))
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [open, isAgentRunning, lastRefreshedAt])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setExpandedIndex(null)
|
||||
setLastRefreshedAt(null)
|
||||
setSecondsAgo(0)
|
||||
}
|
||||
}, [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>
|
||||
|
||||
{isAgentRunning && lastRefreshedAt && (
|
||||
<p className="mt-2 text-xs text-muted-foreground text-right">
|
||||
Last refreshed: {secondsAgo === 0 ? 'just now' : `${secondsAgo}s ago`}
|
||||
</p>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
185
apps/web/src/components/radar/SubagentSpawnsDialog.tsx
Normal file
185
apps/web/src/components/radar/SubagentSpawnsDialog.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
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 { useSubscriptionWithErrorHandling } from '@/hooks'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
const RELEVANT_EVENTS = ['agent:waiting']
|
||||
|
||||
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,
|
||||
isAgentRunning,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading, refetch } = trpc.agent.getSubagentSpawns.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null)
|
||||
const [secondsAgo, setSecondsAgo] = useState(0)
|
||||
|
||||
useSubscriptionWithErrorHandling(
|
||||
() => trpc.onEvent.useSubscription(undefined),
|
||||
{
|
||||
enabled: open && !!isAgentRunning,
|
||||
onData: (event: any) => {
|
||||
const eventType: string = event?.data?.type ?? event?.type ?? ''
|
||||
const eventAgentId: string = event?.data?.agentId ?? event?.agentId ?? ''
|
||||
if (RELEVANT_EVENTS.some(e => eventType.startsWith(e)) && eventAgentId === agentId) {
|
||||
void refetch().then(() => {
|
||||
setLastRefreshedAt(new Date())
|
||||
setSecondsAgo(0)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !isAgentRunning || !lastRefreshedAt) return
|
||||
const interval = setInterval(() => {
|
||||
setSecondsAgo(Math.floor((Date.now() - lastRefreshedAt.getTime()) / 1000))
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [open, isAgentRunning, lastRefreshedAt])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setExpandedIndex(null)
|
||||
setLastRefreshedAt(null)
|
||||
setSecondsAgo(0)
|
||||
}
|
||||
}, [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>
|
||||
|
||||
{isAgentRunning && lastRefreshedAt && (
|
||||
<p className="mt-2 text-xs text-muted-foreground text-right">
|
||||
Last refreshed: {secondsAgo === 0 ? 'just now' : `${secondsAgo}s ago`}
|
||||
</p>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, act, waitFor } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
const mockUseSubscriptionWithErrorHandling = vi.hoisted(() => vi.fn())
|
||||
vi.mock('@/hooks', () => ({
|
||||
useSubscriptionWithErrorHandling: mockUseSubscriptionWithErrorHandling,
|
||||
}))
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean; refetch?: () => Promise<unknown> } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getCompactionEvents: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
onEvent: {
|
||||
useSubscription: vi.fn(),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
mockUseSubscriptionWithErrorHandling.mockReturnValue({
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
error: null,
|
||||
reconnectAttempts: 0,
|
||||
lastEventId: null,
|
||||
reconnect: vi.fn(),
|
||||
reset: vi.fn(),
|
||||
})
|
||||
})
|
||||
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders dialog title and subtitle', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false, refetch: vi.fn().mockResolvedValue({}) }
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.getByText(/Compaction Events — test-agent/)).toBeInTheDocument()
|
||||
expect(screen.getByText(/context-window compaction/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
describe('isAgentRunning behavior', () => {
|
||||
it('shows "Last refreshed: just now" after SSE-triggered refetch when isAgentRunning=true', async () => {
|
||||
let capturedOnData: ((event: any) => void) | undefined
|
||||
mockUseSubscriptionWithErrorHandling.mockImplementation((_getter: any, opts: any) => {
|
||||
capturedOnData = opts.onData
|
||||
return { isConnected: true, isConnecting: false, error: null, reconnectAttempts: 0, lastEventId: null, reconnect: vi.fn(), reset: vi.fn() }
|
||||
})
|
||||
|
||||
const mockRefetch = vi.fn().mockResolvedValue({ data: [{ timestamp: '2026-03-06T10:00:00.000Z', sessionNumber: 1 }] })
|
||||
mockUseQueryReturn = {
|
||||
data: [{ timestamp: '2026-03-06T10:00:00.000Z', sessionNumber: 1 }],
|
||||
isLoading: false,
|
||||
refetch: mockRefetch,
|
||||
}
|
||||
|
||||
render(<CompactionEventsDialog {...defaultProps} agentId="agent-1" isAgentRunning={true} />)
|
||||
|
||||
await act(async () => {
|
||||
capturedOnData?.({ data: { type: 'agent:waiting', agentId: 'agent-1' } })
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Last refreshed: just now/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning=false', () => {
|
||||
render(<CompactionEventsDialog {...defaultProps} isAgentRunning={false} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning is not provided', () => {
|
||||
render(<CompactionEventsDialog {...defaultProps} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('subscription is enabled only when open=true and isAgentRunning=true', () => {
|
||||
render(<CompactionEventsDialog open={false} onOpenChange={vi.fn()} agentId="agent-1" agentName="test-agent" isAgentRunning={true} />)
|
||||
expect(mockUseSubscriptionWithErrorHandling).toHaveBeenCalledWith(
|
||||
expect.any(Function),
|
||||
expect.objectContaining({ enabled: false })
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,244 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
const mockUseSubscriptionWithErrorHandling = vi.hoisted(() => vi.fn())
|
||||
vi.mock('@/hooks', () => ({
|
||||
useSubscriptionWithErrorHandling: mockUseSubscriptionWithErrorHandling,
|
||||
}))
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean; refetch?: () => Promise<unknown> } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
conversation: {
|
||||
getByFromAgent: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
onEvent: {
|
||||
useSubscription: vi.fn(),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
mockUseSubscriptionWithErrorHandling.mockReturnValue({
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
error: null,
|
||||
reconnectAttempts: 0,
|
||||
lastEventId: null,
|
||||
reconnect: vi.fn(),
|
||||
reset: vi.fn(),
|
||||
})
|
||||
})
|
||||
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
describe('isAgentRunning behavior', () => {
|
||||
it('shows "Last refreshed: just now" after SSE-triggered refetch when isAgentRunning=true', async () => {
|
||||
let capturedOnData: ((event: any) => void) | undefined
|
||||
mockUseSubscriptionWithErrorHandling.mockImplementation((_getter: any, opts: any) => {
|
||||
capturedOnData = opts.onData
|
||||
return { isConnected: true, isConnecting: false, error: null, reconnectAttempts: 0, lastEventId: null, reconnect: vi.fn(), reset: vi.fn() }
|
||||
})
|
||||
|
||||
const mockRefetch = vi.fn().mockResolvedValue({ data: [] })
|
||||
mockUseQueryReturn = {
|
||||
data: [],
|
||||
isLoading: false,
|
||||
refetch: mockRefetch,
|
||||
}
|
||||
|
||||
render(<InterAgentMessagesDialog {...defaultProps} agentId="agent-1" isAgentRunning={true} />)
|
||||
|
||||
await act(async () => {
|
||||
capturedOnData?.({ data: { type: 'conversation:created', fromAgentId: 'agent-1' } })
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Last refreshed: just now/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning=false', () => {
|
||||
render(<InterAgentMessagesDialog {...defaultProps} isAgentRunning={false} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning is not provided', () => {
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('subscription is enabled only when open=true and isAgentRunning=true', () => {
|
||||
render(<InterAgentMessagesDialog open={false} onOpenChange={vi.fn()} agentId="agent-1" agentName="test-agent" isAgentRunning={true} />)
|
||||
expect(mockUseSubscriptionWithErrorHandling).toHaveBeenCalledWith(
|
||||
expect.any(Function),
|
||||
expect.objectContaining({ enabled: false })
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,219 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
const mockUseSubscriptionWithErrorHandling = vi.hoisted(() => vi.fn())
|
||||
vi.mock('@/hooks', () => ({
|
||||
useSubscriptionWithErrorHandling: mockUseSubscriptionWithErrorHandling,
|
||||
}))
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean; refetch?: () => Promise<unknown> } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getQuestionsAsked: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
onEvent: {
|
||||
useSubscription: vi.fn(),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
mockUseSubscriptionWithErrorHandling.mockReturnValue({
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
error: null,
|
||||
reconnectAttempts: 0,
|
||||
lastEventId: null,
|
||||
reconnect: vi.fn(),
|
||||
reset: vi.fn(),
|
||||
})
|
||||
})
|
||||
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.getByText('1 question')).toBeInTheDocument()
|
||||
expect(screen.queryByText('1 questions')).toBeNull()
|
||||
})
|
||||
|
||||
describe('isAgentRunning behavior', () => {
|
||||
it('shows "Last refreshed: just now" after SSE-triggered refetch when isAgentRunning=true', async () => {
|
||||
let capturedOnData: ((event: any) => void) | undefined
|
||||
mockUseSubscriptionWithErrorHandling.mockImplementation((_getter: any, opts: any) => {
|
||||
capturedOnData = opts.onData
|
||||
return { isConnected: true, isConnecting: false, error: null, reconnectAttempts: 0, lastEventId: null, reconnect: vi.fn(), reset: vi.fn() }
|
||||
})
|
||||
|
||||
const mockRefetch = vi.fn().mockResolvedValue({ data: [] })
|
||||
mockUseQueryReturn = {
|
||||
data: [],
|
||||
isLoading: false,
|
||||
refetch: mockRefetch,
|
||||
}
|
||||
|
||||
render(<QuestionsAskedDialog {...defaultProps} agentId="agent-1" isAgentRunning={true} />)
|
||||
|
||||
await act(async () => {
|
||||
capturedOnData?.({ data: { type: 'agent:waiting', agentId: 'agent-1' } })
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Last refreshed: just now/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning=false', () => {
|
||||
render(<QuestionsAskedDialog {...defaultProps} isAgentRunning={false} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning is not provided', () => {
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('subscription is enabled only when open=true and isAgentRunning=true', () => {
|
||||
render(<QuestionsAskedDialog open={false} onOpenChange={vi.fn()} agentId="agent-1" agentName="test-agent" isAgentRunning={true} />)
|
||||
expect(mockUseSubscriptionWithErrorHandling).toHaveBeenCalledWith(
|
||||
expect.any(Function),
|
||||
expect.objectContaining({ enabled: false })
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,198 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
const mockUseSubscriptionWithErrorHandling = vi.hoisted(() => vi.fn())
|
||||
vi.mock('@/hooks', () => ({
|
||||
useSubscriptionWithErrorHandling: mockUseSubscriptionWithErrorHandling,
|
||||
}))
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean; refetch?: () => Promise<unknown> } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getSubagentSpawns: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
onEvent: {
|
||||
useSubscription: vi.fn(),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
mockUseSubscriptionWithErrorHandling.mockReturnValue({
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
error: null,
|
||||
reconnectAttempts: 0,
|
||||
lastEventId: null,
|
||||
reconnect: vi.fn(),
|
||||
reset: vi.fn(),
|
||||
})
|
||||
})
|
||||
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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, refetch: vi.fn().mockResolvedValue({}) }
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
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,
|
||||
refetch: vi.fn().mockResolvedValue({}),
|
||||
}
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
describe('isAgentRunning behavior', () => {
|
||||
it('shows "Last refreshed: just now" after SSE-triggered refetch when isAgentRunning=true', async () => {
|
||||
let capturedOnData: ((event: any) => void) | undefined
|
||||
mockUseSubscriptionWithErrorHandling.mockImplementation((_getter: any, opts: any) => {
|
||||
capturedOnData = opts.onData
|
||||
return { isConnected: true, isConnecting: false, error: null, reconnectAttempts: 0, lastEventId: null, reconnect: vi.fn(), reset: vi.fn() }
|
||||
})
|
||||
|
||||
const mockRefetch = vi.fn().mockResolvedValue({ data: [] })
|
||||
mockUseQueryReturn = {
|
||||
data: [],
|
||||
isLoading: false,
|
||||
refetch: mockRefetch,
|
||||
}
|
||||
|
||||
render(<SubagentSpawnsDialog {...defaultProps} agentId="agent-1" isAgentRunning={true} />)
|
||||
|
||||
await act(async () => {
|
||||
capturedOnData?.({ data: { type: 'agent:waiting', agentId: 'agent-1' } })
|
||||
})
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Last refreshed: just now/)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning=false', () => {
|
||||
render(<SubagentSpawnsDialog {...defaultProps} isAgentRunning={false} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show "Last refreshed" when isAgentRunning is not provided', () => {
|
||||
render(<SubagentSpawnsDialog {...defaultProps} />)
|
||||
expect(screen.queryByText(/Last refreshed/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('subscription is enabled only when open=true and isAgentRunning=true', () => {
|
||||
render(<SubagentSpawnsDialog open={false} onOpenChange={vi.fn()} agentId="agent-1" agentName="test-agent" isAgentRunning={true} />)
|
||||
expect(mockUseSubscriptionWithErrorHandling).toHaveBeenCalledWith(
|
||||
expect.any(Function),
|
||||
expect.objectContaining({ enabled: false })
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
7
apps/web/src/components/radar/types.ts
Normal file
7
apps/web/src/components/radar/types.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export interface DrilldownDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
agentId: string
|
||||
agentName: string
|
||||
isAgentRunning?: boolean
|
||||
}
|
||||
@@ -10,6 +10,7 @@ const navItems = [
|
||||
{ label: 'HQ', to: '/hq', badgeKey: null },
|
||||
{ label: 'Initiatives', to: '/initiatives', badgeKey: null },
|
||||
{ label: 'Agents', to: '/agents', badgeKey: 'running' as const },
|
||||
{ label: 'Radar', to: '/radar', badgeKey: null },
|
||||
{ label: 'Inbox', to: '/inbox', badgeKey: 'questions' as const },
|
||||
{ label: 'Settings', to: '/settings', badgeKey: null },
|
||||
] as const
|
||||
|
||||
451
apps/web/src/routes/__tests__/radar.test.tsx
Normal file
451
apps/web/src/routes/__tests__/radar.test.tsx
Normal file
@@ -0,0 +1,451 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent, within } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
vi.mock('@/components/radar/CompactionEventsDialog', () => ({
|
||||
CompactionEventsDialog: ({ open, agentId, agentName, isAgentRunning, onOpenChange }: any) =>
|
||||
open ? (
|
||||
<div data-testid="compaction-dialog" data-agent-id={agentId} data-agent-name={agentName} data-is-running={String(isAgentRunning)}>
|
||||
<button onClick={() => onOpenChange(false)}>close</button>
|
||||
</div>
|
||||
) : null,
|
||||
}))
|
||||
vi.mock('@/components/radar/SubagentSpawnsDialog', () => ({
|
||||
SubagentSpawnsDialog: ({ open, agentId, agentName, isAgentRunning, onOpenChange }: any) =>
|
||||
open ? (
|
||||
<div data-testid="subagents-dialog" data-agent-id={agentId} data-agent-name={agentName} data-is-running={String(isAgentRunning)}>
|
||||
<button onClick={() => onOpenChange(false)}>close</button>
|
||||
</div>
|
||||
) : null,
|
||||
}))
|
||||
vi.mock('@/components/radar/QuestionsAskedDialog', () => ({
|
||||
QuestionsAskedDialog: ({ open, agentId, agentName, isAgentRunning, onOpenChange }: any) =>
|
||||
open ? (
|
||||
<div data-testid="questions-dialog" data-agent-id={agentId} data-agent-name={agentName} data-is-running={String(isAgentRunning)}>
|
||||
<button onClick={() => onOpenChange(false)}>close</button>
|
||||
</div>
|
||||
) : null,
|
||||
}))
|
||||
vi.mock('@/components/radar/InterAgentMessagesDialog', () => ({
|
||||
InterAgentMessagesDialog: ({ open, agentId, agentName, isAgentRunning, onOpenChange }: any) =>
|
||||
open ? (
|
||||
<div data-testid="messages-dialog" data-agent-id={agentId} data-agent-name={agentName} data-is-running={String(isAgentRunning)}>
|
||||
<button onClick={() => onOpenChange(false)}>close</button>
|
||||
</div>
|
||||
) : null,
|
||||
}))
|
||||
|
||||
type AgentRadarRow = {
|
||||
id: string
|
||||
name: string
|
||||
mode: string
|
||||
status: string
|
||||
initiativeId: string | null
|
||||
initiativeName: string | null
|
||||
taskId: string | null
|
||||
taskName: string | null
|
||||
createdAt: string
|
||||
questionsCount: number
|
||||
messagesCount: number
|
||||
subagentsCount: number
|
||||
compactionsCount: number
|
||||
}
|
||||
|
||||
// --- Hoisted mocks ---
|
||||
const mockListForRadarUseQuery = vi.hoisted(() => vi.fn())
|
||||
const mockListInitiativesUseQuery = vi.hoisted(() => vi.fn())
|
||||
const mockListAgentsUseQuery = vi.hoisted(() => vi.fn())
|
||||
const mockNavigate = vi.hoisted(() => vi.fn())
|
||||
const mockUseSearch = vi.hoisted(() =>
|
||||
vi.fn().mockReturnValue({
|
||||
timeRange: '24h',
|
||||
status: 'all',
|
||||
initiativeId: undefined,
|
||||
mode: 'all',
|
||||
})
|
||||
)
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
listForRadar: { useQuery: mockListForRadarUseQuery },
|
||||
},
|
||||
listInitiatives: { useQuery: mockListInitiativesUseQuery },
|
||||
listAgents: { useQuery: mockListAgentsUseQuery },
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('@/hooks', () => ({
|
||||
useLiveUpdates: vi.fn(),
|
||||
LiveUpdateRule: undefined,
|
||||
}))
|
||||
|
||||
vi.mock('@/components/ThemeToggle', () => ({
|
||||
ThemeToggle: () => null,
|
||||
}))
|
||||
|
||||
vi.mock('@/components/HealthDot', () => ({
|
||||
HealthDot: () => null,
|
||||
}))
|
||||
|
||||
vi.mock('@/components/NavBadge', () => ({
|
||||
NavBadge: () => null,
|
||||
}))
|
||||
|
||||
vi.mock('@tanstack/react-router', () => ({
|
||||
createFileRoute: () => () => ({ component: null }),
|
||||
useNavigate: () => mockNavigate,
|
||||
useSearch: mockUseSearch,
|
||||
Link: ({
|
||||
to,
|
||||
search,
|
||||
children,
|
||||
}: {
|
||||
to: string
|
||||
search?: Record<string, string>
|
||||
children: React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode)
|
||||
}) => {
|
||||
const params = search ? new URLSearchParams(search).toString() : ''
|
||||
const href = params ? `${to}?${params}` : to
|
||||
const content = typeof children === 'function' ? children({ isActive: false }) : children
|
||||
return <a href={href}>{content}</a>
|
||||
},
|
||||
}))
|
||||
|
||||
// Import after mocks
|
||||
import { RadarPage } from '../radar'
|
||||
import { AppLayout } from '../../layouts/AppLayout'
|
||||
|
||||
function makeAgent(overrides?: Partial<AgentRadarRow>): AgentRadarRow {
|
||||
return {
|
||||
id: 'agent-1',
|
||||
name: 'jolly-penguin',
|
||||
mode: 'execute',
|
||||
status: 'running',
|
||||
initiativeId: null,
|
||||
initiativeName: null,
|
||||
taskId: null,
|
||||
taskName: null,
|
||||
createdAt: new Date(Date.now() - 3600_000).toISOString(),
|
||||
questionsCount: 0,
|
||||
messagesCount: 0,
|
||||
subagentsCount: 0,
|
||||
compactionsCount: 0,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('RadarPage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockListInitiativesUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
mockUseSearch.mockReturnValue({
|
||||
timeRange: '24h',
|
||||
status: 'all',
|
||||
initiativeId: undefined,
|
||||
mode: 'all',
|
||||
})
|
||||
})
|
||||
|
||||
it('renders "Radar" heading', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
expect(screen.getByRole('heading', { name: /radar/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders 4 summary stat cards with correct aggregated values', () => {
|
||||
// Use distinct totals; scope number checks to stat card containers to avoid table collisions
|
||||
const agents = [
|
||||
makeAgent({ id: 'a1', questionsCount: 3, messagesCount: 10, subagentsCount: 2, compactionsCount: 1 }),
|
||||
makeAgent({ id: 'a2', questionsCount: 4, messagesCount: 5, subagentsCount: 1, compactionsCount: 3 }),
|
||||
]
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: agents, isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
// Verify labels exist
|
||||
expect(screen.getByText('Total Questions Asked')).toBeInTheDocument()
|
||||
expect(screen.getByText('Total Inter-Agent Messages')).toBeInTheDocument()
|
||||
expect(screen.getByText('Total Subagent Spawns')).toBeInTheDocument()
|
||||
expect(screen.getByText('Total Compaction Events')).toBeInTheDocument()
|
||||
|
||||
// Verify aggregated totals by scoping to the stat card's container
|
||||
// Total Questions: 3+4=7
|
||||
const questionsContainer = screen.getByText('Total Questions Asked').parentElement!
|
||||
expect(questionsContainer.querySelector('.text-3xl')).toHaveTextContent('7')
|
||||
// Total Messages: 10+5=15
|
||||
const messagesContainer = screen.getByText('Total Inter-Agent Messages').parentElement!
|
||||
expect(messagesContainer.querySelector('.text-3xl')).toHaveTextContent('15')
|
||||
})
|
||||
|
||||
it('table renders one row per agent', () => {
|
||||
const agents = [
|
||||
makeAgent({ id: 'a1', name: 'agent-one' }),
|
||||
makeAgent({ id: 'a2', name: 'agent-two' }),
|
||||
makeAgent({ id: 'a3', name: 'agent-three' }),
|
||||
]
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: agents, isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
const tbody = document.querySelector('tbody')!
|
||||
const rows = within(tbody).getAllByRole('row')
|
||||
expect(rows).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('default sort: newest first', () => {
|
||||
const older = makeAgent({ id: 'a1', name: 'older-agent', createdAt: new Date(Date.now() - 7200_000).toISOString() })
|
||||
const newer = makeAgent({ id: 'a2', name: 'newer-agent', createdAt: new Date(Date.now() - 1800_000).toISOString() })
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [older, newer], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
const tbody = document.querySelector('tbody')!
|
||||
const rows = within(tbody).getAllByRole('row')
|
||||
expect(rows[0]).toHaveTextContent('newer-agent')
|
||||
expect(rows[1]).toHaveTextContent('older-agent')
|
||||
})
|
||||
|
||||
it('clicking "Started" column header sorts ascending, clicking again sorts descending', () => {
|
||||
const older = makeAgent({ id: 'a1', name: 'older-agent', createdAt: new Date(Date.now() - 7200_000).toISOString() })
|
||||
const newer = makeAgent({ id: 'a2', name: 'newer-agent', createdAt: new Date(Date.now() - 1800_000).toISOString() })
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [older, newer], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
// First click: default is desc (newest first), clicking toggles to asc (oldest first)
|
||||
fireEvent.click(screen.getByRole('columnheader', { name: /started/i }))
|
||||
const rowsAsc = within(document.querySelector('tbody')!).getAllByRole('row')
|
||||
expect(rowsAsc[0]).toHaveTextContent('older-agent')
|
||||
expect(rowsAsc[1]).toHaveTextContent('newer-agent')
|
||||
|
||||
// Second click: re-query header (text content changed to '▲'), toggle back to desc
|
||||
fireEvent.click(screen.getByRole('columnheader', { name: /started/i }))
|
||||
const rowsDesc = within(document.querySelector('tbody')!).getAllByRole('row')
|
||||
expect(rowsDesc[0]).toHaveTextContent('newer-agent')
|
||||
expect(rowsDesc[1]).toHaveTextContent('older-agent')
|
||||
})
|
||||
|
||||
it('agent name cell renders a Link to /agents with selected param', () => {
|
||||
const agent = makeAgent({ id: 'agent-xyz', name: 'test-agent' })
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [agent], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
const link = screen.getByRole('link', { name: 'test-agent' })
|
||||
expect(link).toBeInTheDocument()
|
||||
expect(link).toHaveAttribute('href', expect.stringContaining('/agents'))
|
||||
expect(link).toHaveAttribute('href', expect.stringContaining('agent-xyz'))
|
||||
})
|
||||
|
||||
it('non-zero metric cell has cursor-pointer class; zero cell does not', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({
|
||||
data: [makeAgent({ id: 'a1', questionsCount: 5 })],
|
||||
isLoading: false,
|
||||
})
|
||||
render(<RadarPage />)
|
||||
|
||||
// Find all cells with text "5" — the non-zero questions cell
|
||||
const tbody = document.querySelector('tbody')!
|
||||
const cells = tbody.querySelectorAll('td')
|
||||
|
||||
// Find the cell containing "5" (questionsCount)
|
||||
const nonZeroCell = Array.from(cells).find(cell => cell.textContent === '5')
|
||||
expect(nonZeroCell).toBeTruthy()
|
||||
expect(nonZeroCell!.className).toContain('cursor-pointer')
|
||||
|
||||
// Find a zero cell (messagesCount=0)
|
||||
const zeroCell = Array.from(cells).find(cell => cell.textContent === '0' && !cell.className.includes('cursor-pointer'))
|
||||
expect(zeroCell).toBeTruthy()
|
||||
})
|
||||
|
||||
it('selecting mode filter calls navigate with mode param', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
const selects = screen.getAllByRole('combobox')
|
||||
// Mode select is the 4th select (timeRange, status, initiative, mode)
|
||||
const modeSelect = selects[3]
|
||||
fireEvent.change(modeSelect, { target: { value: 'execute' } })
|
||||
|
||||
expect(mockNavigate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
search: expect.any(Function),
|
||||
})
|
||||
)
|
||||
|
||||
// Call the search function to verify the result
|
||||
const call = mockNavigate.mock.calls[0][0]
|
||||
const result = call.search({ timeRange: '24h', status: 'all', initiativeId: undefined, mode: 'all' })
|
||||
expect(result).toMatchObject({ mode: 'execute' })
|
||||
})
|
||||
|
||||
it('selecting status filter calls navigate with status param', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
const selects = screen.getAllByRole('combobox')
|
||||
// Status select is the 2nd select
|
||||
const statusSelect = selects[1]
|
||||
fireEvent.change(statusSelect, { target: { value: 'running' } })
|
||||
|
||||
expect(mockNavigate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
search: expect.any(Function),
|
||||
})
|
||||
)
|
||||
|
||||
const call = mockNavigate.mock.calls[0][0]
|
||||
const result = call.search({ timeRange: '24h', status: 'all', initiativeId: undefined, mode: 'all' })
|
||||
expect(result).toMatchObject({ status: 'running' })
|
||||
})
|
||||
|
||||
it('empty state shown when agents returns []', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
|
||||
expect(screen.getByText('No agent activity in this time period')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('loading skeleton shown when isLoading is true', () => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: undefined, isLoading: true })
|
||||
render(<RadarPage />)
|
||||
|
||||
const skeletons = document.querySelectorAll('.animate-pulse')
|
||||
expect(skeletons.length).toBeGreaterThanOrEqual(5)
|
||||
})
|
||||
|
||||
describe('dialog integration', () => {
|
||||
const alphaAgent = {
|
||||
id: 'agent-alpha-id',
|
||||
name: 'agent-alpha',
|
||||
mode: 'execute',
|
||||
status: 'running',
|
||||
initiativeId: null,
|
||||
initiativeName: null,
|
||||
taskId: null,
|
||||
taskName: null,
|
||||
createdAt: new Date(Date.now() - 3600_000).toISOString(),
|
||||
questionsCount: 3,
|
||||
messagesCount: 2,
|
||||
subagentsCount: 1,
|
||||
compactionsCount: 4,
|
||||
}
|
||||
const betaAgent = {
|
||||
id: 'agent-beta-id',
|
||||
name: 'agent-beta',
|
||||
mode: 'execute',
|
||||
status: 'stopped',
|
||||
initiativeId: null,
|
||||
initiativeName: null,
|
||||
taskId: null,
|
||||
taskName: null,
|
||||
createdAt: new Date(Date.now() - 7200_000).toISOString(),
|
||||
questionsCount: 0,
|
||||
messagesCount: 0,
|
||||
subagentsCount: 0,
|
||||
compactionsCount: 0,
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [alphaAgent, betaAgent], isLoading: false })
|
||||
})
|
||||
|
||||
it('clicking a non-zero Compactions cell opens CompactionEventsDialog with correct agentId and agentName', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-compactions-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('compaction-dialog')
|
||||
expect(dialog).toBeInTheDocument()
|
||||
expect(dialog).toHaveAttribute('data-agent-name', 'agent-alpha')
|
||||
expect(dialog).toHaveAttribute('data-agent-id', 'agent-alpha-id')
|
||||
})
|
||||
|
||||
it('clicking a non-zero Subagents cell opens SubagentSpawnsDialog', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-subagents-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('subagents-dialog')
|
||||
expect(dialog).toBeInTheDocument()
|
||||
expect(dialog).toHaveAttribute('data-agent-name', 'agent-alpha')
|
||||
expect(dialog).toHaveAttribute('data-agent-id', 'agent-alpha-id')
|
||||
})
|
||||
|
||||
it('clicking a non-zero Questions cell opens QuestionsAskedDialog', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-questions-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('questions-dialog')
|
||||
expect(dialog).toBeInTheDocument()
|
||||
expect(dialog).toHaveAttribute('data-agent-name', 'agent-alpha')
|
||||
expect(dialog).toHaveAttribute('data-agent-id', 'agent-alpha-id')
|
||||
})
|
||||
|
||||
it('clicking a non-zero Messages cell opens InterAgentMessagesDialog', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-messages-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('messages-dialog')
|
||||
expect(dialog).toBeInTheDocument()
|
||||
expect(dialog).toHaveAttribute('data-agent-name', 'agent-alpha')
|
||||
expect(dialog).toHaveAttribute('data-agent-id', 'agent-alpha-id')
|
||||
})
|
||||
|
||||
it('dialog closes when onOpenChange(false) fires', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-compactions-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('compaction-dialog')
|
||||
expect(dialog).toBeInTheDocument()
|
||||
fireEvent.click(screen.getByRole('button', { name: 'close' }))
|
||||
expect(screen.queryByTestId('compaction-dialog')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('zero metric cells do not open any dialog when clicked', () => {
|
||||
render(<RadarPage />)
|
||||
// agent-beta has all zeros — click each zero metric cell
|
||||
fireEvent.click(screen.getByTestId('cell-compactions-agent-beta-id'))
|
||||
fireEvent.click(screen.getByTestId('cell-subagents-agent-beta-id'))
|
||||
fireEvent.click(screen.getByTestId('cell-questions-agent-beta-id'))
|
||||
fireEvent.click(screen.getByTestId('cell-messages-agent-beta-id'))
|
||||
expect(screen.queryByTestId('compaction-dialog')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('subagents-dialog')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('questions-dialog')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('messages-dialog')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('passes isAgentRunning=true when the agent status is "running"', async () => {
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId(`cell-compactions-agent-alpha-id`)
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('compaction-dialog')
|
||||
expect(dialog).toHaveAttribute('data-is-running', 'true')
|
||||
})
|
||||
|
||||
it('passes isAgentRunning=false when the agent status is "stopped"', async () => {
|
||||
// Use a stopped agent with non-zero compactions
|
||||
const stoppedAgent = { ...betaAgent, id: 'stopped-agent-id', name: 'stopped-agent', compactionsCount: 2, status: 'stopped' }
|
||||
mockListForRadarUseQuery.mockReturnValue({ data: [stoppedAgent], isLoading: false })
|
||||
render(<RadarPage />)
|
||||
const cell = screen.getByTestId('cell-compactions-stopped-agent-id')
|
||||
fireEvent.click(cell)
|
||||
const dialog = await screen.findByTestId('compaction-dialog')
|
||||
expect(dialog).toHaveAttribute('data-is-running', 'false')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('AppLayout - Radar nav item', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('"Radar" appears in AppLayout nav', () => {
|
||||
mockListAgentsUseQuery.mockReturnValue({ data: [], isLoading: false })
|
||||
render(
|
||||
<AppLayout connectionState="connected">
|
||||
<div>content</div>
|
||||
</AppLayout>
|
||||
)
|
||||
|
||||
const radarLink = screen.getByRole('link', { name: 'Radar' })
|
||||
expect(radarLink).toBeInTheDocument()
|
||||
expect(radarLink).toHaveAttribute('href', expect.stringContaining('/radar'))
|
||||
})
|
||||
})
|
||||
388
apps/web/src/routes/radar.tsx
Normal file
388
apps/web/src/routes/radar.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { createFileRoute, useNavigate, useSearch, Link } from '@tanstack/react-router'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import { useLiveUpdates } from '@/hooks'
|
||||
import type { LiveUpdateRule } from '@/hooks'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { CompactionEventsDialog } from '@/components/radar/CompactionEventsDialog'
|
||||
import { SubagentSpawnsDialog } from '@/components/radar/SubagentSpawnsDialog'
|
||||
import { QuestionsAskedDialog } from '@/components/radar/QuestionsAskedDialog'
|
||||
import { InterAgentMessagesDialog } from '@/components/radar/InterAgentMessagesDialog'
|
||||
|
||||
type TimeRange = '1h' | '6h' | '24h' | '7d' | 'all'
|
||||
type StatusFilter = 'all' | 'running' | 'completed' | 'crashed'
|
||||
type ModeFilter = 'all' | 'execute' | 'discuss' | 'plan' | 'detail' | 'refine' | 'chat' | 'errand'
|
||||
type SortColumn =
|
||||
| 'name'
|
||||
| 'mode'
|
||||
| 'status'
|
||||
| 'initiative'
|
||||
| 'task'
|
||||
| 'started'
|
||||
| 'questions'
|
||||
| 'messages'
|
||||
| 'subagents'
|
||||
| 'compactions'
|
||||
|
||||
const VALID_TIME_RANGES: TimeRange[] = ['1h', '6h', '24h', '7d', 'all']
|
||||
const VALID_STATUSES: StatusFilter[] = ['all', 'running', 'completed', 'crashed']
|
||||
const VALID_MODES: ModeFilter[] = [
|
||||
'all',
|
||||
'execute',
|
||||
'discuss',
|
||||
'plan',
|
||||
'detail',
|
||||
'refine',
|
||||
'chat',
|
||||
'errand',
|
||||
]
|
||||
|
||||
export const Route = createFileRoute('/radar')({
|
||||
component: RadarPage,
|
||||
validateSearch: (search: Record<string, unknown>) => ({
|
||||
timeRange: VALID_TIME_RANGES.includes(search.timeRange as TimeRange)
|
||||
? (search.timeRange as TimeRange)
|
||||
: '24h',
|
||||
status: VALID_STATUSES.includes(search.status as StatusFilter)
|
||||
? (search.status as StatusFilter)
|
||||
: 'all',
|
||||
initiativeId: typeof search.initiativeId === 'string' ? search.initiativeId : undefined,
|
||||
mode: VALID_MODES.includes(search.mode as ModeFilter) ? (search.mode as ModeFilter) : 'all',
|
||||
}),
|
||||
})
|
||||
|
||||
const RADAR_LIVE_UPDATE_RULES: LiveUpdateRule[] = [
|
||||
{ prefix: 'agent:waiting', invalidate: ['agent'] },
|
||||
{ prefix: 'conversation:created', invalidate: ['agent'] },
|
||||
{ prefix: 'agent:stopped', invalidate: ['agent'] },
|
||||
{ prefix: 'agent:crashed', invalidate: ['agent'] },
|
||||
]
|
||||
|
||||
export function RadarPage() {
|
||||
const { timeRange, status, initiativeId, mode } = useSearch({ from: '/radar' }) as {
|
||||
timeRange: TimeRange
|
||||
status: StatusFilter
|
||||
initiativeId: string | undefined
|
||||
mode: ModeFilter
|
||||
}
|
||||
const navigate = useNavigate()
|
||||
|
||||
useLiveUpdates(RADAR_LIVE_UPDATE_RULES)
|
||||
|
||||
const { data: agents = [], isLoading } = trpc.agent.listForRadar.useQuery({
|
||||
timeRange,
|
||||
status: status === 'all' ? undefined : status,
|
||||
initiativeId: initiativeId ?? undefined,
|
||||
mode: mode === 'all' ? undefined : mode,
|
||||
})
|
||||
|
||||
const { data: initiatives = [] } = trpc.listInitiatives.useQuery()
|
||||
|
||||
type DrilldownType = 'questions' | 'messages' | 'subagents' | 'compactions'
|
||||
|
||||
const [drilldown, setDrilldown] = useState<{
|
||||
type: DrilldownType
|
||||
agentId: string
|
||||
agentName: string
|
||||
} | null>(null)
|
||||
|
||||
const [sortState, setSortState] = useState<{ column: SortColumn; direction: 'asc' | 'desc' }>({
|
||||
column: 'started',
|
||||
direction: 'desc',
|
||||
})
|
||||
|
||||
function handleSort(column: SortColumn) {
|
||||
setSortState((prev) =>
|
||||
prev.column === column
|
||||
? { column, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
|
||||
: { column, direction: 'asc' },
|
||||
)
|
||||
}
|
||||
|
||||
const sortedAgents = useMemo(() => {
|
||||
return [...agents].sort((a, b) => {
|
||||
let cmp = 0
|
||||
switch (sortState.column) {
|
||||
case 'name':
|
||||
cmp = a.name.localeCompare(b.name)
|
||||
break
|
||||
case 'mode':
|
||||
cmp = a.mode.localeCompare(b.mode)
|
||||
break
|
||||
case 'status':
|
||||
cmp = a.status.localeCompare(b.status)
|
||||
break
|
||||
case 'initiative':
|
||||
cmp = (a.initiativeName ?? '').localeCompare(b.initiativeName ?? '')
|
||||
break
|
||||
case 'task':
|
||||
cmp = (a.taskName ?? '').localeCompare(b.taskName ?? '')
|
||||
break
|
||||
case 'started':
|
||||
cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
|
||||
break
|
||||
case 'questions':
|
||||
cmp = a.questionsCount - b.questionsCount
|
||||
break
|
||||
case 'messages':
|
||||
cmp = a.messagesCount - b.messagesCount
|
||||
break
|
||||
case 'subagents':
|
||||
cmp = a.subagentsCount - b.subagentsCount
|
||||
break
|
||||
case 'compactions':
|
||||
cmp = a.compactionsCount - b.compactionsCount
|
||||
break
|
||||
}
|
||||
return sortState.direction === 'asc' ? cmp : -cmp
|
||||
})
|
||||
}, [agents, sortState])
|
||||
|
||||
const totalQuestions = agents.reduce((sum, a) => sum + a.questionsCount, 0)
|
||||
const totalMessages = agents.reduce((sum, a) => sum + a.messagesCount, 0)
|
||||
const totalSubagents = agents.reduce((sum, a) => sum + a.subagentsCount, 0)
|
||||
const totalCompactions = agents.reduce((sum, a) => sum + a.compactionsCount, 0)
|
||||
|
||||
function sortIndicator(column: SortColumn) {
|
||||
if (sortState.column !== column) return null
|
||||
return sortState.direction === 'asc' ? ' ▲' : ' ▼'
|
||||
}
|
||||
|
||||
function SortableTh({
|
||||
column,
|
||||
label,
|
||||
className,
|
||||
}: {
|
||||
column: SortColumn
|
||||
label: string
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<th
|
||||
className={`cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground ${className ?? ''}`}
|
||||
onClick={() => handleSort(column)}
|
||||
>
|
||||
{label}
|
||||
{sortIndicator(column)}
|
||||
</th>
|
||||
)
|
||||
}
|
||||
|
||||
const isAgentRunning = drilldown
|
||||
? agents.find((a) => a.id === drilldown.agentId)?.status === 'running'
|
||||
: false
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Radar</h1>
|
||||
|
||||
{/* Summary stat cards */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-bold">{totalQuestions}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Questions Asked</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-bold">{totalMessages}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Inter-Agent Messages</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-bold">{totalSubagents}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Subagent Spawns</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-bold">{totalCompactions}</p>
|
||||
<p className="text-sm text-muted-foreground">Total Compaction Events</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div className="flex gap-4 items-center">
|
||||
<select
|
||||
value={timeRange}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value as TimeRange
|
||||
navigate({ search: (prev) => ({ ...prev, timeRange: val }) })
|
||||
}}
|
||||
>
|
||||
<option value="1h">Last 1h</option>
|
||||
<option value="6h">Last 6h</option>
|
||||
<option value="24h">Last 24h</option>
|
||||
<option value="7d">Last 7d</option>
|
||||
<option value="all">All time</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value as StatusFilter
|
||||
navigate({ search: (prev) => ({ ...prev, status: val }) })
|
||||
}}
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="running">Running</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="crashed">Crashed</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={initiativeId ?? ''}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
navigate({
|
||||
search: (prev) => ({ ...prev, initiativeId: val === '' ? undefined : val }),
|
||||
})
|
||||
}}
|
||||
>
|
||||
<option value="">All Initiatives</option>
|
||||
{initiatives.map((ini: { id: string; name: string }) => (
|
||||
<option key={ini.id} value={ini.id}>
|
||||
{ini.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value as ModeFilter
|
||||
navigate({ search: (prev) => ({ ...prev, mode: val }) })
|
||||
}}
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="execute">Execute</option>
|
||||
<option value="discuss">Discuss</option>
|
||||
<option value="plan">Plan</option>
|
||||
<option value="detail">Detail</option>
|
||||
<option value="refine">Refine</option>
|
||||
<option value="chat">Chat</option>
|
||||
<option value="errand">Errand</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && agents.length === 0 && (
|
||||
<p className="text-center text-muted-foreground">No agent activity in this time period</p>
|
||||
)}
|
||||
|
||||
{/* Agent activity table */}
|
||||
{(isLoading || agents.length > 0) && (
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<SortableTh column="name" label="Agent Name" />
|
||||
<SortableTh column="mode" label="Mode" />
|
||||
<SortableTh column="status" label="Status" />
|
||||
<SortableTh column="initiative" label="Initiative" />
|
||||
<SortableTh column="task" label="Task" />
|
||||
<SortableTh column="started" label="Started" />
|
||||
<SortableTh column="questions" label="Questions" className="text-right" />
|
||||
<SortableTh column="messages" label="Messages" className="text-right" />
|
||||
<SortableTh column="subagents" label="Subagents" className="text-right" />
|
||||
<SortableTh column="compactions" label="Compactions" className="text-right" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading
|
||||
? Array.from({ length: 5 }).map((_, i) => (
|
||||
<tr key={i}>
|
||||
<td colSpan={10} className="px-3 py-2">
|
||||
<div className="h-4 bg-muted rounded animate-pulse" />
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: sortedAgents.map((agent) => (
|
||||
<tr key={agent.id} className="border-b border-border/50 hover:bg-muted/30">
|
||||
<td className="px-3 py-2">
|
||||
<Link to="/agents" search={{ selected: agent.id }}>
|
||||
{agent.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-3 py-2">{agent.mode}</td>
|
||||
<td className="px-3 py-2">{agent.status}</td>
|
||||
<td className="px-3 py-2">{agent.initiativeName ?? '—'}</td>
|
||||
<td className="px-3 py-2">{agent.taskName ?? '—'}</td>
|
||||
<td className="px-3 py-2">
|
||||
{new Date(agent.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td
|
||||
data-testid={`cell-questions-${agent.id}`}
|
||||
className={agent.questionsCount > 0 ? 'cursor-pointer hover:bg-muted/50 text-right px-3 py-2' : 'text-muted-foreground text-right px-3 py-2'}
|
||||
onClick={agent.questionsCount > 0
|
||||
? () => setDrilldown({ type: 'questions', agentId: agent.id, agentName: agent.name })
|
||||
: undefined}
|
||||
>
|
||||
{agent.questionsCount}
|
||||
</td>
|
||||
<td
|
||||
data-testid={`cell-messages-${agent.id}`}
|
||||
className={agent.messagesCount > 0 ? 'cursor-pointer hover:bg-muted/50 text-right px-3 py-2' : 'text-muted-foreground text-right px-3 py-2'}
|
||||
onClick={agent.messagesCount > 0
|
||||
? () => setDrilldown({ type: 'messages', agentId: agent.id, agentName: agent.name })
|
||||
: undefined}
|
||||
>
|
||||
{agent.messagesCount}
|
||||
</td>
|
||||
<td
|
||||
data-testid={`cell-subagents-${agent.id}`}
|
||||
className={agent.subagentsCount > 0 ? 'cursor-pointer hover:bg-muted/50 text-right px-3 py-2' : 'text-muted-foreground text-right px-3 py-2'}
|
||||
onClick={agent.subagentsCount > 0
|
||||
? () => setDrilldown({ type: 'subagents', agentId: agent.id, agentName: agent.name })
|
||||
: undefined}
|
||||
>
|
||||
{agent.subagentsCount}
|
||||
</td>
|
||||
<td
|
||||
data-testid={`cell-compactions-${agent.id}`}
|
||||
className={agent.compactionsCount > 0 ? 'cursor-pointer hover:bg-muted/50 text-right px-3 py-2' : 'text-muted-foreground text-right px-3 py-2'}
|
||||
onClick={agent.compactionsCount > 0
|
||||
? () => setDrilldown({ type: 'compactions', agentId: agent.id, agentName: agent.name })
|
||||
: undefined}
|
||||
>
|
||||
{agent.compactionsCount}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
<CompactionEventsDialog
|
||||
open={drilldown?.type === 'compactions'}
|
||||
onOpenChange={(open) => { if (!open) setDrilldown(null) }}
|
||||
agentId={drilldown?.agentId ?? ''}
|
||||
agentName={drilldown?.agentName ?? ''}
|
||||
isAgentRunning={isAgentRunning}
|
||||
/>
|
||||
<SubagentSpawnsDialog
|
||||
open={drilldown?.type === 'subagents'}
|
||||
onOpenChange={(open) => { if (!open) setDrilldown(null) }}
|
||||
agentId={drilldown?.agentId ?? ''}
|
||||
agentName={drilldown?.agentName ?? ''}
|
||||
isAgentRunning={isAgentRunning}
|
||||
/>
|
||||
<QuestionsAskedDialog
|
||||
open={drilldown?.type === 'questions'}
|
||||
onOpenChange={(open) => { if (!open) setDrilldown(null) }}
|
||||
agentId={drilldown?.agentId ?? ''}
|
||||
agentName={drilldown?.agentName ?? ''}
|
||||
isAgentRunning={isAgentRunning}
|
||||
/>
|
||||
<InterAgentMessagesDialog
|
||||
open={drilldown?.type === 'messages'}
|
||||
onOpenChange={(open) => { if (!open) setDrilldown(null) }}
|
||||
agentId={drilldown?.agentId ?? ''}
|
||||
agentName={drilldown?.agentName ?? ''}
|
||||
isAgentRunning={isAgentRunning}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -245,8 +245,8 @@ Index: `(phaseId)`.
|
||||
| ProjectRepository | + junction ops: setInitiativeProjects (diff-based), findProjectsByInitiativeId |
|
||||
| AccountRepository | + findNextAvailable (round-robin), markExhausted, clearExpiredExhaustion |
|
||||
| ProposalRepository | + findByAgentIdAndStatus, updateManyByAgentId, countByAgentIdAndStatus |
|
||||
| LogChunkRepository | insertChunk, findByAgentId, deleteByAgentId, getSessionCount |
|
||||
| ConversationRepository | create, findById, findPendingForAgent, answer |
|
||||
| LogChunkRepository | insertChunk, findByAgentId, findByAgentIds (batch), deleteByAgentId, getSessionCount |
|
||||
| ConversationRepository | create, findById, findPendingForAgent, answer, countByFromAgentIds (batch), findByFromAgentId |
|
||||
| ChatSessionRepository | createSession, findActiveSession, findActiveSessionByAgentId, updateSession, createMessage, findMessagesBySessionId |
|
||||
| ReviewCommentRepository | create, findByPhaseId, resolve, unresolve, delete |
|
||||
| ErrandRepository | create, findById, findAll (filter by projectId/status), update, delete |
|
||||
|
||||
@@ -69,6 +69,10 @@ Each procedure uses `require*Repository(ctx)` helpers that throw `TRPCError(INTE
|
||||
| getActiveRefineAgent | query | Active refine agent for initiative |
|
||||
| getActiveConflictAgent | query | Active conflict resolution agent for initiative (name starts with `conflict-`) |
|
||||
| listWaitingAgents | query | Agents waiting for input |
|
||||
| listForRadar | query | Radar page: per-agent metrics (questionsCount, messagesCount, subagentsCount, compactionsCount) with time/status/mode/initiative filters |
|
||||
| getCompactionEvents | query | Compaction events for one agent: `{agentId}` → `{timestamp, sessionNumber}[]` (cap 200) |
|
||||
| getSubagentSpawns | query | Subagent spawn events for one agent: `{agentId}` → `{timestamp, description, promptPreview, fullPrompt}[]` (cap 200) |
|
||||
| getQuestionsAsked | query | AskUserQuestion tool calls for one agent: `{agentId}` → `{timestamp, questions[]}[]` (cap 200) |
|
||||
| onAgentOutput | subscription | Live raw JSONL output stream via EventBus |
|
||||
|
||||
### Tasks
|
||||
@@ -254,6 +258,7 @@ Inter-agent communication for parallel agents.
|
||||
| `getPendingConversations` | query | Poll for incoming questions: `{agentId}` → Conversation[] |
|
||||
| `getConversation` | query | Get conversation by ID: `{id}` → Conversation |
|
||||
| `answerConversation` | mutation | Answer a conversation: `{id, answer}` → Conversation |
|
||||
| `getByFromAgent` | query | Radar drilldown: all conversations sent by agent: `{agentId}` → `{id, timestamp, toAgentName, toAgentId, question, answer, status, taskId, phaseId}[]` (cap 200) |
|
||||
|
||||
Target resolution: `toAgentId` → direct; `taskId` → find running agent by task; `phaseId` → find running agent by any task in phase.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user