Add task detail view with navigation and log streaming

packages/shared/src/tasks/api.ts

@@ -46,10 +46,10 @@ const resumeTask = defineRequest<{ taskId: string }, void>("resumeTask");
 const viewInCoder = defineCommand<{ taskId: string }>("viewInCoder");
 const viewLogs = defineCommand<{ taskId: string }>("viewLogs");
 const downloadLogs = defineCommand<{ taskId: string }>("downloadLogs");
-const sendTaskMessage = defineCommand<{
-	taskId: string;
-	message: string;
-}>("sendTaskMessage");
+const sendTaskMessage = defineRequest<
+	{ taskId: string; message: string },
+	void
+>("sendTaskMessage");
 
 const taskUpdated = defineNotification<Task>("taskUpdated");
 const tasksUpdated = defineNotification<Task[]>("tasksUpdated");
@@ -68,11 +68,11 @@ export const TasksApi = {
 	deleteTask,
 	pauseTask,
 	resumeTask,
+	sendTaskMessage,
 	// Commands
 	viewInCoder,
 	viewLogs,
 	downloadLogs,
-	sendTaskMessage,
 	// Notifications
 	taskUpdated,
 	tasksUpdated,

packages/tasks/src/App.tsx

@@ -12,10 +12,12 @@ import {
 	ErrorState,
 	NoTemplateState,
 	NotSupportedState,
+	TaskDetailView,
 	TaskList,
 } from "./components";
 import { useCollapsibleToggle } from "./hooks/useCollapsibleToggle";
 import { useScrollableHeight } from "./hooks/useScrollableHeight";
+import { useSelectedTask } from "./hooks/useSelectedTask";
 import { useTasksData } from "./hooks/useTasksData";
 
 type CollapsibleElement = React.ComponentRef<typeof VscodeCollapsible>;
@@ -34,6 +36,9 @@ export default function App() {
 		persistUiState,
 	} = useTasksData();
 
+	const { selectedTask, isLoadingDetails, selectTask, deselectTask } =
+		useSelectedTask(tasks);
+
 	const [createRef, createOpen, setCreateOpen] =
 		useCollapsibleToggle<CollapsibleElement>(initialCreateExpanded);
 	const [historyRef, historyOpen, _setHistoryOpen] =
@@ -46,7 +51,9 @@ export default function App() {
 
 	const { onNotification } = useIpc();
 	useEffect(() => {
-		return onNotification(TasksApi.showCreateForm, () => setCreateOpen(true));
+		return onNotification(TasksApi.showCreateForm, () => {
+			setCreateOpen(true);
+		});
 	}, [onNotification, setCreateOpen]);
 
 	useEffect(() => {
@@ -96,12 +103,15 @@ export default function App() {
 				open={historyOpen}
 			>
 				<VscodeScrollable ref={historyScrollRef}>
-					<TaskList
-						tasks={tasks}
-						onSelectTask={(_taskId: string) => {
-							// Task detail view will be added in next PR
-						}}
-					/>
+					{selectedTask ? (
+						<TaskDetailView details={selectedTask} onBack={deselectTask} />
+					) : isLoadingDetails ? (
+						<div className="loading-container">
+							<VscodeProgressRing />
+						</div>
+					) : (
+						<TaskList tasks={tasks} onSelectTask={selectTask} />
+					)}
 				</VscodeScrollable>
 			</VscodeCollapsible>
 		</div>

packages/tasks/src/components/ActionMenu.tsx

@@ -4,7 +4,7 @@ import {
 	VscodeIcon,
 	VscodeProgressRing,
 } from "@vscode-elements/react-elements";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect } from "react";
 
 interface ActionMenuAction {
 	separator?: false;
@@ -50,10 +50,10 @@ export function ActionMenu({ items }: ActionMenuProps) {
 
 	const isOpen = position !== null;
 
-	const dropdownRefCallback = useCallback((node: HTMLDivElement | null) => {
+	const dropdownRefCallback = (node: HTMLDivElement | null) => {
 		dropdownRef.current = node;
 		node?.focus();
-	}, []);
+	};
 
 	function onKeyDown(event: React.KeyboardEvent) {
 		if (event.key === "Escape") {

packages/tasks/src/components/AgentChatHistory.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from "react";
+
+import type { LogsStatus, TaskLogEntry } from "@repo/shared";
+
+interface AgentChatHistoryProps {
+	logs: TaskLogEntry[];
+	logsStatus: LogsStatus;
+	isThinking: boolean;
+}
+
+function getEmptyMessage(logsStatus: LogsStatus): string {
+	switch (logsStatus) {
+		case "not_available":
+			return "Logs not available in current task state";
+		case "error":
+			return "Failed to load logs";
+		default:
+			return "No messages yet";
+	}
+}
+
+export function AgentChatHistory({
+	logs,
+	logsStatus,
+	isThinking,
+}: AgentChatHistoryProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const isAtBottomRef = useRef(true);
+
+	const handleScroll = () => {
+		const container = containerRef.current;
+		if (!container) return;
+		const distanceFromBottom =
+			container.scrollHeight - container.scrollTop - container.clientHeight;
+		isAtBottomRef.current = distanceFromBottom <= 50;
+	};
+
+	useEffect(() => {
+		if (containerRef.current && isAtBottomRef.current) {
+			containerRef.current.scrollTop = containerRef.current.scrollHeight;
+		}
+	}, [logs, isThinking]);
+
+	return (
+		<div className="agent-chat-history">
+			<div className="chat-history-header">Agent chat history</div>
+			<div
+				className="chat-history-content"
+				ref={containerRef}
+				onScroll={handleScroll}
+			>
+				{logs.length === 0 ? (
+					<div
+						className={[
+							"chat-history-empty",
+							logsStatus === "error" && "chat-history-error",
+						]
+							.filter(Boolean)
+							.join(" ")}
+					>
+						{getEmptyMessage(logsStatus)}
+					</div>
+				) : (
+					logs.map((log) => (
+						<div key={log.id} className="log-entry">
+							{log.content}
+						</div>
+					))
+				)}
+				{isThinking && (
+					<div className="log-entry log-entry-thinking">Thinking...</div>
+				)}
+			</div>
+		</div>
+	);
+}

packages/tasks/src/components/CreateTaskSection.tsx

@@ -9,6 +9,8 @@ import { useState } from "react";
 
 import { useTasksApi } from "../hooks/useTasksApi";
 
+import { PromptField } from "./PromptField";
+
 import type { CreateTaskParams, TaskTemplate } from "@repo/shared";
 
 interface CreateTaskSectionProps {
@@ -40,26 +42,16 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 		}
 	};
 
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-			e.preventDefault();
-			handleSubmit();
-		}
-	};
-
 	return (
 		<div className="create-task-section">
-			<div className="prompt-input-container">
-				<textarea
-					className="prompt-input"
-					placeholder="Prompt your AI agent to start a task..."
-					value={prompt}
-					onChange={(e) => setPrompt(e.target.value)}
-					onKeyDown={handleKeyDown}
-					disabled={isPending}
-				/>
-				<div className="prompt-send-button">
-					{isPending ? (
+			<PromptField
+				placeholder="Prompt your AI agent to start a task..."
+				value={prompt}
+				onChange={setPrompt}
+				onSubmit={handleSubmit}
+				disabled={isPending}
+				action={
+					isPending ? (
 						<VscodeProgressRing />
 					) : (
 						<VscodeIcon
@@ -69,9 +61,9 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 							onClick={() => void handleSubmit()}
 							className={canSubmit ? "" : "disabled"}
 						/>
-					)}
-				</div>
-			</div>
+					)
+				}
+			/>
 			{error && <div className="create-task-error">{error.message}</div>}
 			<div className="create-task-options">
 				<div className="option-row">

packages/tasks/src/components/ErrorBanner.tsx

@@ -0,0 +1,28 @@
+import { VscodeIcon } from "@vscode-elements/react-elements";
+
+import { useTasksApi } from "../hooks/useTasksApi";
+
+import type { Task } from "@repo/shared";
+
+interface ErrorBannerProps {
+	task: Task;
+}
+
+export function ErrorBanner({ task }: ErrorBannerProps) {
+	const api = useTasksApi();
+	const message = task.current_state?.message || "Task failed";
+
+	return (
+		<div className="error-banner">
+			<VscodeIcon name="warning" />
+			<span>{message}</span>
+			<button
+				type="button"
+				className="text-link"
+				onClick={() => api.viewLogs(task.id)}
+			>
+				View logs <VscodeIcon name="link-external" />
+			</button>
+		</div>
+	);
+}

packages/tasks/src/components/PromptField.tsx

@@ -0,0 +1,38 @@
+interface PromptFieldProps {
+	placeholder: string;
+	value: string;
+	onChange: (value: string) => void;
+	onSubmit: () => void;
+	disabled?: boolean;
+	action: React.ReactNode;
+}
+
+export function PromptField({
+	placeholder,
+	value,
+	onChange,
+	onSubmit,
+	disabled,
+	action,
+}: PromptFieldProps) {
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled) {
+			e.preventDefault();
+			onSubmit();
+		}
+	};
+
+	return (
+		<div className="prompt-input-container">
+			<textarea
+				className="prompt-input"
+				placeholder={placeholder}
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				onKeyDown={handleKeyDown}
+				disabled={disabled}
+			/>
+			<div className="prompt-send-button">{action}</div>
+		</div>
+	);
+}

packages/tasks/src/components/TaskDetailHeader.tsx

@@ -0,0 +1,38 @@
+import { VscodeIcon } from "@vscode-elements/react-elements";
+
+import { ActionMenu } from "./ActionMenu";
+import { StatusIndicator } from "./StatusIndicator";
+import { useTaskMenuItems } from "./useTaskMenuItems";
+import { getActionLabel, getDisplayName } from "./utils";
+
+import type { Task } from "@repo/shared";
+
+interface TaskDetailHeaderProps {
+	task: Task;
+	onBack: () => void;
+}
+
+export function TaskDetailHeader({ task, onBack }: TaskDetailHeaderProps) {
+	const displayName = getDisplayName(task);
+	const { menuItems, action } = useTaskMenuItems({ task });
+	const loadingAction = getActionLabel(action);
+
+	return (
+		<div className="task-detail-header">
+			<VscodeIcon
+				actionIcon
+				name="arrow-left"
+				label="Back to task list"
+				onClick={onBack}
+			/>
+			<StatusIndicator task={task} />
+			<span className="task-detail-title" title={displayName}>
+				{displayName}
+				{loadingAction && (
+					<span className="task-action-label">{loadingAction}</span>
+				)}
+			</span>
+			<ActionMenu items={menuItems} />
+		</div>
+	);
+}

packages/tasks/src/components/TaskDetailView.tsx

@@ -0,0 +1,33 @@
+import { AgentChatHistory } from "./AgentChatHistory";
+import { ErrorBanner } from "./ErrorBanner";
+import { TaskDetailHeader } from "./TaskDetailHeader";
+import { TaskInput } from "./TaskInput";
+
+import type { TaskDetails } from "@repo/shared";
+
+interface TaskDetailViewProps {
+	details: TaskDetails;
+	onBack: () => void;
+}
+
+export function TaskDetailView({ details, onBack }: TaskDetailViewProps) {
+	const { task, logs, logsStatus } = details;
+
+	const isThinking =
+		task.status === "active" &&
+		task.current_state?.state === "working" &&
+		task.workspace_agent_lifecycle === "ready";
+
+	return (
+		<div className="task-detail-view">
+			<TaskDetailHeader task={task} onBack={onBack} />
+			{task.status === "error" && <ErrorBanner task={task} />}
+			<AgentChatHistory
+				logs={logs}
+				logsStatus={logsStatus}
+				isThinking={isThinking}
+			/>
+			<TaskInput task={task} />
+		</div>
+	);
+}