Improve task detail view scroll, layout, and chat styling

- Use plain div for history section to enable flex layout that pins
  header and input while chat scrolls via inner VscodeScrollable
- Add useFollowScroll hook supporting both VscodeScrollable
  (scrollPos/scrollMax API) and plain scrollable divs
- Extract LogEntry component with user/agent role labels and styled
  message groups
- Restyle error banner with color-mixed --vscode-errorForeground

Author: EhabY

package.json

@@ -219,7 +219,7 @@
 					"id": "coder.tasksPanel",
 					"name": "Coder Tasks",
 					"icon": "media/tasks-logo.svg",
-					"when": "coder.authenticated && coder.tasksEnabled"
+					"when": "coder.tasksEnabled"
 				}
 			]
 		},

packages/tasks/src/App.tsx

@@ -42,7 +42,7 @@ export default function App() {
 	);
 
 	const createScrollRef = useRef<ScrollableElement>(null);
-	const historyScrollRef = useRef<ScrollableElement>(null);
+	const historyScrollRef = useRef<HTMLDivElement>(null);
 	useScrollableHeight(createRef, createScrollRef);
 	useScrollableHeight(historyRef, historyScrollRef);
 
@@ -102,7 +102,7 @@ export default function App() {
 				heading="Task History"
 				open={historyOpen}
 			>
-				<VscodeScrollable ref={historyScrollRef}>
+				<div ref={historyScrollRef} className="collapsible-content">
 					{selectedTask ? (
 						<TaskDetailView details={selectedTask} onBack={deselectTask} />
 					) : isLoadingDetails ? (
@@ -112,7 +112,7 @@ export default function App() {
 					) : (
 						<TaskList tasks={tasks} onSelectTask={selectTask} />
 					)}
-				</VscodeScrollable>
+				</div>
 			</VscodeCollapsible>
 		</div>
 	);

packages/tasks/src/components/AgentChatHistory.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef } from "react";
+import { VscodeScrollable } from "@vscode-elements/react-elements";
+
+import { useFollowScroll } from "../hooks/useFollowScroll";
 
 import type { LogsStatus, TaskLogEntry } from "@repo/shared";
 
@@ -19,58 +21,64 @@ function getEmptyMessage(logsStatus: LogsStatus): string {
 	}
 }
 
+function LogEntry({
+	log,
+	isGroupStart,
+}: {
+	log: TaskLogEntry;
+	isGroupStart: boolean;
+}) {
+	return (
+		<div className={`log-entry log-entry-${log.type}`}>
+			{isGroupStart && (
+				<div className="log-entry-role">
+					{log.type === "input" ? "You" : "Agent"}
+				</div>
+			)}
+			{log.content}
+		</div>
+	);
+}
+
 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]);
+	const bottomRef = useFollowScroll();
 
 	return (
 		<div className="agent-chat-history">
 			<div className="chat-history-header">Agent chat history</div>
-			<div
-				className="chat-history-content"
-				ref={containerRef}
-				onScroll={handleScroll}
-			>
+			<VscodeScrollable className="chat-history-content">
 				{logs.length === 0 ? (
 					<div
-						className={[
-							"chat-history-empty",
-							logsStatus === "error" && "chat-history-error",
-						]
-							.filter(Boolean)
-							.join(" ")}
+						className={
+							logsStatus === "error"
+								? "chat-history-empty chat-history-error"
+								: "chat-history-empty"
+						}
 					>
 						{getEmptyMessage(logsStatus)}
 					</div>
 				) : (
-					logs.map((log) => (
-						<div key={log.id} className="log-entry">
-							{log.content}
-						</div>
+					logs.map((log, index) => (
+						<LogEntry
+							key={log.id}
+							log={log}
+							isGroupStart={isGroupStart(logs, index)}
+						/>
 					))
 				)}
 				{isThinking && (
 					<div className="log-entry log-entry-thinking">Thinking...</div>
 				)}
-			</div>
+				<div ref={bottomRef} />
+			</VscodeScrollable>
 		</div>
 	);
 }
+
+function isGroupStart(logs: TaskLogEntry[], index: number): boolean {
+	return index === 0 || logs[index].type !== logs[index - 1].type;
+}

packages/tasks/src/components/TaskDetailView.tsx

@@ -14,9 +14,7 @@ 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";
+		task.status === "active" && task.current_state?.state === "working";
 
 	return (
 		<div className="task-detail-view">

packages/tasks/src/hooks/useFollowScroll.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, type RefObject } from "react";
+
+const BOTTOM_THRESHOLD = 8;
+
+/**
+ * VscodeScrollable exposes these properties on its DOM element,
+ * but they aren't in the TypeScript definitions.
+ */
+interface ScrollableElement extends HTMLElement {
+	scrollPos: number;
+	scrollMax: number;
+}
+
+function isScrollableElement(el: Element): el is ScrollableElement {
+	return el.tagName === "VSCODE-SCROLLABLE";
+}
+
+/**
+ * Keeps a scroll container following new content at the bottom.
+ * Attach the returned ref to a sentinel div at the end of scrollable content.
+ *
+ * Works with both VscodeScrollable (using its scrollPos/scrollMax API and
+ * vsc-scrollable-scroll event) and plain scrollable divs.
+ */
+export function useFollowScroll(): RefObject<HTMLDivElement | null> {
+	const ref = useRef<HTMLDivElement>(null);
+	const atBottom = useRef(true);
+
+	useEffect(() => {
+		const sentinel = ref.current;
+		const container = sentinel?.parentElement;
+		if (!sentinel || !container) return;
+
+		const isVscodeScrollable = isScrollableElement(container);
+
+		function isNearBottom(): boolean {
+			if (isVscodeScrollable) {
+				const el = container;
+				return el.scrollMax - el.scrollPos <= BOTTOM_THRESHOLD;
+			}
+			return (
+				container!.scrollHeight -
+					container!.scrollTop -
+					container!.clientHeight <=
+				BOTTOM_THRESHOLD
+			);
+		}
+
+		function scrollToBottom() {
+			if (isVscodeScrollable) {
+				const el = container;
+				el.scrollPos = el.scrollMax;
+			} else {
+				container!.scrollTop = container!.scrollHeight;
+			}
+		}
+
+		function onScroll() {
+			atBottom.current = isNearBottom();
+		}
+
+		// VscodeScrollable emits a custom event; plain divs use native scroll.
+		const scrollEvent = isVscodeScrollable ? "vsc-scrollable-scroll" : "scroll";
+		container.addEventListener(scrollEvent, onScroll, { passive: true });
+
+		// Auto-scroll when new children are added and the user was at the bottom.
+		const mo = new MutationObserver(() => {
+			if (atBottom.current) {
+				scrollToBottom();
+			}
+		});
+		mo.observe(container, { childList: true });
+
+		// Initial scroll: wait until the container has layout, then scroll to bottom.
+		const ro = new ResizeObserver(() => {
+			if (container.clientHeight > 0) {
+				scrollToBottom();
+				ro.disconnect();
+			}
+		});
+		ro.observe(container);
+
+		return () => {
+			container.removeEventListener(scrollEvent, onScroll);
+			mo.disconnect();
+			ro.disconnect();
+		};
+	}, []);
+
+	return ref;
+}

packages/tasks/src/hooks/useScrollableHeight.ts

@@ -4,9 +4,9 @@ import { useEffect, type RefObject } from "react";
 const MAX_FLEX_RATIO = 0.5;
 
 /**
- * Sets an explicit pixel height on a scrollable so VscodeScrollable can
- * compute scroll metrics, and writes a --section-flex-grow CSS custom
- * property on the host for content-adaptive sizing.
+ * Sets an explicit pixel height on a wrapper element inside a VscodeCollapsible
+ * so it can scroll, and writes a --section-flex-grow CSS custom property on the
+ * host for content-adaptive sizing.
  */
 export function useScrollableHeight(
 	hostRef: RefObject<HTMLElement | null>,