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.

Author: EhabY

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,8 +51,11 @@ export default function App() {
 
 	const { onNotification } = useIpc();
 	useEffect(() => {
-		return onNotification(TasksApi.showCreateForm, () => setCreateOpen(true));
-	}, [onNotification, setCreateOpen]);
+		return onNotification(TasksApi.showCreateForm, () => {
+			deselectTask();
+			setCreateOpen(true);
+		});
+	}, [onNotification, setCreateOpen, deselectTask]);
 
 	useEffect(() => {
 		persistUiState({
@@ -96,12 +104,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/AgentChatHistory.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useCallback } 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 isInitialMountRef = useRef(true);
+
+	const checkIfAtBottom = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return true;
+		const distanceFromBottom =
+			container.scrollHeight - container.scrollTop - container.clientHeight;
+		return distanceFromBottom <= 50;
+	}, []);
+
+	const handleScroll = useCallback(() => {
+		isAtBottomRef.current = checkIfAtBottom();
+	}, [checkIfAtBottom]);
+
+	useEffect(() => {
+		if (isInitialMountRef.current && containerRef.current) {
+			containerRef.current.scrollTop = containerRef.current.scrollHeight;
+			isInitialMountRef.current = false;
+		}
+	}, []);
+
+	useEffect(() => {
+		if (containerRef.current && isAtBottomRef.current) {
+			containerRef.current.scrollTop = containerRef.current.scrollHeight;
+		}
+	}, [logs]);
+
+	const emptyMessage = getEmptyMessage(logsStatus);
+
+	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" : ""}`}
+					>
+						{emptyMessage}
+					</div>
+				) : (
+					logs.map((log) => (
+						<div key={log.id} className={`log-entry log-entry-${log.type}`}>
+							{log.content}
+						</div>
+					))
+				)}
+				{isThinking && (
+					<div className="log-entry log-entry-thinking">
+						<span className="log-content">*Thinking...</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

packages/tasks/src/components/ErrorBanner.tsx

@@ -0,0 +1,29 @@
+import { VscodeIcon } from "@vscode-elements/react-elements";
+import { useCallback } from "react";
+
+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 || "Build failed";
+
+	const handleViewLogs = useCallback(() => {
+		void api.viewLogs(task.id);
+	}, [api, task.id]);
+
+	return (
+		<div className="error-banner">
+			<VscodeIcon name="warning" />
+			<span className="error-banner-message">{message}.</span>
+			<button type="button" className="text-link" onClick={handleViewLogs}>
+				View logs <VscodeIcon name="link-external" />
+			</button>
+		</div>
+	);
+}

packages/tasks/src/components/TaskDetailHeader.tsx

@@ -0,0 +1,42 @@
+import { VscodeIcon } from "@vscode-elements/react-elements";
+
+import { ActionMenu, type ActionMenuItem } from "./ActionMenu";
+import { StatusIndicator } from "./StatusIndicator";
+import { getDisplayName } from "./utils";
+
+import type { Task } from "@repo/shared";
+
+interface TaskDetailHeaderProps {
+	task: Task;
+	menuItems: ActionMenuItem[];
+	onBack: () => void;
+	loadingAction?: string | null;
+}
+
+export function TaskDetailHeader({
+	task,
+	menuItems,
+	onBack,
+	loadingAction,
+}: TaskDetailHeaderProps) {
+	const displayName = getDisplayName(task);
+
+	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,43 @@
+import { getTaskActions, type TaskDetails } from "@repo/shared";
+
+import { AgentChatHistory } from "./AgentChatHistory";
+import { ErrorBanner } from "./ErrorBanner";
+import { TaskDetailHeader } from "./TaskDetailHeader";
+import { TaskInput } from "./TaskInput";
+import { useTaskMenuItems } from "./useTaskMenuItems";
+import { getActionLabel } from "./utils";
+
+interface TaskDetailViewProps {
+	details: TaskDetails;
+	onBack: () => void;
+}
+
+export function TaskDetailView({ details, onBack }: TaskDetailViewProps) {
+	const { task, logs, logsStatus } = details;
+	const { canPause } = getTaskActions(task);
+
+	const isWorking =
+		task.status === "active" &&
+		task.current_state?.state === "working" &&
+		task.workspace_agent_lifecycle === "ready";
+
+	const { menuItems, action } = useTaskMenuItems({ task });
+
+	return (
+		<div className="task-detail-view">
+			<TaskDetailHeader
+				task={task}
+				menuItems={menuItems}
+				onBack={onBack}
+				loadingAction={getActionLabel(action)}
+			/>
+			{task.status === "error" && <ErrorBanner task={task} />}
+			<AgentChatHistory
+				logs={logs}
+				logsStatus={logsStatus}
+				isThinking={isWorking}
+			/>
+			<TaskInput taskId={task.id} task={task} canPause={canPause} />
+		</div>
+	);
+}

packages/tasks/src/components/TaskInput.tsx

@@ -0,0 +1,118 @@
+import {
+	VscodeIcon,
+	VscodeProgressRing,
+} from "@vscode-elements/react-elements";
+import { useState } from "react";
+
+import { useTasksApi } from "../hooks/useTasksApi";
+
+import type { Task } from "@repo/shared";
+
+interface TaskInputProps {
+	taskId: string;
+	task: Task;
+	canPause: boolean;
+}
+
+function getPlaceholder(task: Task): string {
+	if (task.status === "error" || task.current_state?.state === "failed") {
+		return task.current_state?.message || "Error occurred...";
+	}
+	if (task.status === "paused") {
+		return "Task paused";
+	}
+	if (task.status === "pending" || task.status === "initializing") {
+		return "Initializing...";
+	}
+	if (task.current_state?.state === "working") {
+		return "Agent is working...";
+	}
+	if (task.current_state?.state === "complete") {
+		return "Task completed";
+	}
+	return "Type a message to the agent...";
+}
+
+function isInputEnabled(task: Task): boolean {
+	const state = task.current_state?.state;
+	return state === "idle" || state === "complete" || task.status === "paused";
+}
+
+export function TaskInput({ taskId, task, canPause }: TaskInputProps) {
+	const api = useTasksApi();
+	const [message, setMessage] = useState("");
+	const [isPausing, setIsPausing] = useState(false);
+	const [isSending, setIsSending] = useState(false);
+
+	const inputEnabled = isInputEnabled(task);
+	const showPauseButton = task.current_state?.state === "working" && canPause;
+	const placeholder = getPlaceholder(task);
+
+	const handleSend = () => {
+		if (!message.trim() || !inputEnabled || isSending) return;
+		setIsSending(true);
+		api.sendTaskMessage(taskId, message.trim());
+		setMessage("");
+		setTimeout(() => setIsSending(false), 500);
+	};
+
+	const handlePause = async () => {
+		if (isPausing) return;
+		setIsPausing(true);
+		try {
+			await api.pauseTask(taskId);
+		} catch {
+			// Extension shows error notification
+		} finally {
+			setIsPausing(false);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && inputEnabled) {
+			e.preventDefault();
+			void handleSend();
+		}
+	};
+
+	return (
+		<div className="task-input-container">
+			<textarea
+				className="task-input"
+				placeholder={placeholder}
+				value={message}
+				onChange={(e) => setMessage(e.target.value)}
+				onKeyDown={handleKeyDown}
+				disabled={!inputEnabled}
+			/>
+			<div className="task-input-button">
+				{showPauseButton ? (
+					isPausing ? (
+						<VscodeProgressRing className="task-input-spinner" />
+					) : (
+						<VscodeIcon
+							actionIcon
+							name="debug-pause"
+							label="Pause task"
+							onClick={() => void handlePause()}
+						/>
+					)
+				) : isSending ? (
+					<VscodeProgressRing className="task-input-spinner" />
+				) : (
+					<VscodeIcon
+						actionIcon
+						name="send"
+						label="Send message"
+						onClick={
+							inputEnabled && message.trim()
+								? () => void handleSend()
+								: undefined
+						}
+						className={!inputEnabled || !message.trim() ? "disabled" : ""}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}