Polish Tasks panel UI/UX and remove experimental feature flag (#815)

- Refine user-facing strings for clarity and consistency
- Add snapshot date display with relative-time tooltip
- Fix collapsible section resize when content children are swapped
- Remove the coder.experimental.tasks feature flag so the Tasks panel is visible to all authenticated users.

Author: EhabY

package.json

@@ -139,14 +139,6 @@
 						"experimental"
 					]
 				},
-				"coder.experimental.tasks": {
-					"markdownDescription": "Enable the experimental [Tasks](https://coder.com/docs/ai-coder/tasks) panel in VS Code. When enabled, a sidebar panel lets you run and manage AI coding agents in Coder workspaces. This feature is under active development and may change. Requires a Coder deployment with Tasks support.",
-					"type": "boolean",
-					"default": false,
-					"tags": [
-						"experimental"
-					]
-				},
 				"coder.sshFlags": {
 					"markdownDescription": "Additional flags to pass to the `coder ssh` command when establishing SSH connections. Enter each flag as a separate array item; values are passed verbatim and in order. See the [CLI ssh reference](https://coder.com/docs/reference/cli/ssh) for available flags.\n\nNote: `--network-info-dir` and `--ssh-host-prefix` are ignored (managed internally). Prefer `#coder.proxyLogDirectory#` over `--log-dir`/`-l` for full functionality.",
 					"type": "array",
@@ -219,7 +211,7 @@
 					"id": "coder.tasksPanel",
 					"name": "Coder Tasks",
 					"icon": "media/tasks-logo.svg",
-					"when": "coder.authenticated && coder.tasksEnabled"
+					"when": "coder.authenticated"
 				}
 			]
 		},
@@ -426,7 +418,7 @@
 				},
 				{
 					"command": "coder.tasks.refresh",
-					"when": "coder.authenticated && coder.tasksEnabled && view == coder.tasksPanel",
+					"when": "coder.authenticated && view == coder.tasksPanel",
 					"group": "navigation@1"
 				}
 			],
@@ -474,7 +466,7 @@
 		"@peculiar/x509": "^1.14.3",
 		"@repo/shared": "workspace:*",
 		"axios": "1.13.6",
-		"date-fns": "^4.1.0",
+		"date-fns": "catalog:",
 		"eventsource": "^4.1.0",
 		"find-process": "^2.1.0",
 		"jsonc-parser": "^3.3.1",

packages/shared/src/tasks/types.ts

@@ -31,7 +31,12 @@ export interface TaskPreset {
 
 /** Result of fetching task logs: either logs or an error/unavailable state. */
 export type TaskLogs =
-	| { status: "ok"; logs: readonly TaskLogEntry[] }
+	| {
+			status: "ok";
+			logs: readonly TaskLogEntry[];
+			snapshot?: boolean;
+			snapshotAt?: string;
+	  }
 	| { status: "not_available" }
 	| { status: "error" };
 

packages/shared/src/tasks/utils.ts

@@ -79,3 +79,14 @@ export function isAgentStarting(task: Task): boolean {
 export function isWorkspaceStarting(task: Task): boolean {
 	return isBuildingWorkspace(task) || isAgentStarting(task);
 }
+
+/** Label for the log preview header, matching the Coder dashboard pattern. */
+export function logPreviewLabel(count: number): string {
+	if (count === 0) {
+		return "AI chat messages";
+	}
+	if (count === 1) {
+		return "Last message of AI chat";
+	}
+	return `Last ${count} messages of AI chat`;
+}

packages/tasks/package.json

@@ -14,6 +14,7 @@
 		"@tanstack/react-query": "catalog:",
 		"@vscode-elements/react-elements": "catalog:",
 		"@vscode/codicons": "catalog:",
+		"date-fns": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:"
 	},

packages/tasks/src/components/AgentChatHistory.tsx

@@ -1,6 +1,13 @@
+import {
+	logPreviewLabel,
+	type TaskLogEntry,
+	type TaskLogs,
+} from "@repo/shared";
+import { formatDistanceToNowStrict } from "date-fns";
+
 import { LogViewer, LogViewerPlaceholder } from "./LogViewer";
 
-import type { TaskLogEntry, TaskLogs } from "@repo/shared";
+import type { ReactNode } from "react";
 
 interface AgentChatHistoryProps {
 	taskLogs: TaskLogs;
@@ -18,22 +25,47 @@ function LogEntry({
 		<div className={`log-entry log-entry-${log.type}`}>
 			{isGroupStart && (
 				<div className="log-entry-role">
-					{log.type === "input" ? "You" : "Agent"}
+					{log.type === "input" ? "[User]" : "[Agent]"}
 				</div>
 			)}
 			{log.content}
 		</div>
 	);
 }
 
+function chatHistoryHeader(taskLogs: TaskLogs): ReactNode {
+	if (taskLogs.status !== "ok" || taskLogs.snapshot !== true) {
+		return "Chat history";
+	}
+	const label = logPreviewLabel(taskLogs.logs.length);
+	if (taskLogs.snapshotAt === undefined) {
+		return label;
+	}
+	const relativeTime = formatDistanceToNowStrict(
+		new Date(taskLogs.snapshotAt),
+		{ addSuffix: true },
+	);
+	return (
+		<>
+			{label}{" "}
+			<span className="snapshot-info">
+				<span className="codicon codicon-info" />
+				<span className="snapshot-info-tooltip">
+					Snapshot taken {relativeTime}
+				</span>
+			</span>
+		</>
+	);
+}
+
 export function AgentChatHistory({
 	taskLogs,
 	isThinking,
 }: AgentChatHistoryProps) {
 	const logs = taskLogs.status === "ok" ? taskLogs.logs : [];
 
 	return (
-		<LogViewer header="Agent chat history">
+		<LogViewer header={chatHistoryHeader(taskLogs)}>
 			{logs.length === 0 ? (
 				<LogViewerPlaceholder error={taskLogs.status === "error"}>
 					{getEmptyMessage(taskLogs.status)}
@@ -57,9 +89,9 @@ export function AgentChatHistory({
 function getEmptyMessage(status: TaskLogs["status"]): string {
 	switch (status) {
 		case "not_available":
-			return "Logs not available in current task state";
+			return "Messages are not available yet";
 		case "error":
-			return "Failed to load logs";
+			return "Failed to load messages";
 		case "ok":
 			return "No messages yet";
 	}

packages/tasks/src/components/CreateTaskSection.tsx

@@ -53,7 +53,7 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 				onSubmit={handleSubmit}
 				loading={isPending}
 				actionIcon="send"
-				actionLabel="Send"
+				actionLabel="Create task"
 				actionEnabled={canSubmit === true}
 			/>
 			{error && <div className="create-task-error">{error.message}</div>}

packages/tasks/src/components/LogViewer.tsx

@@ -5,7 +5,7 @@ import { useFollowScroll } from "../hooks/useFollowScroll";
 import type { ReactNode } from "react";
 
 interface LogViewerProps {
-	header: string;
+	header: ReactNode;
 	children: ReactNode;
 }
 

packages/tasks/src/components/NoTemplateState.tsx

@@ -7,7 +7,7 @@ const DOCS_URL = "https://coder.com/docs/admin/templates";
 export function NoTemplateState() {
 	return (
 		<StatePanel
-			title="No Task template found"
+			title="No task templates found"
 			action={
 				<a href={DOCS_URL} className="text-link">
 					Learn how to create a template <VscodeIcon name="link-external" />

packages/tasks/src/components/TaskMessageInput.tsx

@@ -31,20 +31,20 @@ function getPlaceholder(task: Task): string {
 			return "Waiting for the agent to start...";
 		case "error":
 		case "unknown":
-			return "Task is in an error state and cannot receive messages";
+			return "This task encountered an error";
 		case "active":
 			break;
 	}
 
 	switch (task.current_state?.state) {
 		case "working":
-			return "Agent is working — you can pause or wait for it to finish...";
+			return "Agent is working...";
 		case "complete":
-			return "Task completed — send a follow-up to continue...";
+			return "Send a follow-up to continue...";
 		case "failed":
-			return "Task failed — send a message to retry...";
+			return "Send a message to retry...";
 		default:
-			return "Send a message to the agent...";
+			return "Send a message...";
 	}
 }
 

packages/tasks/src/components/useTaskMenuItems.ts

@@ -87,7 +87,7 @@ export function useTaskMenuItems({
 	menuItems.push({ separator: true });
 
 	menuItems.push({
-		label: "Delete",
+		label: "Delete Task",
 		icon: "trash",
 		onClick: () =>
 			run("deleting", () => api.deleteTask({ taskId: task.id, taskName })),