Stream workspace startup logs in TaskDetailView

When a task's workspace is building or its agent is initializing,
stream build/agent logs via WebSocket and display them in the detail
view instead of "Logs not available."

- Add LazyStream class and generalize stream functions to accept
  onOutput callbacks; refactor WorkspaceStateMachine to use it
- Add streamWorkspaceLogs to TasksPanel with ANSI stripping and
  phase-aware stream selection (build vs agent logs)
- Extract LogViewer/LogViewerPlaceholder shared components from
  AgentChatHistory; add WorkspaceLogs with dynamic headers
- Add useWorkspaceLogs hook for log accumulation and socket cleanup
- Add isBuildingWorkspace, isAgentStarting, isWorkspaceStarting helpers
- Add workspace test factory with full type coverage

Author: EhabY

package.json

@@ -488,6 +488,7 @@
 		"proper-lockfile": "^4.1.2",
 		"proxy-agent": "^6.5.0",
 		"semver": "^7.7.3",
+		"strip-ansi": "^7.1.2",
 		"ua-parser-js": "^1.0.41",
 		"ws": "^8.19.0",
 		"zod": "^4.3.6"

packages/shared/src/tasks/api.ts

@@ -54,10 +54,12 @@ const sendTaskMessage = defineRequest<
 
 const viewInCoder = defineCommand<{ taskId: string }>("viewInCoder");
 const viewLogs = defineCommand<{ taskId: string }>("viewLogs");
+const closeWorkspaceLogs = defineCommand("closeWorkspaceLogs");
 
 const taskUpdated = defineNotification<Task>("taskUpdated");
 const tasksUpdated = defineNotification<Task[]>("tasksUpdated");
 const logsAppend = defineNotification<TaskLogEntry[]>("logsAppend");
+const workspaceLogsAppend = defineNotification<string[]>("workspaceLogsAppend");
 const refresh = defineNotification<void>("refresh");
 const showCreateForm = defineNotification<void>("showCreateForm");
 
@@ -77,10 +79,12 @@ export const TasksApi = {
 	// Commands
 	viewInCoder,
 	viewLogs,
+	closeWorkspaceLogs,
 	// Notifications
 	taskUpdated,
 	tasksUpdated,
 	logsAppend,
+	workspaceLogsAppend,
 	refresh,
 	showCreateForm,
 } as const;

packages/shared/src/tasks/utils.ts

@@ -50,3 +50,21 @@ export function isStableTask(task: Task): boolean {
 		(task.current_state !== null && task.current_state.state !== "working")
 	);
 }
+
+/** Whether the task's workspace is building (provisioner running). */
+export function isBuildingWorkspace(task: Task): boolean {
+	const ws = task.workspace_status;
+	return ws === "pending" || ws === "starting";
+}
+
+/** Whether the workspace is running but the agent hasn't reached "ready" yet. */
+export function isAgentStarting(task: Task): boolean {
+	if (task.workspace_status !== "running") return false;
+	const lc = task.workspace_agent_lifecycle;
+	return lc === "created" || lc === "starting";
+}
+
+/** Whether the task's workspace is still starting up (building or agent initializing). */
+export function isWorkspaceStarting(task: Task): boolean {
+	return isBuildingWorkspace(task) || isAgentStarting(task);
+}

packages/tasks/src/components/AgentChatHistory.tsx

@@ -1,6 +1,4 @@
-import { VscodeScrollable } from "@vscode-elements/react-elements";
-
-import { useFollowScroll } from "../hooks/useFollowScroll";
+import { LogViewer, LogViewerPlaceholder } from "./LogViewer";
 
 import type { LogsStatus, TaskLogEntry } from "@repo/shared";
 
@@ -34,37 +32,29 @@ export function AgentChatHistory({
 	logsStatus,
 	isThinking,
 }: AgentChatHistoryProps) {
-	const bottomRef = useFollowScroll();
+	const isEmpty = logs.length === 0 && (logsStatus !== "ok" || !isThinking);
 
 	return (
-		<div className="agent-chat-history">
-			<div className="chat-history-header">Agent chat history</div>
-			<VscodeScrollable className="chat-history-content">
-				{logs.length === 0 ? (
-					<div
-						className={
-							logsStatus === "error"
-								? "chat-history-empty chat-history-error"
-								: "chat-history-empty"
-						}
-					>
-						{getEmptyMessage(logsStatus)}
-					</div>
-				) : (
-					logs.map((log, index) => (
+		<LogViewer header="Agent chat history">
+			{isEmpty ? (
+				<LogViewerPlaceholder error={logsStatus === "error"}>
+					{getEmptyMessage(logsStatus)}
+				</LogViewerPlaceholder>
+			) : (
+				<>
+					{logs.map((log, index) => (
 						<LogEntry
 							key={log.id}
 							log={log}
 							isGroupStart={index === 0 || log.type !== logs[index - 1].type}
 						/>
-					))
-				)}
-				{isThinking && (
-					<div className="log-entry log-entry-thinking">Thinking...</div>
-				)}
-				<div ref={bottomRef} />
-			</VscodeScrollable>
-		</div>
+					))}
+					{isThinking && (
+						<div className="log-entry log-entry-thinking">Thinking...</div>
+					)}
+				</>
+			)}
+		</LogViewer>
 	);
 }
 

packages/tasks/src/components/LogViewer.tsx

@@ -0,0 +1,42 @@
+import { VscodeScrollable } from "@vscode-elements/react-elements";
+
+import { useFollowScroll } from "../hooks/useFollowScroll";
+
+import type { ReactNode } from "react";
+
+interface LogViewerProps {
+	header: string;
+	children: ReactNode;
+}
+
+export function LogViewer({ header, children }: LogViewerProps) {
+	const bottomRef = useFollowScroll();
+
+	return (
+		<div className="log-viewer">
+			<div className="log-viewer-header">{header}</div>
+			<VscodeScrollable className="log-viewer-content">
+				{children}
+				<div ref={bottomRef} />
+			</VscodeScrollable>
+		</div>
+	);
+}
+
+export function LogViewerPlaceholder({
+	children,
+	error,
+}: {
+	children: ReactNode;
+	error?: boolean;
+}) {
+	return (
+		<div
+			className={
+				error ? "log-viewer-empty log-viewer-error" : "log-viewer-empty"
+			}
+		>
+			{children}
+		</div>
+	);
+}

packages/tasks/src/components/TaskDetailView.tsx

@@ -1,9 +1,12 @@
+import { isWorkspaceStarting, type TaskDetails } from "@repo/shared";
+
+import { useWorkspaceLogs } from "../hooks/useWorkspaceLogs";
+
 import { AgentChatHistory } from "./AgentChatHistory";
 import { ErrorBanner } from "./ErrorBanner";
 import { TaskDetailHeader } from "./TaskDetailHeader";
 import { TaskMessageInput } from "./TaskMessageInput";
-
-import type { TaskDetails } from "@repo/shared";
+import { WorkspaceLogs } from "./WorkspaceLogs";
 
 interface TaskDetailViewProps {
 	details: TaskDetails;
@@ -13,18 +16,25 @@ interface TaskDetailViewProps {
 export function TaskDetailView({ details, onBack }: TaskDetailViewProps) {
 	const { task, logs, logsStatus } = details;
 
+	const starting = isWorkspaceStarting(task);
+	const workspaceLines = useWorkspaceLogs(starting);
+
 	const isThinking =
 		task.status === "active" && task.current_state?.state === "working";
 
 	return (
 		<div className="task-detail-view">
 			<TaskDetailHeader task={task} onBack={onBack} />
 			{task.status === "error" && <ErrorBanner task={task} />}
-			<AgentChatHistory
-				logs={logs}
-				logsStatus={logsStatus}
-				isThinking={isThinking}
-			/>
+			{starting ? (
+				<WorkspaceLogs task={task} lines={workspaceLines} />
+			) : (
+				<AgentChatHistory
+					logs={logs}
+					logsStatus={logsStatus}
+					isThinking={isThinking}
+				/>
+			)}
 			<TaskMessageInput task={task} />
 		</div>
 	);

packages/tasks/src/components/WorkspaceLogs.tsx

@@ -0,0 +1,29 @@
+import { isBuildingWorkspace, type Task } from "@repo/shared";
+
+import { LogViewer, LogViewerPlaceholder } from "./LogViewer";
+
+export function WorkspaceLogs({
+	task,
+	lines,
+}: {
+	task: Task;
+	lines: string[];
+}) {
+	const header = isBuildingWorkspace(task)
+		? "Building workspace..."
+		: "Running startup scripts...";
+
+	return (
+		<LogViewer header={header}>
+			{lines.length === 0 ? (
+				<LogViewerPlaceholder>Waiting for logs...</LogViewerPlaceholder>
+			) : (
+				lines.map((line, i) => (
+					<div key={i} className="log-entry">
+						{line}
+					</div>
+				))
+			)}
+		</LogViewer>
+	);
+}

packages/tasks/src/hooks/useWorkspaceLogs.ts

@@ -0,0 +1,31 @@
+import { TasksApi } from "@repo/shared";
+import { useIpc } from "@repo/webview-shared/react";
+import { useEffect, useState } from "react";
+
+export function useWorkspaceLogs(active: boolean): string[] {
+	const { command, onNotification } = useIpc();
+	const [lines, setLines] = useState<string[]>([]);
+	const [prevActive, setPrevActive] = useState(active);
+
+	// Reset lines when active flag changes (React "adjusting state during render" pattern)
+	if (active !== prevActive) {
+		setPrevActive(active);
+		setLines([]);
+	}
+
+	useEffect(() => {
+		if (!active) return;
+		const unsubscribe = onNotification(
+			TasksApi.workspaceLogsAppend,
+			(newLines) => {
+				setLines((prev) => [...prev, ...newLines]);
+			},
+		);
+		return () => {
+			unsubscribe();
+			command(TasksApi.closeWorkspaceLogs);
+		};
+	}, [active, command, onNotification]);
+
+	return lines;
+}

packages/tasks/src/index.css

@@ -443,7 +443,7 @@ vscode-icon.disabled {
 
 /* Chat history */
 
-.agent-chat-history {
+.log-viewer {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
@@ -453,28 +453,28 @@ vscode-icon.disabled {
 	border-radius: 4px;
 }
 
-.chat-history-header {
+.log-viewer-header {
 	padding: 6px 8px;
 	font-size: 0.8em;
 	color: var(--vscode-descriptionForeground);
 	border-bottom: 1px solid var(--vscode-input-border);
 }
 
-.chat-history-content {
+.log-viewer-content {
 	flex: 1;
 	min-height: 0;
 	padding: 4px 8px;
 	font-family: var(--vscode-editor-font-family, monospace);
 	font-size: 0.85em;
 }
 
-.chat-history-empty {
+.log-viewer-empty {
 	padding: 16px 0;
 	color: var(--vscode-descriptionForeground);
 	text-align: center;
 }
 
-.chat-history-error {
+.log-viewer-error {
 	color: var(--vscode-errorForeground);
 }