diff --git a/packages/shared/src/tasks/api.ts b/packages/shared/src/tasks/api.ts
index 26b4f611..8368565b 100644
--- a/packages/shared/src/tasks/api.ts
+++ b/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,
diff --git a/packages/tasks/src/App.tsx b/packages/tasks/src/App.tsx
index f0f21690..bebfe413 100644
--- a/packages/tasks/src/App.tsx
+++ b/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>
diff --git a/packages/tasks/src/components/ActionMenu.tsx b/packages/tasks/src/components/ActionMenu.tsx
index 548e0d25..82fa5488 100644
--- a/packages/tasks/src/components/ActionMenu.tsx
+++ b/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") {
diff --git a/packages/tasks/src/components/AgentChatHistory.tsx b/packages/tasks/src/components/AgentChatHistory.tsx
new file mode 100644
index 00000000..2a406291
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/tasks/src/components/CreateTaskSection.tsx b/packages/tasks/src/components/CreateTaskSection.tsx
index 7e9c1f87..1bdaff29 100644
--- a/packages/tasks/src/components/CreateTaskSection.tsx
+++ b/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">
diff --git a/packages/tasks/src/components/ErrorBanner.tsx b/packages/tasks/src/components/ErrorBanner.tsx
new file mode 100644
index 00000000..17b262f3
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/tasks/src/components/PromptField.tsx b/packages/tasks/src/components/PromptField.tsx
new file mode 100644
index 00000000..c124481a
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/tasks/src/components/TaskDetailHeader.tsx b/packages/tasks/src/components/TaskDetailHeader.tsx
new file mode 100644
index 00000000..f1e05075
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/tasks/src/components/TaskDetailView.tsx b/packages/tasks/src/components/TaskDetailView.tsx
new file mode 100644
index 00000000..53f73e44
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/tasks/src/components/TaskInput.tsx b/packages/tasks/src/components/TaskInput.tsx
new file mode 100644
index 00000000..dc38d53f
--- /dev/null
+++ b/packages/tasks/src/components/TaskInput.tsx
@@ -0,0 +1,101 @@
+import { getTaskActions, type Task } from "@repo/shared";
+import { useMutation } from "@tanstack/react-query";
+import {
+	VscodeIcon,
+	VscodeProgressRing,
+} from "@vscode-elements/react-elements";
+import { useState } from "react";
+
+import { useTasksApi } from "../hooks/useTasksApi";
+
+import { PromptField } from "./PromptField";
+
+function getPlaceholder(task: Task): string {
+	if (task.status === "error" || task.current_state?.state === "failed") {
+		return "Send a message to retry or give new instructions...";
+	}
+	if (task.status === "paused") {
+		return "Send a message to resume the task...";
+	}
+	if (task.status === "pending" || task.status === "initializing") {
+		return "Waiting for the agent to start...";
+	}
+	if (task.current_state?.state === "working") {
+		return "Agent is working — you can pause or wait for it to finish...";
+	}
+	if (task.current_state?.state === "complete") {
+		return "Task completed — send a follow-up message to continue...";
+	}
+	return "Send a message to the agent...";
+}
+
+function isInputEnabled(task: Task): boolean {
+	const state = task.current_state?.state;
+	return (
+		state === "idle" ||
+		state === "complete" ||
+		state === "failed" ||
+		task.status === "paused"
+	);
+}
+
+interface TaskInputProps {
+	task: Task;
+}
+
+export function TaskInput({ task }: TaskInputProps) {
+	const api = useTasksApi();
+	const [message, setMessage] = useState("");
+
+	const { canPause } = getTaskActions(task);
+	const inputEnabled = isInputEnabled(task);
+	const showPauseButton = task.current_state?.state === "working" && canPause;
+
+	const { mutate: sendMessage, isPending: isSending } = useMutation({
+		mutationFn: (msg: string) => api.sendTaskMessage(task.id, msg),
+		onSuccess: () => setMessage(""),
+	});
+
+	const { mutate: pauseTask, isPending: isPausing } = useMutation({
+		mutationFn: () => api.pauseTask(task.id),
+	});
+
+	const handleSend = () => {
+		if (!message.trim() || !inputEnabled || isSending) return;
+		sendMessage(message.trim());
+	};
+
+	return (
+		<PromptField
+			placeholder={getPlaceholder(task)}
+			value={message}
+			onChange={setMessage}
+			onSubmit={handleSend}
+			disabled={!inputEnabled}
+			action={
+				showPauseButton ? (
+					isPausing ? (
+						<VscodeProgressRing />
+					) : (
+						<VscodeIcon
+							actionIcon
+							name="debug-pause"
+							label="Pause task"
+							onClick={() => pauseTask()}
+						/>
+					)
+				) : isSending ? (
+					<VscodeProgressRing />
+				) : (
+					<VscodeIcon
+						actionIcon
+						name="send"
+						label="Send message"
+						onClick={inputEnabled && message.trim() ? handleSend : undefined}
+						className={!inputEnabled || !message.trim() ? "disabled" : ""}
+					/>
+				)
+			}
+		/>
+	);
+}
diff --git a/packages/tasks/src/components/TaskItem.tsx b/packages/tasks/src/components/TaskItem.tsx
index 4d13a400..37ab8ac3 100644
--- a/packages/tasks/src/components/TaskItem.tsx
+++ b/packages/tasks/src/components/TaskItem.tsx
@@ -2,16 +2,11 @@ import { VscodeProgressRing } from "@vscode-elements/react-elements";
 
 import { ActionMenu } from "./ActionMenu";
 import { StatusIndicator } from "./StatusIndicator";
-import { useTaskMenuItems, type TaskAction } from "./useTaskMenuItems";
+import { useTaskMenuItems } from "./useTaskMenuItems";
+import { getActionLabel, getDisplayName } from "./utils";
 
 import type { Task } from "@repo/shared";
 
-const actionLabels: Record<NonNullable<TaskAction>, string> = {
-	pausing: "Pausing...",
-	resuming: "Resuming...",
-	deleting: "Deleting...",
-};
-
 interface TaskItemProps {
 	task: Task;
 	onSelect: (taskId: string) => void;
@@ -20,8 +15,9 @@ interface TaskItemProps {
 export function TaskItem({ task, onSelect }: TaskItemProps) {
 	const { menuItems, action } = useTaskMenuItems({ task });
 
-	const displayName = task.display_name || task.name || "Unnamed task";
+	const displayName = getDisplayName(task);
 	const subtitle = task.current_state?.message || "No message available";
+	const actionLabel = getActionLabel(action);
 	const handleSelect = () => onSelect(task.id);
 
 	return (
@@ -49,8 +45,8 @@ export function TaskItem({ task, onSelect }: TaskItemProps) {
 			<div className="task-item-content">
 				<span className="task-title" title={displayName}>
 					{displayName}
-					{action && (
-						<span className="task-action-label">{actionLabels[action]}</span>
+					{actionLabel && (
+						<span className="task-action-label">{actionLabel}</span>
 					)}
 				</span>
 				<span className="task-subtitle" title={subtitle}>
diff --git a/packages/tasks/src/components/index.ts b/packages/tasks/src/components/index.ts
index f35baf79..ba6aed34 100644
--- a/packages/tasks/src/components/index.ts
+++ b/packages/tasks/src/components/index.ts
@@ -6,6 +6,6 @@ export { ErrorState } from "./ErrorState";
 export { NoTemplateState } from "./NoTemplateState";
 export { NotSupportedState } from "./NotSupportedState";
 export { StatusIndicator } from "./StatusIndicator";
+export { TaskDetailView } from "./TaskDetailView";
 export { TaskItem } from "./TaskItem";
 export { TaskList } from "./TaskList";
-export { useTaskMenuItems } from "./useTaskMenuItems";
diff --git a/packages/tasks/src/components/useTaskMenuItems.ts b/packages/tasks/src/components/useTaskMenuItems.ts
index 4b685c3d..a9bc3ed2 100644
--- a/packages/tasks/src/components/useTaskMenuItems.ts
+++ b/packages/tasks/src/components/useTaskMenuItems.ts
@@ -5,8 +5,7 @@ import { useRef, useState } from "react";
 import { useTasksApi } from "../hooks/useTasksApi";
 
 import type { ActionMenuItem } from "./ActionMenu";
-
-export type TaskAction = "pausing" | "resuming" | "deleting" | null;
+import type { TaskAction } from "./utils";
 
 interface UseTaskMenuItemsOptions {
 	task: Task;
@@ -21,7 +20,7 @@ export function useTaskMenuItems({
 	task,
 }: UseTaskMenuItemsOptions): UseTaskMenuItemsResult {
 	const api = useTasksApi();
-	const { canPause, canResume } = getTaskActions(task);
+	const { canPause, pauseDisabled, canResume } = getTaskActions(task);
 	const [action, setAction] = useState<TaskAction>(null);
 	const busyRef = useRef(false);
 
@@ -57,6 +56,7 @@ export function useTaskMenuItems({
 					() => api.pauseTask(task.id),
 					"Failed to pause task",
 				),
+			disabled: pauseDisabled,
 			loading: action === "pausing",
 		});
 	}
diff --git a/packages/tasks/src/components/utils.ts b/packages/tasks/src/components/utils.ts
new file mode 100644
index 00000000..0c4333b0
--- /dev/null
+++ b/packages/tasks/src/components/utils.ts
@@ -0,0 +1,17 @@
+import type { Task } from "@repo/shared";
+
+export type TaskAction = "pausing" | "resuming" | "deleting" | null;
+
+const ACTION_LABELS: Record<NonNullable<TaskAction>, string> = {
+	pausing: "Pausing...",
+	resuming: "Resuming...",
+	deleting: "Deleting...",
+};
+
+export function getActionLabel(action: TaskAction): string | null {
+	return action ? ACTION_LABELS[action] : null;
+}
+
+export function getDisplayName(task: Task): string {
+	return task.display_name || task.name || "Unnamed task";
+}
diff --git a/packages/tasks/src/config.ts b/packages/tasks/src/config.ts
index 368c74a4..a6d37f69 100644
--- a/packages/tasks/src/config.ts
+++ b/packages/tasks/src/config.ts
@@ -1 +1,6 @@
 export const TASK_LIST_POLL_INTERVAL_MS = 10_000;
+
+// 5 seconds when task is actively working
+export const TASK_ACTIVE_INTERVAL_MS = 5_000;
+// 10 seconds when task is idle/complete/paused
+export const TASK_IDLE_INTERVAL_MS = 10_000;
diff --git a/packages/tasks/src/hooks/useSelectedTask.ts b/packages/tasks/src/hooks/useSelectedTask.ts
new file mode 100644
index 00000000..c0483b5d
--- /dev/null
+++ b/packages/tasks/src/hooks/useSelectedTask.ts
@@ -0,0 +1,80 @@
+import {
+	TasksApi,
+	isStableTask,
+	type Task,
+	type TaskDetails,
+} from "@repo/shared";
+import { useIpc } from "@repo/webview-shared/react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { TASK_ACTIVE_INTERVAL_MS, TASK_IDLE_INTERVAL_MS } from "../config";
+
+import { useTasksApi } from "./useTasksApi";
+
+const QUERY_KEY = "task-details";
+
+export function useSelectedTask(tasks: readonly Task[]) {
+	const api = useTasksApi();
+	const queryClient = useQueryClient();
+	const { onNotification } = useIpc();
+	const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+
+	// Auto-deselect when the selected task disappears from the list
+	// (React "adjusting state during render" pattern)
+	if (
+		selectedTaskId &&
+		tasks.length > 0 &&
+		!tasks.some((t) => t.id === selectedTaskId)
+	) {
+		setSelectedTaskId(null);
+	}
+
+	const { data: selectedTask, isLoading: isLoadingDetails } = useQuery({
+		queryKey: [QUERY_KEY, selectedTaskId],
+		queryFn: () => api.getTaskDetails(selectedTaskId!),
+		enabled: !!selectedTaskId,
+		refetchInterval: (query) => {
+			const task = query.state.data?.task;
+			if (!task) return TASK_ACTIVE_INTERVAL_MS;
+			return isStableTask(task)
+				? TASK_IDLE_INTERVAL_MS
+				: TASK_ACTIVE_INTERVAL_MS;
+		},
+	});
+
+	// Append logs from push notifications without waiting for next poll
+	useEffect(() => {
+		return onNotification(TasksApi.logsAppend, (logs) => {
+			if (!selectedTaskId) return;
+			queryClient.setQueryData<TaskDetails>(
+				[QUERY_KEY, selectedTaskId],
+				(prev) =>
+					prev ? { ...prev, logs: [...prev.logs, ...logs] } : undefined,
+			);
+		});
+	}, [onNotification, selectedTaskId, queryClient]);
+
+	// Keep selected task in sync with task-level push updates
+	useEffect(() => {
+		return onNotification(TasksApi.taskUpdated, (updatedTask) => {
+			if (updatedTask.id !== selectedTaskId) return;
+			queryClient.setQueryData<TaskDetails>(
+				[QUERY_KEY, selectedTaskId],
+				(prev) => (prev ? { ...prev, task: updatedTask } : undefined),
+			);
+		});
+	}, [onNotification, selectedTaskId, queryClient]);
+
+	const deselectTask = () => {
+		setSelectedTaskId(null);
+		queryClient.removeQueries({ queryKey: [QUERY_KEY] });
+	};
+
+	return {
+		selectedTask: selectedTask ?? null,
+		isLoadingDetails,
+		selectTask: setSelectedTaskId,
+		deselectTask,
+	};
+}
diff --git a/packages/tasks/src/hooks/useTasksApi.ts b/packages/tasks/src/hooks/useTasksApi.ts
index 24560572..65543e95 100644
--- a/packages/tasks/src/hooks/useTasksApi.ts
+++ b/packages/tasks/src/hooks/useTasksApi.ts
@@ -28,13 +28,13 @@ export function useTasksApi() {
 		deleteTask: (taskId: string) => request(TasksApi.deleteTask, { taskId }),
 		pauseTask: (taskId: string) => request(TasksApi.pauseTask, { taskId }),
 		resumeTask: (taskId: string) => request(TasksApi.resumeTask, { taskId }),
+		sendTaskMessage: (taskId: string, message: string) =>
+			request(TasksApi.sendTaskMessage, { taskId, message }),
 
 		// Commands
 		viewInCoder: (taskId: string) => command(TasksApi.viewInCoder, { taskId }),
 		viewLogs: (taskId: string) => command(TasksApi.viewLogs, { taskId }),
 		downloadLogs: (taskId: string) =>
 			command(TasksApi.downloadLogs, { taskId }),
-		sendTaskMessage: (taskId: string, message: string) =>
-			command(TasksApi.sendTaskMessage, { taskId, message }),
 	};
 }
diff --git a/packages/tasks/src/index.css b/packages/tasks/src/index.css
index 1d0e053e..e7dd3381 100644
--- a/packages/tasks/src/index.css
+++ b/packages/tasks/src/index.css
@@ -219,6 +219,11 @@ vscode-collapsible::part(body) {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
+	background: none;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
 	text-decoration: none;
 }
 
@@ -365,3 +370,108 @@ vscode-icon.disabled {
 	color: var(--vscode-descriptionForeground);
 	font-style: italic;
 }
+
+/* Task detail view */
+
+.task-detail-view {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	height: 100%;
+	padding: 8px 0;
+}
+
+.task-detail-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 12px;
+	background: var(--vscode-sideBarSectionHeader-background);
+	border-bottom: 1px solid
+		var(--vscode-sideBarSectionHeader-border, var(--vscode-panel-border));
+}
+
+.task-detail-header .status-dot {
+	width: 0.7em;
+	height: 0.7em;
+}
+
+.task-detail-title {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-weight: 500;
+	font-size: 1.05em;
+}
+
+.error-banner {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 0 12px;
+	padding: 6px 8px;
+	border-radius: 4px;
+	background: color-mix(
+		in srgb,
+		var(--vscode-errorForeground) 10%,
+		transparent
+	);
+	color: var(--vscode-errorForeground);
+	font-size: 0.85em;
+}
+
+.agent-chat-history {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	margin: 0 12px;
+	border: 1px solid var(--vscode-input-border);
+	border-radius: 4px;
+}
+
+.chat-history-header {
+	padding: 6px 8px;
+	font-size: 0.8em;
+	color: var(--vscode-descriptionForeground);
+	border-bottom: 1px solid var(--vscode-input-border);
+}
+
+.chat-history-content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 4px 8px;
+	font-family: var(--vscode-editor-font-family, monospace);
+	font-size: 0.85em;
+}
+
+.chat-history-empty {
+	padding: 16px 0;
+	color: var(--vscode-descriptionForeground);
+	text-align: center;
+}
+
+.chat-history-error {
+	color: var(--vscode-errorForeground);
+}
+
+.log-entry {
+	padding: 2px 0;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.log-entry-thinking {
+	color: var(--vscode-descriptionForeground);
+	font-style: italic;
+}
+
+.task-detail-view > .prompt-input-container {
+	margin: 0 12px;
+}
+
+.task-detail-view > .prompt-input-container .prompt-input {
+	min-height: 60px;
+}
diff --git a/src/webviews/tasks/tasksPanel.ts b/src/webviews/tasks/tasksPanel.ts
index 51f93482..a5207e52 100644
--- a/src/webviews/tasks/tasksPanel.ts
+++ b/src/webviews/tasks/tasksPanel.ts
@@ -119,6 +119,10 @@ export class TasksPanel
 		[TasksApi.resumeTask.method]: requestHandler(TasksApi.resumeTask, (p) =>
 			this.handleResumeTask(p.taskId),
 		),
+		[TasksApi.sendTaskMessage.method]: requestHandler(
+			TasksApi.sendTaskMessage,
+			(p) => this.handleSendMessage(p.taskId, p.message),
+		),
 	};
 
 	/**
@@ -138,10 +142,6 @@ export class TasksPanel
 		[TasksApi.downloadLogs.method]: commandHandler(TasksApi.downloadLogs, (p) =>
 			this.handleDownloadLogs(p.taskId),
 		),
-		[TasksApi.sendTaskMessage.method]: commandHandler(
-			TasksApi.sendTaskMessage,
-			(p) => this.handleSendMessage(p.taskId, p.message),
-		),
 	};
 
 	constructor(
@@ -361,11 +361,12 @@ export class TasksPanel
 	 * Placeholder handler for sending follow-up messages to a task.
 	 * The Coder API does not yet support this feature.
 	 */
-	private handleSendMessage(taskId: string, message: string): void {
+	private handleSendMessage(taskId: string, message: string): Promise<void> {
 		this.logger.info(`Sending message to task ${taskId}: ${message}`);
 		vscode.window.showInformationMessage(
 			"Follow-up messages are not yet supported by the API",
 		);
+		return Promise.resolve();
 	}
 
 	private async fetchTasksWithStatus(): Promise<{
diff --git a/test/unit/webviews/tasks/tasksPanel.test.ts b/test/unit/webviews/tasks/tasksPanel.test.ts
index 43ec8ecc..2b24074f 100644
--- a/test/unit/webviews/tasks/tasksPanel.test.ts
+++ b/test/unit/webviews/tasks/tasksPanel.test.ts
@@ -3,7 +3,12 @@ import * as vscode from "vscode";
 
 import { TasksPanel } from "@/webviews/tasks/tasksPanel";
 
-import { TasksApi, type ParamsOf, type ResponseOf } from "@repo/shared";
+import {
+	TasksApi,
+	type CommandDef,
+	type RequestDef,
+	defineRequest,
+} from "@repo/shared";
 
 import { logEntry, preset, task, template } from "../../../mocks/tasks";
 import { createAxiosError, createMockLogger } from "../../../mocks/testHelpers";
@@ -44,19 +49,19 @@ function createClient(baseUrl = "https://coder.example.com"): MockClient {
 	};
 }
 
-interface ApiDef {
-	method: string;
-}
-
 interface Harness {
 	panel: TasksPanel;
 	client: MockClient;
-	/** Type-safe request using TasksApi definitions */
-	request: <T extends ApiDef>(
-		def: T,
-		params?: ParamsOf<T>,
-	) => Promise<{ success: boolean; data?: ResponseOf<T>; error?: string }>;
-	command: (method: string, params?: unknown) => Promise<void>;
+	/** Send a request and wait for the response */
+	request: <P, R>(
+		def: RequestDef<P, R>,
+		...args: P extends void ? [] : [params: P]
+	) => Promise<{ success: boolean; data?: R; error?: string }>;
+	/** Send a fire-and-forget command */
+	command: <P>(
+		def: CommandDef<P>,
+		...args: P extends void ? [] : [params: P]
+	) => Promise<void>;
 	messages: () => unknown[];
 }
 
@@ -104,7 +109,11 @@ function createHarness(): Harness {
 		panel,
 		client,
 		messages: () => [...posted],
-		request: async <T extends ApiDef>(def: T, params?: ParamsOf<T>) => {
+		request: async <P, R>(
+			def: RequestDef<P, R>,
+			...args: P extends void ? [] : [params: P]
+		) => {
+			const params = args[0];
 			const requestId = `req-${Date.now()}-${Math.random()}`;
 			handler?.({ requestId, method: def.method, params });
 
@@ -123,10 +132,13 @@ function createHarness(): Harness {
 
 			return posted.find(
 				(m) => (m as { requestId?: string }).requestId === requestId,
-			) as { success: boolean; data?: ResponseOf<T>; error?: string };
+			) as { success: boolean; data?: R; error?: string };
 		},
-		command: async (method: string, params?: unknown) => {
-			handler?.({ method, params });
+		command: async <P>(
+			def: CommandDef<P>,
+			...args: P extends void ? [] : [params: P]
+		) => {
+			handler?.({ method: def.method, params: args[0] });
 			await new Promise((r) => setTimeout(r, 10));
 		},
 	};
@@ -300,7 +312,7 @@ describe("TasksPanel", () => {
 
 			expect(res).toMatchObject({ success: true, data: { id: "new-task" } });
 			expect(h.messages()).toContainEqual(
-				expect.objectContaining({ type: "tasksUpdated" }),
+				expect.objectContaining({ type: TasksApi.tasksUpdated.method }),
 			);
 		});
 	});
@@ -315,7 +327,7 @@ describe("TasksPanel", () => {
 			expect(res.success).toBe(true);
 			expect(h.client.deleteTask).toHaveBeenCalledWith("me", "task-1");
 			expect(h.messages()).toContainEqual(
-				expect.objectContaining({ type: "tasksUpdated" }),
+				expect.objectContaining({ type: TasksApi.tasksUpdated.method }),
 			);
 		});
 	});
@@ -365,20 +377,20 @@ describe("TasksPanel", () => {
 	describe("viewInCoder / viewLogs", () => {
 		interface OpenExternalTestCase {
 			name: string;
-			method: "viewInCoder" | "viewLogs";
+			method: typeof TasksApi.viewInCoder | typeof TasksApi.viewLogs;
 			taskOverrides: Partial<Task>;
 			expectedUrl: string;
 		}
 		it.each<OpenExternalTestCase>([
 			{
 				name: "viewInCoder opens task URL",
-				method: "viewInCoder",
+				method: TasksApi.viewInCoder,
 				taskOverrides: { id: "task-123", owner_name: "alice" },
 				expectedUrl: "https://coder.example.com/tasks/alice/task-123",
 			},
 			{
 				name: "viewLogs opens build URL when workspace exists",
-				method: "viewLogs",
+				method: TasksApi.viewLogs,
 				taskOverrides: {
 					owner_name: "alice",
 					workspace_name: "my-ws",
@@ -388,7 +400,7 @@ describe("TasksPanel", () => {
 			},
 			{
 				name: "viewLogs opens task URL when no workspace",
-				method: "viewLogs",
+				method: TasksApi.viewLogs,
 				taskOverrides: {
 					id: "task-1",
 					owner_name: "alice",
@@ -411,7 +423,7 @@ describe("TasksPanel", () => {
 			const h = createHarness();
 			h.client.getHost.mockReturnValue(undefined);
 
-			await h.command("viewInCoder", { taskId: "task-123" });
+			await h.command(TasksApi.viewInCoder, { taskId: "task-123" });
 
 			expect(vscode.env.openExternal).not.toHaveBeenCalled();
 		});
@@ -424,7 +436,7 @@ describe("TasksPanel", () => {
 			const saveUri = vscode.Uri.file("/downloads/logs.txt");
 			vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(saveUri);
 
-			await h.command("downloadLogs", { taskId: "task-1" });
+			await h.command(TasksApi.downloadLogs, { taskId: "task-1" });
 
 			expect(vscode.workspace.fs.writeFile).toHaveBeenCalledWith(
 				saveUri,
@@ -436,7 +448,7 @@ describe("TasksPanel", () => {
 			const h = createHarness();
 			h.client.getTaskLogs.mockResolvedValue([]);
 
-			await h.command("downloadLogs", { taskId: "task-1" });
+			await h.command(TasksApi.downloadLogs, { taskId: "task-1" });
 
 			expect(vscode.window.showWarningMessage).toHaveBeenCalledWith(
 				"No logs available to download",
@@ -448,7 +460,7 @@ describe("TasksPanel", () => {
 			h.client.getTaskLogs.mockResolvedValue([logEntry()]);
 			vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(undefined);
 
-			await h.command("downloadLogs", { taskId: "task-1" });
+			await h.command(TasksApi.downloadLogs, { taskId: "task-1" });
 
 			expect(vscode.workspace.fs.writeFile).not.toHaveBeenCalled();
 		});
@@ -457,7 +469,7 @@ describe("TasksPanel", () => {
 	describe("sendTaskMessage", () => {
 		it("shows not supported message", async () => {
 			const h = createHarness();
-			await h.command("sendTaskMessage", {
+			await h.request(TasksApi.sendTaskMessage, {
 				taskId: "task-1",
 				message: "hello",
 			});
@@ -472,13 +484,15 @@ describe("TasksPanel", () => {
 		it("showCreateForm sends notification", () => {
 			const h = createHarness();
 			h.panel.showCreateForm();
-			expect(h.messages()).toContainEqual({ type: "showCreateForm" });
+			expect(h.messages()).toContainEqual({
+				type: TasksApi.showCreateForm.method,
+			});
 		});
 
 		it("refresh sends notification", () => {
 			const h = createHarness();
 			h.panel.refresh();
-			expect(h.messages()).toContainEqual({ type: "refresh" });
+			expect(h.messages()).toContainEqual({ type: TasksApi.refresh.method });
 		});
 	});
 
@@ -494,7 +508,7 @@ describe("TasksPanel", () => {
 
 		it("handles unknown methods", async () => {
 			const h = createHarness();
-			const res = await h.request({ method: "unknownMethod" });
+			const res = await h.request(defineRequest("unknownMethod"));
 
 			expect(res.success).toBe(false);
 			expect(res.error).toContain("Unknown method");