1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import type {
TaskConversationResponse,
SupervisorConversationResponse,
} from "../../lib/api";
import { ConversationMessage } from "./ConversationMessage";
interface ConversationViewProps {
conversation: TaskConversationResponse | SupervisorConversationResponse;
}
// Type guard for task conversation
function isTaskConversation(
conv: TaskConversationResponse | SupervisorConversationResponse
): conv is TaskConversationResponse {
return "taskId" in conv;
}
// Type guard for supervisor conversation
function isSupervisorConversation(
conv: TaskConversationResponse | SupervisorConversationResponse
): conv is SupervisorConversationResponse {
return "supervisorTaskId" in conv;
}
export function ConversationView({ conversation }: ConversationViewProps) {
const messages = conversation.messages;
return (
<div className="flex flex-col h-full">
{/* Header info */}
<div className="shrink-0 p-3 border-b border-[rgba(117,170,252,0.1)] bg-[rgba(0,0,0,0.2)]">
<div className="flex items-center justify-between">
<div>
{isTaskConversation(conversation) ? (
<div className="font-mono text-xs text-[#9bc3ff]">
{conversation.taskName}
<span
className={`ml-2 text-[9px] uppercase px-1.5 py-0.5 border ${
conversation.status === "done"
? "text-emerald-400 border-emerald-400/30"
: conversation.status === "running"
? "text-green-400 border-green-400/30"
: conversation.status === "failed"
? "text-red-400 border-red-400/30"
: "text-[#7788aa] border-[rgba(117,170,252,0.25)]"
}`}
>
{conversation.status}
</span>
</div>
) : isSupervisorConversation(conversation) ? (
<div className="font-mono text-xs text-[#9bc3ff]">
Supervisor
<span className="ml-2 text-[9px] uppercase text-cyan-400 px-1.5 py-0.5 border border-cyan-400/30">
{conversation.phase}
</span>
</div>
) : null}
</div>
<div className="flex items-center gap-4 font-mono text-[10px] text-[#556677]">
<span>{messages.length} messages</span>
{isTaskConversation(conversation) && conversation.totalTokens && (
<span>{conversation.totalTokens.toLocaleString()} tokens</span>
)}
{isTaskConversation(conversation) &&
conversation.totalCost !== null &&
conversation.totalCost > 0 && (
<span>${conversation.totalCost.toFixed(4)}</span>
)}
</div>
</div>
{/* Spawned tasks (supervisor only) */}
{isSupervisorConversation(conversation) && conversation.spawnedTasks.length > 0 && (
<div className="mt-2 flex flex-wrap gap-2">
<span className="font-mono text-[9px] text-[#7788aa] uppercase">Spawned:</span>
{conversation.spawnedTasks.map((task) => (
<span
key={task.taskId}
className={`font-mono text-[9px] px-1.5 py-0.5 border ${
task.status === "done"
? "text-emerald-400 border-emerald-400/30"
: task.status === "running"
? "text-green-400 border-green-400/30"
: task.status === "failed"
? "text-red-400 border-red-400/30"
: "text-[#7788aa] border-[rgba(117,170,252,0.25)]"
}`}
>
{task.taskName}
</span>
))}
</div>
)}
</div>
{/* Messages */}
<div className="flex-1 overflow-y-auto">
{messages.length === 0 ? (
<div className="flex items-center justify-center h-32">
<div className="font-mono text-[#7788aa] text-xs">No messages</div>
</div>
) : (
<div className="divide-y divide-[rgba(117,170,252,0.05)]">
{messages.map((message, index) => (
<ConversationMessage key={message.id || index} message={message} />
))}
</div>
)}
</div>
</div>
);
}
|
