Skip to content

Commit 4e61076

Browse files
EhabYEhabY
committed
Add task detail view with navigation and log streaming
Adds the task detail view layer including: Components: - TaskDetailView as the main detail view container - TaskDetailHeader with back button, status, and action menu - AgentChatHistory for displaying task log entries with scroll tracking - TaskInput with pause button and state-aware placeholder - ErrorBanner for displaying task errors with link to logs App.tsx enhancements: - Navigation between task list and detail view (inline in Task History) - Selected task state persistence and validation - Adaptive polling intervals based on task state (active vs idle) - Real-time log streaming via logsAppend push messages - refs to avoid stale closures in message handlers - Transition animation when switching views Config additions: - TASK_ACTIVE_INTERVAL_MS for faster updates when task is working - TASK_IDLE_INTERVAL_MS for slower updates when task is idle/complete Also adds codicons CSS import for icon rendering.
1 parent 508db63 commit 4e61076

8 files changed

Lines changed: 428 additions & 8 deletions

File tree

‎packages/tasks/src/App.tsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ import { CreateTaskSection } from "./components/CreateTaskSection";
1212
import { ErrorState } from "./components/ErrorState";
1313
import { NoTemplateState } from "./components/NoTemplateState";
1414
import { NotSupportedState } from "./components/NotSupportedState";
15+
import { TaskDetailView } from "./components/TaskDetailView";
1516
import { TaskList } from "./components/TaskList";
1617
import { useCollapsibleToggle } from "./hooks/useCollapsibleToggle";
1718
import { useScrollableHeight } from "./hooks/useScrollableHeight";
19+
import { useSelectedTask } from "./hooks/useSelectedTask";
1820
import { useTasksQuery } from "./hooks/useTasksQuery";
1921

2022
interface PersistedState extends InitResponse {
@@ -30,6 +32,9 @@ export default function App() {
3032
const { tasks, templates, tasksSupported, data, isLoading, error, refetch } =
3133
useTasksQuery(restored);
3234

35+
const { selectedTask, isLoadingDetails, selectTask, deselectTask } =
36+
useSelectedTask(tasks);
37+
3338
const [createRef, createOpen, setCreateOpen] =
3439
useCollapsibleToggle<CollapsibleElement>(restored?.createExpanded ?? true);
3540
const [historyRef, historyOpen] = useCollapsibleToggle<CollapsibleElement>(
@@ -43,8 +48,11 @@ export default function App() {
4348

4449
const { onNotification } = useIpc();
4550
useEffect(() => {
46-
return onNotification(TasksApi.showCreateForm, () => setCreateOpen(true));
47-
}, [onNotification, setCreateOpen]);
51+
return onNotification(TasksApi.showCreateForm, () => {
52+
deselectTask();
53+
setCreateOpen(true);
54+
});
55+
}, [onNotification, setCreateOpen, deselectTask]);
4856

4957
useEffect(() => {
5058
if (data) {
@@ -96,12 +104,15 @@ export default function App() {
96104
open={historyOpen}
97105
>
98106
<VscodeScrollable ref={historyScrollRef}>
99-
<TaskList
100-
tasks={tasks}
101-
onSelectTask={(_taskId: string) => {
102-
// Task detail view will be added in next PR
103-
}}
104-
/>
107+
{selectedTask ? (
108+
<TaskDetailView details={selectedTask} onBack={deselectTask} />
109+
) : isLoadingDetails ? (
110+
<div className="loading-container">
111+
<VscodeProgressRing />
112+
</div>
113+
) : (
114+
<TaskList tasks={tasks} onSelectTask={selectTask} />
115+
)}
105116
</VscodeScrollable>
106117
</VscodeCollapsible>
107118
</div>

‎packages/tasks/src/components/AgentChatHistory.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { useEffect, useRef, useCallback } from "react";
2+
3+
import type { LogsStatus, TaskLogEntry } from "@repo/shared";
4+
5+
interface AgentChatHistoryProps {
6+
logs: TaskLogEntry[];
7+
logsStatus: LogsStatus;
8+
isThinking: boolean;
9+
}
10+
11+
function getEmptyMessage(logsStatus: LogsStatus): string {
12+
switch (logsStatus) {
13+
case "not_available":
14+
return "Logs not available in current task state";
15+
case "error":
16+
return "Failed to load logs";
17+
default:
18+
return "No messages yet";
19+
}
20+
}
21+
22+
export function AgentChatHistory({
23+
logs,
24+
logsStatus,
25+
isThinking,
26+
}: AgentChatHistoryProps) {
27+
const containerRef = useRef<HTMLDivElement>(null);
28+
const isAtBottomRef = useRef(true);
29+
const isInitialMountRef = useRef(true);
30+
31+
const checkIfAtBottom = useCallback(() => {
32+
const container = containerRef.current;
33+
if (!container) return true;
34+
const distanceFromBottom =
35+
container.scrollHeight - container.scrollTop - container.clientHeight;
36+
return distanceFromBottom <= 50;
37+
}, []);
38+
39+
const handleScroll = useCallback(() => {
40+
isAtBottomRef.current = checkIfAtBottom();
41+
}, [checkIfAtBottom]);
42+
43+
useEffect(() => {
44+
if (isInitialMountRef.current && containerRef.current) {
45+
containerRef.current.scrollTop = containerRef.current.scrollHeight;
46+
isInitialMountRef.current = false;
47+
}
48+
}, []);
49+
50+
useEffect(() => {
51+
if (containerRef.current && isAtBottomRef.current) {
52+
containerRef.current.scrollTop = containerRef.current.scrollHeight;
53+
}
54+
}, [logs]);
55+
56+
const emptyMessage = getEmptyMessage(logsStatus);
57+
58+
return (
59+
<div className="agent-chat-history">
60+
<div className="chat-history-header">Agent chat history</div>
61+
<div
62+
className="chat-history-content"
63+
ref={containerRef}
64+
onScroll={handleScroll}
65+
>
66+
{logs.length === 0 ? (
67+
<div
68+
className={`chat-history-empty ${logsStatus === "error" ? "chat-history-error" : ""}`}
69+
>
70+
{emptyMessage}
71+
</div>
72+
) : (
73+
logs.map((log) => (
74+
<div key={log.id} className={`log-entry log-entry-${log.type}`}>
75+
{log.content}
76+
</div>
77+
))
78+
)}
79+
{isThinking && (
80+
<div className="log-entry log-entry-thinking">
81+
<span className="log-content">*Thinking...</span>
82+
</div>
83+
)}
84+
</div>
85+
</div>
86+
);
87+
}

‎packages/tasks/src/components/ErrorBanner.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { VscodeIcon } from "@vscode-elements/react-elements";
2+
import { useCallback } from "react";
3+
4+
import { useTasksApi } from "../hooks/useTasksApi";
5+
6+
import type { Task } from "@repo/shared";
7+
8+
interface ErrorBannerProps {
9+
task: Task;
10+
}
11+
12+
export function ErrorBanner({ task }: ErrorBannerProps) {
13+
const api = useTasksApi();
14+
const message = task.current_state?.message || "Build failed";
15+
16+
const handleViewLogs = useCallback(() => {
17+
void api.viewLogs(task.id);
18+
}, [api, task.id]);
19+
20+
return (
21+
<div className="error-banner">
22+
<VscodeIcon name="warning" />
23+
<span className="error-banner-message">{message}.</span>
24+
<button type="button" className="text-link" onClick={handleViewLogs}>
25+
View logs <VscodeIcon name="link-external" />
26+
</button>
27+
</div>
28+
);
29+
}

‎packages/tasks/src/components/TaskDetailHeader.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { getTaskLabel, type Task } from "@repo/shared";
2+
import { VscodeIcon } from "@vscode-elements/react-elements";
3+
4+
import { ActionMenu, type ActionMenuItem } from "./ActionMenu";
5+
import { StatusIndicator } from "./StatusIndicator";
6+
7+
interface TaskDetailHeaderProps {
8+
task: Task;
9+
menuItems: ActionMenuItem[];
10+
onBack: () => void;
11+
loadingAction?: string | null;
12+
}
13+
14+
export function TaskDetailHeader({
15+
task,
16+
menuItems,
17+
onBack,
18+
loadingAction,
19+
}: TaskDetailHeaderProps) {
20+
const displayName = getTaskLabel(task);
21+
22+
return (
23+
<div className="task-detail-header">
24+
<VscodeIcon
25+
actionIcon
26+
name="arrow-left"
27+
label="Back to task list"
28+
onClick={onBack}
29+
/>
30+
<StatusIndicator task={task} />
31+
<span className="task-detail-title" title={displayName}>
32+
{displayName}
33+
{loadingAction && (
34+
<span className="task-action-label">{loadingAction}</span>
35+
)}
36+
</span>
37+
<ActionMenu items={menuItems} />
38+
</div>
39+
);
40+
}

‎packages/tasks/src/components/TaskDetailView.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { getTaskActions, type TaskDetails } from "@repo/shared";
2+
3+
import { getActionLabel } from "../utils/taskAction";
4+
5+
import { AgentChatHistory } from "./AgentChatHistory";
6+
import { ErrorBanner } from "./ErrorBanner";
7+
import { TaskDetailHeader } from "./TaskDetailHeader";
8+
import { TaskInput } from "./TaskInput";
9+
import { useTaskMenuItems } from "./useTaskMenuItems";
10+
11+
interface TaskDetailViewProps {
12+
details: TaskDetails;
13+
onBack: () => void;
14+
}
15+
16+
export function TaskDetailView({ details, onBack }: TaskDetailViewProps) {
17+
const { task, logs, logsStatus } = details;
18+
const { canPause } = getTaskActions(task);
19+
20+
const isWorking =
21+
task.status === "active" &&
22+
task.current_state?.state === "working" &&
23+
task.workspace_agent_lifecycle === "ready";
24+
25+
const { menuItems, action } = useTaskMenuItems({ task });
26+
27+
return (
28+
<div className="task-detail-view">
29+
<TaskDetailHeader
30+
task={task}
31+
menuItems={menuItems}
32+
onBack={onBack}
33+
loadingAction={getActionLabel(action)}
34+
/>
35+
{task.status === "error" && <ErrorBanner task={task} />}
36+
<AgentChatHistory
37+
logs={logs}
38+
logsStatus={logsStatus}
39+
isThinking={isWorking}
40+
/>
41+
<TaskInput taskId={task.id} task={task} canPause={canPause} />
42+
</div>
43+
);
44+
}

‎packages/tasks/src/components/TaskInput.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { getTaskLabel, type Task } from "@repo/shared";
2+
import {
3+
VscodeIcon,
4+
VscodeProgressRing,
5+
} from "@vscode-elements/react-elements";
6+
import { useState } from "react";
7+
8+
import { useTasksApi } from "../hooks/useTasksApi";
9+
10+
interface TaskInputProps {
11+
taskId: string;
12+
task: Task;
13+
canPause: boolean;
14+
}
15+
16+
function getPlaceholder(task: Task): string {
17+
if (task.status === "error" || task.current_state?.state === "failed") {
18+
return task.current_state?.message || "Error occurred...";
19+
}
20+
if (task.status === "paused") {
21+
return "Task paused";
22+
}
23+
if (task.status === "pending" || task.status === "initializing") {
24+
return "Initializing...";
25+
}
26+
if (task.current_state?.state === "working") {
27+
return "Agent is working...";
28+
}
29+
if (task.current_state?.state === "complete") {
30+
return "Task completed";
31+
}
32+
return "Type a message to the agent...";
33+
}
34+
35+
function isInputEnabled(task: Task): boolean {
36+
const state = task.current_state?.state;
37+
return state === "idle" || state === "complete" || task.status === "paused";
38+
}
39+
40+
export function TaskInput({ taskId, task, canPause }: TaskInputProps) {
41+
const api = useTasksApi();
42+
const [message, setMessage] = useState("");
43+
const [isPausing, setIsPausing] = useState(false);
44+
const [isSending, setIsSending] = useState(false);
45+
46+
const inputEnabled = isInputEnabled(task);
47+
const showPauseButton = task.current_state?.state === "working" && canPause;
48+
const placeholder = getPlaceholder(task);
49+
50+
const handleSend = () => {
51+
if (!message.trim() || !inputEnabled || isSending) return;
52+
setIsSending(true);
53+
api.sendTaskMessage(taskId, message.trim());
54+
setMessage("");
55+
setTimeout(() => setIsSending(false), 500);
56+
};
57+
58+
const handlePause = async () => {
59+
if (isPausing) return;
60+
setIsPausing(true);
61+
try {
62+
await api.pauseTask({ taskId: task.id, taskName: getTaskLabel(task) });
63+
} catch {
64+
// Extension shows error notification
65+
} finally {
66+
setIsPausing(false);
67+
}
68+
};
69+
70+
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
71+
if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && inputEnabled) {
72+
e.preventDefault();
73+
void handleSend();
74+
}
75+
};
76+
77+
return (
78+
<div className="task-input-container">
79+
<textarea
80+
className="task-input"
81+
placeholder={placeholder}
82+
value={message}
83+
onChange={(e) => setMessage(e.target.value)}
84+
onKeyDown={handleKeyDown}
85+
disabled={!inputEnabled}
86+
/>
87+
<div className="task-input-button">
88+
{showPauseButton ? (
89+
isPausing ? (
90+
<VscodeProgressRing className="task-input-spinner" />
91+
) : (
92+
<VscodeIcon
93+
actionIcon
94+
name="debug-pause"
95+
label="Pause task"
96+
onClick={() => void handlePause()}
97+
/>
98+
)
99+
) : isSending ? (
100+
<VscodeProgressRing className="task-input-spinner" />
101+
) : (
102+
<VscodeIcon
103+
actionIcon
104+
name="send"
105+
label="Send message"
106+
onClick={
107+
inputEnabled && message.trim()
108+
? () => void handleSend()
109+
: undefined
110+
}
111+
className={!inputEnabled || !message.trim() ? "disabled" : ""}
112+
/>
113+
)}
114+
</div>
115+
</div>
116+
);
117+
}

0 commit comments

Comments
 (0)