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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
import { useState, useEffect, useCallback } from "react";
import { useTaskSubscription } from "../../hooks/useTaskSubscription";
import type { TaskOutputEvent } from "../../hooks/useTaskSubscription";
import { TaskOutput } from "../mesh/TaskOutput";
import { WorktreeFilesPanel } from "../mesh/WorktreeFilesPanel";
import { getTaskOutput } from "../../lib/api";
interface TaskSlideOutPanelProps {
taskId: string;
taskName?: string;
isOpen: boolean;
onClose: () => void;
}
export function TaskSlideOutPanel({
taskId,
taskName,
isOpen,
onClose,
}: TaskSlideOutPanelProps) {
const [entries, setEntries] = useState<TaskOutputEvent[]>([]);
const [isStreaming, setIsStreaming] = useState(false);
const [loadingHistory, setLoadingHistory] = useState(false);
// Escape key handler
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
if (isOpen) document.addEventListener("keydown", handleEsc);
return () => document.removeEventListener("keydown", handleEsc);
}, [isOpen, onClose]);
// Load historical output when panel opens with a taskId
useEffect(() => {
if (!isOpen || !taskId) {
setEntries([]);
setIsStreaming(false);
return;
}
let cancelled = false;
setLoadingHistory(true);
getTaskOutput(taskId)
.then((res) => {
if (cancelled) return;
// Map TaskOutputEntry to TaskOutputEvent
const mapped: TaskOutputEvent[] = res.entries.map((e) => ({
taskId: e.taskId,
messageType: e.messageType,
content: e.content,
toolName: e.toolName,
toolInput: e.toolInput,
isError: e.isError,
costUsd: e.costUsd,
durationMs: e.durationMs,
isPartial: false,
}));
setEntries(mapped);
})
.catch((err) => {
if (cancelled) return;
console.error("Failed to load task output history:", err);
})
.finally(() => {
if (!cancelled) setLoadingHistory(false);
});
return () => {
cancelled = true;
};
}, [isOpen, taskId]);
// Handle live output events
const handleOutput = useCallback(
(event: TaskOutputEvent) => {
if (event.isPartial) return;
setEntries((prev) => [...prev, event]);
setIsStreaming(true);
},
[]
);
// Handle task updates (to detect completion)
const handleUpdate = useCallback(
(event: { status: string }) => {
if (
event.status === "completed" ||
event.status === "failed" ||
event.status === "cancelled"
) {
setIsStreaming(false);
} else if (event.status === "running") {
setIsStreaming(true);
}
},
[]
);
// Subscribe to live output
useTaskSubscription({
taskId: isOpen ? taskId : null,
subscribeOutput: isOpen && !!taskId,
onOutput: handleOutput,
onUpdate: handleUpdate,
});
return (
<>
{/* Backdrop overlay */}
<div
className={`fixed inset-0 bg-black/30 z-50 transition-opacity duration-300 ${
isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
onClick={onClose}
/>
{/* Slide-out panel */}
<div
className={`fixed top-0 right-0 h-full w-[550px] max-w-[90vw] z-50 bg-[#0d1117] border-l border-[rgba(117,170,252,0.2)] shadow-xl shadow-black/50 flex flex-col transition-transform duration-300 ease-in-out ${
isOpen ? "translate-x-0" : "translate-x-full"
}`}
>
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.25)] shrink-0">
<div className="flex items-center gap-2 min-w-0 flex-1">
<span className="text-[10px] font-mono text-[#75aafc] uppercase tracking-wide shrink-0">
Task
</span>
<span className="text-[12px] font-mono text-white truncate">
{taskName || taskId}
</span>
{isStreaming && (
<span className="flex items-center gap-1 px-1.5 py-0.5 bg-green-400/10 border border-green-400/30 shrink-0">
<span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
<span className="text-green-400 font-mono text-[9px] uppercase">
Live
</span>
</span>
)}
</div>
<button
type="button"
onClick={onClose}
className="text-[#7788aa] hover:text-white font-mono text-sm transition-colors ml-2 shrink-0 w-6 h-6 flex items-center justify-center"
>
✕
</button>
</div>
{/* Content */}
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
{/* Task Output section (~60% height) */}
<div className="flex-[3] min-h-0 flex flex-col border-b border-[rgba(117,170,252,0.15)]">
{loadingHistory ? (
<div className="flex-1 flex items-center justify-center">
<span className="font-mono text-xs text-[#555] animate-pulse">
Loading output...
</span>
</div>
) : (
<TaskOutput
entries={entries}
isStreaming={isStreaming}
taskId={taskId}
/>
)}
</div>
{/* Worktree Changes section (~40% height) */}
<div className="flex-[2] min-h-0 overflow-y-auto">
{taskId && <WorktreeFilesPanel taskId={taskId} />}
</div>
</div>
</div>
</>
);
}
|
