Add snapshot date information when viewing logs

EhabY · EhabY · commit 9182331bcc3a · 2026-03-03T14:42:08.000+03:00
diff --git a/package.json b/package.json
@@ -474,7 +474,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",
diff --git a/packages/shared/src/tasks/types.ts b/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" };
 
diff --git a/packages/shared/src/tasks/utils.ts b/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 logs";
+	}
+	if (count === 1) {
+		return "Last message of AI chat logs";
+	}
+	return `Last ${count} messages of AI chat logs`;
+}
diff --git a/packages/tasks/package.json b/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:"
 	},
diff --git a/packages/tasks/src/components/AgentChatHistory.tsx b/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;
@@ -26,14 +33,39 @@ function LogEntry({
 	);
 }
 
+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="Chat History">
+		<LogViewer header={chatHistoryHeader(taskLogs)}>
 			{logs.length === 0 ? (
 				<LogViewerPlaceholder error={taskLogs.status === "error"}>
 					{getEmptyMessage(taskLogs.status)}
diff --git a/packages/tasks/src/components/LogViewer.tsx b/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;
 }
 
diff --git a/packages/tasks/src/index.css b/packages/tasks/src/index.css
@@ -478,12 +478,46 @@ vscode-icon.disabled {
 }
 
 .log-viewer-header {
+	position: relative;
 	padding: 6px 8px;
-	font-size: 0.8em;
+	font-size: 0.9em;
 	color: var(--vscode-descriptionForeground);
 	border-bottom: 1px solid var(--vscode-input-border);
 }
 
+.snapshot-info {
+	margin-left: 3px;
+}
+
+.snapshot-info .codicon-info {
+	font-size: 1em;
+	color: var(--vscode-descriptionForeground);
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.snapshot-info-tooltip {
+	display: none;
+	position: absolute;
+	bottom: calc(100% + 4px);
+	left: 8px;
+	right: 8px;
+	width: fit-content;
+	padding: 6px 10px;
+	white-space: nowrap;
+	font-size: 1em;
+	color: var(--vscode-editorHoverWidget-foreground);
+	background: var(--vscode-editorHoverWidget-background);
+	border: 1px solid var(--vscode-editorHoverWidget-border);
+	border-radius: 3px;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.snapshot-info:hover .snapshot-info-tooltip {
+	display: block;
+}
+
 .log-viewer-content {
 	flex: 1;
 	min-height: 0;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -11,6 +11,7 @@ catalog:
   "@vscode/codicons": ^0.0.44
   babel-plugin-react-compiler: ^1.0.0
   coder: github:coder/coder#main
+  date-fns: ^4.1.0
   react: ^19.2.4
   react-dom: ^19.2.4
   typescript: ^5.9.3
diff --git a/src/webviews/tasks/tasksPanelProvider.ts b/src/webviews/tasks/tasksPanelProvider.ts
@@ -281,9 +281,7 @@ export class TasksPanelProvider
 		}
 
 		await this.refreshAndNotifyTasks();
-		vscode.window.showInformationMessage(
-			`Task "${taskName}" deleted`,
-		);
+		vscode.window.showInformationMessage(`Task "${taskName}" deleted`);
 	}
 
 	private handlePauseTask(taskId: string): Promise<void> {
@@ -354,10 +352,9 @@ export class TasksPanelProvider
 				isAxiosError(err) &&
 				(err.response?.status === 409 || err.response?.status === 400)
 			) {
-				throw new Error(
-					`Agent is not ready for messages (${errToStr(err)})`,
-					{ cause: err },
-				);
+				throw new Error(`Agent is not ready for messages (${errToStr(err)})`, {
+					cause: err,
+				});
 			}
 			throw err;
 		}
@@ -569,7 +566,12 @@ export class TasksPanelProvider
 	private async fetchTaskLogs(taskId: string): Promise<TaskLogs> {
 		try {
 			const response = await this.client.getTaskLogs("me", taskId);
-			return { status: "ok", logs: response.logs };
+			return {
+				status: "ok",
+				logs: response.logs,
+				snapshot: response.snapshot,
+				snapshotAt: response.snapshot_at,
+			};
 		} catch (err) {
 			if (isAxiosError(err) && err.response?.status === 409) {
 				return { status: "not_available" };
diff --git a/test/unit/webviews/tasks/tasksPanelProvider.test.ts b/test/unit/webviews/tasks/tasksPanelProvider.test.ts
@@ -312,6 +312,31 @@ describe("TasksPanelProvider", () => {
 			});
 		});
 
+		it("passes snapshot and snapshotAt from API response", async () => {
+			const h = createHarness();
+			h.client.getTask.mockResolvedValue(task());
+			h.client.getTaskLogs.mockResolvedValue({
+				logs: [logEntry({ content: "Paused message" })],
+				snapshot: true,
+				snapshot_at: "2024-06-15T10:30:00Z",
+			});
+
+			const res = await h.request(TasksApi.getTaskDetails, {
+				taskId: "task-1",
+			});
+
+			expect(res).toMatchObject({
+				success: true,
+				data: {
+					logs: {
+						status: "ok",
+						snapshot: true,
+						snapshotAt: "2024-06-15T10:30:00Z",
+					},
+				},
+			});
+		});
+
 		it("returns logsStatus not_available on 409", async () => {
 			const h = createHarness();
 			h.client.getTask.mockResolvedValue(task());
diff --git a/test/webview/shared/tasks/utils.test.ts b/test/webview/shared/tasks/utils.test.ts
@@ -6,6 +6,7 @@ import {
 	isBuildingWorkspace,
 	isStableTask,
 	isTaskWorking,
+	logPreviewLabel,
 	type Task,
 	type TaskPermissions,
 } from "@repo/shared";
@@ -237,3 +238,14 @@ describe("isAgentStarting", () => {
 		).toBe(expected);
 	});
 });
+
+describe("logPreviewLabel", () => {
+	it.each([
+		{ count: 0, expected: "AI chat logs" },
+		{ count: 1, expected: "Last message of AI chat logs" },
+		{ count: 5, expected: "Last 5 messages of AI chat logs" },
+		{ count: 100, expected: "Last 100 messages of AI chat logs" },
+	])("count=$count → $expected", ({ count, expected }) => {
+		expect(logPreviewLabel(count)).toBe(expected);
+	});
+});
diff --git a/test/webview/tasks/AgentChatHistory.test.tsx b/test/webview/tasks/AgentChatHistory.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { useFollowScroll } from "../hooks/useFollowScroll";`
`5`	`5`	`import type { ReactNode } from "react";`
`6`	`6`
`7`	`7`	`interface LogViewerProps {`
`8`		`- header: string;`
	`8`	`+ header: ReactNode;`
`9`	`9`	`children: ReactNode;`
`10`	`10`	`}`
`11`	`11`